/**
 * ============================================================================
 * Site Glass Navigation
 * ============================================================================
 * Built entirely fresh per follow-up feedback. No selectors, values, or
 * techniques are carried over from the previous floating navigation
 * (removed completely in an earlier pass) -- new class names throughout
 * (.site-glass-nav*, not .clay-floating-nav / .header-menu / .clay-hamburger),
 * new markup (inc/site-glass-nav.php, rendered from header.php), one
 * single breakpoint deciding full vs. compact (no orientation-specific
 * rules, no JS-measured adaptive system, no !important patches).
 *
 * ONE SOURCE OF TRUTH: every size below is a custom property, set once
 * in :root, used everywhere it applies. Two states only:
 *   - full: logo + inline menu, burger hidden. >=1101px.
 *   - compact: logo + burger only, menu reachable via the overlay.
 *     <=1100px -- covers mobile phones, tablet portrait, and tablet/
 *     narrow-desktop landscape widths where the full menu wouldn't
 *     fit comfortably. The exact same compact treatment renders at
 *     every one of those widths; there is no separate mobile/tablet/
 *     landscape variant of it.
 *
 * Visible from first paint on every page (position: fixed, no
 * scroll-triggered reveal, no opacity delay) -- never appears "only
 * after scrolling".
 * ============================================================================
 */

:root {
  /* Bar geometry -- the pill's own width/position formula, used only
     here and in the one @media override below. */
  --glass-nav-max-width: 1180px;
  --glass-nav-side-gap: 24px;
  --glass-nav-top: 20px;

  /* Two height states -- full (desktop / wide tablet landscape) and
     compact (mobile, tablet portrait, narrow landscape). Each is a
     single value used identically everywhere that state applies. */
  --glass-nav-height-full: 72px;
  --glass-nav-height-compact: 64px;
  --glass-nav-height-compact-small: 56px;

  /* Glass surface -- restrained light-blue translucent tone (was the
     off-white family, rgba(247, 247, 243, ...)) -- per follow-up
     feedback ("the floating menu should remain translucent, but its
     glass tint should be blue, not off-white... a subtle light-blue
     translucent background so the bar feels consistent with the
     website branding"). Same alpha, same blur -- only the hue
     changed, identical in both states and at every width (desktop,
     laptop, iPad portrait/landscape, tablet portrait/landscape,
     mobile all share this one custom property). */
  --glass-nav-bg: rgba(220, 236, 248, 0.82);
  --glass-nav-border: 1px solid rgba(255, 255, 255, 0.45);
  --glass-nav-blur: 14px;
  --glass-nav-radius: 999px;
  --glass-nav-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);

  /* --ibox-blue removed -- per this correction, the hover colour is
     reverting to orange (the existing --brand-orange variable, defined
     in css/claymorphism-theme.css and already used throughout this
     file for the entrance-animation divider etc.), not blue. This
     variable is no longer referenced anywhere. */

  /* Content offset -- pushes page content below the fixed bar (see the
     body rule at the very end of this file) instead of letting it
     overlay hero content undetectably. Matches --glass-nav-top +
     --glass-nav-height-full + a small breathing gap; recalculated for
     the compact height at the same breakpoint the bar itself switches
     at, so it's always accurate to the bar's actual current height. */
  --glass-nav-content-offset: calc(var(--glass-nav-top) + var(--glass-nav-height-full) + 24px);
}

/* -------------------------------------------------------------------------
 * 1. The bar itself.
 * ---------------------------------------------------------------------- */

.site-glass-nav {
  position: fixed;
  top: var(--glass-nav-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - (var(--glass-nav-side-gap) * 2)), var(--glass-nav-max-width));
  height: var(--glass-nav-height-full);
  z-index: 10000;
  border-radius: var(--glass-nav-radius);
  background: var(--glass-nav-bg);
  border: var(--glass-nav-border);
  box-shadow: var(--glass-nav-shadow);
  -webkit-backdrop-filter: blur(var(--glass-nav-blur));
  backdrop-filter: blur(var(--glass-nav-blur));
  /* Smooth, not abrupt, if the height ever changes (the one breakpoint
     below) while resizing. Width tracks the viewport/window edge
     instantly, the same way any min()-based layout naturally does --
     only height benefits from easing. */
  transition: height 200ms ease;
}

/**
 * FOLLOW-UP CORRECTION: the previous pass (see the reasoning about
 * finding no conflicting rule, still accurate -- confirmed again, no
 * such rule exists anywhere in this codebase) defensively reasserted
 * the SAME base value at desktop widths, which did not resolve this
 * complaint -- confirming the base value itself (0.72 alpha,
 * blur(14px)) is genuinely too transparent at desktop widths
 * specifically, not that something was silently overriding it.
 * This is now a real, different value for desktop only -- not a
 * reassertion of the base one:
 *   background: rgba(220, 236, 248, 0.85) -- alpha raised from 0.72 to
 *     0.85 (same tint, "the same glass appearance", just less
 *     see-through) -- page text behind the bar is softened rather
 *     than clearly readable, without going fully opaque, per
 *     requirement.
 *   blur(20px) -- raised from 14px, so content behind is visually
 *     softer even where the tint alone doesn't fully obscure it.
 * Mobile and tablet are UNCHANGED -- this complaint was specifically
 * about desktop/computer ("On desktop/computer layouts, the floating
 * menu is still too transparent"), so only this >=1025px tier's
 * values changed; the base --glass-nav-bg/--glass-nav-blur variables
 * (used by mobile/tablet) are untouched. Bar size, position, border
 * radius, logo size, and menu spacing are all untouched -- only
 * background/blur. Hue subsequently updated to a restrained light-blue
 * tint per a further follow-up ("the floating menu tint should be
 * blue, not off-white"), alongside the base value above, same
 * reasoning -- alpha and blur themselves are unchanged by that switch.
 */
@media (min-width: 1025px) {
  .site-glass-nav {
    background: rgba(220, 236, 248, 0.85) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-glass-nav {
    transition: none;
  }
}

/* Fallback for browsers without backdrop-filter support: a slightly
   more opaque solid fill keeps text/icons clearly readable without the
   blur, since there's no glass effect to soften what's showing through
   underneath. Never a solid pure-white or off-white background, per
   requirement -- a restrained light-blue tint, matching the base
   glass surface above. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-glass-nav {
    background: rgba(220, 236, 248, 0.94);
  }
}

.site-glass-nav__inner {
  display: flex;
  align-items: center;
  /* justify-content: flex-start (was space-between, with the menu
     itself centred via flex:1/justify-content:center) -- per follow-up
     feedback, the logo must stay on the left and the menu must group
     on the right, not centre in the middle of the bar. The menu (and,
     in compact mode, the burger) now supplies its own margin-left:auto
     below to push itself to the right edge instead. */
  justify-content: flex-start;
  height: 100%;
  /* padding: 0 20px 0 28px (was 0 24px both sides) -- per follow-up
     feedback: slightly more breathing room on the left, next to the
     logo, and a touch more on the right so "Contact Us" (or the
     burger, in compact mode) never sits too close to the bar's own
     edge. */
  padding: 0 20px 0 28px;
  gap: 20px;
}

.site-glass-nav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 0;
  /* margin-right: 8px -- per follow-up feedback, reduces the
     previously excessive empty gap between the logo and the first
     menu link now that the menu is right-aligned rather than centred
     (which, combined with the old space-between layout, had been
     stretching this gap much wider than necessary). Small explicit
     value here rather than relying only on .site-glass-nav__inner's
     own gap, so the logo reads as clearly grouped with the left edge. */
  margin-right: 8px;
}

.site-glass-nav__logo img {
  display: block;
  /* height: 40px (was 32px) -- per an earlier follow-up, "slightly
     larger and clearer". Width stays auto, so this preserves the
     logo's own aspect ratio -- not a stretch. This is the baseline
     size for every width EXCEPT true desktop (see the
     @media (min-width: 1367px) override below) and the smallest
     phones (@media (max-width: 420px) further down, unchanged). */
  height: 40px;
  width: auto;
}

/* Desktop-only logo increase, per follow-up feedback: ~20% larger
   (40px * 1.2 = 48px) than the baseline above. Deliberately scoped to
   a NEW, wider breakpoint (1367px) rather than the nav's existing
   1140px full/compact switch -- the full inline menu can also render
   between 1141-1366px on a wide tablet-landscape window (e.g. a 12.9"
   iPad Pro in landscape, natively up to 1366px), and that's explicitly
   NOT supposed to get the larger logo, only genuine desktop widths.
   1367px is chosen as comfortably above the largest common tablet-
   landscape width, so nothing in the 1141-1366px tablet-landscape
   "full mode" band is affected -- only real desktop. height: auto
   (via width auto on the img, matching the baseline rule's own
   aspect-ratio-preserving approach) means this can never increase the
   bar's own height (--glass-nav-height-full, untouched, still
   controls the pill's total height independently) -- the logo simply
   renders larger within the same vertically-centred flex row
   (.site-glass-nav__inner, align-items: center, untouched), so it
   stays centred automatically. */
@media (min-width: 1367px) {
  .site-glass-nav__logo img {
    /* FLUID -- was a flat 48px, an instant jump right at this
       breakpoint (exactly the kind of "sudden jump between nearby
       viewport widths" this project's fluid pass is removing). Now a
       clamp() anchored to start growing AT this same 1367px boundary
       (so the 1141-1366px tablet-landscape "full nav" band above is
       still completely unaffected, preserving the original reasoning
       for choosing 1367px in the first place) and settle at the same
       48px ceiling by a 1920px viewport instead of snapping to it
       immediately. !important kept for the same defensive reason as
       before -- see the base 40px rule's own comment. */
    height: clamp(40px, 1.4467vw + 20.2242px, 48px) !important;
  }
}

.site-glass-nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  /* flex: 1 1 auto + justify-content: center (which centred the whole
     menu block in the middle of the bar, and was ALSO why the
     logo-to-first-link gap looked so large) REMOVED per follow-up
     feedback. margin-left: auto above is what pushes this group to
     the right edge now -- the menu no longer claims the bar's entire
     remaining width or centres within it. */
  flex: 0 0 auto;
}

.site-glass-nav__menu li {
  position: relative;
}

.site-glass-nav__menu a,
.site-glass-nav__dropdown-trigger {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary, #1b4c82);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-glass-nav__menu a:hover,
.site-glass-nav__menu a:focus-visible,
.site-glass-nav__menu a:active,
.site-glass-nav__dropdown-trigger:hover,
.site-glass-nav__dropdown-trigger:focus-visible,
.site-glass-nav__dropdown-trigger:active {
  /* color: var(--brand-orange) -- CORRECTED per an earlier follow-up
     (a previous pass had briefly changed this to blue, --ibox-blue,
     now removed entirely). Existing orange brand variable, already
     defined in css/claymorphism-theme.css and used elsewhere in this
     file. :active added per this follow-up -- orange now also applies
     for the brief moment a link is actually being clicked/pressed
     (mouse-down through mouse-up, or the equivalent tap duration on
     touch), matching the "temporary only" requirement below. Only
     colour changes here -- font-size, weight, spacing, and background
     are untouched. :focus-visible stays alongside :hover so keyboard
     navigation keeps the identical treatment. */
  color: var(--brand-orange, #f6921e);
}

/**
 * PERSISTENT current-page orange styling REMOVED ENTIRELY per this
 * follow-up ("the current page link must not remain orange... do not
 * use a persistent active-page orange state"). The
 * [aria-current="page"] / [aria-current="true"] rule that used to live
 * here (added in an earlier pass) is gone -- orange now only ever
 * appears for :hover/:focus-visible/:active above (per-interaction,
 * temporary), never as a standing "you are here" indicator. The
 * aria-current="page" HTML attribute itself is still generated by
 * ibox_glass_nav_menu_fallback() and Ibox_Glass_Nav_Walker
 * (inc/site-glass-nav.php) -- left in place deliberately, since it's
 * genuinely useful, unrelated accessibility information (screen
 * readers announce "current page" from it) that has nothing to do with
 * visual orange styling; only the CSS rule that turned it orange was
 * removed.
 *
 * NOT removed, and deliberately so -- flagging this scoping decision
 * directly: .site-glass-nav__dropdown-trigger[aria-expanded="true"]
 * (Products, orange while its dropdown is actually open) and
 * html.show-form .catalog-btn (Catalogue, orange while its modal is
 * actually open), a little further down in this file. Neither is a
 * "current page" state -- both are temporary, self-clearing UI states
 * tied to something the user currently has open, not something that
 * persists after a page loads. This request's explicit removal list
 * (aria-current="page", .current-menu-item, .current-menu-ancestor,
 * .is-active) didn't name either of these, so they were left as-is
 * rather than assumed to be included.
 */
.site-glass-nav__dropdown-trigger[aria-expanded="true"],
html.show-form .site-glass-nav__menu a.catalog-btn {
  color: var(--brand-orange, #f6921e);
}

/* Products dropdown -- shown on hover (mouse) or focus (keyboard),
   toggled via aria-expanded for assistive tech; a small JS hook (see
   js/site-glass-nav.js) mirrors aria-expanded on click/tap for
   touchscreens with a mouse-like pointer that don't trigger :hover
   reliably. */
.site-glass-nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  border-radius: 16px;
  background: rgba(220, 236, 248, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.site-glass-nav__menu-item--dropdown:hover .site-glass-nav__dropdown,
.site-glass-nav__menu-item--dropdown:focus-within .site-glass-nav__dropdown,
.site-glass-nav__dropdown-trigger[aria-expanded="true"] + .site-glass-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-glass-nav__dropdown li {
  white-space: nowrap;
}

.site-glass-nav__dropdown a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary, #1b4c82);
}

.site-glass-nav__dropdown a:hover,
.site-glass-nav__dropdown a:focus-visible,
.site-glass-nav__dropdown a:active {
  background: rgba(235, 245, 255, 0.6);
  /* color: var(--brand-orange) -- CORRECTED per an earlier follow-up,
     back from blue. Matches the main menu items above. :active added
     per this follow-up, for the temporary click/press moment.
     Background highlight on hover/focus/active is unchanged. */
  color: var(--brand-orange, #f6921e);
}

/* Persistent current-page styling for a Products submenu item REMOVED
   per this follow-up -- see the note above the main menu's own rule
   for the full rationale. */

@media (prefers-reduced-motion: reduce) {
  .site-glass-nav__dropdown {
    transition: none;
  }
}

/* Catalogue's ".catalog-btn" class is the SHARED trigger for the
   existing Request Catalogue popup (inc/catalog-section.php,
   js/main.js) -- unrelated to and untouched by this file. It only
   needs to visually match the other inline links here; its actual
   click behaviour comes entirely from that shared, pre-existing
   handler. */
.site-glass-nav__menu a.catalog-btn {
  cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 4. Burger trigger -- hidden in the full state, shown in compact.
 * ---------------------------------------------------------------------- */

.site-glass-nav__burger {
  display: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* margin-left: auto -- pushes the burger to the bar's right edge in
     compact mode (mirrors .site-glass-nav__menu's own margin-left:
     auto above, for when the burger is the only right-hand element
     instead of the menu). No effect while hidden (display: none) in
     the full state. */
  margin-left: auto;
}

.site-glass-nav__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary, #1b4c82);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Middle line only, per follow-up feedback: 25% shorter (22px * 0.75 =
   16.5px), removed from the LEFT side only -- right edge stays aligned
   with the top/bottom bars. The parent (.site-glass-nav__burger) uses
   align-items: center, so every bar is horizontally centred by
   default -- simply setting width: 75% here would shrink the bar
   inward from BOTH sides equally (wrong: that shortens both edges,
   not just the left). The compensating translateX(2.75px) -- half of
   the 5.5px removed (22px - 16.5px = 5.5px) -- shifts the shortened,
   still-centred bar right by exactly enough to put its right edge
   back at the same position the top/bottom bars' right edges are at,
   leaving only the left edge moved inward by the full 5.5px (25% of
   22px). Top/bottom bars (nth-child(1) and (3)), icon height/width,
   line thickness, line spacing, burger position, and the open/close
   animation (which only ever changes bar 2's opacity, never its
   transform, so this static transform is unaffected by that) are all
   completely untouched. */
.site-glass-nav__burger-bar:nth-child(2) {
  width: 16.5px;
  transform: translateX(2.75px);
}

/* Open state (JS toggles .site-glass-nav__burger--active) -- three
   bars morph into an X. */
.site-glass-nav__burger--active .site-glass-nav__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-glass-nav__burger--active .site-glass-nav__burger-bar:nth-child(2) {
  opacity: 0;
}

.site-glass-nav__burger--active .site-glass-nav__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-glass-nav__burger-bar {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
 * 5. THE ONE BREAKPOINT -- full <-> compact.
 *    Measured against the real combined width of: logo (now 40px tall,
 *    was 32px, per this refinement) + 7 menu items (including "Contact
 *    Us", the longest label) + dropdown affordance + inter-item gaps
 *    (28px x 6) + inner padding (28px left, 20px right, per this
 *    refinement) + a burger-safe margin. 1140px (was 1100px, raised
 *    slightly per this refinement to preserve the same safety margin
 *    now that the logo and padding are both a little larger) is
 *    comfortably above where that stops fitting cleanly at this
 *    font-size/weight/spacing, with headroom to spare -- chosen
 *    deliberately conservative so the switch always happens before any
 *    cramping, never at the edge of overlap. No device name, no
 *    orientation feature -- pure width, one rule, one place this
 *    decision is made.
 * ---------------------------------------------------------------------- */

@media (max-width: 1140px) {
  .site-glass-nav {
    height: var(--glass-nav-height-compact);
  }

  .site-glass-nav__menu {
    display: none;
  }

  .site-glass-nav__burger {
    display: flex;
  }
}

/* Smallest phones only: a touch more compact still, matching the
   overall proportions of the rest of the site at this width. Same
   compact STATE as everything else <=1100px (menu hidden, burger
   shown) -- only the exact height number is slightly smaller here. */
@media (max-width: 420px) {
  .site-glass-nav {
    height: var(--glass-nav-height-compact-small);
  }

  .site-glass-nav__logo img {
    height: 26px;
  }
}

/* -------------------------------------------------------------------------
 * 6. Full-screen burger overlay.
 * ---------------------------------------------------------------------- */

.site-glass-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  /* justify-content: flex-end (was center) -- THE ACTUAL BUG, per
     follow-up feedback: this is the overlay's own outer flex
     container, and .site-glass-nav-overlay__menu (its direct flex
     child) is a shrink-to-fit block, not full-width. Every previous
     pass correctly right-aligned the TEXT and LIST ITEMS inside that
     menu block -- but this property, on its PARENT, was centering the
     whole block itself on screen regardless of anything happening
     inside it. That's exactly why text was "technically right-aligned"
     while the group still sat in the middle -- two completely
     different elements, and only the inner one had been fixed so far.
     align-items: center (vertical centering) is unrelated and stays
     unchanged -- only the horizontal (justify-content) axis changes. */
  justify-content: flex-end;
  /* background: light blue (var(--clay-bg-1), the same token already
     used sitewide -- e.g. the Accessories page, the Home Page's "Our
     Product Categories" section) -- CHANGED per follow-up feedback,
     was a dark navy gradient. Still a fully solid, opaque colour (not
     the bar's own translucent glass) so hero text/imagery underneath
     can never show through once this is open -- only the colour
     direction changed, not the opacity/solidity requirement. */
  background: var(--clay-bg-1, #eaf6ff);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.site-glass-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.site-glass-nav-overlay[hidden] {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .site-glass-nav-overlay {
    transition: none;
  }
}

.site-glass-nav-overlay__close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  /* background/color: dark navy on a light chip (was white-on-transparent,
     for the previous dark background) -- CHANGED per follow-up
     feedback to stay clearly visible against the new light-blue
     overlay background. */
  background: rgba(27, 76, 130, 0.08);
  color: var(--primary, #1b4c82);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.site-glass-nav-overlay__close:hover {
  background: rgba(27, 76, 130, 0.16);
}

.site-glass-nav-overlay__menu {
  list-style: none;
  margin: 0 0 0 auto;
  /* max-width: 420px -- caps the menu column's own width, so on wide
     screens it reads as a contained right-aligned panel rather than a
     block that happens to be pushed to the right edge with no width
     limit of its own. margin-left: auto (above) + this max-width is
     what actually keeps it from ever stretching wider than needed;
     the overlay's own justify-content: flex-end (fixed above) is what
     positions this whole block against the right edge in the first
     place -- both were needed, not just one. */
  max-width: 420px;
  /* padding-right: 48px -- a consistent right-side margin between the
     menu and the overlay's own right edge. */
  padding: 0 48px 0 0;
  /* text-align: right + align-items: flex-end -- places every menu
     option on the right side instead of centred. align-items:
     flex-end right-aligns each <li>'s own box (this is a column flex
     layout, so align-items controls the cross/horizontal axis);
     text-align: right additionally right-aligns any text that wraps
     within an item. !important on both stays from an earlier
     defensive hardening pass. */
  text-align: right !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end !important;
  gap: 26px;
}

.site-glass-nav-overlay__menu > li {
  position: static;
  /* Entrance animation, per follow-up feedback: each item starts
     shifted right and transparent, then fades in while moving left
     into its final position -- only when the overlay is actually open
     (.site-glass-nav-overlay.is-open below), not on page load, so
     nothing is visible mid-animation before the overlay itself opens.
     350ms sits in the middle of the requested ~300-450ms range. This
     animates the menu items themselves, not the overlay's own
     background/close-button -- neither of those move. */
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 350ms ease, transform 350ms ease;
}

.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li {
  opacity: 1;
  transform: translateX(0);
}

/* Slight stagger -- 45ms between each of the 7 items (0ms, 45ms, 90ms
   ... 270ms) -- per follow-up feedback ("stagger... without making the
   animation slow"): the whole sequence still finishes within roughly
   350ms (last item's delay) + 350ms (its own duration) = ~620ms total,
   not a slow cascade. */
.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li:nth-child(1) { transition-delay: 0ms; }
.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li:nth-child(2) { transition-delay: 45ms; }
.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li:nth-child(3) { transition-delay: 90ms; }
.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li:nth-child(4) { transition-delay: 135ms; }
.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li:nth-child(5) { transition-delay: 180ms; }
.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li:nth-child(6) { transition-delay: 225ms; }
.site-glass-nav-overlay.is-open .site-glass-nav-overlay__menu > li:nth-child(7) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .site-glass-nav-overlay__menu > li {
    transition: none;
    transform: none;
  }
}

.site-glass-nav-overlay__menu a,
.site-glass-nav-overlay__menu .site-glass-nav__dropdown-trigger {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  /* font-weight: 400 (was 700) -- per follow-up feedback, normal
     weight instead of bold. Font size unchanged, so readability is
     unaffected. */
  font-weight: 400;
  color: var(--primary, #1b4c82);
  text-decoration: none;
}

.site-glass-nav-overlay__menu a:hover,
.site-glass-nav-overlay__menu .site-glass-nav__dropdown-trigger:hover {
  color: var(--brand-orange, #f6921e);
}

/* Products submenu inside the overlay -- inline/expanded rather than a
   floating popover (there's no room for that in a right-aligned column
   layout), toggled by the same aria-expanded state as the inline
   dropdown, via js/site-glass-nav.js. Its containing <li> is one of
   the 7 items above, so it already participates in that same
   staggered right-to-left entrance -- opening/closing the submenu
   itself (independent of the overlay opening) is a simple height
   reveal only, deliberately not a second slide-in animation layered on
   top, per the instruction not to over-animate this. */
.site-glass-nav-overlay__menu .site-glass-nav__dropdown {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  /* padding: 0 (was 14px 0 0, unconditionally) -- per follow-up
     feedback, fixes the larger gap that appeared between "Products"
     and "Catalogue". Even collapsed (max-height: 0, overflow: hidden),
     a nonzero padding-top here was still being counted toward this
     <li>'s contribution to the menu's own flex `gap`, adding roughly
     14px on top of the standard 26px gap every other pair of items
     uses. padding-top is now only added back in the expanded state
     immediately below, so the collapsed state takes up exactly as
     much space as any other single-line menu item. */
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  /* text-align: right + display: flex column + align-items: flex-end
     -- right-aligns the submenu the same way as the main menu above,
     so it visually aligns with the "Products" trigger it belongs to
     rather than defaulting to the list's natural left edge. */
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: max-height 0.3s ease, padding-top 0.3s ease;
}

/**
 * FIX, per follow-up feedback: a separate, more general rule further
 * up in this file (".site-glass-nav__dropdown-trigger[aria-expanded=
 * "true"] + .site-glass-nav__dropdown", shared with the desktop inline
 * bar's own hover-popover dropdown, since both use the same class
 * names) sets "transform: translateX(-50%) translateY(0)" on ANY
 * expanded dropdown, regardless of whether it's the inline bar's or
 * this overlay's. That's exactly what a floating popover needs
 * (centering itself under its trigger via a 50%-width leftward shift)
 * -- but it was silently re-applying inside the overlay too the moment
 * Products was actually clicked open, undoing this rule's own
 * "transform: none" above and shifting the whole submenu left by half
 * its own rendered width. That's what looked like the submenu being
 * pushed toward the centre, away from "Products" -- confirmed by
 * tracing the cascade, not guessed at. !important here reliably wins
 * over that other rule regardless of source order (matches the same
 * "!important to guarantee it wins" convention already used elsewhere
 * in this codebase, e.g. #header.ibox-nav-compact overrides
 * previously). Only transform/position are pinned this way -- max-height/
 * padding-top (the actual open/close animation) are set separately,
 * unaffected.
 */
.site-glass-nav-overlay__menu .site-glass-nav__dropdown-trigger[aria-expanded="true"] + .site-glass-nav__dropdown {
  position: static !important;
  transform: none !important;
  max-height: 400px;
  padding-top: 14px;
}

.site-glass-nav-overlay__menu .site-glass-nav__dropdown a {
  font-size: 18px;
  /* font-weight: 400 (was 500) -- per follow-up feedback, normal
     weight, matching the main menu items above. */
  font-weight: 400;
  padding: 8px 0;
  /* color: muted dark navy (was rgba(255,255,255,0.85), for the
     previous dark overlay background) -- CHANGED per an earlier
     follow-up, kept slightly muted relative to the main menu items
     above so the hierarchy (main item vs. submenu item) still reads
     clearly. */
  color: rgba(27, 76, 130, 0.75);
}

@media (max-width: 420px) {
  .site-glass-nav-overlay__menu a,
  .site-glass-nav-overlay__menu .site-glass-nav__dropdown-trigger {
    font-size: 22px;
  }

  .site-glass-nav-overlay__menu {
    gap: 20px;
    /* padding-right: 28px (was 48px) -- smaller right margin on small
       phones, per follow-up feedback, so the menu doesn't sit
       unnecessarily far from the edge on a narrow screen. max-width
       (420px, set on the base rule above) naturally stops constraining
       anything meaningful at this width anyway. */
    padding-right: 28px;
  }
}

/* Body scroll lock while the overlay is open -- js/site-glass-nav.js
   toggles this class on <html>. */
html.site-glass-nav-open,
html.site-glass-nav-open body {
  overflow: hidden;
  height: 100%;
}

/* -------------------------------------------------------------------------
 * 7. Page content offset.
 *    Because the bar is position: fixed, it doesn't push content down
 *    on its own -- this reserves that space instead, so hero sections
 *    render fully below the bar rather than starting underneath it.
 *    Recalculated at the same breakpoint the bar's own height changes,
 *    so it's always accurate; no separate number to keep in sync.
 * ---------------------------------------------------------------------- */

body {
  padding-top: var(--glass-nav-content-offset);
}

@media (max-width: 1140px) {
  :root {
    --glass-nav-content-offset: calc(var(--glass-nav-top) + var(--glass-nav-height-compact) + 20px);
  }
}

@media (max-width: 420px) {
  :root {
    --glass-nav-content-offset: calc(var(--glass-nav-top) + var(--glass-nav-height-compact-small) + 16px);
  }
}