/* ============================================================
   Section 01 — Nav
   Fixed ink-glass bar, condenses on scroll, scroll-progress line,
   full-screen overlay menu on mobile. All selectors scoped under
   .sec-01-nav (plus a required body-scroll-lock state class the
   nav JS toggles while the mobile overlay is open).
   ============================================================ */

.sec-01-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  font-family: var(--font-body);
}

/* --- Utility bar (Make a Payment / Book Online / phone) ---
   Reinstated at the client's request (2026-09 revision): reproduces aimpts.com's own
   header treatment, a slim row above the main nav row carrying both booking-adjacent
   links plus the phone number. Sized by --util-h in tokens.css so --header-h (scroll-
   margin-top, hero/pinned-section offsets) stays in sync automatically. This row is
   NEVER hidden by the .sec-01-nav__links hamburger collapse below - it stays visible at
   every breakpoint, desktop and mobile, matching the old site's own treatment. */
.sec-01-nav .sec-01-nav__utility {
  position: relative;
  z-index: 211;
  background: var(--ink);
  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}

.sec-01-nav .sec-01-nav__utility-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(0.4rem, 2vw, 1rem);
  height: var(--util-h);
}

.sec-01-nav .sec-01-nav__utility-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid hsl(0 0% 100% / 0.3);
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 0.55rem + 0.4vw, 0.82rem);
  font-weight: 600;
  color: var(--text-on-ink-dim);
  text-decoration: none;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__utility-link:hover,
.sec-01-nav .sec-01-nav__utility-link:focus-visible {
  color: var(--text-on-ink);
  border-color: hsl(0 0% 100% / 0.55);
  background: hsl(0 0% 100% / 0.08);
}

.sec-01-nav .sec-01-nav__utility-link--book {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.sec-01-nav .sec-01-nav__utility-link--book:hover,
.sec-01-nav .sec-01-nav__utility-link--book:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-on);
}

@media (max-width: 480px) {
  .sec-01-nav .sec-01-nav__utility-inner { gap: 0.35rem; }
  .sec-01-nav .sec-01-nav__utility-link { padding: 0.3rem 0.55rem; font-size: 0.64rem; }
}

/* --- Bar --- */
.sec-01-nav .sec-01-nav__bar {
  position: relative;
  /* Must paint above the mobile overlay (z-index 199) so the toggle stays clickable while the menu is open */
  z-index: 210;
  background: hsl(200 35% 6% / 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
  transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

html.is-scrolled .sec-01-nav .sec-01-nav__bar {
  background: hsl(200 40% 5% / 0.86);
  border-bottom-color: hsl(0 0% 100% / 0.12);
  box-shadow: var(--shadow-soft);
}

.sec-01-nav .sec-01-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: var(--nav-h);
  transition: height 400ms var(--ease-out);
}

html.is-scrolled .sec-01-nav .sec-01-nav__inner {
  height: calc(var(--nav-h) - 18px);
}

/* --- Logo --- */
.sec-01-nav .sec-01-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem);
  letter-spacing: -0.01em;
  color: var(--text-on-ink);
  text-decoration: none;
  white-space: nowrap;
}

.sec-01-nav .sec-01-nav__logo-dot {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* --- Center links --- */
.sec-01-nav .sec-01-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}

.sec-01-nav .sec-01-nav__link {
  position: relative;
  color: var(--text-on-ink-dim);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__link:hover,
.sec-01-nav .sec-01-nav__link:focus-visible {
  color: var(--text-on-ink);
}

.sec-01-nav .sec-01-nav__link:hover::after,
.sec-01-nav .sec-01-nav__link:focus-visible::after {
  transform: scaleX(1);
}

/* --- Multi-location slot (kept dark-safe if ever enabled) --- */
.sec-01-nav .sec-01-nav__locations { position: relative; }
.sec-01-nav .sec-01-nav__locations-toggle {
  background: none;
  border: none;
  color: var(--text-on-ink-dim);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.sec-01-nav .sec-01-nav__locations-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.75rem;
  min-width: 180px;
  background: var(--ink-2);
  border-radius: var(--radius-card);
  padding: 0.5rem;
  box-shadow: var(--shadow-lift);
}

/* --- Right actions --- */
.sec-01-nav .sec-01-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.sec-01-nav .sec-01-nav__phone {
  color: var(--text-on-ink-dim);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__phone:hover { color: var(--text-on-ink); }

/* --- Scroll progress: clean straight bar driven by --scroll-progress --- */
.sec-01-nav .sec-01-nav__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
}

.sec-01-nav .sec-01-nav__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
}

/* --- Hamburger toggle (mobile) --- */
.sec-01-nav .sec-01-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sec-01-nav .sec-01-nav__toggle-line {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--text-on-ink);
  border-radius: 2px;
  transition: transform 320ms var(--ease-spring), opacity 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(2) {
  opacity: 0;
}
.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Full-screen ink overlay menu --- */
.sec-01-nav .sec-01-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 8vh, 4rem);
  padding: calc(var(--header-h) + 1.75rem) clamp(2rem, 8vw, 4rem) clamp(2rem, 8vw, 4rem);
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 380ms var(--ease-out), visibility 380ms;
}

.sec-01-nav .sec-01-nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sec-01-nav .sec-01-nav__overlay-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sec-01-nav .sec-01-nav__overlay-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 5vw, 3.75rem);
  letter-spacing: -0.02em;
  color: var(--text-on-ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: 0ms;
}

.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}

.sec-01-nav .sec-01-nav__overlay-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  transition-delay: 380ms;
}

.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-footer {
  opacity: 1;
}

.sec-01-nav .sec-01-nav__overlay-phone {
  color: var(--text-on-ink-dim);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
}

/* "Make a Payment" removed from here - it's now the "Pay Here" link inside
   .sec-01-nav__overlay-links (styled via .sec-01-nav__overlay-link), not a separate
   footer-only treatment. */

/* Body scroll lock while the mobile overlay is open (state class set by js/sections/01-nav.js) */
body.sec-01-nav-lock {
  overflow: hidden;
}
/* The LeadConnector chat (sections/99-chat-widget.html) paints its greeting and bubble
   above everything from inside its shadow root, so it covered menu items. Hide it while
   the overlay is open; it returns untouched when the menu closes. */
body.sec-01-nav-lock chat-widget {
  display: none !important;
}

/* --- Reduced motion: no slide/stagger, just fade --- */
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-link,
html.reduced-motion .sec-01-nav .sec-01-nav__toggle-line,
html.reduced-motion .sec-01-nav .sec-01-nav__overlay {
  transition-duration: 1ms;
  transform: none;
}
html.reduced-motion .sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-link {
  transition-delay: 0ms;
}

/* --- Breakpoint: mobile nav --- */
/* 1100px (template default). It was raised to 1400px when Events was added, but with the
   current icon logo the full row (6 items + phone) measures ~745px and still clears the
   logo by ~100px at 1101px, so 1280/1366 laptops get the full menu (2026-10-09 QA). */
@media (max-width: 1100px) {
  /* .sec-01-nav__phone lives inside .sec-01-nav__links now, so hiding the links group
     already hides it - no separate selector needed. */
  .sec-01-nav .sec-01-nav__links {
    display: none;
  }
  .sec-01-nav .sec-01-nav__toggle {
    display: flex;
  }
}

@media (max-width: 480px) {
  .sec-01-nav .sec-01-nav__overlay-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Desktop dropdowns (Services / What We Treat) --- */
.sec-01-nav .sec-01-nav__item { position: relative; display: flex; align-items: center; }

.sec-01-nav .sec-01-nav__link--parent {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sec-01-nav .sec-01-nav__caret {
  transition: transform 250ms var(--ease-out);
  opacity: 0.7;
}

.sec-01-nav .sec-01-nav__item:hover .sec-01-nav__caret,
.sec-01-nav .sec-01-nav__item:focus-within .sec-01-nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.sec-01-nav .sec-01-nav__dropdown {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  margin-top: 0.9rem;
  min-width: 230px;
  padding: 0.5rem;
  background: var(--ink-2);
  border: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms;
  z-index: 5;
}

/* Invisible hover bridge across the gap between link and panel */
.sec-01-nav .sec-01-nav__dropdown::before {
  content: "";
  position: absolute;
  top: -0.95rem;
  left: 0;
  right: 0;
  height: 1rem;
}

.sec-01-nav .sec-01-nav__item:hover .sec-01-nav__dropdown,
.sec-01-nav .sec-01-nav__item:focus-within .sec-01-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sec-01-nav .sec-01-nav__dropdown-link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  color: var(--text-on-ink-dim);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__dropdown-link:hover,
.sec-01-nav .sec-01-nav__dropdown-link:focus-visible {
  background: hsl(0 0% 100% / 0.07);
  color: var(--text-on-ink);
}

.sec-01-nav .sec-01-nav__dropdown-link--all {
  margin-top: 0.3rem;
  border-top: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: 0 0 10px 10px;
  color: hsl(var(--accent-h) 70% 62%);
  font-family: var(--font-display);
  font-weight: 600;
}

html.reduced-motion .sec-01-nav .sec-01-nav__dropdown,
html.reduced-motion .sec-01-nav .sec-01-nav__caret { transition: none; }

/* --- Mobile overlay groups (expandable sublists) --- */
.sec-01-nav .sec-01-nav__overlay { overflow-y: auto; justify-content: flex-start; }
.sec-01-nav .sec-01-nav__overlay-links { margin-block: auto; }

.sec-01-nav .sec-01-nav__overlay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sec-01-nav .sec-01-nav__overlay-expand {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.15);
  border-radius: 50%;
  color: var(--text-on-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out),
    background-color 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-expand {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 70ms + 80ms), calc(var(--i, 0) * 70ms + 80ms), 0ms;
}

.sec-01-nav .sec-01-nav__overlay-expand svg {
  transition: transform 250ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay-group.is-expanded .sec-01-nav__overlay-expand svg {
  transform: rotate(180deg);
}

.sec-01-nav .sec-01-nav__overlay-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay-group.is-expanded .sec-01-nav__overlay-sub {
  grid-template-rows: 1fr;
}

.sec-01-nav .sec-01-nav__overlay-sub-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sec-01-nav .sec-01-nav__overlay-sub-inner a {
  padding: 0.55rem 0 0.55rem 1.25rem;
  color: var(--text-on-ink-dim);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid hsl(0 0% 100% / 0.12);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay-sub-inner a:hover,
.sec-01-nav .sec-01-nav__overlay-sub-inner a:focus-visible {
  color: var(--text-on-ink);
  border-left-color: var(--accent);
}

.sec-01-nav .sec-01-nav__overlay-sub-inner-all {
  margin-top: 0.3rem;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(0 0% 100% / 0.12);
  border-left-color: hsl(var(--accent-h) 70% 62% / 0.4);
  color: hsl(var(--accent-h) 70% 62%);
  font-family: var(--font-display);
  font-weight: 600;
}

html.reduced-motion .sec-01-nav .sec-01-nav__overlay-sub,
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-expand { transition: none; }

/* --- Image logo ---
   Real client logo is wired in sections/01-nav.html (logo-white.webp — the bar is dark,
   translucent-ink at top and opaque-ink scrolled, in every state, so the knockout variant
   is correct here). Height-driven so it tracks the bar's scrolled shrink.
   Client revision pass (2026-08-28): logo read as too small / not visible enough in the
   nav. Bumped both the resting and scrolled floor+ceiling ~32% (30->40 / 38->50 resting,
   26->34 / 32->42 scrolled). --nav-h (76px) is untouched: at the new sizes the logo still
   sits comfortably inside the bar with room to spare, so the bar itself doesn't need to
   grow to stay proportioned. The clamp's floor also governs mobile (the desktop link/CTA
   cluster hides below the 1200px breakpoint, but the logo doesn't), so this bump is
   automatically applied on mobile too. */
.sec-01-nav .sec-01-nav__logo-img {
  height: clamp(40px, 3.2vw, 50px);
  width: auto;
  display: block;
  transition: height 400ms var(--ease-out);
}
html.is-scrolled .sec-01-nav .sec-01-nav__logo-img {
  height: clamp(34px, 2.7vw, 42px);
}

/* --- Long dropdowns ---
   A client with many condition/service pages produces a tall single-column dropdown that
   can run off a laptop screen. Add sec-01-nav__dropdown--cols2 to the panel for two
   columns; the max-height is a backstop for anything longer still.
   NOTE: if you add TOP-LEVEL nav items, or the clinic name is long, re-check the desktop
   row just above the hamburger breakpoint and raise it if the CTA clips. The breakpoint is
   1200px because the row (logo + 4 links + phone + CTA) needs about 1200px once the logo is
   a full clinic name; it used to be 900px, which left the CTA overflowing the container
   from 901px up to ~1200px on every load. The shrink guards below keep a longer-than-usual
   name from breaking the row outright, but an image logo is the better answer. */
.sec-01-nav .sec-01-nav__inner { flex-wrap: nowrap; }
.sec-01-nav .sec-01-nav__logo {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-01-nav .sec-01-nav__actions { flex-shrink: 0; }
.sec-01-nav .sec-01-nav__dropdown {
  max-height: calc(100vh - var(--header-h) - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sec-01-nav .sec-01-nav__dropdown--cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 0 1rem;
  min-width: 470px;
}
.sec-01-nav .sec-01-nav__dropdown--cols2 .sec-01-nav__dropdown-link--all {
  grid-column: 1 / -1;
}