/* ============================================
   VisualHull Shell (Header + Mega Menu + Footer)
   Option B CSS — Premium glass header + classy mega dropdown
   Fixes:
   1) Inner pages header background matches homepage vibe
   2) Dropdown click no longer vanishes (no hover-gap + opacity/visibility)
   3) Classy dropdown styling (no borders, soft glow)
   ============================================ */

:root{
  --vh-header-h: 96px;
  --vh-header-h-sticky: 72px;

  --container-max-width: 1180px;

  --radius-12: 12px;
  --radius-18: 18px;
  --radius-full: 999px;

  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;

  --vh-silver: rgba(226,232,240,.92);
  --vh-silver-dim: rgba(226,232,240,.78);

  /* INNER PAGES (default): solid glass */
  --vh-header-bg: rgba(15, 23, 42, 0.72);
  --vh-header-bg-sticky: rgba(15, 23, 42, 0.88);

  /* Dropdown panel */
  --vh-panel-bg: rgba(10, 16, 32, 0.86);
}

.container{
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Hide Hello theme’s default header/footer if they show up */
header#site-header, footer#site-footer{ display:none !important; }

/* Hide Elementor Theme Builder header/footer if present */
header.elementor-location-header,
footer.elementor-location-footer{ display:none !important; }

/* Prevent fixed header covering content (Home stays overlay via vh-home class) */
body:not(.vh-home):not(.front-page){
  padding-top: var(--vh-header-h);
}

body.vh-navOpen{ overflow:hidden; }

/* ======================
   HEADER
   ====================== */
.vh-header{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--vh-header-h);
  z-index: 9999;
  display:flex;
  align-items:center;
  transition: height var(--transition-base), box-shadow var(--transition-base);
}

.vh-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--vh-header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(148,163,184,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  opacity:1;
  transition: background var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base);
}

/* HOME: blend into hero (more transparent) */
body.vh-home .vh-header::before{
  background: rgba(15,23,42,.18);
  box-shadow: none;
}

.vh-header.is-sticky{
  height: var(--vh-header-h-sticky);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.vh-header.is-sticky::before{
  background: var(--vh-header-bg-sticky);
  opacity:1;
}

.vh-header__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.vh-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:44px;
}

.vh-logo{
  height:38px;
  width:auto;
  display:block;
}
.vh-logo--icon{
  display:none;
  height:44px;
  width:44px;
  border-radius: var(--radius-12);
}
.vh-header.is-sticky .vh-logo--full{ display:none; }
.vh-header.is-sticky .vh-logo--icon{ display:block; }

/* ======================
   NAV
   ====================== */
.vh-nav{
  display:flex;
  align-items:center;
  gap:14px;
}

.vh-menu{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.vh-menu > li{ position:relative; }

.vh-menu > li > a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: var(--radius-full);
  color: var(--vh-silver);
  font-weight: 650;
  font-size: 14px;
  letter-spacing: .2px;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.vh-menu > li > a:hover,
.vh-menu > li > a:focus-visible{
  background: rgba(255,255,255,.10);
  color:#fff;
}

/* ======================
   DROPDOWN (no hover-gap + premium glass)
   - visibility/opacity (not display:none) so hover doesn't drop
   - attached to parent (top:100%)
   - ::before creates a tiny “hover bridge” above the panel
   ====================== */
.vh-menu .sub-menu{
  position:absolute;
  top: 100%;
  left:0;
  min-width:260px;

  background:
    radial-gradient(900px 260px at 20% 0%, rgba(139,92,246,.12), rgba(0,0,0,0)),
    radial-gradient(900px 260px at 80% 0%, rgba(59,130,246,.10), rgba(0,0,0,0)),
    var(--vh-panel-bg);

  border-radius: var(--radius-18);
  padding: 12px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.06) inset;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  list-style:none;
  margin:0;

  /* show/hide */
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.vh-menu .sub-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px; /* hover bridge so submenu doesn't vanish */
}

/* open on hover & keyboard */
.vh-menu > li:hover > .sub-menu,
.vh-menu > li:focus-within > .sub-menu{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.vh-menu .sub-menu li a{
  display:block;
  padding:10px 12px;
  border-radius: 14px;
  color: var(--vh-silver);
  font-weight: 650;
  font-size: 14px;
  text-decoration:none;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.vh-menu .sub-menu li a:hover,
.vh-menu .sub-menu li a:focus-visible{
  background: rgba(255,255,255,.10);
  color:#fff;
  transform: translateX(2px);
}

/* ======================
   MEGA MENU
   Apply classes on top-level li: vh-mega + vh-mega--2 / vh-mega--3
   ====================== */
.vh-menu > li.vh-mega > .sub-menu{
  left:50%;
  width: min(1100px, calc(100vw - 48px));
  padding: 16px;

  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;

  /* override base dropdown transform */
  transform: translate(-50%, -6px);
}
.vh-menu > li.vh-mega.vh-mega--3 > .sub-menu{
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.vh-menu > li.vh-mega:hover > .sub-menu,
.vh-menu > li.vh-mega:focus-within > .sub-menu{
  transform: translate(-50%, 0);
}

/* Mega links: remove borders, add premium hover */
.vh-menu > li.vh-mega > .sub-menu > li > a{
  padding: 12px 12px;
  background: rgba(255,255,255,.06);
  border: none;
}
.vh-menu > li.vh-mega > .sub-menu > li > a:hover{
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* CTA */
.vh-navCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(148,163,184,.20);
  color:#fff;
  font-weight:750;
  font-size:14px;
  transition: transform var(--transition-fast), background var(--transition-fast);
  white-space:nowrap;
}
.vh-navCta:hover{ transform: translateY(-1px); background: rgba(255,255,255,.16); }

/* ======================
   MOBILE
   ====================== */
.vh-navToggle{
  display:none;
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(148,163,184,.20);
  background: rgba(15,23,42,.35);
  color:#fff;
  position:relative;
}
.vh-navToggle__lines,
.vh-navToggle__lines::before,
.vh-navToggle__lines::after{
  content:"";
  position:absolute;
  left:50%;
  width:18px;
  height:2px;
  background:#fff;
  transform: translateX(-50%);
  border-radius: 2px;
}
.vh-navToggle__lines{ top:50%; }
.vh-navToggle__lines::before{ top:-6px; }
.vh-navToggle__lines::after{ top:6px; }

.vh-navBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--transition-base);
  z-index: 9998;
}

.vh-subToggle{
  display:none; /* shown on mobile */
}

@media (max-width: 1024px){
  .vh-navToggle{ display:inline-flex; align-items:center; justify-content:center; }
  .vh-nav{
    position: fixed;
    top: var(--vh-header-h);
    left: 14px;
    right: 14px;

    background:
      radial-gradient(900px 260px at 20% 0%, rgba(139,92,246,.10), rgba(0,0,0,0)),
      var(--vh-panel-bg);

    border-radius: 18px;
    padding: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,.50);
  }
  .vh-nav.is-open{ display:flex; }
  body.vh-navOpen .vh-navBackdrop{ opacity:1; pointer-events:auto; }

  .vh-menu{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .vh-menu > li > a{
    width:100%;
    justify-content: space-between;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
  }

  /* sub-menu becomes accordion */
  .vh-menu .sub-menu{
    position: static;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform:none !important;
    display: none !important;

    width:100%;
    min-width:unset;
    padding: 8px;
    margin-top: 8px;
    border-radius: 14px;
  }
  .vh-menu li.is-expanded > .sub-menu{ display:block !important; }

  .vh-subToggle{
    display:inline-flex;
    width: 34px;
    height: 34px;
    margin-left: 8px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.20);
    background: rgba(255,255,255,.06);
    color: #fff;
    align-items:center;
    justify-content:center;
  }

  .vh-navCta{ width:100%; justify-content:center; padding:12px 14px; }
}

/* ======================
   FOOTER
   ====================== */
.vh-footer{
  background: rgba(15,23,42,.92);
  border-top: 1px solid rgba(148,163,184,.16);
  color: var(--vh-silver);
}
.vh-footer__top{
  display:grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 28px;
  padding: 54px 0 30px;
}
.vh-footer__tagline{ margin: 12px 0 0; color: var(--vh-silver-dim); line-height: 1.6; }

.vh-footer__links{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 18px;
}
.vh-footer__col h3{
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
}
.vh-footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.vh-footer__col a{ color: var(--vh-silver-dim); text-decoration:none; font-weight: 650; }
.vh-footer__col a:hover{ color:#fff; }

.vh-footer__bottom{
  display:flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(148,163,184,.12);
  color: rgba(226,232,240,.70);
  font-size: 13px;
}

@media (max-width: 900px){
  .vh-footer__top{
    grid-template-columns: 1fr;
  }
  .vh-footer__links{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

/* =========================================================
   HARD OVERRIDE: Inner pages header must be dark (not light)
   Paste at END of vh-shell.css
   ========================================================= */

body:not(.vh-home) .vh-header{
  background: transparent !important; /* ensure pseudo bg shows */
}

body:not(.vh-home) .vh-header::before{
  background: rgba(15, 23, 42, 0.90) !important;  /* darker */
  opacity: 1 !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28) !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
}

/* Keep home blended into hero */
body.vh-home .vh-header::before{
  background: rgba(15, 23, 42, 0.18) !important;
  box-shadow: none !important;
}

/* Sticky stays premium dark */
body:not(.vh-home) .vh-header.is-sticky::before{
  background: rgba(15, 23, 42, 0.94) !important;
}