/* ============================================================
   The shared customer header.

   Loaded by both the storefront base and the events base, which each have
   their own stylesheet and their own copy of the brand variables. Every value
   here therefore carries a literal fallback, so the header looks the same
   whichever stylesheet it lands in — and still picks up a site's variables
   where they are defined.
   ============================================================ */

.site-header {
    background: var(--card, #221338);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 500;
}

.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 26px;
    position: relative;
}

.site-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text, #E8E0F0);
    text-decoration: none;
    font-family: var(--font-heading, Georgia, Cambria, 'Times New Roman', Times, serif);
    line-height: 1.2;
    font-size: 26px;
    letter-spacing: 0.01em;
    padding: 6px 18px 6px 0;
    z-index: 2;
}
.site-brand img { max-height: 42px; width: auto; display: block; }

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 38px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.site-nav-links a {
    /* Taken from the main site's nav: 40% white, 16/20, medium, with the tall
       padding that puts the hover underline at the foot of the bar. The face
       is Gotham Book — the same one body copy uses, not the Gotham Medium
       that h2s, buttons and FAQ questions use. */
    font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    /* 1.2, like everywhere else the medium face is used. */
    line-height: 1.2;
    letter-spacing: 0;
    padding: 30px 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav-links a:hover,
.site-nav-links a.active {
    color: #fff;
    border-bottom-color: var(--gold, #D3A56E);
}

/* ── Nav items with a sub-menu ───────────────────────────────────────
   Desktop: a panel below the bar — the item's own name as a highlighted
   row on the left, its children listed to the right. Mobile: the same
   markup becomes an accordion — the row expands in place and its children
   appear indented beneath it, no floating panel. */
.site-nav-item { position: relative; }
.site-nav-parent {
    font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    background: none; border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.4); font-size: 16px; font-weight: 500;
    line-height: 1.2; padding: 30px 0; border-bottom: 3px solid transparent;
    white-space: nowrap; display: flex; align-items: center; gap: 6px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav-parent .caret { font-size: 11px; transition: transform 0.15s ease; }
.site-nav-item:hover .site-nav-parent,
.site-nav-item.open .site-nav-parent { color: #fff; border-bottom-color: var(--gold, #D3A56E); }
.site-nav-item.open .site-nav-parent .caret { transform: rotate(180deg); }

.site-nav-dropdown {
    display: none;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 0; min-width: 380px; background: #fff; color: #1B0E3D;
    border-radius: 0 0 10px 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
/* Desktop only: hover opens the panel, alongside the .open class the click
   handler also sets. Scoped to this breakpoint so mobile relies solely on
   .open — a touch tap leaves a "sticky" :hover behind with nothing to clear
   it, which otherwise keeps the panel open after a second tap correctly
   removes .open (see the max-width block below, and site-header.js). */
@media (min-width: 821px) {
    .site-nav-item:hover .site-nav-dropdown { display: flex; }
}
.site-nav-item.open .site-nav-dropdown { display: flex; }
.site-nav-dropdown-active {
    flex: 0 0 40%; background: var(--gold, #D3A56E); color: #1B0E3D;
    font-weight: 700; font-size: 14px; padding: 16px 20px; display: flex;
    align-items: center;
    font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}
.site-nav-dropdown-sub { flex: 1; padding: 8px 0; display: flex; flex-direction: column; }
.site-nav-dropdown-sub a {
    padding: 10px 20px; color: #1B0E3D; text-decoration: none; font-size: 14px;
    white-space: nowrap;
    font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}
.site-nav-dropdown-sub a:hover { background: rgba(211, 165, 110, 0.14); color: #1B0E3D; }

@media (max-width: 820px) {
    .site-nav-parent {
        padding: 12px 2px; line-height: 1.3; border-bottom: none;
        border-left: 2px solid transparent; padding-left: 10px; width: 100%;
        justify-content: space-between;
    }
    .site-nav-item.open .site-nav-parent {
        border-left-color: #3D63E8; color: #fff;
    }
    .site-nav-dropdown {
        display: none; position: static; transform: none; width: 100%;
        background: none; box-shadow: none; border-radius: 0; flex-direction: column;
    }
    .site-nav-item.open .site-nav-dropdown { display: flex; }
    .site-nav-dropdown-active { display: none; }
    .site-nav-dropdown-sub { padding: 0 0 6px; }
    .site-nav-dropdown-sub a {
        color: var(--text, #E8E0F0); padding: 10px 2px 10px 24px;
        border-left: 2px solid transparent;
    }
    .site-nav-item.open .site-nav-dropdown-sub a { border-left-color: rgba(61, 99, 232, 0.4); }
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 2;
}

.site-cart {
    position: relative;
    color: var(--text, #E8E0F0);
    text-decoration: none;
    line-height: 0;
    padding: 4px;
}
.site-cart svg { width: 23px; height: 23px; display: block; }
.site-cart:hover { color: #fff; }
.site-cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--blue, #2B52DE);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Registration pages: the logo, centred, and nothing to click away with. */
.site-header-bare .site-header-inner { justify-content: center; }
.site-header-bare .site-brand { padding-right: 0; }

/* ---- Dropdowns (currency + account) ---- */
.site-menu { position: relative; }

.site-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--nav-link, #B9AECD);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 5px 6px;
    border-radius: 6px;
}
.site-menu-toggle:hover { color: #fff; }
.site-menu-toggle .caret { font-size: 9px; opacity: 0.7; }

.site-avatar { width: 30px; height: 30px; display: block; }
.site-account-toggle { padding: 4px; color: var(--nav-link, #B9AECD); }
.site-account-toggle:hover { color: #fff; }

.site-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    background: var(--card, #221338);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    padding: 6px 0;
    z-index: 510;
}
.site-menu-panel-right { left: auto; right: 0; }
.site-menu.open .site-menu-panel { display: block; }

.site-menu-panel a {
    display: block;
    padding: 9px 16px;
    color: var(--text, #E8E0F0);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}
.site-menu-panel a:hover { background: rgba(255, 255, 255, 0.06); color: var(--gold, #D3A56E); }
.site-menu-panel a.active { color: var(--gold, #D3A56E); }

.site-menu-head {
    padding: 10px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.site-menu-name { font-size: 14px; font-weight: 700; color: var(--text, #E8E0F0); }
.site-menu-email {
    font-size: 12px;
    color: var(--text-muted, #9B8FB8);
    word-break: break-word;
    max-width: 220px;
    white-space: normal;
}
.site-menu-signout { color: #F87171 !important; }
.site-menu-signout:hover { color: #F87171 !important; }

.site-burger {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--text, #E8E0F0);
    font-size: 18px;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
}

@media (max-width: 820px) {
    .site-header-inner { height: auto; min-height: 60px; flex-wrap: wrap; padding: 10px 16px; gap: 12px; }
    .site-burger { display: block; order: 3; }
    .site-header-actions { order: 2; margin-left: auto; }

    /* The links drop below the bar rather than squeezing the account menu out;
       the account and cart stay reachable at every width. */
    .site-nav-links {
        display: none;
        position: static;
        transform: none;
        gap: 0;
        order: 4;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 6px;
    }
    .site-nav-links.open { display: flex; }
    .site-nav-links a {
        padding: 12px 2px;
        line-height: 1.3;
        border-bottom: none;
        border-left: 2px solid transparent;
        padding-left: 10px;
    }
    .site-nav-links a.active { border-left-color: var(--gold, #D3A56E); }
}


/* ============================================================
   Shared page title.

   The shop, the cart, the courses and the events list each sized their H1
   differently — 32px here, a 51px clamp there, browser default on the cart,
   and the courses index had no title at all. This is the one treatment; it
   lives here because both the storefront and the events stylesheets load this
   file.
   ============================================================ */
.page-title {
    font-family: var(--font-display, var(--font-heading, Georgia, serif));
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: normal;
    margin: 0 0 22px;
    color: var(--text, #E8E0F0);
}