/* ============================================================
 * Wave NAV 2.0 — INFOHAS Global Navigation (own code, Apple-like UX).
 * Consumes the INFOHAS Design System tokens only. Open/close is driven
 * purely by the .is-on class + CSS `visibility` transitions — there is
 * NO JS [hidden]-timer, so the NAV 1.0 flicker/stuck-menu bug cannot
 * occur. Panels sit flush under the bar (no dead-zone).
 * ============================================================ */

/* ---- Bar ---- */
.ih-global-nav{
  position:fixed; inset:0 0 auto 0; height:var(--ih-nav-h); z-index:50;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ih-bg) 82%, transparent),
    color-mix(in srgb, var(--ih-bg) 62%, transparent));
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--ih-line);
  transition:background .3s var(--ih-ease), border-color .3s var(--ih-ease), box-shadow .3s var(--ih-ease);
}
@media (prefers-color-scheme:dark){ .ih-global-nav{ background:rgba(0,0,0,.6); } }

/* NAV 2.1 — when a flyout is open the bar adopts the panel surface and drops
   its hairline, so bar + flyout read as ONE continuous component (no seam). */
.ih-global-nav.is-nav-open{
  background:color-mix(in srgb, var(--ih-surface) 96%, transparent);
  border-bottom-color:transparent;
}
@media (prefers-color-scheme:dark){
  .ih-global-nav.is-nav-open{ background:color-mix(in srgb, var(--ih-surface) 90%, transparent); }
}

.ih-global-nav__inner{
  max-width:var(--ih-maxw); height:100%; margin:0 auto;
  padding:0 var(--ih-space); display:flex; align-items:center; gap:18px;
}
.ih-global-nav__brand{
  font-weight:700; letter-spacing:.14em; font-size:15px; color:var(--ih-ink);
}

/* ---- Primary triggers ---- */
.ih-global-menu{ display:none; gap:22px; margin-left:8px; flex:1; }
.ih-global-menu__trigger{
  font-size:13px; color:var(--ih-ink); text-decoration:none;
  padding:6px 2px; position:relative; background:none; border:0; cursor:pointer;
  transition:opacity .2s var(--ih-ease);
}
.ih-global-menu__trigger::after{
  content:""; position:absolute; left:2px; right:2px; bottom:-2px; height:1.5px;
  background:var(--ih-ink); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ih-ease);
}
.ih-global-menu__trigger:hover,
.ih-global-menu__trigger[aria-expanded="true"]{ opacity:1; }
.ih-global-menu__trigger[aria-expanded="true"]::after{ transform:scaleX(1); }

.ih-global-nav__actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.ih-global-nav__signin{ display:none; }

/* ---- Burger (mobile) ---- */
.ih-global-nav__burger{
  width:28px; height:28px; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.ih-global-nav__burger span{ height:1.5px; background:var(--ih-ink); transition:.3s var(--ih-ease); }
.ih-global-nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.ih-global-nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ih-global-nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---- Overlay (dim + blur the page) ---- */
.ih-global-overlay{
  position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ih-ease), visibility 0s .35s;
}
.ih-global-overlay.is-on{ opacity:1; visibility:visible; transition:opacity .35s var(--ih-ease), visibility 0s; }

/* ---- Editorial flyout panels ---- */
.ih-global-panel{
  position:fixed; inset:var(--ih-nav-h) 0 auto 0; z-index:45;
  background:color-mix(in srgb, var(--ih-surface) 96%, transparent);
  -webkit-backdrop-filter:var(--ih-blur); backdrop-filter:var(--ih-blur);
  border-bottom:1px solid var(--ih-line);
  border-radius:0 0 var(--ih-radius-lg) var(--ih-radius-lg);
  box-shadow:var(--ih-shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ih-ease), transform .3s var(--ih-ease), visibility 0s .3s;
}
.ih-global-panel.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .3s var(--ih-ease), transform .3s var(--ih-ease), visibility 0s;
}
.ih-global-panel__inner{
  max-width:var(--ih-maxw); margin:0 auto;
  padding:clamp(34px,3.2vw,48px) var(--ih-space) clamp(34px,3.4vw,50px);
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(32px,4.5vw,72px);
  align-items:start;
}

.ih-global-column__title{
  margin:0 0 16px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ih-ink-soft);
}
.ih-global-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ih-global-link{
  display:inline-block; text-decoration:none; color:var(--ih-ink-soft);
  font-size:14px; padding:6px 0; transition:color .18s var(--ih-ease);
}
.ih-global-link:hover{ color:var(--ih-ink); }
.ih-global-link:active{ opacity:.6; }
.ih-global-menu__trigger:active{ opacity:.6; }
.ih-global-link--lead{
  font-size:19px; font-weight:500; color:var(--ih-ink); letter-spacing:-.01em;
  padding:8px 0;
}
/* Keep the existing brand blue (--ih-accent) for the primary device links. */
.ih-global-column--lead .ih-global-link--lead:hover,
.ih-global-column--lead .ih-global-link--lead:focus-visible{ color:var(--ih-accent); }

/* ---- Mobile fullscreen panel ---- */
.ih-global-mobile{
  position:fixed; inset:var(--ih-nav-h) 0 0 0; z-index:46;
  background:var(--ih-bg); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .32s var(--ih-ease), transform .32s var(--ih-ease), visibility 0s .32s;
}
.ih-global-mobile.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .32s var(--ih-ease), transform .32s var(--ih-ease), visibility 0s;
}
.ih-global-mobile__inner{ padding:16px var(--ih-space) 60px; display:flex; flex-direction:column; gap:4px; }
.ih-global-mobile__group{ border-bottom:1px solid var(--ih-line); padding:4px 0; }
.ih-global-mobile__summary{
  list-style:none; cursor:pointer; padding:16px 2px; font-size:19px;
  font-weight:600; color:var(--ih-ink); display:flex; justify-content:space-between; align-items:center;
}
.ih-global-mobile__summary::-webkit-details-marker{ display:none; }
.ih-global-mobile__summary::after{ content:"+"; color:var(--ih-ink-soft); font-weight:400; font-size:22px; }
.ih-global-mobile__group[open] .ih-global-mobile__summary::after{ content:"–"; }
.ih-global-mobile__body{ padding:0 2px 16px; }
.ih-global-mobile__cta{ display:inline-block; color:var(--ih-accent); font-size:14px; font-weight:500; text-decoration:none; margin:0 0 12px; }
.ih-global-mobile__coltitle{ margin:14px 0 6px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ih-ink-soft); }
.ih-global-mobile__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ih-global-mobile__links a{ display:block; padding:9px 0; color:var(--ih-ink); text-decoration:none; font-size:15px; }
.ih-global-mobile__signin{ margin-top:20px; width:100%; justify-content:center; }

/* ---- Focus visibility (a11y) ---- */
.ih-global-menu__trigger:focus-visible,
.ih-global-link:focus-visible,
.ih-global-nav__brand:focus-visible,
.ih-global-nav__burger:focus-visible,
.ih-global-mobile__summary:focus-visible,
.ih-global-mobile__links a:focus-visible{
  outline:2px solid var(--ih-accent); outline-offset:3px; border-radius:4px;
}

/* ---- Desktop / mobile switch ---- */
@media (min-width:820px){
  .ih-global-menu{ display:flex; }
  .ih-global-nav__signin{ display:inline-flex; }
  .ih-global-nav__burger{ display:none; }
  .ih-global-mobile{ display:none; }
}
@media (max-width:819px){
  .ih-global-panel{ display:none; }   /* flyouts are desktop-only; mobile uses the fullscreen panel */
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .ih-global-nav, .ih-global-overlay, .ih-global-panel, .ih-global-mobile,
  .ih-global-menu__trigger, .ih-global-menu__trigger::after,
  .ih-global-link, .ih-global-nav__burger span{
    transition:none !important;
  }
}