/* ============================================================
   Aahana shared navigation styles
   ------------------------------------------------------------
   This file is the ONLY place navigation styling is defined.
   nav.js builds the markup, nav.css styles it. Change either
   one here and every page updates at once.

   The one deliberate exception is index.html, which overrides
   the nav background so it starts transparent over the hero
   video and turns solid on scroll. That override lives in
   index.html and is commented there.
   ============================================================ */

nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(20px + env(safe-area-inset-top)) 48px 20px;
  background: rgba(74, 51, 40, .96);
  transition: background .4s, padding .4s;
}
nav.scrolled {
  background: rgba(74, 51, 40, .96);
  padding: calc(14px + env(safe-area-inset-top)) 48px 14px;
}

/* ---------- brand ----------
   The mark is painted as a CSS mask rather than an inline <svg> or an <img>.
   That keeps aahana-mark.svg a single cacheable file while still letting the
   colour come from the surrounding text colour, so one asset serves the dark
   nav, the footer and any light ground. Browsers without mask support fall
   back to the wordmark alone rather than to a solid rectangle. */
.nav-brand {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  text-decoration: none;
  color: inherit;
}
.nav-words { display: flex; flex-direction: column; }
.nav-mark, .nav-rule { display: none; }
@supports ((-webkit-mask-image: url(aahana-mark.svg)) or (mask-image: url(aahana-mark.svg))) {
  .nav-mark {
    display: block;
    width: 36px; height: 38px; flex: 0 0 auto;
    background-color: var(--ivory);
    -webkit-mask: url(aahana-mark.svg) no-repeat center / contain;
            mask: url(aahana-mark.svg) no-repeat center / contain;
    filter: drop-shadow(0 1px 10px rgba(0,0,0,.45));
  }
  .nav-rule {
    display: block;
    width: 0.5px; height: 34px; flex: 0 0 auto;
    background: rgba(243,236,228,.34);
  }
}
.nav-name {
  font-family: 'Contralto Big', 'Contralto Big Black', 'Cairo', sans-serif;
  font-size: 26px; font-weight: 200;
  color: var(--ivory); letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.nav-sub {
  font-size: 11px; font-weight: 300;
  color: #F2DACE; letter-spacing: .18em;
  text-transform: uppercase; margin-top: 3px;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

/* ---------- desktop links ---------- */
.nav-links {
  display: flex; gap: 36px; list-style: none;
}
.nav-links a {
  font-size: 13px; font-weight: 300; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(243,236,228,.9);
  text-decoration: none; transition: color .2s;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.nav-links a:hover { color: var(--ivory); }

.nav-item { position: relative; }
.nav-link { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chevron { font-size: 8px; opacity: .7; transition: transform .2s; display: inline-block; }
.nav-item.open .chevron { transform: rotate(180deg); }

/* ---------- desktop dropdown ---------- */
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px; padding: 10px 0;
  background: rgba(74, 51, 40, .98);
  border: 1px solid rgba(243,236,228,.14);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-item.open .dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-item {
  display: block; padding: 9px 22px;
  font-size: 13px; font-weight: 300; letter-spacing: .04em;
  text-transform: none; color: rgba(243,236,228,.86);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
  text-shadow: none;
}
.dropdown-item:hover { background: rgba(243,236,228,.08); color: var(--ivory); }

/* The section's own landing page, shown above the divider so it reads
   as the parent rather than one more sibling category. */
.dropdown-item.lead {
  font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ivory);
  padding-top: 4px; padding-bottom: 12px;
}
.dropdown-divider { height: 1px; margin: 8px 0; background: rgba(243,236,228,.12); }
.dropdown-label {
  padding: 4px 22px 6px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(243,236,228,.66);
}

/* ---------- wide grouped dropdown (Services) ---------- */
.dropdown.dropdown-wide { min-width: 640px; padding-bottom: 16px; }
.dropdown-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
  padding: 4px 8px 0;
}
.dropdown-col .dropdown-label { padding: 6px 14px 8px; }
.dropdown-col .dropdown-item { padding: 7px 14px; white-space: normal; }

@media (max-width: 1100px) {
  .dropdown.dropdown-wide { min-width: 460px; }
  .dropdown-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- waitlist button ---------- */
.nav-cta {
  font-size: 13px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ivory);
  border: 1px solid rgba(243,236,228,.9);
  padding: 8px 20px; border-radius: 2px;
  text-decoration: none; transition: all .2s;
  cursor: pointer; background: transparent;
  font-family: 'Cairo', sans-serif;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.nav-cta:hover { background: var(--ivory); color: var(--deep); }

/* ---------- hamburger ---------- */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer; padding: 0;
  z-index: 1001;
}
.nav-hamburger span {
  display: block; height: 1.5px; width: 24px;
  background: var(--ivory); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- mobile menu ---------- */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--deep);
  z-index: 998;
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  padding-top: calc(78px + env(safe-area-inset-top));
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-panels {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.mobile-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 8px 32px 32px;
  overflow-y: auto;
  background: var(--deep);
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
}
.mobile-panel.main { transform: translateX(0); }
.mobile-menu.subactive .mobile-panel.main { transform: translateX(-100%); }
.mobile-panel.active { transform: translateX(0); }

.mobile-panel-item,
.mobile-panel a,
.mobile-panel .disabled {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 0;
  background: none; border: 0;
  border-bottom: 1px solid rgba(243,236,228,.1);
  font-family: 'Cairo', sans-serif;
  font-size: 17px; font-weight: 300; letter-spacing: .02em;
  color: var(--ivory); cursor: pointer; text-align: left;
  text-decoration: none;
}
.mobile-panel .disabled { opacity: .4; cursor: default; }
.mobile-panel a.lead {
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  font-size: 14px;
}
.mobile-panel-item .arrow {
  font-size: 18px; opacity: .6; display: inline-block;
}
.mobile-panel-back {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0;
  font-family: 'Cairo', sans-serif;
  font-size: 13px; font-weight: 300;
  letter-spacing: .12em; text-transform: uppercase;
  color: #D29B80; cursor: pointer;
  padding: 0 0 18px;
  margin-bottom: 8px;
}
.mobile-panel-back .back-arrow { font-size: 18px; }
.mobile-panel-title {
  font-family: 'Contralto Big', 'Contralto Big Black', 'Spectral', Georgia, serif;
  font-size: 28px; font-weight: 300;
  color: var(--ivory);
  margin-bottom: 24px;
  letter-spacing: .01em;
}
.mobile-panel-label {
  display: block; padding: 22px 0 8px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(243,236,228,.66);
}
.mobile-menu-cta {
  padding: 24px 32px calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(243,236,228,.1);
}
.mobile-menu-cta button {
  width: 100%; padding: 16px;
  background: var(--ivory); color: var(--deep);
  border: 0; border-radius: 2px;
  font-family: 'Cairo', sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}

/* ---------- mobile breakpoint ---------- */
@media (max-width: 900px) {
  nav { padding: calc(16px + env(safe-area-inset-top)) 24px 16px; }
  nav.scrolled { padding: calc(12px + env(safe-area-inset-top)) 24px 12px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-name { font-size: 20px; letter-spacing: .18em; }
  .nav-sub { font-size: 9px; }
  .nav-brand { gap: 10px; }
  .nav-mark { width: 27px; height: 29px; }
  .nav-rule { height: 26px; }
}
/* Below this width the rule and the full-size mark push "Medical Aesthetics"
   and the waitlist button onto extra lines, so the mark shrinks and the rule
   drops out. The lockup still reads as mark plus wordmark. */
/* Phones get the mark on its own. Phone widths run from about 320px to
   440px, so the cut has to sit above the widest of them or two people on
   two handsets see two different navs. Tablets keep the full lockup. */
@media (max-width: 600px) {
  .nav-rule { display: none; }
  @supports ((-webkit-mask-image: url(aahana-mark.svg)) or (mask-image: url(aahana-mark.svg))) {
    .nav-brand { gap: 0; }
    .nav-mark { width: 32px; height: 34px; }
    .nav-words {
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
  }
}
/* Narrower than this the wordmark, the mark and the waitlist button cannot
   all fit on one line, so the brand becomes the mark alone. The words stay
   in the DOM for screen readers and for anyone whose browser has no mask
   support, where .nav-mark is display:none and the wordmark shows instead. */
@media (max-width: 400px) {
  .nav-cta {
    font-size: 10px !important;
    letter-spacing: .1em !important;
    padding: 8px 14px !important;
    margin-right: 4px;
  }
}

/* ── CONTENT VISIBILITY AND MOTION ────────────────────────────────────
   Scroll-reveal blocks used to start at opacity 0 and were only shown by
   JavaScript. If the script never ran, the page body stayed blank. They
   are now visible by default, and the animation only runs when nav.js has
   added .reveal-anim to <html>, which it does only when the visitor has
   not asked their system for reduced motion. */
html:not(.reveal-anim) .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html .hero-video { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── SKIP LINK ───────────────────────────────────────────────────────
   First thing in the tab order, invisible until focused. */
.skip-link {
  position: absolute; left: 12px; top: -60px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--ivory, #EDE8E1);
  color: #4A3328;
  font-family: 'Cairo', sans-serif;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ── KEYBOARD FOCUS ──────────────────────────────────────────────────
   Visible for keyboard users, absent for mouse clicks. */
:focus-visible {
  outline: 2px solid #C07A5A;
  outline-offset: 3px;
  border-radius: 2px;
}
#nav :focus-visible, .section-footer :focus-visible, .hero :focus-visible {
  outline-color: #F2DACE;
}

/* ── TARGET SIZE (WCAG 2.2 AA, 2.5.8) ────────────────────────────────
   Standalone links need a 24px pointer target. Padding grows the hit box
   without changing where the text sits. Links inline in prose are exempt
   and are left alone. */
.service-link, .view-all-btn, .footer-legal a, .footer-ig,
.footer-waitlist, .breadcrumb a, .rl-title, .related-links a,
.cta-btn, .care-btn, .filter-btn, .nav-cta, .dropdown-item {
  min-height: 24px;
}
.service-link, .footer-legal a, .footer-waitlist, .breadcrumb a {
  display: inline-block;
  padding-block: 4px;
}
.view-all-btn { padding: 6px 2px; }

/* Top-level nav items. The label is 13px, so without padding the pointer
   target is 15px tall. The bar centers its children, so the padding grows
   the hit box symmetrically and the text does not move. */
.nav-links { align-items: center; }
.nav-links a {
  padding-block: 5px;
  min-height: 24px;
  box-sizing: border-box;
}