/* =========================================================
   SACH & VOGUE HAIR — Independent desktop nav + mega menu
   File: css/mega-menu.css  (fixed-position / event-delegation version)
   Matches js/mega-menu.js (fixed-position panels positioned by JS).
     - Olivero native nav hidden as DOM-only data source
     - .sv-desktop-nav shown >=1200px, hidden <=1199px
     - panels position:fixed (JS sets top/left); pointer-events guarded
     - Olivero leftover overlays made click-through on desktop
   ========================================================= */

/* ---------------------------------------------------------
   OLIVERO NATIVE NAV — HIDDEN SOURCE (all widths)
   --------------------------------------------------------- */
.mobile-buttons,
.mobile-nav-button,
[data-drupal-selector="mobile-buttons"],
[data-drupal-selector="mobile-nav-button"] {
  display: none !important;
}

#header-nav,
.header-nav,
[data-drupal-selector="header-nav"],
#block-sv-olivero-main-menu {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   SV DESKTOP NAV — default hidden, shown only >=1200px
   --------------------------------------------------------- */
.sv-desktop-nav { display: none; }

@media (max-width: 1199px) {
  .sv-desktop-nav { display: none !important; }
}

@media (min-width: 1200px) {

  .sv-desktop-nav {
    display: block;
    flex: 1 1 auto;
    position: relative;
    z-index: 1000;            /* nav stacks above page content */
  }

  .sv-desktop-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sv-desktop-nav__item {
    position: relative;
  }

  .sv-desktop-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 2px;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .sv-desktop-nav__link:hover,
  .sv-desktop-nav__link:focus,
  .sv-desktop-nav__item.is-open > .sv-desktop-nav__link {
    color: #9b7a3f;
  }

  .sv-desktop-nav__trigger::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 4px;
    transition: transform 0.2s ease;
  }

  .sv-desktop-nav__item.is-open .sv-desktop-nav__trigger::after {
    transform: rotate(-135deg);
  }

  /* ---- Mega panel (fixed-positioned by JS) ----
   * JS sets top to trigger.bottom - 1px so the hit area overlaps the trigger.
   * Visual entrance uses transform on the inner only — never offset the
   * panel's interactive box away from the trigger (Chrome gap fix). */
  .sv-mega-panel {
    position: fixed;          /* JS sets top/left from the trigger rect */
    top: 0;
    left: 0;
    min-width: 280px;
    background: transparent;  /* hit-area bridge; surface is on __inner */
    border: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;     /* closed: never intercept clicks */
    transition: opacity 0.2s ease, visibility 0.2s;
    z-index: 100050;          /* above header + page content */
  }

  .sv-desktop-nav__item.is-open .sv-mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;     /* open: clickable */
  }

  .sv-mega-panel__inner {
    padding: 26px 28px;
    margin-top: 0;            /* keep flush with overlapped trigger edge */
    background: #fdfcfa;
    border: 1px solid #ece7df;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
    transform: translateY(8px);
    transition: transform 0.2s ease;
  }

  .sv-desktop-nav__item.is-open .sv-mega-panel__inner {
    transform: none;
  }

  .sv-mega-panel__heading {
    display: block;
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9b7a3f;
    text-decoration: none;
  }

  .sv-mega-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }

  .sv-mega-panel__link {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .sv-mega-panel__link:hover,
  .sv-mega-panel__link:focus {
    color: #9b7a3f;
  }

  /* Olivero leftover overlays must never cover / block the nav on desktop */
  .header-nav-overlay,
  .overlay[data-drupal-selector="overlay"] {
    pointer-events: none !important;
  }
}