/* ============================================================
 * Fed by Fed and Ben — site stylesheet
 *
 * Built from the brand palette of the test-subdomain homepage:
 * warm cream + brown wordmark + tan/green CTA buttons +
 * the drips visual signature.
 *
 * Pure vanilla CSS, custom properties for tokens, no build step.
 * ============================================================ */


/* ============================================================
 * Design tokens
 * ============================================================ */

:root {
    /* Colours — anchored from Ben's preferred test-site palette */
    --c-cream:        #f4f0e6;      /* page background */
    --c-cream-soft:   #faf6ec;      /* subtle cards on cream */
    --c-brown-deep:   #3a2c1d;      /* darkest text, wordmark accent */
    --c-brown:        #5a4632;      /* primary text */
    --c-brown-muted:  #8a7560;      /* secondary text */
    --c-tan:          #a0866a;      /* primary CTA */
    --c-tan-hover:    #8a6f53;
    --c-green:        #3a5a3a;      /* secondary CTA */
    --c-green-hover:  #2b4429;
    --c-black:        #000000;      /* drips, sharp accents */
    --c-near-black:   #1f130f;      /* hero / footer background — matches dark hearth in hero image */
    --c-white:        #ffffff;

    /* Type */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

    /* Fluid type scale */
    --t-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
    --t-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
    --t-h3: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
    --t-body: 1.0625rem;
    --t-small: 0.875rem;

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;

    /* Layout */
    --container-max: 1200px;
    --header-h: 70px;

    /* Effects */
    --radius-pill: 999px;
    --radius-md: 0.5rem;
    --shadow-soft: 0 2px 12px rgba(58, 44, 29, 0.08);
    --transition-fast: 150ms ease;
}


/* ============================================================
 * Reset (minimal — only what we actually need)
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor-scroll lands sections a bit below the sticky header so the
       eyebrow + heading don't bump up against it on mobile. */
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--c-brown);
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }

button { font: inherit; cursor: pointer; }

a {
    color: var(--c-brown);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--c-tan); }


/* ============================================================
 * Typography
 * ============================================================ */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-brown-deep);
    margin: 0 0 var(--s-4) 0;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--s-4) 0; }

.lead {
    font-size: 1.25rem;
    color: var(--c-brown-muted);
    max-width: 50ch;
}


/* ============================================================
 * Layout helpers
 * ============================================================ */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
}

.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-7) 0; }


/* ============================================================
 * Site header (sticky, on cream)
 * ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    background: rgba(244, 240, 230, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(58, 44, 29, 0.08);
    z-index: 100;
    height: var(--header-h);
}

/* 3-column grid throughout (was flex). Equal-width side columns mean the
   centre column (nav on desktop, hamburger on mobile) is truly
   viewport-centred regardless of how wide the brand or right cluster
   are. The earlier flex layout left-aligned the nav inside a grow box,
   so when the right cluster grew (e.g. "Hi Ben | Order Here") the nav
   visually slid left of centre. */
.site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-5);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--s-5);
    height: 100%;
}
.site-header__brand { justify-self: start; }
.site-header__nav,
.site-header__menu-toggle { justify-self: center; }
.site-header__right { justify-self: end; }

.site-header__brand {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-brown-deep);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__nav-list {
    display: flex;
    gap: var(--s-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__nav a {
    color: var(--c-brown);
    font-weight: 500;
    font-size: 1rem;
}
.site-header__nav a:hover { color: var(--c-tan); }

.site-header__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--c-tan);
    color: var(--c-white) !important;
    padding: var(--s-2) var(--s-5);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.site-header__cta:hover { background: var(--c-tan-hover); }
.site-header__cta-icon { width: 1rem; height: 1rem; }

/* Header cart button — only used on /order.php and only swaps in for the
   Order Here CTA below the basket-stacks-under-menu breakpoint (860px). */
.site-header__cart {
    display: none;
    position: relative;
    background: var(--c-tan);
    color: var(--c-white);
    border: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.site-header__cart:hover { background: var(--c-tan-hover); }
.site-header__cart-icon { width: 1.25rem; height: 1.25rem; }
.site-header__cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 0.625rem;
    background: var(--c-green);
    color: var(--c-white);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

/* PR-7.10b: on the order page below 1024px (was 860px), swap CTA for
   cart button. The 1024px breakpoint matches ordering.css where the
   basket stacks under the menu / becomes a drawer — so the cart
   button shows exactly when there's a drawer to open. */
@media (max-width: 1024px) {
    body.page-order .site-header__cta  { display: none; }
    body.page-order .site-header__cart { display: inline-flex; }
}

/* Right-side cluster — wraps the account block + Order Here CTA (+ cart
   icon on order page) into a single flex unit with tight spacing.
   Treated as one item by the parent flex/grid, so the layout's centre
   slot (hamburger on mobile) lines up cleanly. */
.site-header__right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

/* Account block — "Sign in" if logged out, "Hi <name>" if logged in.
   PR-7.10b: permanently hidden at all viewports. The green
   .site-header__account-icon below now always shows in its place
   (was mobile-only). Markup kept for an easy revert if Ben wants the
   text dropdown back on desktop. The body-level greeting on
   /order.php (PR-7.10) keeps the member's name visible on that page;
   other pages do not show the name. */
.site-header__account {
    display: none;
    align-items: center;
    gap: var(--s-3);
    font-size: 0.9rem;
}
.site-header__account-link {
    color: var(--c-brown);
    text-decoration: none;
    font-weight: 500;
}

/* Account dropdown — shown when the customer is signed in. Trigger
   button uses the same font/colour as the previous text link; chevron
   sits inline to signal the dropdown affordance. Panel positioned
   absolutely below the trigger, anchored to the right so it stays
   inside the viewport at small widths. */
/* PR-7.24: account menu now hangs off the green icon (was previously
   the "Hi {name}" wordmark trigger). Wrapper is positioned so the
   panel anchors below the icon. Panel shows:
     - on hover at desktop widths (≥1025px) via CSS
     - on click/tap at mobile widths (≤1024px) via JS toggling
       [data-menu-state="open"] on the wrapper
   Click on the icon at desktop still navigates to /account.php?tab=orders
   (the hover does the menu duty). On mobile the JS calls
   preventDefault on icon clicks so the menu opens instead. */
.site-header__account-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.header-account-menu__panel {
    position: absolute;
    /* PR-7.24b: panel touches the wrapper bottom (no positioning
       gap). Visual breathing room comes from the extra top padding
       below — that way the panel's hover-detectable bounds reach
       right up to the icon, so moving the cursor from icon → menu
       items doesn't pass through a no-hover dead zone. */
    top: 100%;
    right: 0;
    min-width: 240px;
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(58, 44, 29, 0.12);
    padding: var(--s-3);
    /* Extra top padding = the old `top: calc(... + var(--s-2))` gap,
       now folded INTO the panel as transparent hover-bridge space. */
    padding-top: calc(var(--s-3) + var(--s-2));
    z-index: 100;
    /* Hidden by default. Shown via :hover (desktop) or
       [data-menu-state="open"] (mobile tap). */
    display: none;
}
.site-header__account-wrapper[data-menu-state="open"] .header-account-menu__panel {
    display: block;
}
@media (min-width: 1025px) {
    .site-header__account-wrapper:hover .header-account-menu__panel,
    .site-header__account-wrapper:focus-within .header-account-menu__panel {
        display: block;
    }
}
.header-account-menu__greeting {
    margin: 0 0 var(--s-1);
    color: var(--c-brown-deep);
    font-weight: 700;
    font-size: 1rem;
}
.header-account-menu__intro {
    margin: 0 0 var(--s-3);
    color: var(--c-brown-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}
.header-account-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-account-menu__list a {
    display: block;
    padding: var(--s-2) var(--s-3);
    color: var(--c-brown-deep);
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.95rem;
}
.header-account-menu__list a:hover {
    background: rgba(58, 44, 29, 0.05);
    color: var(--c-tan);
}
.header-account-menu__divider {
    height: 1px;
    background: rgba(58, 44, 29, 0.1);
    margin: var(--s-2) 0;
    list-style: none;
}

/* PR-7.25: site-wide flash banner. Used today for the post-logout
   "You've been signed out." notification; future flash messages can
   reuse the same shell by setting data-auto-dismiss="ms" on the
   element (or omit to leave the user to dismiss). The banner sits
   fixed below the sticky header so it's visible regardless of
   scroll position. Slides in from above on first paint, fades out
   when dismissed by the close button or the auto-dismiss timer. */
.site-flash {
    position: fixed;
    top: calc(var(--header-h) + var(--s-3));
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(58, 44, 29, 0.12);
    color: var(--c-brown-deep);
    font-size: 0.95rem;
    max-width: calc(100vw - var(--s-5) * 2);
    animation: site-flash-in 0.25s ease-out;
}
.site-flash--ok .site-flash__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-white);
    font-weight: 700;
    font-size: 0.85rem;
    flex: 0 0 auto;
}
.site-flash__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--c-brown-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    margin-left: var(--s-2);
}
.site-flash__close:hover { color: var(--c-brown-deep); }
/* PR-7.27: error variant used by /admin/order_edit.php's showMsg().
   Same shell as --ok but red border + red text so failures don't
   look like confirmations. No tick rendered for errors. */
.site-flash--err {
    border-color: #c5302e;
    color: #c5302e;
}
.site-flash[data-dismissing="1"] {
    animation: site-flash-out 0.2s ease-in forwards;
}
@keyframes site-flash-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes site-flash-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}
.site-header__account-link:hover { color: var(--c-tan); }
.site-header__account-link--muted { color: var(--c-brown-muted); font-size: 0.85rem; }

/* Account icon — a small green circle that lets signed-in customers
   reach /account from the header (or sign-in for logged-out users).
   PR-7.10b: shown at ALL viewports (was ≤1024px only). The text
   dropdown .site-header__account is now permanently hidden so the
   icon is the universal account affordance. */
.site-header__account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-white);
    text-decoration: none;
    transition: background var(--transition-fast);
    flex: 0 0 auto;
}
.site-header__account-icon:hover { background: var(--c-green-hover); }
.site-header__account-icon svg { width: 18px; height: 18px; display: block; }

/* Base hamburger styles. display:none here; the <=1024px block below
   overrides to inline-flex. This base rule MUST come BEFORE the media
   query — when it followed it, the unconditional display:none won the
   cascade and the hamburger stayed hidden at tablet width. */
.site-header__menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: var(--s-2);
    cursor: pointer;
    color: var(--c-brown-deep);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.site-header__menu-toggle:hover { background: rgba(58, 44, 29, 0.05); }
.site-header__menu-icon { display: block; }

/* Header collapse breakpoint (<=1024px). The full nav becomes a
   hamburger drawer at tablet width and below.
   PR-7.10b: account text/icon swap moved out of here — the icon now
   shows at ALL viewports (base rule) and the text dropdown is
   permanently hidden. */
@media (max-width: 1024px) {
    .site-header__menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

    /* Nav becomes a top-drawer panel; slides in on toggle. Closed-state
       translate covers BOTH the drawer's own height and the
       `top: var(--header-h)` offset, otherwise the drawer's bottom edge
       peeks back into the viewport (e.g. a 257px tall drawer at top:70px
       with translateY(-110%) leaves its last item visible at the top). */
    .site-header__nav {
        position: fixed;
        left: 0; right: 0;
        top: var(--header-h);
        background: var(--c-cream);
        padding: var(--s-5);
        border-bottom: 1px solid rgba(58, 44, 29, 0.08);
        box-shadow: 0 8px 20px rgba(58, 44, 29, 0.08);
        transform: translateY(calc(-100% - var(--header-h)));
        transition: transform 0.25s ease;
        z-index: 50;
    }
    .site-header__nav[data-open="true"] { transform: translateY(0); }

    .site-header__nav-list {
        flex-direction: column;
        gap: var(--s-4);
        font-size: 1.125rem;
    }
}

/* Mobile-only refinements (<=768px). Hamburger + nav-as-drawer + account
   icon already live in the 1024px block above. This block is just the
   true-mobile tweaks: shrink the brand, tighten the CTA, drop "Here"
   from the CTA label, pin the order-page cart to the right grid column. */
@media (max-width: 768px) {
    .site-header__brand { font-size: 1.5rem; }

    .site-header__cta {
        padding: var(--s-2) var(--s-4);
        font-size: 0.875rem;
    }

    /* Drop the " Here" suffix on mobile — the CTA label becomes just
       "Order" so the right cluster (icon + CTA) fits without crowding. */
    .site-header__cta-label-extra { display: none; }

    /* On the order page at <=768px the CTA is hidden and the cart icon
       takes its place — explicitly pin the cart to the right grid column
       so it doesn't float into an auto-placed cell. */
    body.page-order .site-header__cart { justify-self: end; }
}


/* ============================================================
 * Hero (dark, full-bleed pizza background + circular logo)
 * ============================================================ */

.hero {
    position: relative;
    background: var(--c-near-black);
    /* Hero fills the visible space BELOW the sticky header so the
       scroll cue lands inside the viewport, not just off the bottom.
       Header is `position: sticky; height: var(--header-h)` and sits
       in flow, so 100dvh hero overflowed by exactly the header
       height. dvh handles mobile browser-chrome collapse cleanly. */
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(var(--s-5), 5vh, var(--s-7));
    overflow: hidden;
    isolation: isolate;
}

/* Picture-with-img instead of a background-image div: the <picture>
   element handles per-breakpoint art-direction (mobile portrait /
   tablet 4:3 / desktop 16:9 crops) AND per-format negotiation
   (AVIF → WebP → JPEG fallback) natively. Each crop is purpose-built
   for its aspect ratio, so no per-breakpoint object-position
   acrobatics — object-fit: cover + centred origin is plenty. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    display: block;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Vertical letterbox: subtle black at top + bottom, image breathes
   through the middle band. The previous top stop (0.9 opacity) was
   crushing the image into pure black at desktop widths — backed off
   to 0.55 so the photo actually reads as a photo. Bottom fades to
   var(--c-near-black) so the join with the drips section is seamless. */
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.15) 22%,
        rgba(0, 0, 0, 0.15) 65%,
        rgba(31, 19, 15, 0.95) 92%,
        var(--c-near-black) 100%
    );
}

.hero__logo {
    width: clamp(220px, 32vw, 420px);
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

/* Scroll cue — small chevron at the bottom-centre of the full-screen
   hero, gently bouncing. Tells the user there's content below the fold
   without screaming it. */
.hero__scroll-cue {
    position: absolute;
    bottom: clamp(var(--s-5), 4vh, var(--s-7));
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-radius: 50%;
    transition: color var(--transition-fast);
    animation: hero-scroll-bounce 2s ease-in-out infinite;
}
.hero__scroll-cue:hover { color: rgba(255, 255, 255, 1); }
.hero__scroll-cue svg { width: 28px; height: 28px; }
@keyframes hero-scroll-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(8px); }
    60% { transform: translateX(-50%) translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__scroll-cue { animation: none; }
}


/* ============================================================
 * Drips — black wavy transition. Reusable.
 * ============================================================ */

/* Drips divider — responsive sizing.
   SVG asset is at /assets/images/drips.svg (dark fill on cream bg
   = drop shapes hang from the dark hero above). Heights bumped per
   breakpoint so each drip reads as a distinct fluid blob rather than
   noise; background-size widened so there are fewer, larger drips
   visible at once (the SVG has ~50 small bumps — at 200% we see
   roughly half of them, at the right scale to look like drips). */
/* Drip SIZE locked at 3500px × 130px so every drip is physically the
   same on screen regardless of viewport. Position via the
   --drip-offset-x custom property: 0px = leftmost (post-flip = visual
   right), negative values slide the SVG left in pre-flip coords
   (= right in visual coords), positive slide right (= left visual).
   Easier to tune than juggling background-position-x in source. */
.drips {
    --drip-offset-x: 50%;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: var(--c-cream);
    background-image: url('/assets/images/drips.svg?v=4');
    background-repeat: no-repeat;
    background-size: 3500px 130px;
    background-position: var(--drip-offset-x) 0%;
    transform: rotateY(180deg);
    height: 130px;
}


/* ============================================================
 * Buttons
 * ============================================================ */

/* :not([hidden]) so the explicit display doesn't override the hidden HTML
   attribute — buttons toggled via el.hidden = true must actually disappear.
   See feedback_css_hidden_attribute memory. */
.btn:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-6);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 0;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    text-decoration: none;
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--c-tan); color: var(--c-white); }
.btn--primary:hover { background: var(--c-tan-hover); color: var(--c-white); }

.btn--secondary { background: var(--c-green); color: var(--c-white); }
.btn--secondary:hover { background: var(--c-green-hover); color: var(--c-white); }

.btn--large { padding: var(--s-4) var(--s-7); font-size: 1.05rem; }


/* ============================================================
 * Auth pages (login, register, password reset, /account)
 * ============================================================ */

.auth-form {
    display: grid;
    gap: var(--s-4);
    max-width: 420px;
    margin: var(--s-5) 0;
}
.auth-form__row { display: block; }
.auth-form__row > span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-brown-muted);
    margin-bottom: var(--s-1);
}
.auth-form__row > span small { font-weight: 400; font-size: 0.8rem; }
.auth-form__row input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--s-3);
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
}
.auth-form__row input:focus {
    outline: none;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(184, 142, 92, 0.15);
}
.auth-form__actions { margin-top: var(--s-3); }

.auth-links { margin-top: var(--s-4); font-size: 0.9rem; color: var(--c-brown-muted); }
.auth-links a { color: var(--c-tan); }

.auth-msg {
    margin: 0;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}
.auth-msg--ok    { background: #e8f5e9; color: #1b5e20; border: 1px solid #1b5e20; }
.auth-msg--error { background: #fce8e6; color: #a32018; border: 1px solid #a32018; }

/* Account page layout — side-nav on desktop, top-of-content nav on
   mobile (the same <nav> element flexes orientation). The greeting
   sits above both, centred. */
.account-greeting {
    text-align: center;
    margin-bottom: var(--s-6);
}
.account-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--s-7);
    align-items: start;
}
.account-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
}
.account-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-md);
    color: var(--c-brown);
    text-decoration: none;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.account-nav__link:hover {
    background: rgba(58, 44, 29, 0.05);
    color: var(--c-tan);
}
.account-nav__link--active {
    background: var(--c-cream-soft);
    color: var(--c-brown-deep);
    font-weight: 600;
}
.account-nav__link--signout {
    margin-top: var(--s-3);
    color: var(--c-brown-muted);
    font-size: 0.9rem;
}
.account-nav__count {
    background: var(--c-tan);
    color: var(--c-white);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}
.account-nav__link--active .account-nav__count { background: var(--c-brown-deep); }

.account-content__title {
    margin-top: 0;
    margin-bottom: var(--s-5);
}
/* PR-7.24: subtitle for the in-line "Change password" section that
   now lives under the profile form on the Your Details page. */
.account-content__subtitle {
    margin-top: var(--s-7);
    margin-bottom: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(58, 44, 29, 0.1);
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--c-brown-deep);
}

/* Mobile: nav becomes a horizontal scrollable tab bar above the
   content, content stacks below. Sticky removed (it'd waste height
   above the fold). */
@media (max-width: 860px) {
    .account-layout {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }
    .account-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--s-2);
        padding-bottom: var(--s-2);
        /* Hide scrollbar but keep scroll behaviour. */
        scrollbar-width: thin;
    }
    .account-nav__link {
        white-space: nowrap;
        padding: var(--s-2) var(--s-4);
        flex: 0 0 auto;
    }
    .account-nav__link--signout {
        margin-top: 0;
        margin-left: auto;
    }
}

/* Past orders list on /account.php. Each item is a card with a
   when/total row, a one-line items summary, and a Reorder button. */
.past-orders {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5) 0;
}
.past-orders__item {
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.1);
    border-radius: var(--radius-md);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "row     row"
        "summary actions";
    gap: var(--s-3) var(--s-4);
    align-items: center;
}
.past-orders__row     { grid-area: row; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.past-orders__when    { font-weight: 600; color: var(--c-brown-deep); }
.past-orders__total   { font-weight: 700; color: var(--c-brown-deep); }
.past-orders__summary { grid-area: summary; color: var(--c-brown); font-size: 0.95rem; }
.past-orders__discount { color: var(--c-green); font-weight: 500; margin: var(--s-2) 0 0; font-size: 0.9rem; }
.past-orders__items {
    list-style: none;
    padding: 0;
    margin: var(--s-2) 0 0;
    color: var(--c-brown);
    font-size: 0.95rem;
}
.past-orders__items li {
    padding: 2px 0;
}
/* PR-7.12: dropped .past-orders__hidden-toggle, __item--hidden, and
   __hidden-badge — Hide/Restore replaced by one-way Delete. */
.past-orders__actions { grid-area: actions; justify-self: end; }

.past-orders__pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

/* Compact button — used for inline actions in lists where the
   standard padding is too chunky. Pairs with btn--primary/secondary. */
.btn--small {
    padding: var(--s-2) var(--s-3);
    font-size: 0.85rem;
}

/* Ghost button — transparent background, brown text, subtle outline.
   For secondary actions next to a btn--primary/--secondary where two
   filled buttons would look heavy (e.g. Delete next to Use this). */
.btn--ghost {
    background: transparent;
    color: var(--c-brown-deep);
    border: 1px solid rgba(58, 44, 29, 0.2);
    text-decoration: none;
}
.btn--ghost:hover {
    background: rgba(58, 44, 29, 0.05);
    color: var(--c-brown-deep);
}

/* Favourites action row — Use this + Delete side-by-side. */
.favourites__actions {
    display: flex;
    gap: var(--s-2);
}


/* ============================================================
 * Site footer (dark)
 * ============================================================ */

.site-footer {
    background: var(--c-near-black);
    color: var(--c-cream);
    padding: var(--s-8) 0 var(--s-7);
    margin-top: var(--s-9);
}
.site-footer a { color: var(--c-cream); }
.site-footer a:hover { color: var(--c-tan); }

.site-footer__inner {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--s-5);
    text-align: center;
}

.site-footer__brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-cream);
    margin-bottom: var(--s-2);
}

.site-footer__small {
    color: var(--c-brown-muted);
    font-size: var(--t-small);
    margin-top: var(--s-5);
}

.site-footer__social {
    display: flex;
    gap: var(--s-5);
    justify-content: center;
}
.site-footer__social a { font-size: 1.5rem; }


/* ============================================================
 * Section primitives
 * ============================================================ */

.section--cream-soft { background: var(--c-cream-soft); }

.container--narrow { max-width: 760px; }
/* Modest widen at very-wide viewports so the column doesn't look
   marooned in the middle of a 1920px screen. 920px still keeps reading
   line lengths comfortable. */
@media (min-width: 1600px) {
    .container--narrow { max-width: 920px; }
}

.section__title { text-align: center; }

.section__intro {
    max-width: 60ch;
    margin: 0 auto var(--s-7);
    text-align: center;
    color: var(--c-brown-muted);
    font-size: 1.125rem;
}

.text-center { text-align: center; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-tan);
    margin: 0 0 var(--s-3) 0;
}
.eyebrow--center { text-align: center; }

.lead--center { margin-left: auto; margin-right: auto; }

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
    margin-top: var(--s-5);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Honeypot — hidden from humans (by CSS, aria, tabindex) but rendered to bots
   that ignore CSS and fill every visible input. Anything in `name="website"`
   on a submission is treated as a bot and silently dropped. */
.form-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* ============================================================
 * Family grid (3 cards on desktop, 1 column on mobile)
 * ============================================================ */

/* Family hero — the group caricature above the cards. Square,
   capped at ~480px so it doesn't overwhelm the section but stays
   prominent. Mobile: smaller. */
.family-hero {
    display: block;
    max-width: 480px;
    margin: var(--s-6) auto var(--s-7);
}
.family-hero img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    /* Watercolour edges look great against the cream-soft section
       background — no border or shadow needed, lets the bleed read
       as part of the illustration. */
    display: block;
}
@media (max-width: 768px) {
    .family-hero { max-width: 320px; margin-top: var(--s-4); margin-bottom: var(--s-5); }
}

.family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-6);
}

.family-card {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    padding: var(--s-6);
    box-shadow: var(--shadow-soft);
    /* Card content stacks vertically so the avatar sits cleanly on
       top of the name/role/copy. text-align center centres the
       smaller-than-card avatar. */
    text-align: center;
}
.family-card__avatar {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--s-4);
}
.family-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    /* No border / shadow — same reasoning as the hero. The caricature
       edges fade naturally into the card background. */
    display: block;
}
.family-card h3 { margin-bottom: var(--s-2); }
.family-card__role {
    color: var(--c-tan);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    margin-bottom: var(--s-4);
}
.family-card p:last-child { text-align: left; }

@media (max-width: 768px) {
    .family-grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * Split section (image + content side by side)
 * ============================================================ */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: center;
}

.split__media img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; gap: var(--s-6); }
    .split--reverse .split__media { order: -1; }
}


/* ============================================================
 * Classes grid (2 cards)
 * ============================================================ */

.classes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
}

.class-card {
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    padding: var(--s-7);
}
.class-card h3 { margin-bottom: var(--s-2); }
.class-card__price {
    color: var(--c-green);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: var(--s-4);
}

@media (max-width: 768px) {
    .classes-grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * Newsletter sign-up
 * ============================================================ */

.section--newsletter {
    background:
        linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-soft) 100%);
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
    margin: var(--s-6) auto 0;
    max-width: 620px;
}

.newsletter-form input {
    flex: 1 1 200px;
    padding: var(--s-3) var(--s-4);
    font: inherit;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid rgba(58, 44, 29, 0.15);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.newsletter-form input:focus {
    outline: 0;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(160, 134, 106, 0.18);
}
.newsletter-form button { flex: 0 0 auto; }

.newsletter-form__note {
    margin-top: var(--s-4);
    color: var(--c-brown-muted);
    font-size: var(--t-small);
}


/* ============================================================
 * Contact grid (intro + form)
 * ============================================================ */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-8);
    /* Vertically centre the shorter column (contact details ~ 250px)
       against the taller form (~ 600px). align-items: start left a
       lot of empty space below the details column on desktop. */
    align-items: center;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0 0;
}
.contact-list li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(58, 44, 29, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list__label {
    color: var(--c-brown-muted);
    font-size: var(--t-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.contact-form,
.checkout-form {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    padding: var(--s-6);
    box-shadow: var(--shadow-soft);
}
/* Lets scrollIntoView() (used by the ?subject= deep-link from the
   Events / Classes CTAs) land the form's top just below the sticky
   header instead of hidden behind it. */
.contact-form { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
/* On mobile, drop the contact-form card chrome so it reads as a
   continuation of the contact details above it. The form was getting
   visually disconnected — cream-soft section bg, then details in
   plain flow, then form in a cream card — three distinct surfaces
   stacked. Below 860px (the contact-grid breakpoint), one column,
   one visual band. */
@media (max-width: 860px) {
    .contact-form {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin-top: var(--s-6);
    }
}
.contact-form__row { margin-bottom: var(--s-4); }
.contact-form label,
.checkout-form label {
    display: block;
    margin-bottom: var(--s-2);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c-brown-deep);
}
.contact-form input,
.contact-form textarea,
.checkout-form input,
.checkout-form textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    font: inherit;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid rgba(58, 44, 29, 0.15);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form textarea,
.checkout-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form textarea:focus,
.checkout-form input:focus,
.checkout-form textarea:focus {
    outline: 0;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(160, 134, 106, 0.18);
}

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}