/* Glassmorphism nav — pill-shaped links with a sliding indicator, layered
   on top of the existing nav/.nav-dropdown/.mob-nav/.theme-switch markup
   and JS (sertek-theme.js, sertek-auth.js). No HTML structure required
   beyond what every page already has. Tokens mirror the approved mockup
   (liquid-glass-nav prototype).

   This file is linked near the top of <head> (right after sertek-theme.js),
   BEFORE each page's own large inline <style> block. Every property below
   that the page's own CSS also sets therefore needs !important — without
   it, the page's later same-specificity rule silently wins the cascade
   and the override has no visible effect, even though it looks correct
   when testing by injecting a <style> at the end of <head> (which is NOT
   the real load order). Verified this the hard way — keep !important on
   every reskinned property, not just the ones that seemed to need it. */

:root {
  --glass-bg: rgba(255,255,255,.5);
  /* more opaque than --glass-bg: for panels that carry their own text
     over arbitrary page content (dropdown menu, mobile nav) — the thin
     50% used for the nav pill itself is unreadable at that size. */
  --panel-glass-bg: rgba(255,255,255,.97);
  --glass-border: rgba(29,39,51,.14);
  --glass-shadow: 0 20px 40px rgba(20,26,34,.14);
  --glass-inner: 0 1px 0 rgba(255,255,255,.7) inset;
}
html[data-theme="dark"] {
  --glass-bg: rgba(21,27,35,.5);
  --panel-glass-bg: rgba(21,27,35,.97);
  --glass-border: rgba(238,243,248,.16);
  --glass-shadow: 0 20px 40px rgba(0,0,0,.4);
  --glass-inner: 0 1px 0 rgba(255,255,255,.08) inset;
}

header {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}
html[data-theme="dark"] header {
  background: rgba(15,20,27,.62) !important;
}

nav {
  position: relative;
  gap: 0 !important;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 6px;
  box-shadow: var(--glass-inner), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.glass-indicator {
  /* top/height/width are computed in glassnav.js from the active
     element's own getBoundingClientRect() — these are only the
     pre-JS fallback values, kept so there's no flash of a 0-size
     indicator before the first paint. */
  position: absolute;
  top: 6px; left: 0;
  height: calc(100% - 12px);
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  transform: translateX(0);
  transition: transform .48s cubic-bezier(.22,1.4,.36,1), width .48s cubic-bezier(.22,1.4,.36,1), top .48s cubic-bezier(.22,1.4,.36,1), height .48s cubic-bezier(.22,1.4,.36,1), opacity .2s;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

nav > a,
.nav-drop-trigger {
  position: relative;
  z-index: 1;
}

nav > a.active,
.nav-drop-trigger.active {
  color: #fff !important;
}
nav > a.active:hover { color: #fff; background: transparent; }

.nav-dropdown { z-index: 1; }
.nav-drop-trigger { background: transparent; border-radius: 999px; }
.nav-dropdown:hover .nav-drop-trigger,
.nav-dropdown:focus-within .nav-drop-trigger { background: rgba(29,39,51,.06); }
.nav-dropdown:hover .nav-drop-trigger.active,
.nav-dropdown:focus-within .nav-drop-trigger.active { background: transparent; }

.nav-drop-menu {
  background: var(--panel-glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inner), var(--glass-shadow) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

/* theme switch: its own floating glass capsule, separate from the nav
   pill — matches the approved mockup, where .theme-switch and .glassnav
   are two distinct siblings with a gap between them. sertek-theme.js
   inserts it as the first child of <nav>, so a right margin stands in
   for that gap. "nav > .theme-switch" (specificity 0,1,1) already beats
   theme.js's own ".theme-switch" (0,1,0) rule, but kept !important below
   for the properties theme.js sets too, to stay robust to any load-order
   change. */
nav > .theme-switch {
  position: relative;
  z-index: 1;
  margin: 0 10px 0 0 !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inner), var(--glass-shadow) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
nav > .theme-switch button.active { background: var(--text) !important; }
html[data-theme="dark"] nav > .theme-switch button.active { background: var(--red) !important; }

.mob-nav {
  background: var(--panel-glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inner), var(--glass-shadow) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* The pill nav's full item set (theme switch, 6 links, dropdown, FAQ,
   Boutique, Se connecter, Contact, lang-switch) is wider than this
   site's own 1200px header column at any readable size — confirmed by
   measuring on the live site: it overflowed the header by ~280px at
   *every* width from 641px up past 1920px, silently clipped with no
   scrollbar (this predates the glass reskin — the pill border/shadow
   just made the cut-off obvious). Below 1450px we fall back to the
   mobile burger panel (already glass-styled above, fully keyboard/tap
   accessible); at or above 1450px we widen the header row itself and
   tighten the item sizing just enough to fit with margin to spare —
   verified on FR and DE (longest labels) with ~24px to spare at 1450px,
   holding all the way past 1920px since the header caps its own width. */
@media (min-width: 1450px) {
  .hdr { max-width: 1400px !important; }
  nav > a:not(.shop-btn):not(.login-btn):not(.ncta),
  .nav-drop-trigger { font-size: 13px !important; padding: 7px 9px !important; }
  nav .shop-btn { font-size: 12px !important; padding: 7px 13px !important; }
  nav .login-btn { font-size: 12px !important; padding: 7px 12px !important; }
  nav a.ncta { padding: 7px 15px !important; }
  nav .lang-switch { font-size: 12px !important; }
}
@media (max-width: 1449px) {
  nav { display: none !important; }
  .burger { display: flex !important; }
}

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