/* FA site navigation — SINGLE SHARED SOURCE (build_nav.py stamps the markup; this file
   styles it). This is AUTHORITATIVE: every visual nav property is defined here, #mainNav /
   #mobileMenu-scoped, so it wins over the ~8 differing per-page inline nav templates and no
   page can drift. The per-page inline nav CSS is now dead weight (overridden) and can be
   stripped later. The ONLY thing left to each page is the nav's vertical `top` offset, which
   depends on that page's util-bar height and is set by the page's scroll script.
   Edit here, then `python3 build_nav.py --all` for markup, or just redeploy for style/JS. */

/* ===================== desktop mega menu (.nx) ===================== */
.nx{display:flex;align-items:center;gap:1px;flex:1 1 auto;justify-content:center;list-style:none;margin:0;padding:0}
.nx-item{position:static}
.nx-link{display:inline-flex;align-items:center;gap:5px;color:#fff;text-decoration:none;font-size:13.5px;font-weight:500;padding:11px 11px;border-radius:8px;white-space:nowrap;cursor:pointer}
.nx-car{width:7px;height:7px;border-right:1.6px solid rgba(255,255,255,.85);border-bottom:1.6px solid rgba(255,255,255,.85);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.nx-item.nx-open>.nx-link,.nx-link:hover{background:rgba(255,255,255,.14)}
.nx-item.nx-open>.nx-link .nx-car{transform:rotate(225deg) translateY(2px)}
.nx-star{color:#CBA45C;font-size:11px}
.nx-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #ece2d0;box-shadow:0 26px 50px -22px rgba(26,15,46,.4);display:none;z-index:300}
.nx-item.nx-open .nx-mega{display:block}
.nx-mega__in{max-width:1180px;margin:0 auto;padding:26px 32px 30px}
.nx-ch{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2a2036;margin:0 0 13px;padding-bottom:6px;border-bottom:2px solid var(--purple,#7B2B7B)}
.nx-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 28px}
.nx-lk{display:block;text-decoration:none;color:#1A0F2E;padding:6px 8px;border-radius:8px;font-size:14px;font-weight:500}
.nx-lk small{display:block;color:#6b6076;font-weight:400;font-size:11.5px;margin-top:1px}
.nx-lk:hover{background:#F6EBDA}
.nx-more{display:inline-block;margin-top:12px;color:var(--purple,#7B2B7B);font-weight:600;text-decoration:none;font-size:13.5px}
.nx-horm{display:grid;grid-template-columns:repeat(2,minmax(200px,290px));justify-content:start;gap:30px;align-items:start}
.nx-intro h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:24px;margin:2px 0 8px;color:#1A0F2E;line-height:1.12}
.nx-intro p{margin:0 0 14px;color:#6b6076;font-size:13px;line-height:1.55;max-width:34ch}
.nx-book{display:inline-flex;align-items:center;gap:6px;background:var(--purple,#7B2B7B);color:#fff;text-decoration:none;font-size:12.5px;font-weight:600;padding:9px 15px;border-radius:999px}
.nx-gcol{border-radius:14px;padding:14px 14px 16px}
.nx-gcol--men{background:#eaf3f7}.nx-gcol--women{background:#f7eaf1}
.nx-gcol--wl{background:#f2edf7}.nx-gcol--wl .nx-gt{color:var(--purple,#7B2B7B)}.nx-gcol--wl .nx-dot{background:var(--purple,#7B2B7B)}
.nx-gt{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.nx-gcol--men .nx-gt{color:#2b5f7b}.nx-gcol--women .nx-gt{color:#8a3d6e}
.nx-dot{width:8px;height:8px;border-radius:50%}
.nx-gcol--men .nx-dot{background:#2b5f7b}.nx-gcol--women .nx-dot{background:#8a3d6e}
.nx-gcol .nx-lk:hover{background:rgba(255,255,255,.75)}
.nx-flag{margin:6px 0 0;font-size:11.5px;color:#2b5f7b;font-weight:600}
.mobile-menu__sub .mm-gh{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:14px 24px 3px;margin-top:4px}
.mobile-menu__sub .mm-gh--men{color:#2b5f7b}
.mobile-menu__sub .mm-gh--women{color:#8a3d6e}
.mobile-menu__sub .mm-gh:first-child{padding-top:4px;margin-top:0}

/* ===================== nav bar shell (container, logo, right, hamburger, CTA) =====================
   Keyed on WIDTH, not scroll: desktop (>1024) = purple bar + white content;
   mobile (<=1024) = white bar + dark content (mega swapped for hamburger + drawer). */
#mainNav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 32px}
#mainNav.scrolled{padding:12px 32px}

#mainNav .nav__logo{display:flex;align-items:center;flex-shrink:0}
#mainNav .nav__logo-img{width:auto;height:44px}

#mainNav .nav__right{display:flex;align-items:center;gap:14px;flex-shrink:0}

#mainNav .nav__hamburger{flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;gap:5px;transition:background .25s;flex-shrink:0}
#mainNav .nav__hamburger span{display:block;width:22px;height:2px;border-radius:2px;transition:all .3s ease;transform-origin:center}
#mainNav .nav__hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#mainNav .nav__hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
#mainNav .nav__hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* CTA button — default (mobile) is a filled purple pill on the white mobile bar */
#mainNav .nav__cta{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans,'Inter',sans-serif);font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;transition:all .25s;background:var(--purple,#7B2B7B);color:#fff;border:2px solid var(--purple,#7B2B7B);border-radius:8px;padding:9px 14px;font-size:13px;box-shadow:none}
#mainNav .nav__cta-short{display:none}

/* ---------- DESKTOP (>1024): purple bar, white content, mega visible ---------- */
@media (min-width:1025px){
  #mainNav{background:var(--purple,#7B2B7B)!important}
  #mainNav .nav__logo-img--light{display:block!important}
  #mainNav .nav__logo-img--dark{display:none!important}
  #mainNav .nav__hamburger{display:none!important}
  #mainNav .nav__cta{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8);border-radius:50px;padding:11px 22px;font-size:14px}
  #mainNav .nav__cta:hover{background:rgba(255,255,255,.15);border-color:#fff;transform:translateY(-1px)}
}

/* ---------- MOBILE (<=1024): white bar, dark content, hamburger + drawer ---------- */
@media (max-width:1024px){
  #mainNav,#mainNav.scrolled{background:#fff!important;box-shadow:0 2px 16px rgba(0,0,0,.08)}
  #mainNav .nx{display:none!important}
  #mainNav .nav__hamburger{display:flex!important}
  #mainNav .nav__hamburger span{background:#1A0F2E}
  #mainNav .nav__hamburger:hover{background:var(--purple-pale,#F6ECF6)}
  #mainNav .nav__logo-img--light{display:none!important}
  #mainNav .nav__logo-img--dark{display:block!important}
  #mainNav .nav__logo-img{height:34px}
}

/* CTA label: full on desktop/tablet, short on phones */
@media (max-width:768px){
  #mainNav .nav__cta-full{display:none}
  #mainNav .nav__cta-short{display:inline}
}

/* ===================== mobile drawer (#mobileMenu) — AUTHORITATIVE =====================
   #mobileMenu-scoped so it wins over every page's inline base CSS. Some older blog
   templates omit the `.mobile-menu__item.open > .mobile-menu__sub{display:block}` reveal,
   so the accordion opened but showed nothing. This unifies the whole drawer. */
#mobileMenu{display:none;position:fixed;inset:0;z-index:998;background:rgba(26,15,46,.5);backdrop-filter:blur(3px)}
#mobileMenu.open{display:block}
#mobileMenu .mobile-menu__drawer{position:absolute;top:0;left:0;right:0;background:#fff;padding:104px 0 28px;max-height:90vh;overflow-y:auto;transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 40px rgba(0,0,0,.16)}
#mobileMenu.open .mobile-menu__drawer{transform:translateY(0)}
#mobileMenu .mobile-menu__list{list-style:none;margin:0;padding:0}
#mobileMenu .mobile-menu__item{border-bottom:1px solid #F5E5F5}
#mobileMenu .mobile-menu__link{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;font-size:15px;font-weight:600;color:var(--dark,#1A0F2E);background:none;border:none;width:100%;text-align:left;cursor:pointer;text-decoration:none;font-family:var(--font-sans,'Inter',sans-serif);transition:color .2s,background .2s}
#mobileMenu .mobile-menu__link:hover{color:var(--purple,#7B2B7B);background:var(--purple-pale,#F6ECF6)}
#mobileMenu .mobile-menu__arrow{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;flex-shrink:0}
#mobileMenu .mobile-menu__item.open > button .mobile-menu__arrow{transform:rotate(180deg)}
#mobileMenu .mobile-menu__sub{display:none;background:#FAF7FF;padding:4px 0}
#mobileMenu .mobile-menu__item.open > .mobile-menu__sub{display:block}
#mobileMenu .mobile-menu__sub a{display:block;padding:12px 24px 12px 36px;font-size:14px;color:var(--body-text,#4a4458);text-decoration:none;transition:color .2s,background .2s}
#mobileMenu .mobile-menu__sub a:hover{color:var(--purple,#7B2B7B);background:var(--purple-pale,#F6ECF6)}
#mobileMenu .mobile-menu__specials{color:var(--purple,#7B2B7B)!important}
#mobileMenu .mobile-menu__footer{padding:20px 24px 4px;display:flex;flex-direction:column;gap:12px}
#mobileMenu .mobile-menu__phone-link{font-size:15px;font-weight:600;color:var(--dark,#1A0F2E);text-decoration:none}
#mobileMenu .mobile-menu__phone-link:hover{color:var(--purple,#7B2B7B)}
#mobileMenu .mobile-menu__book-btn{display:block;text-align:center;width:100%}