/* ============================================================================
   aqua / chrome.css — GEOMETRY for the BANNER header + WIDE footer that this theme
   ships with. Bundled HERE (imported by light.css + dark.css) rather than in the
   global base.css, so the Aqua "template" (header partial + footer partial + this
   theme) drops in as a self-contained unit without forking core structure. Positioning
   only — colours live in light.css / dark.css. (Pair the `banner` header + `wide`
   footer with this theme; with another theme they'd have no geometry.)
   ============================================================================ */

/* Full-width bands that break out of the page's max-width .shell. Full-bleed via symmetric negative
   margins (no 100vw → no scrollbar overflow), and NO overflow-hidden ancestor — that would kill the
   sticky menu bar. The menu bar is a sibling of the page content inside .shell, so it stays stuck the
   whole way down (the banner above it scrolls off). */
.site-banner, .site-menubar, .site-footer--wide { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.site-banner { position: relative; padding: 3.75rem 1.25rem 3.25rem; text-align: center; background-size: cover; background-position: center; }
.site-banner-inner { position: relative; z-index: 1; max-width: 60rem; margin: 0 auto; }
.site-banner-title { display: inline-block; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.04; }
.site-banner-tagline { margin: .65rem 0 0; font-size: 1.05rem; }

.site-menubar { position: sticky; top: 0; z-index: 100; }
.site-menubar-inner { max-width: 75rem; margin: 0 auto; padding: 0 1.25rem; min-height: 3.4rem; display: flex; align-items: center; gap: 1.25rem; }
.site-menubar .menu { margin-left: auto; }                      /* brand left, nav pushed right */
.site-menubar .menu-horizontal > ul { gap: 1.6rem; flex-wrap: nowrap; }
.site-menubar .menu-horizontal li ul { top: calc(100% + .2rem); }

.site-footer--wide { margin-top: 3rem; padding: 2.75rem 1.25rem; }
.site-footer-inner { max-width: 75rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.site-footer--wide .menu-horizontal > ul { justify-content: center; }

/* ── narrow screens: the menu bar collapses behind the toggle ──────────────────────────────────────
   The bar is position:sticky, so an expanded menu here does not scroll away — it sits over the page for
   as long as it is open. That is fine for a panel you opened and can close, and unusable as a permanent
   state, which is what an always-open submenu made it.

   .has-js is added by the header's script BEFORE anything is hidden, so a visitor without JS keeps the
   menu visible rather than being left with a button that cannot open it.

   flex-wrap is restored here because this file sets `nowrap` above for the desktop bar — with Home,
   Categories and Search the nav simply ran off the side of a phone, which is the horizontal overflow
   that also broke the full-bleed hero. */
@media (max-width: 48rem) {
    .site-menubar-inner { flex-wrap: wrap; gap: .75rem; padding: .5rem 1rem; }
    .site-menubar .menu { margin-left: 0; width: 100%; }
    .site-menubar .menu-horizontal > ul { flex-wrap: wrap; gap: .25rem 1rem; }

    .site-nav { flex: 1 0 100%; }
    /* Collapsed by default once scriptable; the button opens it. Capped to the space below the bar and
       scrollable, so a long menu is reachable instead of running off the bottom of a sticky bar. */
    .site-menubar.has-js .site-nav { display: none; }
    .site-menubar.has-js.is-nav-open .site-nav {
        display: block; max-height: calc(100vh - 4rem); overflow-y: auto;
        padding-bottom: .5rem;
    }

    /* The banner is sized for a desktop band; bring it in so the page starts nearer the content. */
    .site-banner { padding: 2.5rem 1rem 2.25rem; }
}