/* ============================================================
   GLOBAL TECH /new header: the one stylesheet the header partial loads (rebuild 2026-10-15).
   Loaded by resources/views/v2/partials/header.blade.php itself (the layout's head stack is already printed when
   the header renders; a stylesheet link is allowed in the body), so gt.css, v2.css and the layout stay untouched.

   Was two files, kept unchanged and no longer linked: header-icons.css (menu icons, 2026-10-12) and
   header-menu.css (mega panels inside the page, QA #1). Merged here to save a request; their rules are below as
   they were. New here: the logo (section 3).
   ============================================================ */

/* ---------- 1. category icons in the menu bar and the mega menus (was header-icons.css) ----------
   Icons are printed by $v2->gtIcon() (Shell::gtIcon, the same markup as the gt-icon Blade component):
   1em square, currentColor, decorative. Sizes stay between 1em and 18px. */

/* menu bar: the group icon before the label (.navlink is already a flex row with a 7px gap) */
.navlink .gt-icon{width:18px;height:18px;flex-shrink:0}

/* mega menu column heads: icon before the category name, on one line with it */
.mega h4 a{display:inline-flex;align-items:center;gap:8px}
.mega h4 .gt-icon{width:16px;height:16px;flex-shrink:0}

/* mega menu links: icon, name, then the count pushed to the right (was justify-content:space-between, which
   would centre the name between the icon and the count) */
.mega li a{justify-content:flex-start}
.mega li a em{margin-left:auto;padding-left:6px}
.mega li a .gt-icon{width:16px;height:16px;flex-shrink:0;color:var(--ink-3);transition:color var(--t)}
.mega li a:hover .gt-icon{color:var(--blue)}
.mega li a.allin .gt-icon{color:inherit}

/* ---------- 2. mega menu panels stay inside the page (QA 2026-10-12 #1, was header-menu.css) ----------
   Was: each panel was placed against its own menu item (gt.css .navitem{position:relative}), and a panel flagged
   "right" (Cables & Connectors, Rigging & Cases, Spare Parts) ran leftwards from that item's right edge. An 880 px
   panel under an item near the left of the bar therefore started off screen at 1280 to 1440 px (x = -272 / -86).
   Now every panel is placed against the menu row, which is exactly the header's content width: normal panels start
   at its left edge, "right" panels end at its right edge, and no panel is ever wider than the row (above 860 px;
   below that gt.css hides the mega menu and the row scrolls sideways). */
@media (min-width:861px){
  .navrow{position:relative}
  .navitem{position:static}
  .mega{left:0;right:auto;max-width:100%;box-sizing:border-box}
  .mega.right{left:auto;right:0}
  /* a panel narrower than its min-width allows (a very narrow window) shrinks its columns instead of overflowing */
  .mega.c1,.mega.c2,.mega.c3,.mega.c4{min-width:min(var(--mega-min,0px),100%)}
  .mega.c1{--mega-min:220px}
  .mega.c2{--mega-min:440px}
  .mega.c3{--mega-min:660px}
  .mega.c4{--mega-min:880px}
}
@media (min-width:861px) and (max-width:1100px){
  .mega.c4{--mega-min:660px}
}

/* ---------- 2b. menu bar and panels on smaller desktop screens (QA 2026-10-15 #17) ----------
   At 1024 px the eight menu labels wrapped onto two lines, and the Audio and Lighting panels were taller than a
   900 px screen, so their last rows could not be reached. Labels now stay on one line (a little less padding and gap
   below 1200 px), and a panel never runs past the bottom of the window: it scrolls inside itself instead. */
@media (min-width:861px){
  .navlink{white-space:nowrap}
  .mega{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:861px) and (max-width:1199px){
  .navrow{gap:0}
  .navlink{padding:0 9px;gap:5px;font-size:13.5px}
  .navlink .gt-icon{width:16px;height:16px}
}

/* ---------- 3. the logo: one image, the current theme's only (2026-10-15) ----------
   Was: two <img> tags (logo-color.png 149,872 bytes and logo-white.png 148,261 bytes, 1166x138 and 1196x136 px for
   a 30 px high slot), one of them always hidden by gt-pages.css, and both downloaded on every page.
   Now a CSS background on .logo-img: a browser only downloads the background of the rule that applies, so the light
   theme fetches the colour logo and the dark theme the white one, never both. A <picture> could not do this: the
   theme is the visitor's saved choice (localStorage, applied by theme.js), which no media query can see, and the
   preload scanner fetches an <img> before any script runs.
   Files (new, the originals are untouched): logo-<theme>-1x.webp (30 px high), -2x.webp (60 px high, for sharp
   screens) and -2x.png as the fallback for browsers without image-set(). URLs are relative to this file. */
.logo .logo-img{
  --logo-h:30px;
  display:block;height:var(--logo-h);width:calc(var(--logo-h) * 1166 / 138);flex-shrink:0;
  background:url(logo-color-2x.png) no-repeat left center / contain;
  background-image:image-set(url(logo-color-1x.webp) 1x type("image/webp"), url(logo-color-2x.webp) 2x type("image/webp"), url(logo-color-2x.png) 2x type("image/png"));
}
:root[data-theme="dark"] .logo .logo-img{
  width:calc(var(--logo-h) * 1196 / 136);
  background-image:url(logo-white-2x.png);
  background-image:image-set(url(logo-white-1x.webp) 1x type("image/webp"), url(logo-white-2x.webp) 2x type("image/webp"), url(logo-white-2x.png) 2x type("image/png"));
}
/* same height as before on phones (gt-pages.css: .head .logo img{height:24px}) */
@media (max-width:860px){
  .head .logo .logo-img{--logo-h:24px}
}
/* Windows high contrast and other forced colours: keep the logo image visible */
@media (forced-colors:active){
  .logo .logo-img{forced-color-adjust:none}
}