/* =========================================================================
   Phase 479 — Header navigation polish & responsiveness pass.

   Scope (header chrome only — .tgz411Header and its children):
   1. LOGO STABILITY — stop the logo plate from "jumping" when clicked.
      The plate is centered with transform: translate(-50%,-50%) on mobile,
      so any reflow during click/navigation/theme-snap shifts it visibly.
      Lock the transform, kill inherited transitions, and neutralise the
      default :active feedback that nudged the link.
   2. TOOL SIZING — the language / currency / theme toggles and the menu
      button were ~46–54px in a 78px header (≈60% of the bar). Reduce them
      to a balanced ~36–38px so they read as controls, not billboards.
   3. RESPONSIVE BALANCE — one coherent set of breakpoints instead of the
      five competing phase overrides (436/441/454/455/456/462). Geometry
      uses the grid flow at every width so nothing is absolutely positioned
      except where unavoidable.

   Loads LAST among header styles (registered after header-phase372,
   ux-upgrades and command-menu) so it wins the cascade without needing
   extreme specificity tricks.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LOGO STABILITY LOCK
   ------------------------------------------------------------------------- */

/* The logo is a brand anchor, not an interactive control. Freeze every
   property that could animate so clicks, theme snaps and reflows cannot
   move it. This is the fix for the "logo moves in a funny way when
   clicked in dark mode" report: the theme-snap script injects
   transition:none for a frame, and the absolutely-centred plate jumped
   because nothing was holding its transform steady. */
.tgz411LogoPlate,
.tgz411LogoPlate *,
.tgz411Logo,
.tgz411Logo picture,
.tgz411Logo img {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Neutralise the browser's tap/active feedback on the logo link so the
   press state never shifts geometry. Desktop uses grid centering (no
   transform), so pin it to none there; on mobile the plate is centred
   with translate(-50%,-50%), so re-assert that exact value on every
   interaction state so it cannot drift. */
@media (min-width: 981px) {
  .tgz411LogoPlate:active,
  .tgz411LogoPlate:focus,
  .tgz411LogoPlate:focus-visible,
  .tgz411LogoPlate:hover {
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
}
@media (max-width: 980px) {
  .tgz411LogoPlate:active,
  .tgz411LogoPlate:focus,
  .tgz411LogoPlate:focus-visible,
  .tgz411LogoPlate:hover {
    transform: translate(-50%, -50%) !important;
    translate: none !important;
    scale: none !important;
  }
}

/* Respect reduced-motion globally for the header — no transition should
   survive into the chrome even if a later bundle re-enables one. */
@media (prefers-reduced-motion: reduce) {
  .tgz411Header,
  .tgz411Header *,
  #navDrawer,
  #navDrawer * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   2. COMPACT, BALANCED TOOL CONTROLS
   The previous sizes (menu 54px, pickers/theme 46px) dominated a 78px bar.
   Drop to a consistent 38px touch target on desktop — still well above the
   44px fallback only where needed for primary taps (the menu button stays
   slightly larger as the single most-used control).
   ------------------------------------------------------------------------- */

/* 2a. Menu button — 44px (comfortable thumb target, the one big control) */
.tgz411MenuButton {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 13px !important;
  gap: 5px !important;
}
.tgz411MenuButton span {
  width: 20px !important;
  height: 2px !important;
}

/* 2b. Language / currency picker buttons — 38px (compact control cells) */
.tgz411Header .tgz411PickerButton,
body .tgz411Header .tgz411PickerButton,
html body .tgz411Header .tgz411PickerButton {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 11px !important;
}
.tgz411Header .tgz411PickerLabel,
body .tgz411Header .tgz411PickerLabel,
html body .tgz411Header .tgz411PickerLabel {
  font-size: 11px !important;
  letter-spacing: .015em !important;
}

/* 2c. Theme toggle — match the pickers (38px) on desktop, icon-only */
.tgz411ThemeButton,
.tgz411Header .tgz411ThemeButton {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 11px !important;
}
.tgz411ThemeButton .tgzThemeIcon {
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Tighten the gap between the three right-side tools so the row reads as
   one grouped cluster rather than three loose tiles. */
.tgz411HeaderTools {
  gap: 5px !important;
}

/* -------------------------------------------------------------------------
   3. RESPONSIVE GEOMETRY — single coherent ladder
   One breakpoint set, grid-flow at every width. The logo keeps a sensible
   cap so long translated brandmarks never crowd the tools off the bar.
   ------------------------------------------------------------------------- */

/* Tablet / small laptop (≤980px): primary nav hides, tools stay inline */
@media (max-width: 980px) {
  :root { --tgz411-header-h: 70px !important; }

  .tgz411MenuButton {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  .tgz411Header .tgz411PickerButton,
  body .tgz411Header .tgz411PickerButton {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
  .tgz411ThemeButton,
  .tgz411Header .tgz411ThemeButton,
  .tgz411HeaderTools > .tgz411ThemeButton {
    /* Phase 441 hides the theme toggle across the whole ≤980px range.
       Keep it visible everywhere — dark/light must always be one tap
       away. Outrank the hide with matching + stronger specificity. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    overflow: hidden;
  }
  .tgz411ThemeButton .tgzThemeIcon { font-size: 14px !important; }
  .tgz411ThemeButton [data-tgz-theme-label] {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tgz411Header .tgz411PickerLabel,
  body .tgz411Header .tgz411PickerLabel {
    font-size: 10.5px !important;
  }
  .tgz411LogoPlate {
    width: min(44vw, 200px) !important;
    min-width: 130px !important;
    height: 48px !important;
    padding: 5px 9px !important;
    border-radius: 13px !important;
  }
  .tgz411Logo img {
    height: 30px !important;
    max-height: 30px !important;
  }
}

/* Phone (≤460px): tighten the cluster, keep theme visible (icon-only) */
@media (max-width: 460px) {
  :root { --tgz411-header-h: 64px !important; }
  .tgz411MenuButton {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
  }
  .tgz411Header .tgz411PickerButton,
  body .tgz411Header .tgz411PickerButton {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 10px !important;
  }
  .tgz411ThemeButton,
  .tgz411Header .tgz411ThemeButton {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    /* Keep theme toggle visible on phones — override the header bundle's
       display:none. Dark/light must always be one tap away. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    overflow: hidden;
  }
  .tgz411ThemeButton .tgzThemeIcon { font-size: 14px !important; }
  .tgz411ThemeButton [data-tgz-theme-label] {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tgz411Header .tgz411PickerLabel,
  body .tgz411Header .tgz411PickerLabel {
    font-size: 10px !important;
  }
  .tgz411HeaderTools {
    gap: 4px !important;
    max-width: calc(50vw - 40px) !important;
  }
  .tgz411LogoPlate {
    width: min(42vw, 176px) !important;
    min-width: 120px !important;
    height: 44px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
  }
  .tgz411Logo img {
    height: 26px !important;
    max-height: 26px !important;
  }
}

/* Small phone (≤380px): everything shrinks proportionally, no element drops */
@media (max-width: 380px) {
  :root { --tgz411-header-h: 60px !important; }
  .tgz411MenuButton {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .tgz411Header .tgz411PickerButton,
  body .tgz411Header .tgz411PickerButton {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
  .tgz411ThemeButton,
  .tgz411Header .tgz411ThemeButton {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }
  .tgz411Header .tgz411PickerLabel,
  body .tgz411Header .tgz411PickerLabel {
    font-size: 9.5px !important;
  }
  .tgz411HeaderTools { gap: 3px !important; }
  .tgz411LogoPlate {
    width: min(40vw, 156px) !important;
    min-width: 110px !important;
    height: 40px !important;
    padding: 4px 7px !important;
  }
  .tgz411Logo img {
    height: 23px !important;
    max-height: 23px !important;
  }
}

/* Tiny phone (≤340px): currency picker yields to keep lang + theme reachable.
   Currency is still available inside the menu drawer. The Phase 456 rule
   "body .tgz411Header .tgz411Picker[data-tgz-picker] { display:block!important }"
   forces every picker visible, so this hide must outrank it with stronger
   specificity (html body ... + the explicit attribute value). */
@media (max-width: 340px) {
  html body .tgz411Header .tgz411Picker--currency,
  html body .tgz411Header .tgz411Picker[data-tgz-picker="currency"] {
    display: none !important;
  }
  .tgz411HeaderTools { max-width: 96px !important; }
  .tgz411LogoPlate {
    width: min(40vw, 144px) !important;
  }
}

/* -------------------------------------------------------------------------
   4. REFINEMENTS — focus ring, tap highlight, picker menu alignment
   ------------------------------------------------------------------------- */

/* Consistent, visible focus ring across all header controls. */
.tgz411Header button:focus-visible,
.tgz411Header a:focus-visible,
.tgz411Header .tgz411PickerButton:focus-visible {
  outline: 2px solid rgba(154, 240, 216, .7) !important;
  outline-offset: 2px !important;
}

/* Kill the iOS/Android tap-highlight flash on header controls — the
   bordered tile design is the feedback, the grey flash is noise. */
.tgz411Header,
.tgz411Header *,
#navDrawer,
#navDrawer * {
  -webkit-tap-highlight-color: transparent;
}

/* Picker dropdowns open flush to the right edge, never cause horizontal
   scroll on narrow screens. */
.tgz411PickerMenu {
  right: 0 !important;
  left: auto !important;
}

/* When a picker opens, nudge its tile so the user sees what they pressed. */
.tgz411Header .tgz411Picker.is-open .tgz411PickerButton,
.tgz411Header .tgz411PickerButton[aria-expanded="true"] {
  border-color: rgba(154, 240, 216, .5) !important;
  background: #0b1b22 !important;
}