/*
  header-light.css
  ─────────────────────────────────────────────────────────────
  Loaded LAST on every page to ensure the bright header theme
  wins over any embedded dark-mode header styles in per-page
  <style> blocks inside <body>.
  ─────────────────────────────────────────────────────────────
*/

/* ══════════════════════════════════════════════════════════════
   GLOBAL Z-INDEX MASTER LAYER
   Ensures NOTHING goes behind the header, and all popups/modals
   always appear correctly above the navigation.
   ══════════════════════════════════════════════════════════════
   Layer scale:
     100-999   : Page content, sections, cards
     1000-1999 : Dropdowns, tooltips, sticky elements
     8990      : Mobile nav overlay (below header)
     9000      : Site header (MASTER)
     9500      : Floating widgets (WhatsApp, AI chat button)
     9600      : Floating widget panels/popups
     99000     : Modal overlays, dialog boxes, lightboxes
     99999     : Critical toasts / alerts
   ══════════════════════════════════════════════════════════════ */

/* ── HEADER: Always on top of page content ── */
#site-header,
header[id="site-header"] {
  z-index: 9000 !important;
}

/* ── Mobile nav: ABOVE everything when open ── */
.hd-nav {
  z-index: 9001 !important;
}

/* ── Floating widgets: above header ── */
.retrix-ai-shell {
  z-index: 9500 !important;
}
.retrix-whatsapp-launcher {
  z-index: 9500 !important;
}

/* ── All modal/dialog overlays: well above header ── */
[id*="Modal"],
[id*="modal"],
[id*="dialog"],
[id*="Dialog"],
[id*="overlay"],
[id*="Overlay"],
[id*="lightbox"],
[id*="popup"],
.modal-overlay,
.site-overlay,
#caseModal,
#whyModal,
#serviceModal,
#svcPanel,
.retrix-ai-panel {
  z-index: 99000 !important;
}

/* ── Service panels/modals on services.html ── */
.svc-modal,
.panel-overlay,
[class*="modal"],
[class*="overlay"][style*="position: fixed"],
[class*="overlay"][style*="position:fixed"] {
  z-index: 99000 !important;
}

/* ── Cookie banner / GDPR ── */
[id*="cookie"],
[id*="Cookie"],
[class*="cookie-bar"],
[class*="cookie-banner"] {
  z-index: 99500 !important;
}

/* ── Film grain (body::after) — decorative, pointer-events: none ── */
/* Already uses pointer-events: none so it doesn't block interaction */
/* It overlays everything visually (texture only) — intentional */

/* ── HEADER: White frosted glass ─────────────────────────── */
#site-header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 2px 24px rgba(91, 33, 182, 0.07) !important;
}
#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(91, 33, 182, 0.22) !important;
  box-shadow: 0 4px 32px rgba(91, 33, 182, 0.10) !important;
}

/* ── LOGO ─────────────────────────────────────────────────── */
.hd-logo-dot {
  background: linear-gradient(135deg, #5b21b6, #a78bfa) !important;
  box-shadow: 0 0 14px rgba(91, 33, 182, 0.65) !important;
}
.hd-logo-text {
  color: #0a0414 !important;
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
}
.hd-logo-sub { color: rgba(20, 10, 40, 0.42) !important; }

/* ── NAV LINKS: Dark on white ─────────────────────────────── */
.hd-link,
.hd-drop-btn {
  color: rgba(20, 10, 40, 0.72) !important;
  font-weight: 600 !important;
}
.hd-link:hover,
.hd-link.active,
.hd-drop-btn:hover {
  color: #5b21b6 !important;
  background: rgba(91, 33, 182, 0.08) !important;
}

/* ── DROPDOWN PANEL: Bright white ─────────────────────────── */
.hd-drop-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(91, 33, 182, 0.18) !important;
  box-shadow: 0 24px 70px rgba(91, 33, 182, 0.16) !important;
}
.hd-drop-item:hover {
  background: rgba(91, 33, 182, 0.07) !important;
  border-color: rgba(91, 33, 182, 0.15) !important;
}
.hdi-icon {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.12), rgba(124, 58, 237, 0.06)) !important;
}
.hdi-icon svg { stroke: #5b21b6 !important; }
.hdi-text strong { color: #0a0414 !important; }
.hdi-text em { color: rgba(20, 10, 40, 0.52) !important; }

/* ── CTA BUTTON: Purple gradient ──────────────────────────── */
.hd-cta {
  background: linear-gradient(135deg, #3b0764, #7c3aed) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px -6px rgba(91, 33, 182, 0.45) !important;
}
.hd-cta:hover {
  background: linear-gradient(135deg, #4c1d95, #a78bfa) !important;
  box-shadow: 0 14px 36px -8px rgba(91, 33, 182, 0.6) !important;
}

/* ── HAMBURGER BUTTON ─────────────────────────────────────── */
.hd-menu-btn {
  background: rgba(91, 33, 182, 0.06) !important;
  border-color: rgba(91, 33, 182, 0.18) !important;
}
.hd-menu-btn svg { stroke: #0a0414 !important; }

/* ── MOBILE NAV: White overlay ────────────────────────────── */
@media (max-width: 960px) {
  #site-header.menu-is-open {
    background: #ffffff !important;
    border-bottom-color: #f1eff5 !important;
    box-shadow: none !important;
  }
  
  #site-header.menu-is-open .hd-actions .hd-cta,
  #site-header.menu-is-open .header-actions .btn-cta,
  #site-header.menu-is-open .btn-cta {
    display: none !important;
  }

  /* Morph menu button into close button */
  #site-header.menu-is-open .hd-menu-btn,
  #site-header.menu-is-open .mobile-menu-btn {
    background: #0a0414 !important;
    border-color: #0a0414 !important;
  }
  #site-header.menu-is-open .hd-menu-btn svg,
  #site-header.menu-is-open .mobile-menu-btn svg {
    stroke: #ffffff !important;
  }

  .hd-menu-btn svg line, .mobile-menu-btn svg line {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }
  #site-header.menu-is-open .hd-menu-btn svg line:nth-child(1),
  #site-header.menu-is-open .mobile-menu-btn svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  #site-header.menu-is-open .hd-menu-btn svg line:nth-child(2),
  #site-header.menu-is-open .mobile-menu-btn svg line:nth-child(2) {
    opacity: 0;
  }
  #site-header.menu-is-open .hd-menu-btn svg line:nth-child(3),
  #site-header.menu-is-open .mobile-menu-btn svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ── Mobile nav: full-screen overlay, NO scroll needed ── */
  .hd-nav {
    position: absolute !important;
    top: var(--hd-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(85vh - var(--hd-h)) !important;
    flex-direction: column !important; align-items: stretch !important;
    background: #ffffff !important;
    padding: 0.6rem 1.2rem 1.5rem 1.2rem !important; gap: 0 !important;
    display: none; overflow-y: auto !important;
    border-top: 1px solid #f1eff5 !important;
    border-bottom: 1px solid #e5e3eb !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    z-index: 9001 !important;
    justify-content: flex-start !important;
    box-shadow: 0 20px 40px rgba(10, 4, 20, 0.18) !important;
  }
  .hd-nav.is-open { display: flex !important; }

  /* Prevent background page scrolling when mobile nav is open */
  body.menu-is-open {
    overflow: hidden !important;
  }

  .hd-link {
    font-size: 0.97rem !important;
    padding: 0.65rem 0.75rem !important;
    width: 100% !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    border-bottom: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
  }

  .hd-link:hover, .hd-link.active {
    color: #5b21b6 !important;
    background: rgba(91, 33, 182, 0.06) !important;
  }

  /* Divider line between items */
  .hd-nav > .hd-link,
  .hd-nav > .hd-dropdown {
    border-bottom: 1px solid #f1eff5 !important;
  }
  .hd-nav > .hd-link:last-of-type,
  .hd-nav > .hd-dropdown:last-of-type {
    border-bottom: none !important;
  }

  .hd-dropdown {
    width: 100% !important;
    border-bottom: 1px solid #f1eff5 !important;
  }
  .hd-drop-btn {
    font-size: 0.97rem !important;
    padding: 0.65rem 0.75rem !important;
    width: 100% !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }

  .hd-chev {
    width: 14px !important;
    height: 14px !important;
    stroke: #999 !important;
    transition: transform 0.25s ease !important;
  }
  .hd-dropdown.is-open .hd-chev {
    transform: rotate(180deg) !important;
  }

  /* Services submenu: hidden by default, shown when .is-open */
  .hd-drop-panel {
    position: static !important; transform: none !important; width: 100% !important;
    box-shadow: none !important; border: none !important;
    background: rgba(91, 33, 182, 0.03) !important;
    padding: 0.3rem 0.5rem 0.5rem 0.5rem !important;
    border-radius: 10px !important;
    margin-bottom: 0.25rem !important;
    margin-top: 0.1rem !important;
    animation: none !important;
    display: none !important;
  }
  .hd-dropdown.is-open .hd-drop-panel {
    display: block !important;
  }
  .hd-drop-grid { grid-template-columns: 1fr !important; gap: 0.1rem !important; }

  .hd-drop-item {
    font-size: 0.88rem !important;
    padding: 7px 12px !important;
    border-radius: 7px !important;
    color: #333333 !important;
    border: none !important;
    background: transparent !important;
  }
  .hd-drop-item:hover {
    background: rgba(91, 33, 182, 0.07) !important;
    color: #5b21b6 !important;
  }

  .hd-drop-item .hdi-icon { display: none !important; }
  .hd-drop-item .hdi-text em { display: none !important; }
  .hd-drop-item .hdi-text strong { font-size: 0.87rem !important; font-weight: 600 !important; }

  /* Bottom CTA inside mobile menu */
  .hd-nav-mobile-cta {
    display: flex !important;
    width: 100% !important;
    padding: 0.9rem 0.5rem 0.5rem !important;
    margin-top: 1.25rem !important;
  }
  .btn-cta-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.85rem 1.5rem !important;
    border-radius: 99px !important;
    background: linear-gradient(135deg, #3b0764, #7c3aed) !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 8px 20px rgba(91, 33, 182, 0.3) !important;
    transition: all 0.3s ease !important;
  }
}

@media (min-width: 961px) {
  .hd-nav-mobile-cta {
    display: none !important;
  }
}
