/* ════════════════════════════════════════════════════════════════════════════
   LAYERING.CSS — one authoritative stacking contract for the whole site.
   Loaded LAST on every public page.

   WHY THIS FILE EXISTS
   --------------------
   The header dropdowns were being painted underneath page content. The cause
   was NOT a missing z-index on the dropdown — it already carries z-index:7000.
   The cause was the stacking context the dropdown lives in:

       style.css      main, .site-header, … { position:relative; z-index:1 }
       premium-2026   body > main, body > header … { position:relative; z-index:2 }

   `.site-header` (specificity 0,1,0) beat `body > header` (0,0,2), so the header
   resolved to z-index:1, while `main` matched the more specific `body > main`
   and resolved to z-index:2. The header therefore sat one layer BELOW the page
   content, and every descendant of the header — including a dropdown with
   z-index:7000 — was trapped under `main` with it. Measured on /wildlife.html:
   header z-index 1, main z-index 2, and `document.elementFromPoint()` over the
   dropdown returned `div.bear-filters` instead of the link.

   The fix is to state the layer order once, deliberately, instead of escalating
   z-index values until something sticks. Nothing here uses !important and
   nothing uses an arbitrarily large number.

   LAYER SCALE (root stacking context)
   -----------------------------------
        -1  ambient background art (grain, vignette, particles)
         0  default flow
         1  page content: main, footer, page-level containers
       900  bottom navigation bar
      2500  site header — must stay above all page content
      9000  mobile navigation drawer — must stay above the header
     10000  toasts / global overlays

   Inside the header, the existing local values (dropdown 7000, language menu
   5000) remain valid: they now resolve inside a context that is itself above
   the page, which is what they always assumed.
   ════════════════════════════════════════════════════════════════════════════ */

/* Page content. `html body > x` (0,0,3) is deliberately one step more specific
   than the competing `body > x` (0,0,2) rules so the outcome does not depend on
   stylesheet order across the eight legacy layers. */
html body > main,
html body > footer,
html body > .exp-shell,
html body > .container {
  position: relative;
  z-index: 1;
}

/* Site header. `body > header.site-header` (0,1,2) beats the legacy
   `.site-header { z-index: 1 }` (0,1,0) without !important. */
body > header.site-header,
body > .site-header {
  position: relative;
  z-index: 2500;
}

/* A sticky/fixed header keeps the same layer. */
body > header.site-header.is-fixed,
body > header.site-header.scrolled {
  z-index: 2500;
}

/* The header must never clip its own dropdowns. */
body > header.site-header,
body > header.site-header .container,
body > header.site-header nav,
body > header.site-header .nav-links {
  overflow: visible;
}

/* Bottom bar sits above content, below the header. */
body > .bottom-nav { position: fixed; z-index: 900; }

/* Mobile drawer sits above everything except global toasts. */
body > .mobile-menu { z-index: 9000; }

/* Toasts always win. */
.toast-stack { z-index: 10000; }

/* Admin shell keeps its own internal scale (sidebar 950, topbar 800); it is a
   separate full-screen application and must not be pushed under page content
   by the rules above. */
html body > .admin-shell,
html body > .admin-login { position: relative; z-index: 2; }

/* ── Nothing may overflow the viewport horizontally ──────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

/* Media and tables are the usual overflow sources on narrow screens. */
img, video, canvas, svg, iframe { max-width: 100%; }

/* Explorer is a full-screen map application and manages its own scrolling. */
body[data-page="explorer"] { overflow-x: hidden; }