/* ─────────────────────────────────────────────────────────────────
   Feonix nav-dropdown — Treatments mega-link
   Adds a dropdown panel beneath the "Treatments" item in the
   desktop and mobile nav of every page. Scoped to `.nav-dropdown`
   so it cannot collide with existing nav styles in any page's
   inline <style> block. Uses brand tokens only.
   ───────────────────────────────────────────────────────────────── */

/* ── DESKTOP TRIGGER (matches existing .nav-links a typography) ── */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid, #52485E);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: color 0.3s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown-trigger[aria-expanded="true"] { color: var(--dark, #17121F); }
.nav-dropdown-trigger.active { color: var(--rg-dark, #885030); }

.nav-dropdown-trigger-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; line-height: 1;
  transform: translateY(1px);
  transition: transform 0.25s ease;
}
.nav-dropdown:hover .nav-dropdown-trigger-arrow,
.nav-dropdown[data-open="true"] .nav-dropdown-trigger-arrow {
  transform: translateY(1px) rotate(180deg);
}

/* ── DESKTOP PANEL — hover-revealed, floats below nav ── */
.nav-dropdown-panel {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: var(--cream, #F7F3EF);
  border: 1px solid var(--border, #DDD6CF);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1100;
  list-style: none;
  margin: 0;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hover-bridge: 8px invisible band between trigger and panel so the
   panel doesn't close when the cursor crosses the gap. */
.nav-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}

.nav-dropdown-panel a {
  display: block;
  padding: 9px 22px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid, #52485E);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
  color: var(--rg-dark, #885030);
  background: rgba(255,255,255,0.5);
  outline: none;
}
.nav-dropdown-panel a:focus-visible {
  box-shadow: inset 2px 0 0 var(--rg-mid, #8B6842);
}

/* First item (Price List) gets a subtle rose-gold accent to read
   as the "primary" entry without breaking the editorial restraint. */
.nav-dropdown-panel a:first-child {
  color: var(--rg-dark, #885030);
  font-weight: 500;
}
.nav-dropdown-panel a:first-child:hover {
  color: var(--dark, #17121F);
}

/* ── MOBILE ACCORDION (inside #mobile-menu .mobile-menu-links) ── */
/* Style overrides for when the dropdown lives inside the full-screen
   mobile menu. Desktop floating panel becomes an inline accordion. */
.mobile-menu-links .nav-dropdown {
  display: block;
  width: 100%;
}
.mobile-menu-links .nav-dropdown-trigger {
  /* Match .mobile-menu-links a — large serif menu items */
  width: 100%;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--dark, #17121F);
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #DDD6CF);
  justify-content: space-between;
  text-align: left;
  transition: color 0.3s ease;
}
.mobile-menu-links .nav-dropdown-trigger:hover,
.mobile-menu-links .nav-dropdown-trigger[aria-expanded="true"] {
  color: var(--rg-mid, #8B6842);
}
.mobile-menu-links .nav-dropdown-trigger-arrow {
  font-size: 22px;
  color: var(--rg-mid, #8B6842);
}
.mobile-menu-links .nav-dropdown-panel {
  /* Inline accordion — drop absolute positioning */
  position: static;
  transform: none;
  min-width: 0;
  width: 100%;
  background: var(--cream, #F7F3EF);
  border: 0;
  padding: 0;
  max-height: 0;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease, visibility 0.28s;
  z-index: auto;
}
.mobile-menu-links .nav-dropdown[data-open="true"] .nav-dropdown-panel {
  /* Generous max-height — dropdown has 10 items, ~50px each = ~500px;
     setting 600px gives slack without locking a brittle height. */
  max-height: 600px;
  padding: 6px 0 12px;
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu-links .nav-dropdown[data-open="true"] .nav-dropdown-trigger-arrow {
  transform: rotate(180deg);
}
.mobile-menu-links .nav-dropdown-panel a {
  padding: 12px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--mid, #52485E);
  border-bottom: 1px solid rgba(221, 214, 207, 0.5);
}
.mobile-menu-links .nav-dropdown-panel a:last-child { border-bottom: 0; }
.mobile-menu-links .nav-dropdown-panel a:first-child {
  color: var(--rg-dark, #885030);
  font-weight: 600;
}
.mobile-menu-links .nav-dropdown-panel::before { display: none; }

/* Hide footer's Treatments link from any dropdown style — footer
   keeps the plain <a> rendering (no <li class="nav-dropdown"> in
   footer markup, so this is just a safety guard). */
.footer-links .nav-dropdown { display: none; }

/* Reduced motion: drop all transitions */
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-trigger,
  .nav-dropdown-trigger-arrow,
  .nav-dropdown-panel,
  .nav-dropdown-panel a { transition: none; }
}

/* ── ANCHOR SCROLL OFFSET ──────────────────────────────────────────
   The dropdown links use #anchors on /treatments. Most pages have a
   fixed page nav (~88–100px tall), which would otherwise hide the
   scroll target under the header. scroll-margin-top covers it. */
.treatment-group[id],
.offers-category-heading[id],
[id="laser-skin"] {
  scroll-margin-top: 120px;
}