/* ==========================================================================
   Navigation stacking + responsive drawer architecture
   ==========================================================================
   Single source of truth for:

     1. The site's z-index scale for navigation chrome (header, the doc
        toolbar, drawer overlays, drawer panels). Previously these were
        arbitrary Tailwind `z-[NN]` values repeated inline and — on
        taxonomy-missionos_products.php specifically — inconsistent
        with the same elements' equivalents in header.php, which is
        what let the sticky header visually cover a drawer's own close
        (×) button.

     2. Where the header's mobile menu drawer and the Doc Hub sidebar
        drawer sit relative to the sticky header. Both now start BELOW
        the header (top: var(--missionos-header-h)) instead of behind
        it, so there's no stacking fight to win in the first place —
        the header simply isn't in the same vertical space as the open
        drawer.

   Both drawers are opened/closed by js/drawer-manager.js, which only
   ever toggles the plain Tailwind classes already used for the slide
   transition (`-translate-y-full`, `opacity-0`, `pointer-events-none`)
   — this file doesn't change that animation, only where the elements
   sit and how they stack. Both are now full-width panels that drop
   down from directly under the header (top-to-bottom), rather than
   narrow side drawers, but the "start below the header, not behind
   it" positioning below still applies unchanged.
   ========================================================================== */

:root {
	--missionos-header-h: 55px;

	/* Low to high. Modals (requestModal/supportModal/contactModal/
	   searchModal, z-[200]) and the toast (z-[300]) intentionally sit
	   above this whole scale and are unaffected by it. */
	--z-toolbar: 90;  /* Doc Hub product/version bar, just under the header */
	--z-overlay: 92;  /* dimmed backdrop behind an open drawer */
	--z-drawer: 95;   /* the drawer/sidebar panel itself */
	--z-header: 100;  /* sticky site header — always the topmost nav chrome */
}

#header {
	z-index: var(--z-header);
}

#docToolbar {
	z-index: var(--z-toolbar);
}

/* Scoped to below the theme's `lg:` breakpoint (1024px) on purpose:
   above it, #docSidebar switches to its own `lg:sticky lg:top-[110px]
   lg:relative` static-column layout (and #mobileNavDrawer/#docSidebar
   Scrim are never shown at all), so this must never compete with those
   utility classes there. */
@media (max-width: 1023.98px) {
	/* Header mobile menu — every template. Full-width, drops down from
	   directly under the sticky header. */
	#mobileNavDrawer {
		top: var(--missionos-header-h);
		z-index: var(--z-drawer);
	}
	#mobileNavOverlay {
		top: var(--missionos-header-h);
		z-index: var(--z-overlay);
	}

	/* Doc Hub sidebar (taxonomy-missionos_products.php only) — a
	   fully independent drawer from the header menu above (different
	   `group` in js/doc-hub.js's MissionosDrawers.register calls, so
	   opening one never force-closes the other). Rather than sharing
	   the header menu's top-down/full-width behaviour, this is a
	   left-anchored panel pinned to the bottom of the viewport, so it
	   reads as a distinct "docs" affordance rather than a second copy
	   of the same menu. `top` here is just the default resting
	   position (below the header); js/doc-hub.js's
	   syncDocSidebarOffset() pushes it further down via an inline
	   style — overriding this value — whenever the header menu is
	   ALSO open, so the two panels never visually overlap. */
	#docSidebar {
		top: var(--missionos-header-h);
		bottom: 0;
		left: 0;
		z-index: var(--z-drawer);
	}
	#docSidebarScrim {
		top: var(--missionos-header-h);
		z-index: var(--z-overlay);
	}
}

/* Guard rail: if the sticky header's own height utility class
   (`h-[55px]`) is ever changed, this constant needs to change with it
   or the drawers will visually start a little high/low relative to
   the header. Nothing to enforce this at rule-level — noted here for
   future maintainers, same spirit as the sticky-sidebar guard rail in
   css/doc-hub.css. */