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

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

.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 --- */
/* Staszak: breakpoint raised 1200 -> 1259px; the client's 7-item menu + Pay Online + CTA
   needs ~1240px (measured). Pay Online moves into the overlay below this width. */
@media (max-width: 1259px) {
  .sec-01-nav .sec-01-nav__links,
  .sec-01-nav .sec-01-nav__phone,
  .sec-01-nav .sec-01-nav__pay,
  .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: var(--accent-light);
  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. */
/* Staszak: 3-line lockup (mark + STASZAK + Physical Therapy & Wellness Center). At the
   template's 30-38px the smallest line drops to ~8px; 44-54px keeps it legible. */
.sec-01-nav .sec-01-nav__logo-img {
  height: clamp(44px, 3.8vw, 54px);
  width: auto;
  display: block;
  transition: height 400ms var(--ease-out);
}
html.is-scrolled .sec-01-nav .sec-01-nav__logo-img {
  height: clamp(40px, 3.2vw, 46px);
}

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

/* A11y (QA Pass 7): standalone text links get a 44px touch target. */
.sec-01-nav .sec-01-nav__phone, .sec-01-nav .sec-01-nav__link { display: inline-flex; align-items: center; min-height: 44px; }

.sec-01-nav .sec-01-nav__link { min-width: 44px; justify-content: center; }

/* A11y (QA Pass 7): the brand accent (#256194) is too dark for a focus ring on ink. On dark
   surfaces use the template's on-ink accent tint so keyboard focus stays >=3:1. */
.on-ink :focus-visible, .sec-01-nav :focus-visible, .sec-14-footer :focus-visible, .sec-17-mobilebar :focus-visible {
  outline-color: var(--accent-light);
}

/* Staszak: "Pay Online" (client's Kareo patient portal) sits beside the primary CTA.
   Ghost style on the dark bar so the solid CTA stays the primary action. */
.sec-01-nav .sec-01-nav__pay {
  padding: 0.7rem 1.1rem;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--text-on-ink);
  border-color: hsl(0 0% 100% / 0.35);
}
.sec-01-nav .sec-01-nav__overlay-pay {
  margin-top: 0.75rem;
  width: 100%;
  justify-content: center;
  color: var(--text-on-ink);
  border-color: hsl(0 0% 100% / 0.35);
}

/* Staszak: the client's own 7-item menu + Pay Online + CTA needs more room than the
   template's 1200px container. Widen the nav row only, tighten link rhythm, never let the
   logo shrink, and show the phone number only when there is room for it. */
.sec-01-nav .sec-01-nav__inner.container { width: min(1400px, 100% - 2.5rem); }
.sec-01-nav .sec-01-nav__logo { flex-shrink: 0; overflow: visible; }
.sec-01-nav .sec-01-nav__links { gap: clamp(0.7rem, 1vw, 1.35rem); }
.sec-01-nav .sec-01-nav__link { font-size: 0.88rem; }
.sec-01-nav .sec-01-nav__inner { gap: clamp(0.75rem, 1.5vw, 2rem); }
.sec-01-nav .sec-01-nav__actions { gap: 0.6rem; }
.sec-01-nav .sec-01-nav__cta { padding-inline: 1.15rem; font-size: 0.9rem; white-space: nowrap; }
/* The phone number moves out of the desktop bar (the client menu leaves no room for it);
   it stays in the mobile overlay, sticky mobile bar, footer, booking and contact sections. */
.sec-01-nav .sec-01-nav__phone { display: none; }