/*
Theme Name: Rehab and Restore
Theme URI: https://rehabandrestore.in/
Author: Rehab and Restore
Author URI: https://rehabandrestore.in/
Description: Custom mobile-first WordPress theme for Rehab and Restore — a musculoskeletal & sports physiotherapy clinic in Noida. Self-bootstrapping on activation: creates pages, menus, settings, categories, and three starter blog drafts. Marketing pages, blog, scrollable patient reviews carousel, live Google Reviews widget mount, embedded map, MedicalClinic + SportsMedicine + AggregateRating schema for local SEO. v1.3.1 hardens mobile UX (16px form inputs, 44px tap targets, animated hamburger, safe-area FAB). v1.4.0 adds SEO/analytics integration: GA4 helper (DNT-aware, admin-excluded), search engine verification meta constants, defensive guard against duplicate schema when Rank Math/Yoast Local SEO is active. v1.4.1 ships a high-resolution Rehab and Restore logo (sharp on retina), enlarges the header logo, and adds a prominent home-page hero logo lockup. v1.4.2 keys the cream background out of the bundled logo PNGs (true transparency, no visible rectangle on coloured sections), removes the duplicate header wordmark text (the brand mark already contains "REHAB & RESTORE"), and tightens the hero logo size so it sits beside the headline without dominating it. v1.4.3 retunes the entire site palette to match the brand mark — deep navy #0F2A4A as the primary (logo "R" letter and wordmark) with warm orange #E07A1F as the accent (runner figure), on a warm off-white surface; updates the mobile theme-color meta and the footer link colours to match. v1.4.4 polishes the header: enlarges the brand-mark to 88 px, drops the duplicate hero logo (the header logo is now prominent enough), repositions the menu so it spans the centre of the header, adds animated underline indicators for hover and the active page, and switches the "Book appointment" CTA to brand orange so it reads as the primary action against the navy headlines elsewhere on the page. v1.4.5 adds Dr. Suraj Kashyap's portrait to the About page lead-clinician card with a circular photo + name/role layout that stacks gracefully on small phones. v1.5.0 brings the home page in line with reputable clinical-site patterns: adds a top utility bar (call/WhatsApp/hours/Noida pin pinned to every page), a hero credibility-stats row, a six-card "Conditions we treat" grid (Sports Injuries, Knee & ACL, Back & Neck, Shoulder, Post-surgical, Performance), a Meet-your-physiotherapist strip surfacing Dr. Suraj's portrait on the homepage, and a Visit-us-in-Noida location strip with map links right above the bottom CTA. v1.6.0 replaces the anonymised review carousel with eleven verbatim Google reviews from real, named patients (Devang Tomar, Vanishree Priya, Maneet Ghai, Siddharth Joshi, Kuldeep Rana, Balram Maurya, Ravi K., Alok Kumar Mishra, Ipsha Upmanyu, Atharva Roy, Ajay Krishna Mitra), updates the AggregateRating count to 103 reviews to match the live Google Business Profile, and emits per-Review JSON-LD (each entity links back to the verified Google listing for source-of-truth). No page builder, no plugin dependencies.
Version: 1.7.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rehab-restore
Tags: custom-menu, featured-images, responsive-layout, blog, healthcare, physiotherapy, local-business
*/

/* ========================================================================
   Rehab and Restore — design system
   Palette aligned with the brand mark: deep navy #0F2A4A (the "R" letter
   and wordmark) + warm orange #E07A1F (the runner figure), on a warm
   off-white page surface that echoes the logo's natural ground.
   Fonts: DM Sans (body) + Fraunces (display headings)
   ======================================================================== */

:root {
  /* Surface + text */
  --color-bg: #f7f5f0;          /* warm off-white page bg */
  --color-surface: #ffffff;
  --color-text: #0e1828;        /* near-black with a navy hint */
  --color-muted: #56585e;
  --color-border: #e3dfd6;      /* warm-tinged hairline */

  /* Brand navy (primary) */
  --color-primary: #0f2a4a;     /* deep navy from the logo "R" + wordmark */
  --color-primary-dark: #091b33;/* footer / contrast surfaces */
  --color-primary-mid: #1b3a66; /* hover / subtle gradients */
  --color-accent: #0f2a4a;      /* heading colour (matches primary) */

  /* Brand warm accent (orange runner) — variable name kept as
     `--color-accent-cyan` for backwards-compatibility with v1.4.x rules
     that already reference it; it now carries the warm orange instead. */
  --color-accent-cyan: #e07a1f;
  --color-primary-soft: #fff1de;/* soft cream tint for hover/CTA-band btns */

  --color-success: #2e7d32;
  --color-warning: #b76e00;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 12px 40px rgba(28, 25, 23, 0.1);
  --max: 72rem;
  --space: clamp(1rem, 4vw, 2rem);
}

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

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

.skip-link:focus {
  left: 0.5rem;
}

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.875rem var(--space);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  line-height: 0;
  flex-shrink: 0;
}

.logo img,
.logo .logo__mark {
  display: block;
  height: clamp(56px, 12vw, 88px);
  width: auto;
  max-height: 88px;
  object-fit: contain;
  vertical-align: middle;
}

.logo__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.15rem);
  color: var(--color-accent);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .logo__wordmark { display: none; }
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-accent);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
  /* Push nav links to the centre / right so the header reads as
     LOGO · NAV · CTA instead of LOGO · ······ · NAV-CTA. */
  flex: 1;
  justify-content: flex-end;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
}

.site-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.4rem 0;
  transition: color 0.15s ease;
}

/* Animated underline that grows from the centre on hover/active. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--color-accent-cyan);
  transform: translateX(-50%);
  transition: width 0.2s ease;
  border-radius: 2px;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav a[aria-current="page"] {
  color: var(--color-primary);
}

.site-nav a:hover::after,
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after,
.site-nav a[aria-current="page"]::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.25rem;
}

/* Header CTA: warm orange so it reads as the primary call-to-action,
   distinct from the navy headlines and links elsewhere on the page.
   White-on-orange clears WCAG AA at this weight/size. */
.nav-actions .btn-primary {
  background: var(--color-accent-cyan);
  color: #fff;
  box-shadow: 0 4px 14px rgba(224, 122, 31, 0.28);
}

.nav-actions .btn-primary:hover {
  background: #c46414;
  color: #fff;
  box-shadow: 0 6px 18px rgba(224, 122, 31, 0.4);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem var(--space) 1.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  .site-nav.is-open {
    display: flex;
    max-height: min(75vh, 32rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
  }

  /* The desktop centre-grow underline gets in the way of stacked mobile
     links — replace with a left-edge accent bar on the active item. */
  .site-nav a::after {
    display: none;
  }

  .site-nav .current-menu-item > a,
  .site-nav .current_page_item > a,
  .site-nav a[aria-current="page"] {
    border-left: 3px solid var(--color-accent-cyan);
    padding-left: 0.6rem;
    margin-left: -0.6rem;
  }

  .nav-actions .btn {
    min-height: 44px;
  }

  .nav-actions {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    flex-direction: column;
    width: 100%;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
}

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

.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
}

.btn-outline:hover {
  background: var(--color-primary-soft);
  border-color: transparent;
  color: var(--color-primary-dark);
}

/* Hero */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 5rem) var(--space);
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-logo {
  margin: 0 0 1.25rem;
  display: block;
  line-height: 0;
}

.hero-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: clamp(120px, 22vw, 180px);
  max-height: clamp(120px, 22vw, 180px);
  object-fit: contain;
  /* Background was already keyed out in the source PNG, but this guards
     against any future logo upload that has its own background. */
  background: transparent;
}

@media (max-width: 720px) {
  .hero-logo {
    margin: 0 auto 1.25rem;
    text-align: center;
  }
  .hero-logo img {
    margin-inline: auto;
  }
}

.hero-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 0.75rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  margin: 0 0 1rem;
}

.hero-lead {
  font-size: 1.125rem;
  color: var(--color-muted);
  margin: 0 0 1.75rem;
  max-width: 36rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-credentials {
  margin: 1.25rem 0 0;
  padding: 0.65rem 0.9rem;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  font-size: 0.875rem;
  color: var(--color-muted);
  border-radius: 0 6px 6px 0;
}

.hero-card {
  background: linear-gradient(
    145deg,
    var(--color-surface) 0%,
    var(--color-primary-soft) 100%
  );
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 4px);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}

.hero-card h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
  color: var(--color-accent);
}

.hero-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.hero-card ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.hero-card li {
  margin-bottom: 0.4rem;
}

/* Sections */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--space);
}

.section-head {
  max-width: 40rem;
  margin-bottom: 2rem;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2rem);
  margin: 0 0 0.5rem;
  color: var(--color-accent);
}

.section-head p {
  margin: 0;
  color: var(--color-muted);
}

/* Grids and cards */
.grid-3 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
  color: var(--color-accent);
}

.card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.card .card-cta {
  margin-top: 1rem;
}

.icon-round {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.split {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 800px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

blockquote.quote {
  margin: 0;
  padding: 1.5rem;
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--color-muted);
}

.quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-accent);
}

/* CTA band */
.cta-band {
  background: linear-gradient(
    125deg,
    var(--color-primary) 0%,
    var(--color-accent-cyan) 100%
  );
  color: var(--color-primary-soft);
  margin: 2rem 0 0;
}

.cta-band-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--space);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin: 0 0 0.35rem;
  color: #fff;
}

.cta-band p {
  margin: 0;
  opacity: 0.92;
  max-width: 32rem;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--color-primary);
}

.cta-band .btn-primary:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.cta-band .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-band .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Footer */
.site-footer {
  border-top: none;
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.9);
  padding: 2.5rem var(--space);
  margin-top: 0;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  font-size: 1.1rem;
}

.footer-tagline {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 22rem;
}

.footer-col h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0.75rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
}

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

.footer-bottom {
  max-width: var(--max);
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}

/* Inner pages */
.page-hero {
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(2rem, 5vw, 3rem) var(--space);
}

.page-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  margin: 0 0 0.5rem;
  color: var(--color-accent);
}

.page-hero p {
  margin: 0;
  color: var(--color-muted);
  max-width: 40rem;
}

.prose {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem var(--space) 3rem;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
  color: var(--color-accent);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-accent);
}

.prose p,
.prose li {
  color: var(--color-muted);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose img {
  border-radius: var(--radius);
  margin: 1.5rem 0;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text);
}

/* Team profile (lead clinician card on About) */
.team-profile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin: 1rem 0 2rem;
  box-shadow: var(--shadow);
}

/* Photo + name/role/quals row at the top of the lead-clinician card.
   Side-by-side on desktop, stacked on small screens so the portrait
   never crowds the text. */
.team-profile-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
  margin-bottom: 0.5rem;
}

.team-profile-photo {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(140px, 22vw, 180px);
  height: clamp(140px, 22vw, 180px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-primary-soft);
  box-shadow: 0 6px 18px rgba(15, 42, 74, 0.18);
  background: var(--color-primary-soft);
}

.team-profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.team-profile-intro {
  flex: 1 1 240px;
  min-width: 0;
}

.team-profile-intro > * {
  margin-top: 0;
}

@media (max-width: 520px) {
  /* Stack the portrait above the name on narrow phones, centred,
     so it reads as a profile card instead of a cramped row. */
  .team-profile-header {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.team-profile-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
}

.team-profile-role {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-warning);
}

.team-profile-quals {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.team-profile ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.team-profile li {
  margin-bottom: 0.4rem;
}

.team-profile li:last-child {
  margin-bottom: 0;
}

.team-profile-reg {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Contact */
.contact-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.contact-box a {
  font-weight: 600;
}

.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.btn-whatsapp {
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
}

.btn-whatsapp:hover {
  background: #1ebe5d;
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.36);
}

.btn-whatsapp svg {
  flex-shrink: 0;
}

.map-embed-wrap {
  position: relative;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background: var(--color-primary-soft);
  aspect-ratio: 16 / 10;
  min-height: 280px;
}

.map-embed {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

/* Reviews block */
.reviews-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 720px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.review-stars {
  color: #f5b301;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.review-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.55;
}

.review-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.review-meta strong {
  color: var(--color-accent);
}

/* --- Reviews page --------------------------------------------------- */

.reviews-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space) 3rem;
}

.reviews-summary-band {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  box-shadow: var(--shadow);
}

.reviews-summary {
  display: grid;
  gap: 1rem 1.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .reviews-summary {
    grid-template-columns: auto 1fr auto;
  }
}

.reviews-summary__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.reviews-summary__rating .rating {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.reviews-summary__rating .stars {
  color: #f5b301;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.reviews-summary__title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--color-text);
  font-size: 1rem;
}

.reviews-summary__count {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.reviews-summary__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Essence themes (4-up grid) */
.reviews-essence {
  margin-top: 2.5rem;
}

.reviews-essence__inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  color: var(--color-accent);
  margin: 0 0 1.25rem;
}

.reviews-essence__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .reviews-essence__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .reviews-essence__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.essence-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.essence-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.essence-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0;
  color: var(--color-accent);
}

.essence-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Carousel */
.reviews-carousel-section {
  margin-top: 2.5rem;
}

.reviews-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.reviews-carousel-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  color: var(--color-accent);
  margin: 0;
}

.reviews-carousel__controls {
  display: flex;
  gap: 0.5rem;
}

.reviews-carousel__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.reviews-carousel__btn:hover,
.reviews-carousel__btn:focus-visible {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.reviews-carousel__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.reviews-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 1rem;
  margin: 0 -0.25rem;
  scrollbar-width: thin;
}

.reviews-carousel:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.reviews-carousel::-webkit-scrollbar {
  height: 8px;
}

.reviews-carousel::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.review-card--carousel {
  flex: 0 0 86%;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem 1.4rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 16rem;
}

@media (min-width: 720px) {
  .review-card--carousel {
    flex-basis: 46%;
  }
}

@media (min-width: 1024px) {
  .review-card--carousel {
    flex-basis: 31%;
  }
}

.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.review-card__theme {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.review-meta__sep {
  margin: 0 0.25rem;
  opacity: 0.6;
}

.reviews-carousel__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

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

/* Live Google Reviews widget mount */
.reviews-google-section,
.reviews-map-section {
  margin-top: 2.75rem;
}

.reviews-google-section__inner h2,
.reviews-map-section__inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  color: var(--color-accent);
  margin: 0 0 0.75rem;
}

.reviews-google-section__lead,
.reviews-map-section__lead {
  margin: 0 0 1.25rem;
  color: var(--color-muted);
  max-width: 40rem;
}

.reviews-widget-mount {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When a 3rd-party widget injects content, the dashed border should disappear. */
.reviews-widget-mount:not(:has(.reviews-widget-fallback)) {
  border-style: solid;
  padding: 0;
}

.reviews-widget-fallback {
  text-align: center;
}

.reviews-widget-fallback__text {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.reviews-widget-fallback__link {
  display: inline-block;
  margin-top: 0.25rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary-dark);
}

.reviews-widget-fallback__link:hover {
  text-decoration: underline;
}

/* Specialty pills (used on About & elsewhere) */
.specialty-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.specialty-pills li {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* LinkedIn link inline button (icon + text) */
.profile-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.profile-link-row .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.linkedin-icon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  flex-shrink: 0;
  fill: currentColor;
}

/* Blog list (archive / search) */
.page-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 2.75rem) var(--space) 0;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  margin: 0;
  color: var(--color-accent);
}

.page-header p {
  margin: 0.5rem 0 0;
  color: var(--color-muted);
}

.blog-list {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 720px) {
  .blog-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.post-card__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-primary-soft);
  overflow: hidden;
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

.post-card__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.post-card__meta a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.post-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0;
  color: var(--color-accent);
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-primary);
}

.post-card__excerpt {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.post-card__more {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9375rem;
}

/* Single post */
.single-post-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem var(--space) 3rem;
}

.single-post-wrap .post-meta {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.single-post-wrap h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  color: var(--color-accent);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.single-post-wrap .post-thumbnail img {
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.single-post-wrap .entry-content > * {
  margin-top: 1.25rem;
}

.single-post-wrap .entry-content h2,
.single-post-wrap .entry-content h3 {
  font-family: var(--font-display);
  color: var(--color-accent);
}

.single-post-wrap .entry-content h2 {
  font-size: 1.45rem;
  margin-top: 2rem;
}

.single-post-wrap .entry-content h3 {
  font-size: 1.2rem;
  margin-top: 1.5rem;
}

/* Pagination */
.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem auto 0;
  max-width: var(--max);
  padding: 0 var(--space);
}

.pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.9375rem;
  background: var(--color-surface);
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* Search form */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 28rem;
  margin: 1rem 0;
}

.search-form input[type="search"] {
  flex: 1;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-surface);
}

.search-form input[type="search"]:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* WhatsApp floating action button */
.whatsapp-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  font-weight: 600;
  font-size: 0.9375rem;
}

.whatsapp-fab:hover {
  background: #1ebe5d;
  color: #fff;
}

.whatsapp-fab__label {
  display: none;
}

@media (min-width: 480px) {
  .whatsapp-fab__label {
    display: inline;
  }
}

/* Utilities */
.center {
  text-align: center;
}

.muted {
  color: var(--color-muted);
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

/* WP-required default classes */
.alignleft {
  float: left;
  margin: 0.25rem 1.25rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0.25rem 0 1rem 1.25rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-surface);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ========================================================================
   Mobile polish (v1.3.0)
   Fixes for real issues found on phones:
   - iOS Safari auto-zoom when focusing inputs < 16px
   - Sticky header obscuring anchor scroll targets
   - 300ms tap delay on touch
   - Tap targets below WCAG 2.5.5 / Apple HIG 44px minimum
   - WhatsApp FAB overlapping pagination and clipped by iPhone safe area
   - Long URLs / emails overflowing narrow viewports
   - Hamburger that doesn't visually indicate open/closed state
   - Body scroll behind open mobile nav
   ======================================================================== */

/* iOS / Android: don't auto-inflate text on landscape rotation. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sticky header is ~70px tall; this gives anchor links breathing room
     so the heading they jump to isn't tucked under the header. */
  scroll-padding-top: 80px;
}

/* Long unbroken strings (emails, URLs in body copy) shouldn't blow out
   the viewport on narrow screens. */
.prose a,
.footer-tagline,
.contact-box,
.review-meta,
.post-card__excerpt {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Disable the 300ms double-tap-zoom delay on touch devices for all
   interactive elements. They can still be pinch-zoomed at the page level. */
.btn,
.nav-toggle,
.reviews-carousel__btn,
.pagination .page-numbers,
.nav-links .page-numbers,
.search-form button,
.whatsapp-fab,
button,
a {
  touch-action: manipulation;
}

/* Inputs at >=16px so iOS Safari doesn't zoom in on focus.
   This is the single most important mobile UX fix on the site. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea,
.search-form input[type="search"] {
  font-size: 16px;
}

@media (min-width: 769px) {
  /* On desktop where there's no auto-zoom, restore the smaller form size. */
  .search-form input[type="search"] {
    font-size: 0.95rem;
  }
}

/* WCAG 2.5.5 Target Size (AA): all interactive controls >= 44x44 on touch.
   We apply this universally on small screens — no harm on larger displays. */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: 0.7rem 1.25rem;
  }

  .pagination .page-numbers,
  .nav-links .page-numbers {
    min-width: 44px;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
  }

  .reviews-carousel__btn {
    width: 44px;
    height: 44px;
  }

  .footer-col a,
  .footer-col li > a {
    display: inline-flex;
    align-items: center;
    min-height: 36px; /* 44px feels too sparse in a footer column; 36 is a safe compromise */
    padding: 0.25rem 0;
  }

  .search-form button {
    min-height: 44px;
    padding: 0.65rem 1.25rem;
  }
}

/* Hamburger button: 44x44 tap target + visual morph to X when open.
   The original 22px wide bar inside 0.5rem padding only hits ~38px. */
.nav-toggle {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
  transform-origin: center;
}

/* Stack the 3 spans absolutely so we can rotate them into an X cleanly. */
.nav-toggle span {
  position: absolute;
  left: 50%;
  margin-left: -11px;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* When the mobile nav is open, lock the body so users don't accidentally
   scroll the page behind it. JS adds .rr-nav-locked to <body>. */
body.rr-nav-locked {
  overflow: hidden;
  /* Belt-and-braces: also prevent iOS rubber-band scroll. */
  position: fixed;
  width: 100%;
}

@media (min-width: 769px) {
  /* Make sure the lock never persists if a user resizes from mobile to desktop. */
  body.rr-nav-locked {
    overflow: auto;
    position: static;
    width: auto;
  }
}

/* Site-nav padding bottom on mobile so the last item doesn't touch the
   bottom of the open menu. iOS-friendly. */
@media (max-width: 768px) {
  .site-nav.is-open {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
  }

  /* Larger tap target for nav links. */
  .site-nav a {
    min-height: 48px;
    padding: 0.75rem 0;
  }
}

/* WhatsApp FAB: respect the iPhone home-indicator safe area so the FAB
   never sits under the gesture bar. Also nudge body padding so the FAB
   doesn't obscure pagination / footer text on narrow screens. */
.whatsapp-fab {
  right: max(1rem, env(safe-area-inset-right, 1rem));
  bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  min-height: 48px;
  padding: 0.75rem 1.25rem;
}

@media (max-width: 768px) {
  /* Reserve space at the bottom of the page for the FAB so the last
     row of content (pagination, footer cta, etc.) isn't hidden under it.
     The FAB is ~48px tall + 1rem of bottom inset = ~80px total. */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }
}

/* Footer phone/email line: allow line break between the two on narrow
   viewports instead of forcing a single line that overflows. */
.footer-tagline a {
  display: inline-block;
  white-space: nowrap;
}

/* Map embed on tiny screens: keep aspect ratio but bump min-height
   so it remains usable. */
@media (max-width: 480px) {
  .map-embed-wrap {
    aspect-ratio: 4 / 3;
    min-height: 320px;
  }
}

/* Carousel scroll hint cursor on mobile (informational, not interactive) */
@media (max-width: 480px) {
  .reviews-carousel__hint {
    font-size: 0.75rem;
  }

  /* Slightly tighter card width on small phones so two are partly visible
     and users get a clear "scrollable" affordance. */
  .review-card--carousel {
    flex-basis: 88%;
  }
}

/* Contact page CTA row buttons should be full-width-ish on mobile so
   they're easy to thumb-tap. */
@media (max-width: 480px) {
  .contact-cta-row .btn,
  .profile-link-row .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Reviews summary band: stack the rating + ctas neatly on mobile. */
@media (max-width: 720px) {
  .reviews-summary__ctas .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ============================================================
   v1.5.0 — Home-page polish (clinical-site patterns)
   ============================================================
   Adds: top utility bar, hero credibility stats row,
   condition-card grid (six entry points), meet-the-clinician
   strip, visit-us location strip. Inspired by the structure of
   reputable clinical sites such as thephysios.in.
   ============================================================ */

/* --- Top utility bar -------------------------------------------------- */
.topbar {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8125rem;
  border-bottom: 2px solid var(--color-accent-cyan);
}

.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.5rem var(--space);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 1.5rem;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.topbar-item:hover {
  color: #fff;
}

.topbar-item--phone:hover,
.topbar-item--whatsapp:hover {
  color: var(--color-accent-cyan);
}

.topbar-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

@media (max-width: 640px) {
  /* On small phones, drop hours and the location pin so the bar
     stays one row tall; phone + WhatsApp are the must-haves. */
  .topbar-item--hours,
  .topbar-item--locale {
    display: none;
  }
  .topbar-inner {
    justify-content: space-between;
    gap: 0.4rem 1rem;
  }
}

/* --- Hero stats row --------------------------------------------------- */
.hero-stats {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hero-stats strong {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero-stats strong span[aria-hidden="true"] {
  color: var(--color-accent-cyan);
  margin-left: 0.1rem;
}

.hero-stats span {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.35;
}

@media (max-width: 520px) {
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

/* --- Conditions grid (six condition-specific entry cards) ------------- */
.conditions-section {
  /* Subtle off-surface background so the grid reads as a distinct
     section (it's the most important navigation block on the page). */
  background: linear-gradient(180deg, var(--color-bg) 0%, #ffffff 100%);
}

.conditions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.condition-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.4rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 1px 0 rgba(15, 42, 74, 0.04);
}

.condition-card:hover,
.condition-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-accent-cyan);
  box-shadow: 0 12px 28px rgba(15, 42, 74, 0.12);
  outline: none;
}

.condition-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-accent-cyan);
  flex-shrink: 0;
}

.condition-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-primary-dark);
  letter-spacing: -0.015em;
}

.condition-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.55;
  flex: 1;
}

.condition-card__cta {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.condition-card:hover .condition-card__cta,
.condition-card:focus-visible .condition-card__cta {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .conditions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .conditions-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Meet your physiotherapist strip --------------------------------- */
.meet-clinician {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 2rem clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow);
}

.meet-clinician__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-primary-soft);
  border: 4px solid var(--color-primary-soft);
  box-shadow: 0 8px 24px rgba(15, 42, 74, 0.18);
  position: relative;
}

.meet-clinician__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.meet-clinician__text > * {
  margin: 0;
}

.meet-clinician__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-cyan);
  margin-bottom: 0.5rem;
}

.meet-clinician__text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.meet-clinician__role {
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: 0.75rem;
}

.meet-clinician__bio {
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.meet-clinician__quals {
  font-size: 0.875rem;
  color: var(--color-text);
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.meet-clinician__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (max-width: 720px) {
  .meet-clinician {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .meet-clinician__photo {
    max-width: 220px;
    margin: 0 auto 0.5rem;
  }
}

/* --- Visit us location strip ---------------------------------------- */
.visit-strip {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space) clamp(2rem, 5vw, 3rem);
}

.visit-strip__inner {
  background: var(--color-primary-soft);
  border: 1px solid #f4d9b8;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.visit-strip__text > * {
  margin: 0;
}

.visit-strip__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent-cyan);
  margin-bottom: 0.5rem;
}

.visit-strip__icon {
  flex-shrink: 0;
}

.visit-strip__text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.visit-strip__hours,
.visit-strip__contact {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.visit-strip__contact {
  margin-top: 0.25rem;
}

.visit-strip__contact a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.visit-strip__contact a:hover {
  border-bottom-color: var(--color-accent-cyan);
}

.visit-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (max-width: 720px) {
  .visit-strip__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .visit-strip__actions .btn {
    flex: 1 1 auto;
  }
}

/* Print styles: clinic owners + patients sometimes print pages
   (e.g. printing /contact/ to take to a referrer). Keep it readable. */
@media print {
  .site-header,
  .topbar,
  .site-footer,
  .whatsapp-fab,
  .reviews-carousel__controls,
  .nav-toggle,
  .skip-link,
  .cta-band {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .map-embed-wrap,
  .reviews-widget-mount {
    display: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Show outbound link URLs after the link text when printing. */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

/* --- FAQ accordion (service / area landing pages) ------------------- */
.rr-faq {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  background: #fff;
}
.rr-faq[open] {
  background: var(--color-primary-soft);
}
.rr-faq > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-dark);
  list-style: none;
  padding: 0.25rem 0;
}
.rr-faq > summary::-webkit-details-marker {
  display: none;
}
.rr-faq > summary::after {
  content: '+';
  float: right;
  font-weight: 400;
  font-size: 1.1rem;
  margin-left: 0.5rem;
}
.rr-faq[open] > summary::after {
  content: '−';
}
.rr-faq > p {
  color: var(--color-text);
  margin: 0.5rem 0 0.25rem;
  line-height: 1.6;
}

/* Visible NAP blocks on contact + footer */
.contact-nap p,
.footer-nap {
  color: inherit;
}