/**
 * Vector Lex — optical glass header
 *
 * Isolated final layer for the Astra header capsule.
 * Loaded after page-specific styles to keep the header material consistent
 * across the shop, product pages, journal, services and regular pages.
 */

/* Outer Astra layers stay transparent. The optical material belongs only
   to the compact inner capsule. */
#masthead.site-header,
#masthead #ast-desktop-header,
#masthead #ast-mobile-header,
#masthead .ast-main-header-wrap,
#masthead .main-header-bar-wrap,
#masthead .main-header-bar,
#masthead .ast-primary-header-bar,
#masthead .site-primary-header-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Keep the WordPress site name available to metadata and system services,
   while the compact visual header uses only the custom logo. Hiding the
   complete Astra title wrapper also removes its reserved horizontal space. */
#masthead .ast-site-title-wrap,
#masthead .site-title,
#masthead .site-description {
  display: none !important;
}

/* A nearly opaque fallback is intentional: browsers without backdrop-filter
   must keep navigation readable over every page background. */
#masthead #ast-desktop-header .site-above-header-wrap.ast-container,
#masthead #ast-mobile-header .ast-above-header-bar.site-above-header-wrap {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  border-color: rgba(112, 168, 240, 0.36) !important;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.07) 35%,
      rgba(104, 169, 255, 0.06) 78%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(249, 252, 255, 0.96) 48%,
      rgba(239, 247, 255, 0.95) 100%
    ) !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(53, 116, 205, 0.1),
    0 16px 40px rgba(10, 42, 86, 0.11),
    0 3px 10px rgba(10, 42, 86, 0.045) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Real optical glass for supporting browsers. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #masthead #ast-desktop-header .site-above-header-wrap.ast-container {
    background:
      linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(255, 255, 255, 0.08) 34%,
        rgba(104, 169, 255, 0.07) 78%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(248, 252, 255, 0.76) 48%,
        rgba(232, 243, 255, 0.68) 100%
      ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
  }

  /* Mobile glass is deliberately denser and cheaper to render. */
  #masthead #ast-mobile-header .ast-above-header-bar.site-above-header-wrap {
    background:
      linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.06) 38%,
        rgba(104, 169, 255, 0.055) 82%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.93) 0%,
        rgba(248, 252, 255, 0.89) 52%,
        rgba(235, 245, 255, 0.86) 100%
      ) !important;
    -webkit-backdrop-filter: blur(16px) saturate(128%) !important;
    backdrop-filter: blur(16px) saturate(128%) !important;
  }
}

/* ---------------------------------------------------------
   Primary navigation
   --------------------------------------------------------- */

#masthead .main-header-menu > .menu-item > .menu-link {
  background: transparent !important;
  box-shadow: none;
  color: var(--vl-copy, #18365f) !important;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .menu-item:hover > .menu-link,
#masthead .main-header-menu > .menu-item:focus-within > .menu-link {
  background: rgba(224, 239, 255, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(79, 145, 232, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  color: var(--vl-blue, #075be8) !important;
}

#masthead
  .main-header-menu
  > .menu-item.current-menu-item
  > .menu-link,
#masthead
  .main-header-menu
  > .menu-item.current-menu-ancestor
  > .menu-link,
#masthead
  .main-header-menu
  > .menu-item.current_page_item
  > .menu-link,
#masthead
  .main-header-menu
  > .menu-item.current_page_parent
  > .menu-link {
  background:
    linear-gradient(
      180deg,
      rgba(238, 247, 255, 0.96) 0%,
      rgba(211, 231, 255, 0.74) 100%
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(79, 145, 232, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 5px 12px rgba(30, 87, 164, 0.065);
  color: var(--vl-blue, #075be8) !important;
}

#masthead .main-header-menu > .menu-item > .menu-link:focus-visible {
  outline: 2px solid var(--vl-blue, #075be8);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Account CTA — the saturated glossy cube edge
   --------------------------------------------------------- */

.vl-header-btn {
  border-color: rgba(1, 55, 158, 0.62) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.04) 28%,
      rgba(255, 255, 255, 0) 48%
    ),
    linear-gradient(180deg, #1677ff 0%, #075be8 52%, #0348c5 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(0, 39, 123, 0.26),
    0 12px 26px rgba(7, 91, 232, 0.22) !important;
  color: #fff !important;
  filter: none;
}

.vl-header-btn:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.23) 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0) 50%
    ),
    linear-gradient(180deg, #126ff3 0%, #075ce7 52%, #0347bf 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 39, 123, 0.28),
    0 15px 30px rgba(7, 91, 232, 0.27) !important;
  color: #fff !important;
  filter: none;
  transform: translateY(-1px);
}

.vl-header-btn:active {
  box-shadow:
    inset 0 2px 5px rgba(0, 37, 116, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 18px rgba(7, 91, 232, 0.19) !important;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   Desktop services dropdown — related, but denser glass
   --------------------------------------------------------- */

@media (min-width: 922px) {
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu {
    overflow: visible !important;
    border-color: rgba(112, 168, 240, 0.34) !important;
    background:
      linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.03) 44%,
        rgba(104, 169, 255, 0.045) 100%
      ),
      rgba(249, 252, 255, 0.97) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(53, 116, 205, 0.08),
      0 20px 46px rgba(10, 42, 86, 0.14),
      0 4px 12px rgba(10, 42, 86, 0.05) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu {
      background:
        linear-gradient(
          120deg,
          rgba(255, 255, 255, 0.24) 0%,
          rgba(255, 255, 255, 0.035) 44%,
          rgba(104, 169, 255, 0.05) 100%
        ),
        rgba(249, 252, 255, 0.92) !important;
      -webkit-backdrop-filter: blur(20px) saturate(132%) !important;
      backdrop-filter: blur(20px) saturate(132%) !important;
    }
  }

  /* The old solid arrow reveals the surface seam; a clean floating card
     looks more precise and keeps the invisible hover bridge intact. */
  .ast-desktop
    .main-header-menu
    > .menu-item-has-children
    > .sub-menu::before {
    display: none !important;
  }

  .ast-desktop
    .main-header-menu
    > .menu-item-has-children
    > .sub-menu
    > li
    > a {
    box-shadow: none;
  }

  .ast-desktop
    .main-header-menu
    > .menu-item-has-children
    > .sub-menu
    > li
    > a:hover,
  .ast-desktop
    .main-header-menu
    > .menu-item-has-children
    > .sub-menu
    > li.current-menu-item
    > a,
  .ast-desktop
    .main-header-menu
    > .menu-item-has-children
    > .sub-menu
    > li.current_page_item
    > a,
  .ast-desktop
    .main-header-menu
    > .menu-item-has-children
    > .sub-menu
    > li.current-menu-ancestor
    > a {
    background:
      linear-gradient(
        180deg,
        rgba(238, 247, 255, 0.9),
        rgba(217, 234, 255, 0.68)
      ) !important;
    box-shadow:
      inset 0 0 0 1px rgba(79, 145, 232, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }
}

/* ---------------------------------------------------------
   Mobile header controls
   --------------------------------------------------------- */

@media (max-width: 921px) {
  #masthead #ast-mobile-header .ast-above-header-bar.site-above-header-wrap {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(53, 116, 205, 0.09),
      0 11px 28px rgba(10, 42, 86, 0.095),
      0 2px 8px rgba(10, 42, 86, 0.04) !important;
  }

  #masthead .ast-button-wrap .menu-toggle {
    border-color: rgba(112, 168, 240, 0.38) !important;
    background:
      linear-gradient(
        180deg,
        rgba(246, 251, 255, 0.94),
        rgba(220, 237, 255, 0.78)
      ) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 0 0 1px rgba(79, 145, 232, 0.08);
    color: var(--vl-blue, #075be8) !important;
  }

  #masthead .ast-button-wrap .menu-toggle:hover,
  #masthead .ast-button-wrap .menu-toggle[aria-expanded="true"] {
    border-color: rgba(79, 145, 232, 0.5) !important;
    background:
      linear-gradient(
        180deg,
        rgba(235, 247, 255, 0.98),
        rgba(203, 228, 255, 0.84)
      ) !important;
  }
}

/* ---------------------------------------------------------
   Accessibility and rendering preferences
   --------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  #masthead #ast-desktop-header .site-above-header-wrap.ast-container,
  #masthead #ast-mobile-header .ast-above-header-bar.site-above-header-wrap,
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu {
    background: rgba(249, 252, 255, 0.98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #masthead .main-header-menu > .menu-item > .menu-link,
  #masthead .ast-button-wrap .menu-toggle,
  .vl-header-btn {
    transition-duration: 0.01ms !important;
  }

  .vl-header-btn:hover,
  .vl-header-btn:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  #masthead #ast-desktop-header .site-above-header-wrap.ast-container,
  #masthead #ast-mobile-header .ast-above-header-bar.site-above-header-wrap,
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #masthead .main-header-menu > .menu-item > .menu-link,
  .vl-header-btn,
  #masthead .ast-button-wrap .menu-toggle {
    forced-color-adjust: auto;
  }
}