/* ========= Scope / safety ========= */ 
.aperture-header, .aperture-header * { box-sizing: border-box; }
.aperture-header a { text-decoration: none; opacity:1 !important; filter:none !important; }

/* Kill DNN repaint inside THIS header */
.aperture-header :is(#nav-desktop,#nav-footer) a { color: inherit !important; }

/* ========= Tokens ========= */
.aperture-header{
  --ink:#1a1a1a; --ink2:#333; --muted:#6b7280; --accent:#0b5cab;
  --ring:#e5e7eb; --panel:#fff; --shadow:0 12px 24px rgba(0,0,0,.12);
  --radius:10px; --row:3rem;
  position: relative;
  z-index: 1;
}

/* Shared container: center + lock to 1200px */
.aperture-header .aperture-container{ max-width:1200px; margin:0 auto; }

/* ========= Eyebrow ========= */
.aperture-header .eyebrow-bar{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font: 600 13px/1.2 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: #e8edf4;
  position: relative;
  z-index: 3050;
}
.aperture-header .eyebrow-bar .aperture-container{
  display:flex; align-items:center; gap:14px;
  justify-content:space-between;
  min-height:36px; padding:6px 16px;
}

/* Left contact */
.aperture-header .contact-links{ display:inline-flex; align-items:center; gap:10px; }
.aperture-header .contact-links .sep{ color:rgba(232,237,244,.55); margin:0 4px; }
.aperture-header .contact-links a{ color:#ffffff !important; }
.aperture-header .contact-links a:hover{ color:#33ccff !important; }

/* Center search (native DNN search) */
.aperture-header .eyebrow-search{ flex:1 1 340px; display:flex; justify-content:center; }
.aperture-header .eyebrow-search > *{ width:100%; max-width:340px; }

/* DNN search internals (scoped) */
.aperture-header .eyebrow-search .dnnSearchBox,
.aperture-header .eyebrow-search input[type="text"]{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#e8edf4; border-radius:8px;
  height:34px; line-height:34px; padding:0 10px; width:100%;
}
.aperture-header .eyebrow-search input[type="text"]::placeholder{ color:rgba(232,237,244,.6); }
.aperture-header .eyebrow-search input[type="text"]:focus{
  outline:none; border-color:#00bfff; box-shadow:0 0 0 2px rgba(0,191,255,.25);
}

/* DNN “Go” button */
.aperture-header .eyebrow-search .dnnSearchButton,
.aperture-header .eyebrow-search input[type="submit"],
.aperture-header .eyebrow-search button{
  background:#00bfff; color:#fff; border:0; border-radius:8px;
  height:34px; padding:0 12px; margin-left:8px; font-weight:700; cursor:pointer;
}
.aperture-header .eyebrow-search .dnnSearchButton:hover,
.aperture-header .eyebrow-search input[type="submit"]:hover,
.aperture-header .eyebrow-search button:hover{
  background:#17b0eb;
}

/* Make DNN search results float ABOVE the menu */
.aperture-header .eyebrow-search,
.aperture-header .eyebrow-search * { position:relative; z-index: 3250; }
.dnnSearchResultPanel { z-index: 3300 !important; }

/* ========= Brand + centered menu ========= */
.aperture-header .logo-menu-bar{
  position: relative;
  z-index: 3100;

  /* Carbon/diagonal weave background behind the menu */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("https://www.gskill.com/styles/images/common/menu-bg.png") repeat-x center top #1e1e1e;
  background-size:
    auto, auto 80px;                 /* keep weave thickness consistent */
  border-bottom:1px solid rgba(255,255,255,.08);
}
.aperture-header .logo-menu-bar .aperture-container{
  display:grid; align-items:center;
  grid-template-columns: 1fr auto 1fr;  /* left brand, centered nav, right spacer */
  column-gap:16px; min-height:var(--row); padding:0 16px;
}

/* ===== Brand ===== */
.aperture-header .brand-wrap{ grid-column:1; position: relative; z-index: 3150; }

/* Ensure NO background box behind the logo or link */
.aperture-header .brand-wrap,
.aperture-header .brand-wrap a,
.aperture-header .brand-wrap .mark{
  background: transparent !important;
}

/* Bigger & slightly transparent SVG logo */
.aperture-header .brand-wrap .mark{
  height:34px;             /* was 28px */
  width:auto;
  opacity:.88;             /* overall transparency for the SVG */
  transition: opacity .15s ease, transform .15s ease;
}
.aperture-header .brand-wrap a:hover .mark,
.aperture-header .brand-wrap a:focus-visible .mark{
  opacity:1; transform: translateY(-1px);
}

/* Force any filled shapes to be transparent EXCEPT our blue bar */
.aperture-header .brand-wrap .mark [fill]:not([fill="#00bfff"]){ fill: transparent !important; }
.aperture-header .brand-wrap .mark [style*="fill:"]:not([style*="#00bfff"]){ fill: transparent !important; }

/* >>> MAKE STROKES WHITE (ONLY CHANGE REQUESTED) <<< */
.aperture-header .brand-wrap .mark rect,
.aperture-header .brand-wrap .mark path{
  stroke:#ffffff !important;  /* white strokes */
  stroke-opacity:1;
  fill-opacity:.9;
}

/* Keep the blue bar vivid */
.aperture-header .brand-wrap .mark [fill="#00bfff"]{ fill:#00bfff !important; }

.aperture-header .brand-wrap a{ display:flex; align-items:center; gap:10px; }

.aperture-header .brand-text{ display:inline-flex; flex-direction:column; line-height:1.1; }
.aperture-header .brand-title{ color:#00bfff !important; font:700 18px/1.1 "Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing:.1px; }
.aperture-header .brand-tag{ color:rgba(255,255,255,.75); font-weight:600; font-size:11px; letter-spacing:.2px; }

/* ========= Top-level menu (button-like) ========= */
.aperture-header nav.aperture-menu{ grid-column:2; justify-self:center; position: relative; z-index: 3180; }
.aperture-header nav.aperture-menu > ul,
.aperture-header nav.aperture-menu .root{
  display:flex; align-items:center; gap:6px;
  margin:0; padding:0; list-style:none;
}
.aperture-header nav.aperture-menu > ul > li,
.aperture-header nav.aperture-menu .root > li{ position:relative; list-style:none; }

/* Full clickable “pill” */
.aperture-header #nav-desktop > li > a,
.aperture-header #nav-footer  > li > a,
.aperture-header nav.aperture-menu > ul > li > a,
.aperture-header nav.aperture-menu .root > li > a{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  height:var(--row); line-height:var(--row);
  padding:0 12px; border-radius:8px;
  font:600 15px/1 "Proxima Nova","Segoe UI",Helvetica,Arial,sans-serif;
  letter-spacing:.2px; white-space:nowrap; background:transparent !important;
  color:#ffffff !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Small leading dot */
.aperture-header nav.aperture-menu > ul > li > a::before,
.aperture-header nav.aperture-menu .root > li > a::before{
  content:""; width:5px; height:5px; border-radius:999px; background:currentColor;
  display:inline-block; margin:0 6px 2px 0; opacity:.85;
}
.aperture-header nav.aperture-menu > ul > li:first-child > a::before,
.aperture-header nav.aperture-menu .root > li:first-child > a::before{ content:none; }

/* Caret for items with submenu (JS adds .has-sub) */
.aperture-header nav.aperture-menu > ul > li.has-sub > a::after{
  content:"\25BE"; font-size:.8em; opacity:.85;
}

/* —— Top-level HOVER/ACTIVE —— */
.aperture-header nav.aperture-menu > ul > li:hover > a,
.aperture-header nav.aperture-menu > ul > li:focus-within > a{
  background:#e9ecef; color:#00bfff !important;
}
.aperture-header nav.aperture-menu > ul > li:has(:hover) > a{
  background:#e9ecef; color:#00bfff !important;
}

/* —— CURRENT PAGE (selected/active) —— */
.aperture-header #nav-desktop > li.selected > a,
.aperture-header #nav-desktop > li.active > a,
.aperture-header #nav-footer  > li.selected > a,
.aperture-header #nav-footer  > li.active > a,
.aperture-header nav.aperture-menu > ul > li.selected > a,
.aperture-header nav.aperture-menu > ul > li.active > a{
  background:#e9ecef; color:#00bfff !important;
}

/* Non-shifting underline for CURRENT PAGE (TOP-LEVEL ONLY) */
.aperture-header #nav-desktop > li.selected > a::after,
.aperture-header #nav-desktop > li.active   > a::after,
.aperture-header #nav-footer  > li.selected > a::after,
.aperture-header #nav-footer  > li.active   > a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px;
  height:3px; background:#00bfff; border-radius:2px;
}

/* Keyboard focus ring (a11y) */
.aperture-header nav.aperture-menu > ul > li > a:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(0,191,255,.45);
}

/* ========= Mega panels (submenu) ========= */
.aperture-header :is(#nav-desktop,#nav-footer) > li{ position:relative; }

.aperture-header :is(#nav-desktop,#nav-footer) > li > ul{
  position:absolute; top:100%; left:-6px; z-index: 3200;
  visibility:hidden; opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s .16s;
  background:var(--panel); color:var(--ink); border:1px solid var(--ring);
  border-radius:12px; box-shadow:var(--shadow);

  /* COMPACT SPACING */
  padding:14px 18px;
  min-width:720px; max-width:1080px;
  display:grid; grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:8px 22px;
}
.aperture-header :is(#nav-desktop,#nav-footer) > li:hover > ul,
.aperture-header :is(#nav-desktop,#nav-footer) > li:focus-within > ul{
  visibility:visible; opacity:1; pointer-events:auto; transform:none; transition-delay:0s;
}
.aperture-header :is(#nav-desktop,#nav-footer) > li:last-child > ul{ right:0; left:auto; }

/* Panel column heading (tile on hover) */
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li > a{
  display:block;
  font:700 15px/1.3 "Proxima Nova","Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink2) !important; background:transparent !important;
  padding:6px 10px; margin:0 0 6px; border-bottom:1px solid #e5e7eb;
  border-radius:8px; transition:background-color .14s ease, color .14s ease;
}
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li > a:hover,
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li > a:focus{
  background:#e9ecef; color:#0b5cab !important;
}

/* Individual submenu ITEM tile */
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li ul > li > a{
  display:block; padding:8px 10px; margin:2px 0; border-radius:8px;
  color:var(--ink2) !important; transition: background-color .14s ease, color .14s ease;
}
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li ul > li > a:hover{
  background:#e9ecef; color:#0b5cab !important;
}

/* Ensure submenu body text uses dark color */
.aperture-header #nav-desktop li ul a,
.aperture-header #nav-footer  li ul a{ color:var(--ink2) !important; }

/* inner lists (reset) */
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul ul{
  position:static; display:block; padding:0; margin:0; border:0; background:transparent; box-shadow:none;
}

/* Row container with subtle dividers (compact) */
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li{
  list-style:none; margin:0; padding:6px 0 10px;
  border-bottom:1px solid #f1f3f6; border-radius:6px;
}
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li:last-child{ border-bottom:0; }

/* Size variants (compact widths) */
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul.columns-2{
  grid-template-columns:repeat(2,minmax(240px,1fr));
  min-width:600px;
}
.aperture-header :is(#nav-desktop,#nav-footer) > li > ul.columns-1{
  grid-template-columns:1fr;
  min-width:340px; max-width:500px;
}

/* Mobile tweaks */
@media (max-width:900px){
  .aperture-header .eyebrow-bar .aperture-container{ flex-wrap:wrap; gap:8px; }
  .aperture-header .eyebrow-search{ order:3; width:100%; }
  .aperture-header :is(#nav-desktop,#nav-footer) > li > ul{
    width:92vw; left:50%; transform:translateX(-50%) translateY(8px);
    grid-template-columns:1fr;
    padding:12px 14px;
    min-width:auto; max-width:none; gap:6px 14px;
  }
  .aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li > a{
    padding:6px 8px; margin:0 0 4px;
  }
  .aperture-header :is(#nav-desktop,#nav-footer) > li > ul > li ul > li > a{
    padding:8px 10px; margin:2px 0;
  }
}

/* Submenu visibility fix */
.aperture-header.tsc-skin :is(#nav-desktop,#nav-footer) > li > ul > li,
.aperture-header.tsc-skin :is(#nav-desktop,#nav-footer) > li > ul > li *{
  opacity:1 !important; filter:none !important; text-shadow:none !important;
}