/* website-285-v2 — header + search-overlay styles.

   Extracted verbatim from the inline <style> block that v1 keeps at the bottom
   of components/header.hbs, and imported as the LAST line of theme.css.

   Why it moved: the block sits ~200 lines AFTER the markup it styles, and none
   of the head stylesheets define these classes. So the browser painted the
   header unstyled first — most visibly the logo, whose source PNG is 1200x1200
   against a 76/88px rendered height, i.e. ~16x too big for one frame before the
   rule landed. `#ai_header { position: fixed }` and the nav metrics are in the
   same block, so the whole header reflowed.

   Importing it from theme.css makes it render-blocking, so the header is correct
   at first paint. Cascade position is unchanged: last in the theme.css chain puts
   it immediately after overrides.css and still before the page-level and footer
   <style> blocks, exactly where it sat as inline CSS. */

  /* === Header base — LIGHT === */
  #ai_header {
    background-color: rgba(250, 250, 250, 0.0);
    backdrop-filter: saturate(160%) blur(0px);
    -webkit-backdrop-filter: saturate(160%) blur(0px);
    border-bottom: 1px solid transparent;
    transition: background-color 350ms ease, backdrop-filter 350ms ease, border-color 350ms ease;
    z-index: 1000 !important;
    overflow: visible;
  }
  body.scrolled #ai_header,
  body:not(.is-home) #ai_header {
    /* Amber-tinted warm white — subtle prestige cream instead of cold blue */
    background-color: rgba(252, 249, 240, 0.92);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom-color: var(--gold-100);
  }

  /* When hero photo is behind the header (homepage top), use white text + invert logo */
  body.is-home:not(.scrolled) #ai_header {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body.is-home:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
  body.is-home:not(.scrolled) .nav-link:hover { color: var(--gold-500); }
  body.is-home:not(.scrolled) .nav-icon-btn { color: rgba(255, 255, 255, 0.9); }
  body.is-home:not(.scrolled) .nav-icon-btn:hover { color: var(--gold-500); }
  body.is-home:not(.scrolled) .nav-link-btn {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
  }
  body.is-home:not(.scrolled) .nav-link-btn:hover {
    color: var(--black); background: var(--gold-500); border-color: var(--gold-500);
  }
  body.is-home:not(.scrolled) #ai_header .cms-btn-primary {
    background: var(--gold-500); color: var(--black); border-color: var(--gold-500);
  }
  body.is-home:not(.scrolled) #ai_header .cms-btn-primary:hover {
    background: transparent; color: var(--white); border-color: var(--white);
  }
  body.is-home:not(.scrolled) .mobile-toggle {
    background: rgba(250, 250, 250, 0.96);
    border-color: rgba(255, 255, 255, 0.86);
    color: var(--black);
    box-shadow: 0 10px 30px rgba(10, 10, 10, 0.22);
  }

  .header-inner { max-width: 1440px; }

  .mobile-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-toggle,
  .mobile-menu-close {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-toggle {
    min-height: 44px;
    gap: 8px;
    padding: 0 14px;
    background: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
    box-shadow: 0 8px 22px rgba(10, 10, 10, 0.16);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  }

  .mobile-toggle:hover,
  .mobile-toggle:focus-visible {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--black);
    outline: none;
  }

  .mobile-toggle-text {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }

  #overlay {
    background: rgba(10, 10, 10, 0.72);
    z-index: 1005;
    display: none;
  }

  .mobile-menu-panel {
    z-index: 1010;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh;
    background-color: var(--bone) !important;
    color: var(--charcoal);
    border-right: 1px solid var(--steel-200);
    box-shadow: 28px 0 80px rgba(10, 10, 10, 0.28);
    opacity: 1 !important;
    isolation: isolate;
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
    transition: transform 300ms ease, visibility 300ms ease;
  }

  .mobile-menu-panel.is-open {
    background-color: var(--bone) !important;
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  .mobile-menu-state:checked ~ .mobile-menu-panel {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh;
    background-color: var(--bone) !important;
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  .mobile-menu-panel > div {
    position: relative;
    z-index: 1;
    min-height: 100%;
    background-color: var(--bone) !important;
  }

  .mobile-menu-header,
  .mobile-menu-actions,
  .mobile-contact {
    border-color: var(--steel-200);
  }

  .mobile-menu-close {
    color: var(--charcoal);
    transition: color 200ms ease;
  }

  .mobile-menu-close:hover {
    color: var(--black);
  }

  .mobile-contact .cms-mono,
  .mobile-contact-email {
    color: var(--steel-700);
  }

  .mobile-contact-phone {
    font-family: var(--font-display);
    color: var(--black);
  }

  .header-accent-bar {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--steel-300) 20%, var(--steel-300) 80%, transparent 100%);
    opacity: 0;
    transition: opacity 350ms ease;
  }
  body.scrolled .header-accent-bar { opacity: 0.7; }

  /* === Logo === */
  .header-logo-mark {
    height: 76px;
    width: auto;
    display: block;
  }
  @media (min-width: 1024px) {
    .header-logo-mark { height: 88px; }
  }

  /* === Logo sparkle (subtle silver glints embedded in the WA mark) === */
  .logo-sparkle-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
  }
  .sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
      0 0 4px #ffffff,
      0 0 10px rgba(255, 255, 255, 0.95),
      0 0 18px rgba(190, 220, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: scale(0) rotate(0deg);
    will-change: transform, opacity;
    mix-blend-mode: screen;
  }
  /* 4-point diamond star flares — long, thin, bright at the core */
  .sparkle::before,
  .sparkle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 1.5px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.0) 12%,
      rgba(190,220,255,0.6) 38%,
      #ffffff 50%,
      rgba(190,220,255,0.6) 62%,
      rgba(255,255,255,0.0) 88%,
      transparent 100%);
    transform: translate(-50%, -50%);
    border-radius: 1px;
  }
  .sparkle::after { transform: translate(-50%, -50%) rotate(90deg); }

  /* Positioned ON the WA letters (logo content sits in the upper ~62% of the square PNG) */
  .sparkle-1 { top: 26%; left: 22%; }                            /* upper-left peak of W */
  .sparkle-2 { top: 44%; left: 36%; width: 4px; height: 4px; }   /* W valley */
  .sparkle-3 { top: 22%; left: 52%; }                            /* between W and A */
  .sparkle-4 { top: 38%; left: 68%; width: 4px; height: 4px; }   /* A face */
  .sparkle-5 { top: 30%; left: 80%; }                            /* upper-right peak of A */
  .sparkle-6 { top: 52%; left: 46%; width: 4px; height: 4px; }   /* lower midpoint */

  /* Diamond-burst keyframe: quick pop, slow fade, gentle rotation for the cross flares */
  @keyframes diamondShine {
    0%   { opacity: 0;    transform: scale(0)    rotate(0deg); }
    18%  { opacity: 1;    transform: scale(1.15) rotate(25deg); }
    35%  { opacity: 0.9;  transform: scale(1)    rotate(45deg); }
    65%  { opacity: 0.35; transform: scale(0.7)  rotate(70deg); }
    100% { opacity: 0;    transform: scale(0)    rotate(90deg); }
  }

  body.is-scrolling .sparkle {
    animation: diamondShine 2.2s ease-in-out infinite;
  }
  body.is-scrolling .sparkle-1 { animation-delay: 0s;    }
  body.is-scrolling .sparkle-2 { animation-delay: 0.35s; }
  body.is-scrolling .sparkle-3 { animation-delay: 0.7s;  }
  body.is-scrolling .sparkle-4 { animation-delay: 1.05s; }
  body.is-scrolling .sparkle-5 { animation-delay: 1.4s;  }
  body.is-scrolling .sparkle-6 { animation-delay: 1.75s; }

  @media (prefers-reduced-motion: reduce) {
    body.is-scrolling .sparkle { animation: none; }
  }

  /* === Nav links — LIGHT === */
  .header-nav .main-nav { gap: 4px; }
  .nav-link {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--charcoal);
    padding: 10px 18px;
    text-decoration: none;
    position: relative;
    transition: color 200ms ease;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .nav-link:hover { color: var(--black); }
  .nav-link::before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 18px;
    height: 1px;
    background-color: currentColor;
    transition: transform 250ms ease;
    transform-origin: center;
  }
  .nav-link:hover::before,
  .main-nav .active.nav-link::before { transform: translateX(-50%) scaleX(1); }
  .main-nav .active { color: var(--black) !important; }

  .nav-icon-btn {
    color: var(--charcoal);
  }
  .nav-icon-btn:hover {
    color: var(--black);
  }

  .nav-link-btn {
    color: var(--charcoal);
    border: 1px solid var(--steel-300);
    background: transparent;
    padding: 14px 20px !important;
    font-size: 11px !important;
  }
  .nav-link-btn:hover {
    border-color: var(--black);
    color: var(--black);
    background: transparent;
  }

  /* ============ DROPDOWN (Insights) ============ */
  .nav-item-dropdown { position: relative; }
  .nav-link-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .nav-caret {
    transition: transform 220ms ease, color 220ms ease;
    color: currentColor;
    opacity: 0.7;
  }
  .nav-item-dropdown:hover .nav-caret,
  .nav-item-dropdown:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }

  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 380px;
    background: var(--bone);
    border: 1px solid var(--steel-200);
    border-top: 3px solid var(--gold-500);
    box-shadow: 0 24px 64px -16px rgba(10, 10, 10, 0.18), 0 8px 24px -8px rgba(10, 10, 10, 0.10);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
    z-index: 60;
  }
  /* Invisible bridge so cursor can move from nav-link to dropdown without losing hover */
  .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
  }
  .nav-item-dropdown:hover .nav-dropdown,
  .nav-item-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown-inner {
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
  }
  .nav-dropdown-eyebrow {
    color: var(--gold-700);
    font-weight: 700;
    letter-spacing: 0.22em;
    padding: 4px 10px 14px;
    border-bottom: 1px solid var(--steel-200);
    margin-bottom: 6px;
  }
  .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 12px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 200ms ease;
    cursor: pointer;
  }
  .nav-dropdown-item:hover {
    background: var(--white);
    border-color: var(--steel-200);
  }
  .nav-dropdown-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-600);
    letter-spacing: 0.18em;
    flex-shrink: 0;
    width: 22px;
  }
  .nav-dropdown-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .nav-dropdown-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
  }
  .nav-dropdown-desc {
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--steel-600);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
  }
  .nav-dropdown-arrow {
    color: var(--steel-400);
    flex-shrink: 0;
    transition: transform 220ms ease, color 220ms ease;
  }
  .nav-dropdown-item:hover .nav-dropdown-arrow {
    color: var(--gold-600);
    transform: translateX(3px);
  }
  .nav-dropdown-foot {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--steel-200);
  }
  .nav-dropdown-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--charcoal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 200ms ease, transform 200ms ease;
  }
  .nav-dropdown-all:hover {
    color: var(--gold-600);
  }
  .nav-dropdown-all:hover svg { transform: translateX(3px); }
  .nav-dropdown-all svg { transition: transform 220ms ease; }

  /* Match dropdown colors to homepage hero (white nav over photo) */
  body.is-home:not(.scrolled) .nav-caret { color: rgba(255,255,255,0.9); }

  /* Mobile nav links — LIGHT */
  .mobile-nav-link {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--black);
    padding: 12px 0;
    text-decoration: none;
    transition: all 200ms ease;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--steel-200);
  }
  .mobile-nav-link:hover { color: var(--steel-700); padding-left: 8px; }

  .mobile-nav-details {
    border-bottom: 1px solid var(--steel-200);
  }

  .mobile-nav-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    border-bottom: 0;
    cursor: pointer;
  }

  .mobile-nav-summary::-webkit-details-marker {
    display: none;
  }

  .mobile-summary-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .mobile-summary-icon::before,
  .mobile-summary-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease;
  }

  .mobile-summary-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .mobile-nav-details[open] .mobile-summary-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .mobile-nav-details:not([open]) .mobile-subnav {
    display: none;
  }

  /* Mobile sub-nav (under Insights) */
  .mobile-subnav {
    list-style: none;
    margin: 0;
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--steel-200);
  }
  .mobile-subnav li { margin: 0; }
  .mobile-subnav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--charcoal);
    padding: 10px 0 10px 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 200ms ease, padding 200ms ease;
    border-left: 2px solid var(--steel-200);
    margin-left: 6px;
  }
  .mobile-subnav-link:hover {
    color: var(--black);
    padding-left: 20px;
    border-left-color: var(--gold-500);
  }
  .mobile-subnav-num {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-600);
    letter-spacing: 0.18em;
    flex-shrink: 0;
  }

  /* ============ SEARCH OVERLAY (replaces the v1 search-button widget) ============ */
  .wa-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1020;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18vh 24px 24px;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .wa-search-overlay[hidden] { display: none; }
  .wa-search-overlay.is-open { opacity: 1; }
  .wa-search-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: var(--bone);
    border: 1px solid var(--steel-200);
    border-top: 3px solid var(--gold-500);
    padding: 32px 28px 30px;
    box-shadow: 0 40px 90px -30px rgba(10, 10, 10, 0.55);
    transform: translateY(-10px);
    transition: transform 220ms ease;
  }
  .wa-search-overlay.is-open .wa-search-panel { transform: translateY(0); }
  .wa-search-label {
    display: block;
    color: var(--gold-700);
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-bottom: 14px;
  }
  .wa-search-field { position: relative; }
  .wa-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--steel-500);
    pointer-events: none;
  }
  .wa-search-input {
    width: 100%;
    padding: 16px 16px 16px 44px;
    border: 1px solid var(--steel-300);
    background: var(--white);
    font-family: var(--font-family);
    font-size: 16px;
    color: var(--charcoal);
    outline: none;
    transition: border-color 200ms ease;
    box-sizing: border-box;
  }
  .wa-search-input:focus { border-color: var(--gold-500); }
  .wa-search-input::placeholder { color: var(--steel-500); }
  .wa-search-submit {
    margin-top: 16px;
    width: 100%;
    min-height: 48px;
  }
  @media (min-width: 640px) {
    .wa-search-submit { width: auto; }
  }
  .wa-search-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--charcoal);
    cursor: pointer;
    transition: color 200ms ease;
  }
  .wa-search-close:hover { color: var(--black); }
  .wa-search-panel :focus-visible,
  .faster-search-button:focus-visible {
    outline: 2px solid var(--gold-600);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .wa-search-overlay,
    .wa-search-panel { transition: none; }
  }