/* ============================================================
   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);
}

/* The shared .container caps at 1200px (--container in tokens.css) for body-copy line
   length; that ceiling has nothing to do with a single nav row and, even after the gap
   and font tightening below, 7 top-level items + the client's real image logo still need
   more than 1200px. Give the nav bar's own row a wider ceiling instead of shrinking the
   row further — .container still falls back to `100% - 2.5rem` on anything narrower. */
.sec-01-nav .container {
  --container: 1320px;
}

/* --- 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(359 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(359 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;
  /* Tightened from clamp(1rem, 3vw, 2.5rem): a 7th top-level item (Education) plus
     the bigger image logo no longer fit the 1200px container at the old gap. */
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
  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;
  /* Tightened from clamp(1.25rem, 2vw, 2.25rem) for the same 7-item fit as .sec-01-nav__inner above. */
  gap: clamp(0.85rem, 1.3vw, 1.4rem);
}

.sec-01-nav .sec-01-nav__link {
  position: relative;
  color: var(--text-on-ink-dim);
  font-weight: 500;
  font-size: 0.88rem;
  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;
  /* Tightened from clamp(0.75rem, 2vw, 1.5rem) for the same 7-item fit noted above. */
  gap: clamp(0.6rem, 1vw, 1rem);
}

.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); }

.sec-01-nav .sec-01-nav__cta {
  padding-block: 0.7rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* --- 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(--nav-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;
}

/* 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;
}

/* --- 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 ---
   Raised from 1200px to 1320px: adding the Education top-level item (7 total, plus the
   bigger image logo from the client's real logo) needs the wider 1320px nav container
   set above to fit without crowding. Below this viewport the container can't reach that
   width (it falls back to `100% - 2.5rem`), so the row goes to the hamburger instead of
   clipping the phone number and CTA off the edge. */
@media (max-width: 1320px) {
  .sec-01-nav .sec-01-nav__links,
  .sec-01-nav .sec-01-nav__phone,
  .sec-01-nav .sec-01-nav__cta {
    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);
}

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 (optional) ---
   The default logo is a text wordmark. To use a client's real logo, swap the wordmark in
   sections/01-nav.html for:
     <a href="/" class="sec-01-nav__logo" aria-label="[CLINIC_NAME_PLACEHOLDER] home">
       <img class="sec-01-nav__logo-img" src="assets/images/logo.webp"
            alt="[CLINIC_NAME_PLACEHOLDER]" width="560" height="166">
     </a>
   Height-driven so it tracks the bar's scrolled shrink. Supply a white/knockout logo:
   the bar is dark in every state. */
.sec-01-nav .sec-01-nav__logo-img {
  /* This client's real logo packs an icon tightly between two wordmarks plus a small
     tagline; at the old 30-38px clamp it read as a cramped, overlapping smudge. Sized
     up to roughly match the client's own live-site header (~55px tall at desktop). */
  height: clamp(42px, 4vw, 54px);
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: height 400ms var(--ease-out);
}
html.is-scrolled .sec-01-nav .sec-01-nav__logo-img {
  height: clamp(36px, 3.2vw, 44px);
}

/* The "long dropdowns" rule below gives .sec-01-nav__logo min-width:0 + flex-shrink:1
   so an overlong TEXT clinic name can ellipsis instead of blowing out the row. This
   client build uses an image logo instead, and the same shrink squished the <img>'s
   width down to a sliver once a 7th top-level item (Education) tightened the row.
   The image itself must never shrink below its own intrinsic size. */
.sec-01-nav .sec-01-nav__logo:has(.sec-01-nav__logo-img) {
  flex-shrink: 0;
  overflow: visible;
}

/* --- 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(--nav-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;
}

/* --- Submenu toggle icon: the markup is two empty spans, drawn here as a
   plus (closed) that collapses to a minus (open) --- */
.sec-01-nav .sec-01-nav__overlay-expand { position: relative; }
.sec-01-nav .sec-01-nav__overlay-expand span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 250ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__overlay-expand span:nth-child(2) { transform: rotate(90deg); }
.sec-01-nav .sec-01-nav__overlay-group.is-expanded .sec-01-nav__overlay-expand span:nth-child(2) {
  transform: rotate(0deg);
}
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-expand span { transition: none; }

/* Expanded menus can be taller than the screen: let the overlay scroll */
.sec-01-nav .sec-01-nav__overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(clamp(2rem, 8vw, 4rem) + env(safe-area-inset-bottom));
}