/* ═══════════════════════════════════════════════════════════════════════
 * Healthy360 — iOS Human Interface Guidelines Compliance Fixes
 *
 * Loads AFTER design.css + landing.css (and the token sweep). All selectors
 * reference the NEW brand-palette custom-property names established by the
 * CSS-tokens agent. Where a variable is uncertain, hex fallbacks from the
 * approved brand palette are included.
 *
 * Brand Palette:
 *   --warm-sienna  / #A46447  (primary accent, CTA)
 *   --olive-green  / #4B5136  (nav text, headings)
 *   --sage-moss    / #8A8F73  (secondary / muted)
 *   --dark-umber   / #6B4426  (deep accent)
 *   --warm-linen   / #E8DCC5  (page background)
 *   --stone        / #C8B9A3  (borders, dividers)
 *
 * Audit categories addressed:
 *   1. Touch targets (44×44pt minimum)
 *   2. Typography scale
 *   3. Spacing rhythm (8px grid)
 *   4. Safe-area insets (PWA)
 *   5. Animations / transitions (iOS-standard easing)
 *   6. Scroll behavior
 *   7. Visual polish (radii, shadows, focus rings, hover)
 *   8. Color consistency
 *   9. Mobile breakpoints
 *  10. Dark-mode readiness (flagged only)
 * ═══════════════════════════════════════════════════════════════════════ */


/* ─── 0. iOS-standard motion tokens ──────────────────────────────────
 * P0 — All transitions must use Apple's standard ease curve.
 * Existing --t uses cubic-bezier(.2,.7,.2,1) which feels "springy" on
 * non-iOS platforms and wrong on iOS. Override globally.
 * ──────────────────────────────────────────────────────────────────── */
:root {
  --ios-ease:     cubic-bezier(0.25, 0.1, 0.25, 1);   /* Apple HIG ease */
  --ios-ease-out: cubic-bezier(0.0, 0.0, 0.25, 1);    /* ease-out variant */
  --t-fast:   200ms var(--ios-ease);
  --t-normal: 280ms var(--ios-ease);
  --t-slow:   350ms var(--ios-ease);
  /* Override the legacy --t token so ALL existing transition: ... var(--t)
     declarations automatically pick up iOS easing. */
  --t: 280ms var(--ios-ease);
}


/* ─── 1. Scroll behavior ─────────────────────────────────────────────
 * P0 — Smooth scrolling + offset for the sticky topbar (≈64px).
 * ──────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px; /* topbar height + breathing room */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ─── 2. Safe-area insets (PWA standalone) ────────────────────────────
 * P0 — Ensure topbar, bottom body, and toast respect notch / home bar.
 * The inline <style> in index.html handles display-mode:standalone only;
 * we broaden to ALL modes on iOS (Safari always exposes safe-area-inset
 * on devices with a notch even in browser mode).
 * ──────────────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    padding-top:   env(safe-area-inset-top);
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .toast {
    bottom: calc(26px + env(safe-area-inset-bottom));
  }
}


/* ─── 3. Touch targets — 44×44pt minimum ─────────────────────────────
 * P0 — Every interactive element must meet Apple's minimum tap size.
 * ──────────────────────────────────────────────────────────────────── */

/* 3a. Small buttons (.btn.sm) — was 8px 14px ≈ 32px tall */
.btn.sm {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.875rem;
}

/* 3b. Top-nav anchor links — was 6px 4px ≈ 28px tall */
.topnav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background var(--t-fast), color var(--t-fast);
}
.topnav a:hover {
  background: rgba(75, 81, 54, 0.06); /* --olive-green at 6% */
}

/* 3c. FAQ summary toggles */
.faq summary {
  min-height: 44px;
  padding: 12px 0;
}

/* 3d. Footer nav links — was bare text with no padding */
.footer-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
}
.footer-nav a:hover {
  background: rgba(75, 81, 54, 0.06);
}

/* 3e. Footer legal links (inline-styled in HTML; override with specificity) */
.footer-legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  font-size: 0.8125rem !important; /* bump from 12px to 13px */
  border-radius: 6px;
  transition: color var(--t-fast);
}

/* 3f. Slot buttons in booking — 10px 12px ≈ 36px, needs 44px */
.slot-btn {
  min-height: 44px;
  padding: 10px 14px;
}

/* 3g. Stepper items in booking — 8px 10px ≈ 32px */
.stepper-item {
  min-height: 44px;
  padding: 10px 12px;
}

/* 3h. Hero CTA buttons are .btn.lg (16px 30px) — already ≈ 52px ✓ */
/* 3i. Install button is .btn.primary — already ≈ 44px ✓ */


/* ─── 4. Typography scale ────────────────────────────────────────────
 * P1 — Hero h1 should be large and impactful. System fonts for headings
 * per iOS HIG. Body min 16px is already met.
 * ──────────────────────────────────────────────────────────────────── */

/* 4a. Heading font stack — iOS: SF Pro Display, then system-ui fallbacks.
 * The CSS specialist may keep Fraunces as a brand choice; this ensures
 * the fallback chain follows HIG when the web font fails to load. */
.display, h1, h2, h3 {
  font-family:
    system-ui,
    -apple-system,
    "SF Pro Display",
    "Inter",
    "Segoe UI",
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 4b. Hero h1 — widen the clamp range to 2.5rem → 4rem */
.hero-copy h1,
h1 {
  font-size: clamp(2.5rem, 4.5vw + 1rem, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* 4c. Section h2 — slightly larger for impact */
h2 {
  font-size: clamp(1.75rem, 2.8vw + 0.5rem, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* 4d. Eyebrow — letter-spacing widened for premium feel */
.eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* 4e. Body / lede — ensure comfortable reading */
.lede {
  font-size: 1.175rem;
  line-height: 1.6;
}


/* ─── 5. Spacing rhythm — 8px grid alignment ────────────────────────
 * P1 — Sections: 96px top/bottom on desktop, 64px mobile. Gaps
 * snapped to multiples of 8.
 * ──────────────────────────────────────────────────────────────────── */

/* 5a. Section padding */
.section {
  padding: 96px 0;
}

@media (max-width: 810px) {
  .section {
    padding: 64px 0;
  }
}

/* 5b. Hero — generous top for impact below sticky nav */
.hero {
  padding: 96px 0 64px;
}

@media (max-width: 960px) {
  .hero {
    padding: 72px 0 48px;
  }
}

/* 5c. Section header margin */
.section-header {
  margin: 0 0 48px;
}

/* 5d. Grid gaps — snap to 8px multiples (was 18px → 16px or 24px) */
.service-grid {
  gap: 24px;
}

.team-grid {
  gap: 24px;
}

.how-list {
  gap: 24px;
}

.faq details {
  margin-bottom: 12px; /* was 10px; 12 = 8×1.5 but snaps to rhythm */
}

/* 5e. CTA band */
.cta-band {
  margin: 0; /* remove top margin; let section padding handle flow */
  padding: 72px 0;
}

/* 5f. Footer */
.footer {
  padding: 48px 0 56px;
}

/* 5g. Container padding on smaller screens */
@media (max-width: 480px) {
  .container,
  .container-narrow {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ─── 6. Visual polish — border-radius, shadows, hover, focus ────────
 * P1 — Consistent iOS-feel radius (12-16px for cards, 10-12px for
 * buttons), warm-tone shadows, accessible focus rings.
 * ──────────────────────────────────────────────────────────────────── */

/* 6a. Shadows — warm umber tones instead of cold navy */
:root {
  --shadow-sm: 0 1px 3px rgba(107, 68, 38, 0.06);       /* --dark-umber */
  --shadow:    0 4px 16px rgba(107, 68, 38, 0.08);
  --shadow-lg: 0 20px 44px rgba(107, 68, 38, 0.12);
  /* Softer, flatter glass shadows for a light, airy, clinical feel
     (drops the heavy inset specular highlights from design.css). */
  --shadow-glass:    0 4px 18px rgba(107,68,38,0.06), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-glass-lg: 0 12px 32px rgba(107,68,38,0.09), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-float:    0 18px 44px rgba(107,68,38,0.10);
}

/* 6b. Focus rings — warm sienna for brand-consistent accessibility */
.btn:focus-visible {
  outline: 3px solid rgba(164, 100, 71, 0.4); /* --warm-sienna at 40% */
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: #A46447;
  box-shadow: 0 0 0 3px rgba(164, 100, 71, 0.15);
}

/* 6c. FAQ details — focus-within for keyboard users */
.faq details:focus-within {
  border-color: #A46447;
  box-shadow: 0 0 0 3px rgba(164, 100, 71, 0.12);
}

/* 6d. FAQ summary chevron — smoother rotation */
.faq summary::after {
  transition: transform var(--t-normal);
}

/* 6e. Card hover — subtle lift with warm shadow */
.service-card:hover,
.team-card:hover,
.booking-staff-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 68, 38, 0.10);
}

/* 6f. Primary button — warm hover glow */
.btn.primary:hover {
  box-shadow: 0 12px 28px rgba(164, 100, 71, 0.22);
}

/* 6g. Link underline on hover — subtle */
a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(164, 100, 71, 0.3);
}
/* Exclude buttons and brand from underline */
.btn:hover,
.brand:hover,
.topnav a:hover,
.footer-nav a:hover {
  text-decoration: none;
}

/* 6h. Border-radius consistency — standardise shape tokens */
:root {
  --r-sm:  8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
}


/* ─── 7. Color consistency — ensure brand palette throughout ─────────
 * P1 — Override any remnant of the old navy/sage palette that may
 * survive the token sweep. Uses hex values as ultimate fallbacks.
 * ──────────────────────────────────────────────────────────────────── */

/* 7a. Primary button gradient — warm sienna → dark umber */
.btn.primary {
  background: linear-gradient(
    135deg,
    #A46447 0%,      /* --warm-sienna */
    #6B4426 120%     /* --dark-umber */
  );
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(164, 100, 71, 0.20);
}
.btn.primary:hover {
  background: linear-gradient(
    135deg,
    #8f5640 0%,
    #5a3820 120%
  );
  transform: translateY(-1px);
}

/* 7b. Ghost button hover — warm tint */
.btn.ghost:hover {
  background: rgba(164, 100, 71, 0.06);
  border-color: #C8B9A3; /* --stone */
}

/* 7c. Gold CTA — keep gold distinct but warm */
.btn.gold {
  background: #A46447;
  color: #fff;
  border-color: #A46447;
}
.btn.gold:hover {
  background: #8f5640;
  border-color: #8f5640;
}

/* 7d. Headings — olive green */
.display, h1, h2, h3 {
  color: #4B5136; /* --olive-green */
}

/* 7e. Body text — darker olive for readability */
body {
  color: #4B5136;
  background: #E8DCC5; /* --warm-linen */
}

/* 7f. Muted text — sage moss */
.muted,
.lede,
.footer-copy,
.section-note,
label {
  color: #8A8F73; /* --sage-moss */
}

/* 7g. Borders — stone */
.card,
.service-card,
.faq details,
hr.hr-soft {
  border-color: #C8B9A3; /* --stone */
}

/* 7h. Eyebrow — warm sienna accent */
.eyebrow {
  color: #A46447; /* --warm-sienna */
}

/* 7i. Link default — warm sienna */
a {
  color: #A46447;
}
a:hover {
  color: #6B4426; /* --dark-umber */
}

/* 7j. CTA band — dark umber gradient */
.cta-band {
  background:
    radial-gradient(600px 300px at 90% 20%, rgba(164, 100, 71, 0.25), transparent 60%),
    linear-gradient(135deg, #6B4426 0%, #4B5136 60%, #3d4229 100%);
}
.cta-band h2 { color: #fff; }
.cta-band p  { color: rgba(255, 255, 255, 0.85); }

/* 7k. Topbar — transparent floating capsule over the hero video.
   The frosted warm-white capsule on scroll is handled in landing.css
   (.topbar.scrolled), so leave the base transparent for legible white
   nav links over the video. */
.topbar {
  background: transparent;
  border-bottom-color: transparent;
}

/* 7l. Surface / section-alt — slightly lighter linen */
.section-alt {
  background: rgba(232, 220, 197, 0.45);
}

/* 7m. Cards — warm white surface */
.card,
.service-card,
.frame-inner {
  background: #FDFAF5; /* warm white */
}

/* 7n. Toast — dark umber */
.toast {
  background: #6B4426;
  box-shadow: var(--shadow-lg);
}

/* 7o. Pill sage variant — warm palette */
.pill.sage {
  background: rgba(164, 100, 71, 0.10);
  color: #A46447;
}

/* 7p. Hero background — warm gradient */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -20%, rgba(164, 100, 71, 0.08), transparent 60%),
    radial-gradient(900px 500px at 0% 120%, rgba(200, 185, 163, 0.12), transparent 60%),
    linear-gradient(180deg, #E8DCC5, #FDFAF5 70%);
}

/* 7q. Frame glow — warm tones */
.frame-glow {
  background:
    radial-gradient(circle at 30% 30%, rgba(164, 100, 71, 0.12), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(200, 185, 163, 0.10), transparent 60%);
}

/* 7r. Install card — warm tones */
.install-card-inner {
  background: linear-gradient(135deg, rgba(164, 100, 71, 0.06), rgba(200, 185, 163, 0.06));
  border-color: rgba(164, 100, 71, 0.20);
}

/* 7s. Footer background */
.footer {
  background: #FDFAF5;
  border-top-color: #C8B9A3;
}

/* 7t. Disclaimer stripe */
.disclaimer {
  background: rgba(164, 100, 71, 0.06);
  border-left-color: #A46447;
  color: #8A8F73;
}

/* 7u. Theme-color meta should match (handled in HTML, noting here):
 * <meta name="theme-color" content="#4B5136"> */


/* ─── 8. Mobile breakpoints ──────────────────────────────────────────
 * P1 — Nav breakpoint at 810px per theprotocole.com reference.
 * ──────────────────────────────────────────────────────────────────── */

/* Override the 780px breakpoint from landing.css */
@media (min-width: 781px) and (max-width: 810px) {
  .topnav {
    display: none;
  }
}

/* At 810px and below, ensure single-column and full-width CTAs */
@media (max-width: 810px) {
  .topnav {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-ctas {
    flex-direction: column;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}


/* ─── 9. Transition overrides — ensure iOS easing everywhere ─────────
 * P0 — Patch specific elements whose transitions were hardcoded rather
 * than using the --t token.
 * ──────────────────────────────────────────────────────────────────── */

.service-card {
  transition:
    transform 280ms var(--ios-ease),
    box-shadow 280ms var(--ios-ease),
    border-color 280ms var(--ios-ease);
}

.booking-staff-card {
  transition:
    transform 280ms var(--ios-ease),
    box-shadow 280ms var(--ios-ease),
    border-color 280ms var(--ios-ease);
}

.slot-btn {
  transition:
    border-color 200ms var(--ios-ease),
    background 200ms var(--ios-ease),
    transform 200ms var(--ios-ease);
}

.toast {
  transition:
    opacity 280ms var(--ios-ease),
    transform 280ms var(--ios-ease);
}

/* ─── 10. Active / pressed states — iOS tactile feedback ─────────────
 * P1 — Interactive elements should scale down slightly on press.
 * ──────────────────────────────────────────────────────────────────── */

.btn:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.service-card:active,
.booking-staff-card:active,
.slot-btn:active {
  transform: scale(0.98);
  transition-duration: 100ms;
}

.faq summary:active {
  opacity: 0.7;
  transition: opacity 100ms var(--ios-ease);
}


/* ─── 11. Skeleton shimmer — warm palette ────────────────────────────
 * P2 — Match loading animation to new warm tones.
 * ──────────────────────────────────────────────────────────────────── */
.ph-line {
  background: linear-gradient(
    90deg,
    rgba(200, 185, 163, 0.3) 0%,
    rgba(232, 220, 197, 0.5) 50%,
    rgba(200, 185, 163, 0.3) 100%
  );
  background-size: 200% 100%;
}

/* ─── 12. Reduced motion — pause/hide the hero video, show the poster ─── */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
  .hero {
    background-image:
      linear-gradient(180deg, rgba(20,16,12,0.42), rgba(20,16,12,0.52)),
      url('./img/hero-poster.jpg?v=20260603');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}


/* ─── 12. Miscellaneous polish ───────────────────────────────────────
 * P1 — Small fixes for overall iOS feel.
 * ──────────────────────────────────────────────────────────────────── */

/* 12a. Selection color — warm sienna */
::selection {
  background: rgba(164, 100, 71, 0.20);
  color: #4B5136;
}

/* 12b. Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 12c. Prevent text size adjust on orientation change (iOS Safari) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 12d. Tap highlight — remove default iOS blue flash */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 12e. Image rendering for avatars */
.team-avatar,
.booking-staff-avatar {
  image-rendering: -webkit-optimize-contrast;
}

/* 12f. Overscroll behavior — prevent bounce on page-level scroll
 * while allowing modal/overlay scroll */
html {
  overscroll-behavior-y: none;
}

/* 12g. Sticky topbar should sit above everything */
.topbar {
  z-index: 100;
}

/* 12h. Legal overlay — iOS sheet feel */
#legal-overlay > div {
  border-radius: 20px !important; /* override inline 14px */
}


/* ═══════════════════════════════════════════════════════════════════════
 * NOTE — Dark Mode (P2, flagged only — NOT implemented)
 *
 * The following areas would need attention for prefers-color-scheme: dark:
 *   • --warm-linen → deep warm gray (#2C2A26)
 *   • Card surfaces → #3A3733
 *   • --olive-green for text → lighten to #C5CAB0 or similar
 *   • --warm-sienna accent stays similar but may need +10% lightness
 *   • --stone borders → darken to #4A4540
 *   • Shadows → increase opacity, keep warm umber tint
 *   • .hero background gradient → dark warm gradient
 *   • .cta-band → already dark, minimal changes
 *   • Images/avatars — no filter needed, but check contrast
 *
 * Recommended implementation: a separate dark-mode.css file or a
 * @media (prefers-color-scheme: dark) block that reassigns all
 * custom properties in :root. Estimate: ~80 lines.
 * ═══════════════════════════════════════════════════════════════════════ */