/* Shared clinic chrome. Loaded last on the homepage and public workflows. */
:root {
  --cream: #f7f5ef;
  --white: #fffefb;
  --text: #252b27;
  --ink: var(--text);
  --muted: #657069;
  --green: #667e62;
  --green-dark: #4f694f;
  --green-soft: #e9eee6;
  --line: #e3e2dc;
  --serif: "Lora", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --content-max: 1320px;
}
body { background: var(--white); color: var(--text); font: 400 16px/1.65 var(--sans); }
.site-header.booking-header { display: block; width: 100%; height: 84px; margin: 0; }
.site-header .header-shell, .footer-shell { max-width: var(--content-max); }
.site-header.booking-header nav { margin-left: 0; }
.site-header .nav-book:hover { color: white; background: var(--green-dark); }

/* Workflow content shares the homepage grid, palette and editorial type. */
.booking-hero { display: block; min-height: 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.booking-hero > div:first-child { width: min(calc(100% - 48px), var(--content-max)); margin-inline: auto; padding: clamp(1.75rem, 3vw, 2.75rem) 0; }
.booking-hero h1 { margin: .85rem 0 .8rem; font-weight: 400; }
.booking-hero p:last-child { max-width: 65ch; }
.crumb { margin: 0; font-size: .8125rem; }
.wizard-shell { width: min(calc(100% - 48px), var(--content-max)); padding-top: 2rem; }
.service-card, .panel-card, .secondary-action, .calendar-nav button, .time-grid button,
.details-step input, .waitlist-card input, .reschedule-box select { background: var(--white); }
.service-card.selected, .summary-card { background: var(--green-soft); }
.service-card b { color: var(--green-dark); }
.step-heading p, .service-card small, .time-empty, .waitlist-card p { font-size: .875rem; }
.waitlist-card { background: var(--cream); }
.primary-action { border-radius: 12px; }
.offer-page { min-height: calc(100svh - 260px); padding: clamp(1.5rem, 4vw, 3rem) 24px; background: var(--cream); }
.offer-page .confirmation-step { margin: 0 auto; background: var(--white); padding: clamp(1.5rem, 4vw, 3rem); }
.offer-page h1 { font: 400 clamp(2rem, 4vw, 3.2rem)/1.15 var(--serif); letter-spacing: -.03em; }
.manage-facts { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); }
.manage-facts p, .manage-facts strong { min-width: 0; overflow-wrap: anywhere; }
.reschedule-box select { max-width: 100%; }
.confirmation-step { background: var(--green-soft); }
.noscript-booking { margin: 1rem 24px; }

/* Lock both scroll roots; fixed body also prevents touch scrolling on mobile Safari. */
html.menu-open { overflow:hidden; overscroll-behavior:none; }
body.menu-open { position:fixed; width:100%; overflow:hidden; overscroll-behavior:none; }
/* Keep the header's original space when it becomes fixed while the menu is open. */
body.menu-open::before { content:""; display:block; height:70px; }

/* Navigation stays visible without JS; enhancement uses script.js's menu handler.
   Switch before the full desktop navigation runs out of horizontal room. */
@media (max-width: 1050px) {
  .site-header.booking-header { height: auto; position: relative; }
  .site-header .header-shell { flex-wrap: wrap; padding-block: 1rem; gap: .8rem; }
  .site-header .menu-button { display: none; }
  .site-header.booking-header nav { position: static; inset: auto; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; align-items: center; justify-content: flex-start; gap: .5rem 1.2rem; padding: 0; transform: none; visibility: visible; transition: none; background: var(--white); }
  .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 0; border: 0; font: 500 .875rem var(--sans); }
  .site-header .nav-book { margin-top: 0; padding: .7rem 1.15rem; }
  .shell-ready .site-header.booking-header { height: 70px; position: sticky; }
  .shell-ready .site-header .header-shell { flex-wrap: nowrap; padding-block: 0; }
  .shell-ready .site-header .menu-button { display: block; }
  .shell-ready.menu-open .site-header.booking-header { position:fixed; top:0; left:0; }
  .shell-ready .site-header.booking-header nav { position: fixed; inset: 70px 0 auto; height:calc(100vh - 70px); height:calc(100dvh - 70px); width: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 1.2rem 1.4rem max(1.2rem, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }
  .shell-ready .site-header nav.open { transform: none; visibility: visible; transition: transform .3s ease; }
  .shell-ready .site-header nav a { min-height: 52px; flex-shrink: 0; padding: .5rem 0; border-bottom: 1px solid var(--line); font: 500 1.15rem var(--serif); }
  .shell-ready .site-header .nav-book { margin-top: 1rem; justify-content: center; border: 0; }
}
@media (max-width: 760px) {
  .booking-hero > div:first-child, .wizard-shell { width: min(calc(100% - 32px), var(--content-max)); }
  .offer-page { padding-inline: 16px; }
}
@media (max-width: 640px) {
  .manage-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .shell-ready .site-header.booking-header nav { transition: none; }
}