/* site-nav.css — the ONE site navigation bar on every customer-facing page except the homepage.

   Markup: ops/site-nav/site-nav.partial.html, stamped into each page listed in
   ops/site-nav/pages.json by ops/site-nav/stamp-site-nav.cjs. Behaviour: js/site-nav.js.
   Look derived from index.html's .itt-header (cream -> sage -> lavender gradient, Playfair,
   charcoal ink, sage accent) so the site reads as one place.

   Self-contained on purpose: the pages it lands on load different stylesheets, and several load
   neither sage-palette.css nor luxury-spa.css, so every token carries its fallback. Fallbacks equal
   the values in css/sage-palette.css and luxury-spa.css :root; keep them in step.

   Mobile-first (344px is the base). Without JS the links render as a wrapped row under the home
   link; js/site-nav.js adds .site-nav--enhanced, which collapses them behind the Menu button until
   1024px, where the eight links (~920px) fit on one row. 768px only loosens the bar's spacing. The
   menu opens IN FLOW (pushes content down) instead of overlaying, and the bar is not sticky, so it
   can never cover a page's own controls, the pay button included. */

.site-nav {
  --site-nav-ink: var(--spa-charcoal, #2d3748);
  --site-nav-accent: var(--sage-700, #4a614a);
  --site-nav-accent-strong: var(--sage-800, #3d4f3d);
  --site-nav-tint: var(--sage-100, #f0f4f0);
  --site-nav-edge: var(--sage-200, #d9e2d9);
  --site-nav-surface: #ffffff;
  --site-nav-on-accent: #ffffff;
  /* Links get a tight hover tile; the two actions (Menu, Book Session) are full pills, so the
     eye reads "place to go" vs "thing to do" from the shape alone. */
  --site-nav-radius-link: 6px;
  --site-nav-radius-pill: 999px;

  display: block;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, var(--spa-cream, #fdfcf7) 0%, var(--spa-sage-light, #f0f4f0) 50%, var(--spa-lavender-light, #f5f3ff) 100%);
  border-bottom: 1px solid var(--site-nav-edge);
  color: var(--site-nav-ink);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  letter-spacing: normal;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
}

.site-nav *,
.site-nav *::before,
.site-nav *::after {
  box-sizing: border-box;
}

.site-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.375rem 1rem;
}

.site-nav__home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--site-nav-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav__home:hover {
  color: var(--site-nav-accent);
}

.site-nav__home:hover .site-nav__home-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-nav__logo {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  max-width: none;
  object-fit: contain;
}

.site-nav__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.site-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--site-nav-edge);
  border-radius: var(--site-nav-radius-pill);
  background: var(--site-nav-surface);
  color: var(--site-nav-accent);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.site-nav__toggle:hover {
  background: var(--site-nav-tint);
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.site-nav__toggle-bars {
  position: relative;
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-nav__toggle-bars::before {
  top: -6px;
}

.site-nav__toggle-bars::after {
  top: 6px;
}

.site-nav--open .site-nav__toggle-bars {
  background: transparent;
}

.site-nav--open .site-nav__toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.site-nav--open .site-nav__toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav__links {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__links > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.625rem;
  border-radius: var(--site-nav-radius-link);
  color: var(--site-nav-ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover {
  background: var(--site-nav-tint);
  color: var(--site-nav-accent);
  text-decoration: none;
}

.site-nav__link[aria-current='page'] {
  color: var(--site-nav-accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.site-nav__link--cta {
  justify-content: center;
  padding: 0.5rem 1.125rem;
  border-radius: var(--site-nav-radius-pill);
  background: var(--site-nav-accent);
  color: var(--site-nav-on-accent);
  font-weight: 600;
}

.site-nav__link--cta:hover {
  background: var(--site-nav-accent-strong);
  color: var(--site-nav-on-accent);
}

.site-nav__home:focus-visible,
.site-nav__toggle:focus-visible,
.site-nav__link:focus-visible {
  outline: 3px solid var(--site-nav-accent);
  outline-offset: 2px;
}

/* JS present: collapse the links behind Menu until it is opened. */
.site-nav--enhanced .site-nav__toggle {
  display: inline-flex;
}

.site-nav--enhanced .site-nav__links {
  display: none;
}

.site-nav--enhanced.site-nav--open .site-nav__links {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.125rem;
  padding: 0.375rem 0 0.625rem;
  border-top: 1px solid var(--site-nav-edge);
}

.site-nav--enhanced.site-nav--open .site-nav__link--cta {
  margin-top: 0.375rem;
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav__toggle,
  .site-nav__link,
  .site-nav__toggle-bars,
  .site-nav__toggle-bars::before,
  .site-nav__toggle-bars::after {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, top 0.2s ease;
  }
}

/* Tablet (48rem): same collapsed layout, roomier bar. */
@media (min-width: 768px) {
  .site-nav__inner {
    padding: 0.5rem 1.5rem;
  }

  .site-nav__home {
    font-size: 1.125rem;
  }
}

/* Desktop (64rem): all links inline, Menu retired. */
@media (min-width: 1024px) {
  .site-nav__inner {
    flex-wrap: nowrap;
    padding: 0.5rem 2rem;
  }

  .site-nav__toggle,
  .site-nav--enhanced .site-nav__toggle {
    display: none;
  }

  .site-nav__links,
  .site-nav--enhanced .site-nav__links,
  .site-nav--enhanced.site-nav--open .site-nav__links {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.125rem;
    margin-left: auto;
    padding: 0;
    border-top: 0;
  }

  .site-nav__link {
    font-size: 0.9375rem;
  }

  .site-nav__link--cta,
  .site-nav--enhanced.site-nav--open .site-nav__link--cta {
    margin: 0 0 0 0.5rem;
  }
}

@media print {
  .site-nav {
    display: none;
  }
}