/* Standalone recreation of the Streakwave desktop/sticky navigation behavior. */
.site-header { position: relative; z-index: 20; }
.masthead { min-height: 112px; }
.header-context { margin-left: auto; color: var(--muted); font-size: .8rem; font-weight: 500; }
.mega-nav-shell { border-top: 1px solid var(--line); background: #fff; }
.sticky-brand { display: none; }
.main-nav { width: var(--shell); margin: auto; }
.mega-nav-list { display: flex; align-items: stretch; min-height: 50px; margin: 0; padding: 0; list-style: none; }
.mega-nav-item { position: relative; display: flex; align-items: stretch; }
.mega-nav-item.nav-right { margin-left: auto; }
.mega-nav-item > a, .mega-trigger { display: inline-flex; align-items: center; gap: .45rem; min-height: 50px; padding: 0 .75rem; border: 0; background: transparent; color: var(--ink); font: 500 .84rem/1 "new-hero", sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mega-nav-item > a:hover, .mega-nav-item > a:focus-visible, .mega-trigger:hover, .mega-trigger:focus-visible, .mega-nav-item.is-open > .mega-trigger { background: var(--soft); color: var(--navy); outline: 0; }
/* The Font Awesome icon is visually replaced by two CSS strokes: caret → close X. */
.mega-caret { position:relative; display:inline-block; width:14px; height:14px; color:var(--swav-colorwheel-muted-icon,#888); font-size:0; }
.mega-caret::before,.mega-caret::after { position:absolute; top:5px; width:8px; height:2px; border-radius:1px; background:currentColor; content:""; transition:left .2s cubic-bezier(.2,.8,.2,1),right .2s cubic-bezier(.2,.8,.2,1),top .2s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1),background-color .18s ease; }
.mega-caret::before { left:1px; transform:rotate(45deg); }
.mega-caret::after { right:1px; transform:rotate(-45deg); }
.mega-trigger:hover .mega-caret,.mega-trigger:focus-visible .mega-caret { color:var(--navy); }
.mega-nav-item.is-open .mega-caret { color:var(--purple); }
.mega-nav-item.is-open .mega-caret::before { top:6px; left:3px; transform:rotate(45deg); }
.mega-nav-item.is-open .mega-caret::after { top:6px; right:3px; transform:rotate(-45deg); }
.nav-accent { color: var(--purple) !important; }
.mega-panel { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 580px; padding: 1.1rem; border: 1px solid var(--line); border-top: 3px solid var(--navy); background: #fff; box-shadow: 0 12px 28px rgba(31,58,109,.14); }
.mega-panel[hidden] { display: none !important; }
.mega-panel--narrow { min-width: 230px; display: grid; gap: .2rem; }
.mega-panel--narrow a { padding: .55rem .65rem; color: var(--ink); font-size: .84rem; text-decoration: none; }
.mega-panel--narrow a:hover { background: var(--soft); color: var(--navy); }
.mega-label { margin: 0 0 .8rem; color: var(--purple); font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.mega-columns { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 1.2rem; }
.mega-columns > div { display: grid; align-content: start; gap: .25rem; }
.mega-columns b { margin-bottom: .35rem; color: var(--navy); font-size: .78rem; font-weight: 700; }
.mega-columns a { padding: .35rem .45rem; color: var(--ink); font-size: .82rem; text-decoration: none; }
.mega-columns a:hover { background: var(--soft); color: var(--purple); }
.mega-feature { min-height: 144px; padding: 1rem; border-left: 3px solid var(--gold); background: var(--navy); color: #fff; }
.mega-feature span { color: var(--gold); font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.mega-feature strong { margin-top: .35rem; font-size: 1.05rem; font-weight: 500; line-height: 1.1; }
.mega-feature p { margin: .45rem 0 0; color: #dce5f8; font-size: .76rem; }

/*
  Desktop sticky state: keep the full header's original height in the page,
  then fix only the navigation bar. This prevents a layout-height change from
  changing scrollY and repeatedly toggling the sticky state.
*/
@media (min-width: 851px) {
  .site-header.is-sticky { height: 195px; }
  .site-header.is-sticky .utility, .site-header.is-sticky .masthead { display: none; }
  .site-header.is-sticky .mega-nav-shell { position: fixed; top: 0; right: 0; left: 0; z-index: 40; display: flex; align-items: center; gap: 1.25rem; min-height: 50px; padding: 0 40px; border-top: 0; background: #fff; box-shadow: 0 2px 10px color-mix(in srgb, #000 10%, transparent); }
  .site-header.is-sticky .sticky-brand { display: flex; flex: 0 0 auto; align-items: center; }
  /* Keep brand recognition in the compact state without crowding navigation. */
  .site-header.is-sticky .sticky-brand img { display: block; width: 150px; height: auto; }
  .site-header.is-sticky .main-nav { flex: 1 1 auto; width: auto; max-width: min(1680px, calc(100vw - 80px)); margin: 0; }
}

@media (max-width: 850px) {
  .masthead { min-height: 78px; }
  .header-context { display: none; }
  .menu-toggle { margin-left: auto; }
  .mega-nav-shell { border-top: 0; }
  .main-nav { display: none; width: 100%; }
  .main-nav.open { display: block; }
  .mega-nav-list { display: block; min-height: 0; padding: .45rem 6vw 1rem; }
  .mega-nav-item, .mega-nav-item.nav-right { display: block; margin: 0; }
  .mega-nav-item > a, .mega-trigger { justify-content: space-between; width: 100%; min-height: 48px; padding: 0 .25rem; border-bottom: 1px solid var(--line); }
  .mega-panel, .mega-panel--narrow { position: static; min-width: 0; margin: 0; padding: .8rem; border: 0; border-left: 3px solid var(--gold); box-shadow: none; }
  .mega-columns { grid-template-columns: 1fr; }
  .mega-feature { display: none !important; }
  .site-header.is-sticky .masthead { display: flex; min-height: 68px; }
  .site-header.is-sticky .utility { display: none; }
}