/* ===========================================================================
   File: css/site-nav.css
   ---------------------------------------------------------------------------
   THE ONE TOP MENU.
   Linked from every public page, AFTER that page's own <style> block, so these
   rules win without anyone having to hunt through eight inline stylesheets.

   WHY IT EXISTS
     Every page hand-rolled its own header. They already shared a class
     vocabulary (.topbar / .topbar-inner / .brand / .topbar-actions /
     .topbar-nav-link / .topbar-login) but not the items inside it, not the
     heights, and not a single responsive rule between most of them. Measured
     in a 390px viewport on 25 Sep 2026, .topbar-actions was the WIDEST ELEMENT
     ON THE PAGE on four of five pages — the menu, not the content, was what
     made the site scroll sideways on a phone:

         /                     menu content 568px
         /schools.html                      596px
         /register-school.html              505px
         /school.php                        493px
         /events.html                       450px   (had rules; still too wide)

   THE APPROACH
     No burger. Three destinations is few enough to keep every one of them a
     single tap away, which is worth more than a tidier bar. The row earns its
     width back on small screens by dropping what is redundant rather than by
     shrinking everything until nothing is tappable:

       under 720px  the wordmark goes, the logo alone still goes home
       under 720px  the link to the page you are already on goes
       under 560px  "School log in" becomes "Log in"

     Everything that survives keeps a 44px touch target, which is the floor,
     not a target to aim under.
   =========================================================================== */

/* ── The bar ───────────────────────────────────────────────────────────── */
/* One height everywhere. The pages had 88 / 88 / 69 / 69 / 84.
   And one TREATMENT everywhere. schools.html, register-school.html and
   school.php had a sticky, translucent, blurred bar with a hairline under it;
   index, events and the three legal pages had a plain transparent one with no
   line and no stickiness. That is the difference you actually see flicking
   between pages, more than the item list is. The sticky version wins: it is
   the more considered of the two, and on a long directory or a school's
   gallery the menu stays reachable instead of scrolling away.
   --line is defined on all eight pages; the fallback is for safety only. */
.topbar {
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 241, 234, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line, rgba(15,14,23,0.08));
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;            /* lets the children actually shrink inside flex */
    /* schools.html and register-school.html pin `height: 68px` in their own
       inline CSS, which made their bar 93px tall against everyone else's 68.
       A fixed height cannot adapt to a wrapped or a taller row anyway, so it
       is replaced here with a floor. */
    height: auto;
    min-height: 44px;
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;        /* it is a link home; it needs a finger-sized target */
    text-decoration: none;
}
.topbar .brand img { display: block; height: 30px; width: auto; flex: none; }
.topbar .brand span { white-space: nowrap; }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
/* 44px is the smallest thing a finger hits reliably. Every nav link on every
   page was under it — most were 22–38px. */
.topbar-nav a,
.topbar-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 10px;
    color: var(--ink-soft, #5C5852);
    transition: color .15s ease, background .15s ease;
}
.topbar-nav a:hover,
.topbar-nav-link:hover { color: var(--ink, #0F0E17); background: rgba(15,14,23,.05); }

/* The current page: a weight and colour shift, not a second button. events.html
   filled it dark, which put two black pills side by side with the login one. */
.topbar-nav a.active,
.topbar-nav-link.active,
.topbar-nav a[aria-current="page"] {
    color: var(--ink, #0F0E17);
    font-weight: 600;
    background: transparent;
}

/* The login pill. Measured on 25 Sep 2026 this was three different controls:
   a cream pill on index (bg #EFE8DC), a near-black pill on schools and
   register (bg #0F0E17), and on the legal pages no pill at all — those pages
   never had a login link, so nothing styled one and it rendered as bare text.
   Flicking between pages, this is the single most obvious inconsistency.
   The dark pill wins: it already appears on three pages, and a sign-in is an
   action, so it should look like a button rather than another link. */
.topbar-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    flex: none;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--ink, #0F0E17);
    color: var(--cream, #F5F1EA);
    transition: opacity .15s ease;
}
.topbar-login:hover { opacity: .88; color: var(--cream, #F5F1EA); }
.topbar-login .short { display: none; }
/* The trailing arrow some pages carried. Kept if present, never required. */
.topbar-login .arrow { opacity: .7; }

/* The language <select> i18n.js injects. Left to itself it is as wide as the
   longest language name, which on a phone is width the links need more. */
.topbar-lang { display: inline-flex; align-items: center; flex: none; }
.topbar-lang #lzd-lang-switcher { max-width: 100%; }

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
    .topbar { padding: 12px 0; }
    .topbar-inner { gap: 10px; }
    .topbar-actions { gap: 6px; }

    /* The wordmark is the single biggest saving — ~110px — and the logo beside
       it already says the same thing and already goes home. */
    .topbar .brand span { display: none; }
    .topbar .brand img { height: 32px; }

    /* A link to the page you are looking at is the one item nobody needs. */
    .topbar-nav a.active,
    .topbar-nav-link.active,
    .topbar-nav a[aria-current="page"] { display: none; }

    .topbar-nav a,
    .topbar-nav-link { padding: 8px 9px; font-size: 13.5px; }
    .topbar-login { padding: 8px 13px; font-size: 13.5px; }

    .topbar-lang #lzd-lang-switcher { font-size: 13px; padding: 5px 7px; }

    /* "Get in touch — info@letzdance.org" belongs in the footer, where it also
       already is. It is 190px of header a phone cannot spare. */
    .topbar-contact { display: none; }
}

@media (max-width: 559px) {
    .topbar-login .full  { display: none; }
    .topbar-login .short { display: inline; }
    .topbar-nav a,
    .topbar-nav-link { padding: 8px 7px; font-size: 13px; }
}

/* Very small phones still in use (iPhone SE, 320px).
   The language picker is NOT dropped here: it is the only one on the page —
   there is no second switcher in the footer — so hiding it would leave a
   non-English reader with no way to change language at all. It is narrowed
   instead; a <select> truncates its own label and still opens the full list. */
@media (max-width: 359px) {
    .topbar-lang #lzd-lang-switcher { max-width: 62px; padding: 5px 4px; }
    .topbar-nav a,
    .topbar-nav-link { padding: 8px 5px; }
    .topbar-login { padding: 8px 10px; }
}

/* ── The Messages button (schools.html only) ───────────────────────────────
   Not part of the menu — a signed-in dancer's inbox, hidden until they are
   signed in. It lives in the bar, so it has to play by the bar's rules: a
   44px target, and on a phone the icon carries it alone. Its markup was
   briefly lost when the headers were standardised; every script reference to
   it is null-guarded, so nothing threw — the button simply stopped existing,
   which is the kind of regression that goes unnoticed for months. */
.msg-topbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    /* Styled like the other menu links, NOT as a white bordered box: next to
       plain-text links a boxed item reads as the selected tab, so on
       schools.html a signed-in dancer saw "Messages" highlighted while they
       were on Schools (bug, 15 Oct 2026). The unread badge carries the signal. */
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-soft, #5C5852);
    cursor: pointer;
    position: relative;
    flex: none;
    transition: color .15s ease, background .15s ease;
}
.msg-topbtn:hover {
    color: var(--ink, #0F0E17);
    background: rgba(15,14,23,.05);
    border-color: transparent;
}
.msg-topbtn:focus:not(:focus-visible) { outline: none; }
.msg-topbtn svg { width: 18px; height: 18px; flex: none; }
.msg-topbtn[hidden] { display: none; }

@media (max-width: 719px) {
    .msg-topbtn { padding: 8px 10px; }
    .msg-topbtn .msg-topbtn-label { display: none; }   /* the icon says it */
}

/* Solid bar for pages whose own background is themed (school.php): the
   translucent cream reads as grey over a dark school theme. */
.topbar.topbar--solid { background: #F5F1EA; -webkit-backdrop-filter: none; backdrop-filter: none; }