/* ==========================================================================
   Main Stylesheet — Move As You Should
   Mobile-first CSS. Base styles work at 375px with no media queries.
   Both variables.css and styles.css are linked separately in HTML.
   ========================================================================== */


/* ==========================================================================
   1. @FONT-FACE DECLARATIONS
   Self-hosted variable fonts — no external CDN dependency at runtime.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin-wght-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   2. MODERN CSS RESET
   Minimal, targeted reset for cross-browser consistency.
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  scroll-padding-top: var(--header-height);
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  line-height: var(--line-height-body);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

a {
  color: var(--color-primary);
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--color-primary-dark);
}


/* ==========================================================================
   3. BACKGROUND TEXTURE
   Subtle linen/paper texture using CSS gradients — zero image overhead.
   ========================================================================== */

body {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.015) 2px,
      rgba(0, 0, 0, 0.015) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.015) 2px,
      rgba(0, 0, 0, 0.015) 4px
    );
}

/* Alternative: SVG noise pattern for a more organic linen feel (~1-2KB overhead).
   Uncomment this and remove the gradient approach above to switch.

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
*/


/* ==========================================================================
   4. BASE TYPOGRAPHY
   Heading hierarchy and paragraph styles. Sizes from the design token scale.
   ========================================================================== */

h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

p {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
}

/* Last paragraph in a container should not add trailing margin */
p:last-child {
  margin-bottom: 0;
}

/* Small / secondary text */
small,
.text-small {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}


/* ==========================================================================
   5. LAYOUT UTILITIES
   Container, content width, section spacing, and hero patterns.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.content {
  max-width: var(--content-width);
  margin: 0 auto;
}

.section {
  padding: var(--space-3xl) 0;
}

.hero {
  width: 100%;
  padding: var(--space-3xl) 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}


/* ==========================================================================
   6. TOUCH TARGET ENFORCEMENT (DESG-05)
   All interactive elements enforce minimum 44x44px touch targets.
   WCAG 2.5.8 compliance.
   ========================================================================== */

a,
button,
[role="button"],
input,
select,
textarea {
  min-height: 44px;
}

/* Inline content links use padding approach instead of min-height */
.content a {
  padding: 0.25rem 0;
  min-height: auto;
}

/* Navigation links need explicit sizing */
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
}


/* ==========================================================================
   7. BUTTON COMPONENTS
   Primary (terracotta fill) and secondary (outline/ghost) button styles.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color var(--transition-speed),
              border-color var(--transition-speed),
              color var(--transition-speed);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #FFFFFF;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}


/* ==========================================================================
   8. CARD COMPONENT BASE
   White surface with sage border, rounded corners, subtle hover shadow.
   ========================================================================== */

.card {
  background-color: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  transition: box-shadow var(--transition-speed);
}

.card:hover {
  box-shadow: 0 4px 12px rgba(61, 50, 40, 0.08);
}


/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS (MOBILE-FIRST)
   Base styles = mobile (375px+). Media queries add complexity upward.
   Using traditional min-width syntax for broadest browser support.
   ========================================================================== */

/* --- Tablet and up (768px) --- */
@media (min-width: 768px) {
  :root {
    --content-padding: var(--space-lg);
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  .section {
    padding: var(--space-4xl) 0;
  }

  .hero {
    padding: var(--space-4xl) 0;
  }
}

/* --- Desktop (1024px) --- */
@media (min-width: 1024px) {
  :root {
    --content-padding: var(--space-xl);
  }

  h1 {
    font-size: calc(var(--font-size-3xl) * 1.1);
  }
}


/* ==========================================================================
   10. iOS FORM INPUT FIX
   Prevent iOS Safari from zooming in on form inputs with small font sizes.
   ========================================================================== */

input,
select,
textarea {
  font-size: max(16px, 1rem);
}


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Visibility utilities for JS-driven show/hide */
.is-hidden { display: none; }

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-xs);
}

/* Text alignment */
.text-center {
  text-align: center;
}


/* ==========================================================================
   11. HEADER
   Sticky header with brand name left, navigation right.
   No ancestor with overflow: hidden (breaks position: sticky).
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-secondary);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.brand {
  text-decoration: none;
  color: var(--color-primary);
  min-height: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.brand-logo {
  height: 36px;
  width: auto;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.brand:hover .brand-name {
  color: var(--color-primary-dark);
}


/* ==========================================================================
   12. HAMBURGER ICON
   CSS-only three lines with transform animation to X shape.
   ========================================================================== */

.menu-toggle {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: background-color var(--transition-speed);
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  position: absolute;
  transition: transform var(--transition-speed);
}

.hamburger-icon::before {
  top: -7px;
}

.hamburger-icon::after {
  bottom: -7px;
}

/* Hamburger to X animation */
.menu-toggle[aria-expanded="true"] .hamburger-icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: rotate(-45deg);
  bottom: 0;
}


/* ==========================================================================
   13. MOBILE NAVIGATION (base = mobile-first)
   Hidden by default, revealed via .is-open class from JS.
   ========================================================================== */

.main-nav {
  display: none;
}

.main-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-secondary);
  padding: var(--space-md) 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  border-bottom: 1px solid rgba(139, 158, 122, 0.2);
}

.nav-list li:last-child {
  border-bottom: none;
}

.nav-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) var(--content-padding);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
}

.nav-list a:hover {
  color: var(--color-primary);
  background-color: rgba(198, 123, 77, 0.05);
}

.nav-phone {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) var(--content-padding);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.nav-phone:hover {
  color: var(--color-primary-dark);
}


/* ==========================================================================
   14. FOOTER
   Warm brown background with cream text. Three-column on desktop.
   ========================================================================== */

.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-logo {
  height: 40px;
  width: auto;
  align-self: flex-start;
}

.footer-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-footer-text);
}

.footer-tagline,
.footer-area {
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: var(--space-xs);
  display: block;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-contact a {
  color: var(--color-footer-text);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer-contact a:hover {
  color: var(--color-accent);
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav a {
  color: var(--color-footer-text);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  margin: var(--space-xl) 0 var(--space-lg);
}

.footer-legal {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

.disclaimer {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  opacity: 0.7;
}


/* ==========================================================================
   15. HERO SECTION (placeholder styles)
   Centered content for the homepage hero area.
   ========================================================================== */

.hero {
  text-align: center;
}

.hero h1 {
  margin-bottom: var(--space-lg);
}

.hero .hero-eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A5A33;                    /* darker terracotta: 5:1 on cream for small text */
  margin: 0 auto var(--space-sm);
}

.hero p {
  font-size: var(--font-size-md);
  max-width: 40rem;
  margin: 0 auto var(--space-xl);
  color: var(--color-text-light);
}


/* ==========================================================================
   16. HOMEPAGE HERO MODIFIER
   Shorter hero for homepage so specialty cards peek below the fold.
   ========================================================================== */

.hero--home {
  min-height: auto;
}

.hero-phone {
  text-align: center;
  margin-top: var(--space-lg);
}

.hero-phone a {
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
}

.phone-label {
  font-weight: 600;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.phone-number {
  font-weight: 600;
  font-size: var(--font-size-md);
}

.hero-phone a:hover {
  color: var(--color-primary);
}


/* ==========================================================================
   17. SPECIALTY CARDS
   Three-column grid of clickable specialty cards with tinted backgrounds.
   Uses pseudo-element trick for accessible full-card click area.
   ========================================================================== */

.specialty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.specialty-card {
  position: relative;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

.specialty-card--ortho {
  background-color: var(--color-tint-ortho);
}

.specialty-card--peds {
  background-color: var(--color-tint-peds);
}

.specialty-card--pelvic {
  background-color: var(--color-tint-pelvic);
}

.specialty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-md);
  color: var(--color-primary);
}

.specialty-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
}

.specialty-card h3 a {
  color: var(--color-text);
  text-decoration: none;
}

.specialty-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.specialty-card h3 a:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--border-radius-lg);
}

.specialty-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  text-align: left;
}

.specialty-list li {
  padding: var(--space-xs) 0;
  color: var(--color-text-light);
  font-size: var(--font-size-base);
  padding-left: var(--space-md);
  position: relative;
}

.specialty-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.card-cta {
  display: inline-block;
  margin-top: var(--space-sm);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.card-cta::after {
  content: ' \2192';
}


/* ==========================================================================
   18. BENEFITS SECTION
   Grid of benefit items with icons for the "Why In-Home PT?" section.
   ========================================================================== */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.benefit-item {
  text-align: center;
  padding: var(--space-lg);
}

.benefit-item svg {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--space-sm);
  color: var(--color-secondary);
}

.benefit-item h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.benefit-item p {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
}


/* ==========================================================================
   19. JENNIFER INTRO SECTION
   Brief intro with link to About page.
   ========================================================================== */

.intro-section {
  display: grid;
  justify-items: center;
  gap: var(--space-xl);
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Beats the later .about-photo 220px sizing */
.about-photo.intro-photo {
  width: var(--intro-photo-size);
  height: var(--intro-photo-size);
  aspect-ratio: 1;
  box-shadow: var(--space-sm) var(--space-sm) 0 0 var(--color-primary);
}

@media (min-width: 768px) {
  .intro-section {
    grid-template-columns: var(--intro-photo-size) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: var(--space-2xl);
    text-align: left;
  }
}

.intro-section p {
  font-size: var(--font-size-md);
}


/* ==========================================================================
   20. CLOSING CTA SECTION
   Warm-tinted call to action block before the footer.
   ========================================================================== */

.cta-closing {
  text-align: center;
  background-color: var(--color-tint-ortho);
  border-radius: var(--border-radius-lg);
  padding: var(--space-3xl) var(--space-lg);
  max-width: var(--content-width);
  margin: 0 auto;
}

.cta-closing h2 {
  margin-bottom: var(--space-sm);
}

.cta-closing p {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}


/* ==========================================================================
   21. ACTIVE NAVIGATION
   Highlights the current page's nav link using the accessible
   aria-current="page" attribute as a CSS hook.
   ========================================================================== */

.nav-list a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}


/* ==========================================================================
   22. SERVICES PAGE HERO (compact)
   Overrides the base .hero 100vh to create a content-sized compact hero.
   ========================================================================== */

.hero--services {
  min-height: auto;
  padding: var(--space-3xl) 0 var(--space-2xl);
}


/* ==========================================================================
   23. SERVICE SECTIONS
   Full-width tinted background sections for each specialty.
   Background color on the section (full viewport width), content
   constrained via .container and .service-content inside.
   ========================================================================== */

.service-section {
  padding: var(--space-4xl) 0;
}

.service-section--ortho {
  background-color: var(--color-tint-ortho);
}

.service-section--peds {
  background-color: var(--color-tint-peds);
}

.service-section--pelvic {
  background-color: var(--color-tint-pelvic);
}

.service-header {
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto var(--space-2xl);
}

.service-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-md);
  color: var(--color-primary);
}

.service-intro {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  max-width: 40rem;
  margin: 0 auto;
}

.service-content {
  max-width: var(--content-width);
  margin: 0 auto var(--space-2xl);
}

.service-content:last-of-type {
  margin-bottom: var(--space-lg);
}

.service-content h3 {
  margin-bottom: var(--space-md);
}

.service-cta {
  text-align: center;
  padding-top: var(--space-lg);
}


/* ==========================================================================
   24. CONDITIONS GRID
   2-column responsive grid of conditions with small inline SVG icons.
   Uses auto-fit for natural column behavior: 2 cols on desktop,
   1 col on narrow mobile.
   ========================================================================== */

.conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.condition-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.condition-item svg {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
}

.condition-item span {
  font-size: var(--font-size-base);
  color: var(--color-text);
}


/* ==========================================================================
   25. ABOUT PAGE HERO (compact)
   Overrides the base .hero 100vh to create a content-sized compact hero.
   Same pattern as services page.
   ========================================================================== */

.hero--about {
  min-height: auto;
  padding: var(--space-3xl) 0 var(--space-2xl);
}


/* ==========================================================================
   26. ABOUT INTRO (photo + text side-by-side on desktop)
   Stacked centered on mobile, flex row on tablet+.
   ========================================================================== */

.about-intro-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  max-width: var(--content-width);
  margin: 0 auto;
}

.about-intro-text {
  text-align: center;
}

.about-intro-text p {
  font-size: var(--font-size-md);
}


/* About photo: same circle + sage border as the placeholder below */
.about-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  object-fit: cover;
  flex-shrink: 0;
}


/* ==========================================================================
   27. PHOTO PLACEHOLDER
   Styled circle with person silhouette icon and "Photo Coming Soon" text.
   Looks intentional, not broken.
   ========================================================================== */

.photo-placeholder {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: var(--color-tint-ortho);
  border: 2px solid var(--color-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.photo-placeholder svg {
  color: var(--color-secondary);
  opacity: 0.6;
  display: block;
  width: 4rem;
  height: 4rem;
}

.photo-placeholder-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-style: italic;
}


/* ==========================================================================
   28. CREDENTIALS LIST
   Styled list of qualifications with subtle sage dividers.
   ========================================================================== */

.credentials-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.credentials-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(139, 158, 122, 0.2);
  font-size: var(--font-size-base);
}

.credentials-list li:last-child {
  border-bottom: none;
}

.credentials-list strong {
  color: var(--color-text);
}


/* ==========================================================================
   29. CONTACT PAGE HERO (compact)
   Overrides the base .hero 100vh to create a content-sized compact hero.
   Same pattern as services and about pages.
   ========================================================================== */

.hero--contact {
  min-height: auto;
  padding: var(--space-3xl) 0 var(--space-2xl);
}


/* ==========================================================================
   30. PHONE BLOCK
   Warm-tinted block with large clickable phone number above the form.
   Phone is the primary contact method; form is the alternative.
   ========================================================================== */

.contact-phone-block {
  background-color: var(--color-tint-ortho);
}

.phone-block {
  text-align: center;
  max-width: 30rem;
  margin: 0 auto;
}

.phone-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  margin: var(--space-lg) 0;
  min-height: 44px;
}

.phone-display svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.phone-number-lg {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
}

.phone-action {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

.phone-display:hover .phone-number-lg {
  color: var(--color-primary);
}

.phone-hours {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
}

.phone-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}


/* ==========================================================================
   31. FORM DIVIDER
   Visual separator between phone block and form with centered text
   and horizontal lines on either side.
   ========================================================================== */

.form-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--content-padding);
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-secondary);
}

.form-divider span {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  white-space: nowrap;
}


/* ==========================================================================
   32. CONTACT FORM
   Single-column stacked form with full-width inputs.
   Mobile-first: submit button is full-width on small screens.
   ========================================================================== */

.contact-form-section .content {
  max-width: var(--content-width);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  transition: border-color var(--transition-speed);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

.required-mark {
  color: var(--color-primary);
}

.optional-mark {
  font-weight: 400;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.form-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

.cf-turnstile {
  margin-bottom: var(--space-lg);
}

#contact-form .btn {
  width: 100%;
}


/* ==========================================================================
   33. FORM SUCCESS / ERROR MESSAGES
   Success: green-tinted block replaces the form.
   Error: subtle red text below the form.
   ========================================================================== */

.form-success {
  text-align: center;
  background-color: var(--color-tint-peds);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
}

.form-success h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
}

.form-error {
  font-size: var(--font-size-sm);
  color: #B44;
  margin-top: var(--space-md);
}


/* ==========================================================================
   34. SERVICE AREA
   Multi-column grid of southern Minneapolis/St. Paul metro suburbs.
   Reuses the dot-indicator pattern from specialty-list.
   ========================================================================== */

.service-area h2 {
  margin-bottom: var(--space-sm);
}

.area-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.area-grid li {
  padding-left: var(--space-md);
  position: relative;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.area-grid li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.area-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-style: italic;
}


/* ==========================================================================
   35. LEGAL PAGES (Notice of Privacy Practices)
   Compact hero like the about page; readable long-form text.
   ========================================================================== */

.hero--legal {
  min-height: auto;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.legal-notice {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.legal h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

.legal p,
.legal ul {
  margin-bottom: var(--space-md);
}

.legal ul {
  padding-left: var(--space-lg);
}

.legal li {
  margin-bottom: var(--space-xs);
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
}


/* ==========================================================================
   RESPONSIVE OVERRIDES — DESKTOP NAVIGATION & FOOTER
   ========================================================================== */

/* --- Tablet and up (768px) --- */
@media (min-width: 768px) {
  /* Header: show full nav, hide hamburger */
  .menu-toggle {
    display: none;
  }

  .main-nav {
    display: flex;
    align-items: center;
  }

  /* Override mobile absolute positioning even if is-open somehow set */
  .main-nav.is-open {
    position: static;
  }

  .nav-list {
    display: flex;
    gap: var(--space-md);
  }

  .nav-list li {
    border-bottom: none;
  }

  .nav-list a {
    padding: var(--space-xs) var(--space-sm);
  }

  /* Phone number only in mobile menu (per research Pattern 4) */
  .nav-phone {
    display: none;
  }

  /* Service sections: increase padding at tablet */
  .service-section {
    padding: var(--space-5xl) 0;
  }

  /* About intro: side-by-side layout (photo left, text right) */
  .about-intro-layout {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .about-intro-text {
    text-align: left;
  }

  /* Contact form: submit button auto-width on tablet+ */
  #contact-form .btn {
    width: auto;
  }

  /* Form divider: widen spacing */
  .form-divider {
    padding: var(--space-xl) var(--content-padding);
  }

  /* Footer: three-column grid */
  .footer-main {
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: start;
  }

  .footer-nav ul {
    flex-direction: row;
    gap: var(--space-md);
  }
}


/* ==========================================================================
   35. WHERE WE MEET
   Pill list of community locations where sessions can happen.
   ========================================================================== */

.where-intro {
  max-width: 40rem;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-light);
}

.location-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 48rem;
  margin: 0 auto var(--space-lg);
}

.location-list li {
  background-color: var(--color-surface);
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-md);
  font-weight: 500;
}

.where-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-style: italic;
}

.conditions-note {
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: var(--space-md);
}


/* ==========================================================================
   36. NEW PATIENTS NOTICE
   Homepage banner announcing that new patients are being accepted.
   ========================================================================== */

.patients-notice {
  padding: var(--space-lg) 0;
}

.patients-card {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  background-color: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  padding: var(--space-lg) var(--space-md);
}

.patients-card h2 {
  margin-bottom: var(--space-sm);
}

.patients-card p {
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}


/* ==========================================================================
   37. MOBILE POLISH
   Tidy two-line brand lockup and tighter About spacing on small screens.
   ========================================================================== */

@media (max-width: 767px) {
  .brand-name {
    font-size: var(--font-size-md);
    line-height: 1.15;
    text-wrap: balance;
  }

  .hero--about {
    padding-bottom: var(--space-lg);
  }

  .hero--about p {
    margin-bottom: 0;
  }

  .about-intro {
    padding-top: var(--space-md);
  }
}


/* ==========================================================================
   38. FAQ
   Native <details> accordion list.
   ========================================================================== */

.hero--faq {
  min-height: auto;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.faq-section {
  padding-top: 0;
}

.faq-list {
  max-width: var(--content-width);
  margin: 0 auto;
}

.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  margin-bottom: var(--space-sm);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: var(--font-size-xl);
  line-height: 1;
  color: var(--color-primary);
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 12px;
}

.faq-item p {
  padding: 0 var(--space-md);
  color: var(--color-text-light);
}

.faq-item p:last-child {
  padding-bottom: var(--space-md);
}

.faq-who {
  padding: 0 var(--space-md) var(--space-md) calc(var(--space-md) + 1.25rem);
  color: var(--color-text-light);
}

.faq-who li + li {
  margin-top: var(--space-sm);
}


/* ==========================================================================
   39. HOME PAGE BANDS, WAVES, AND ACCENTS
   Full-width tinted bands give the home page rhythm. Waves rise into the
   previous section's bottom padding and are drawn with a CSS mask so no extra markup is needed.
   ========================================================================== */

.section-band {
  position: relative;
  background-color: var(--band-bg);
}

.section-band--white {
  --band-bg: var(--color-surface);
}

.section-band--sage {
  --band-bg: var(--color-tint-peds);
}

.section-band--sand {
  --band-bg: var(--color-tint-sand);
}

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .section-band--wave::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(1px - var(--wave-height));
    height: var(--wave-height);
    background-color: var(--band-bg);
    pointer-events: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 48C240 8 480 8 720 32S1200 64 1440 20V80H0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 48C240 8 480 8 720 32S1200 64 1440 20V80H0Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* Benefit icons in soft tinted circles */
.benefit-icon {
  display: grid;
  place-items: center;
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-accent-peds);
}

.benefit-icon svg,
.benefit-item .benefit-icon svg {
  width: 2rem;
  height: 2rem;
  margin: 0;
  color: inherit;
}

/* Specialty cards: colored top edge and icon per specialty */
.specialty-card--peds {
  --specialty-accent: var(--color-accent-peds);
}

.specialty-card--pelvic {
  --specialty-accent: var(--color-accent-pelvic);
}

.specialty-card--ortho {
  --specialty-accent: var(--color-accent-ortho);
}

.specialty-card {
  border-top: 4px solid var(--specialty-accent, var(--color-secondary));
}

.specialty-card .specialty-icon {
  color: var(--specialty-accent, var(--color-primary));
}

/* Soft organic shape behind the home hero heading */
.hero--home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero--home::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  left: 50%;
  width: min(36rem, 90vw);
  height: min(22rem, 60vw);
  transform: translateX(-50%) rotate(-6deg);
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background-color: var(--color-tint-ortho);
  pointer-events: none;
}

/* ==========================================================================
   40. WHAT TO EXPECT
   Three numbered steps from first contact to first visit. On desktop a
   dashed line runs behind the number badges to read as a path.
   ========================================================================== */

.expectations-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 var(--space-xl);
  display: grid;
  gap: var(--space-lg);
  position: relative;
}

.expectations-step {
  position: relative;
  background-color: var(--color-surface);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-align: left;
}

.step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--space-3xl);
  height: var(--space-3xl);
  margin-bottom: var(--space-md);
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1;
}

.expectations-step h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.expectations-step p {
  color: var(--color-text-light);
  margin: 0;
}

@media (min-width: 1024px) {
  .expectations-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Dashed path linking the badges; badges are opaque so it reads as connectors */
  .expectations-steps::before {
    content: "";
    position: absolute;
    top: calc(var(--space-xl) + var(--space-3xl) / 2);
    left: calc(var(--space-lg) + var(--space-3xl) / 2);
    right: calc(100% / 3 - var(--space-lg) - var(--space-3xl) / 2);
    border-top: 2px dashed var(--color-secondary);
    z-index: 1;
    pointer-events: none;
  }

  .step-number {
    z-index: 2;
  }
}

/* ==========================================================================
   41. TAGLINE AND VALUES
   Hero tagline in Lora italic plus a compact values row under the new
   patients card. Kept small so it reads as an accent, not a full section.
   ========================================================================== */

.hero--home .hero-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin: calc(-1 * var(--space-sm)) auto var(--space-lg);
}

.values-band {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
  text-align: center;
}

.values-eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A5A33;                    /* matches .hero-eyebrow: 5:1 on cream */
  margin: 0 0 var(--space-md);
}

.values-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 56rem;
  display: grid;
  gap: var(--space-lg);
}

.value-item p {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-light);
}

.value-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

.value-badge--sage {
  background-color: var(--color-badge-sage);
}

.value-badge--peach {
  background-color: var(--color-badge-peach);
}

.value-badge--lavender {
  background-color: var(--color-badge-lavender);
}

@media (min-width: 768px) {
  .values-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================================
   42. INNER PAGE BANDS AND HERO SHAPES
   Extends the home page bands, waves, and hero blob to About, Services,
   FAQ, and Contact. Sections that already had a tint feed it to the band
   so the wave matches the section color.
   ========================================================================== */

.service-section--peds {
  --band-bg: var(--color-tint-peds);
}

.service-section--pelvic {
  --band-bg: var(--color-tint-pelvic);
}

.service-section--ortho {
  --band-bg: var(--color-tint-ortho);
}

.contact-phone-block {
  --band-bg: var(--color-tint-ortho);
}

/* FAQ list sat flush under the hero; on a band it needs breathing room */
.faq-section.section-band {
  padding-top: var(--space-3xl);
}

/* Divider now opens the form band, so drop the extra top padding */
.contact-form-section.section-band {
  padding-top: var(--space-lg);
}

.hero--about,
.hero--services,
.hero--faq,
.hero--contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero--about::before,
.hero--services::before,
.hero--faq::before,
.hero--contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  left: 50%;
  width: min(34rem, 90vw);
  height: min(16rem, 55vw);
  transform: translateX(-50%) rotate(-6deg);
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background-color: color-mix(in srgb, var(--hero-blob-accent) 16%, var(--color-background));
  pointer-events: none;
}

/* Tints alone vanish against cream on short heroes, so mix from the accents */
.hero--about {
  --hero-blob-accent: var(--color-accent);
}

.hero--services {
  --hero-blob-accent: var(--color-accent-peds);
}

.hero--faq {
  --hero-blob-accent: var(--color-accent-pelvic);
}

.hero--contact {
  --hero-blob-accent: var(--color-accent-ortho);
}

/* Mirror the shape on alternate pages so they don't all look stamped */
.hero--services::before,
.hero--contact::before {
  transform: translateX(-50%) rotate(5deg) scaleX(-1);
}