/* =============================================================
   components.css — Reusable Component Styles
   Built with design tokens from tokens.css (already imported
   via style.css). Do not import tokens.css again here.

   Component order:
   1.  Nav / Header
   2.  Hero
   3.  Welcome Strip
   4.  Meet the Doctor
   5.  Services Grid
   6.  Why Choose Us
   7.  Testimonials
   8.  WhatsApp Strip
   9.  CTA Banner
   10. Footer
   ============================================================= */


/* =============================================================
   Section: Nav / Header
   ============================================================= */

.site-header {
  position: fixed;
  top: var(--announcement-height);
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: transparent;
  transition: background-color var(--transition-base),
              box-shadow var(--transition-base),
              top var(--transition-base);
}

.site-header.is-scrolled {
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
}

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

/* Groups nav links + phone/CTA into a single cluster pinned to the
   right edge, so .header-inner is a true two-column split (logo vs.
   everything else) instead of three unequal columns. */
.header-nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Logo */
.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex-shrink: 0;
}

.logo-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-primary);
  line-height: 1;
}

.logo-tagline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Logo goes white on transparent (hero) header */
.site-header:not(.is-scrolled) .logo-name,
.site-header:not(.is-scrolled) .logo-tagline {
  color: var(--color-white);
}

/* Nav list */
.primary-nav {
  display: none;
}

@media (min-width: 1024px) {
  .primary-nav {
    display: flex;
    align-items: center;
  }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background-color var(--transition-base);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}

/* On transparent header (hero), nav links go white */
.site-header:not(.is-scrolled) .nav-link {
  color: var(--color-white);
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.site-header:not(.is-scrolled) .nav-link:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.15);
}

.nav-chevron {
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* Mega menu */
.mega-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  min-width: 600px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  z-index: var(--z-dropdown);
}

/* Visibility is controlled only by .is-open (set by js/main.js) */
.mega-menu.is-open {
  display: block;
}

@media (min-width: 1024px) {
  /* Invisible bridge over the gap between toggle and menu,
     so the pointer can cross it without leaving the dropdown */
  .mega-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--space-2) + 2px);
  }
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}

.mega-col-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.mega-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mega-col a {
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-1) 0;
  transition: color var(--transition-base);
}

.mega-col a:hover {
  color: var(--color-primary);
}

/* Header actions */
.header-actions {
  display: none;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header-actions {
    display: flex;
  }
}

.header-phone {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  transition: color var(--transition-base);
  white-space: nowrap;
}

.site-header:not(.is-scrolled) .header-phone {
  color: var(--color-white);
}

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

/* Between 1024px and 1099px the header row is too narrow for the phone
   number and the button together, so the number is hidden there. It stays
   in the hero, the footer and the Contact page. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .header-phone {
    display: none;
  }
}

.btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .nav-hamburger {
    display: none;
  }
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base), background-color var(--transition-base);
}

.site-header:not(.is-scrolled) .hamburger-line {
  background-color: var(--color-white);
}

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

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

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

/* Mobile nav overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(44, 44, 42, 0.5);
  z-index: calc(var(--z-sticky) - 1);
}

.nav-overlay.is-open {
  display: block;
}

/* Section: Mobile Drawer Brand — hidden in the desktop header */
.nav-drawer-brand {
  display: none;
}

/* Section: Mobile Drawer Contact — hidden in the desktop header */
.nav-drawer-contact {
  display: none;
}

/* Mobile nav open state */
@media (max-width: 1023px) {
  .primary-nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background-color: var(--color-bg);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 var(--space-6) var(--space-8);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-sticky);
    overflow-y: auto;
  }

  .primary-nav.is-open {
    transform: translateX(0);
  }

  /* Close button: pinned to the open drawer's top row, centred on the
     clinic name, so the banner and scroll state don't move it */
  .nav-hamburger[aria-expanded="true"] {
    position: fixed;
    top: calc((var(--nav-height) - 44px) / 2);
    right: var(--space-6);
    width: 44px;
    height: 44px;
    align-items: center;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-light);
    z-index: calc(var(--z-sticky) + 1);
  }

  .nav-hamburger[aria-expanded="true"] .hamburger-line,
  .site-header:not(.is-scrolled) .nav-hamburger[aria-expanded="true"] .hamburger-line {
    background-color: var(--color-text);
  }

  /* Top row: clinic name, sticky while the drawer scrolls. Spans the
     full drawer width; right padding leaves room for the fixed X.
     Height adds 1px for the border so the content box stays
     --nav-height and the X stays centred on it. */
  .nav-drawer-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    height: calc(var(--nav-height) + 1px);
    margin: 0 calc(-1 * var(--space-6)) var(--space-4);
    padding: 0 calc(var(--space-6) + 48px) 0 var(--space-6);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    border-top-left-radius: var(--radius-xl);
    line-height: 1.2;
  }

  .nav-drawer-brand .logo-tagline {
    white-space: normal;
  }

  .site-header:not(.is-scrolled) .nav-drawer-brand .logo-name,
  .site-header:not(.is-scrolled) .nav-drawer-brand .logo-tagline {
    color: var(--color-primary);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-link {
    color: var(--color-text);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    width: 100%;
    justify-content: space-between;
  }

  .site-header:not(.is-scrolled) .nav-link {
    color: var(--color-text);
  }

  .mega-menu {
    position: static;
    transform: none;
    min-width: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: var(--space-4) 0 var(--space-4) var(--space-4);
    background-color: var(--color-surface);
    display: none;
  }

  .mega-menu.is-open {
    display: block;
  }

  .mega-menu-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Drawer contact block: appointment, call, hours, address */
  .nav-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: 0 var(--space-2);
  }

  /* Fixed height: the outlined Call button has a 2px border the
     filled button lacks, so padding alone gives unequal heights */
  .nav-drawer-btn {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    justify-content: center;
    text-align: center;
  }

  .nav-drawer-btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* Details panel: landline, hours, address */
  .nav-drawer-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-2);
    padding: var(--space-4);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
  }

  /* Keep times, numbers and place names on one line */
  .nav-drawer-details .nowrap {
    white-space: nowrap;
  }

  .nav-drawer-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Centre the icon on the first line of text */
  .nav-drawer-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: calc((var(--text-sm) * var(--leading-normal) - 20px) / 2);
    color: var(--color-primary);
  }

  .nav-drawer-landline,
  .nav-drawer-hours,
  .nav-drawer-address {
    font-size: var(--text-sm);
    font-style: normal;
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  .nav-drawer-hours strong {
    color: var(--color-text);
  }

  .nav-drawer-landline a,
  .nav-drawer-address a,
  .site-header:not(.is-scrolled) .nav-drawer-landline a,
  .site-header:not(.is-scrolled) .nav-drawer-address a {
    color: var(--color-primary);
  }

  .nav-drawer-address a {
    font-weight: var(--weight-semibold);
  }

  .site-header:not(.is-scrolled) .nav-drawer-landline,
  .site-header:not(.is-scrolled) .nav-drawer-hours,
  .site-header:not(.is-scrolled) .nav-drawer-address {
    color: var(--color-text-muted);
  }

  /* Mobile nav CTA */
  .primary-nav::after {
    content: '';
    display: block;
    margin-top: var(--space-6);
  }
}

/* Narrow phones: one type step down so drawer button text fits */
@media (max-width: 359px) {
  .nav-drawer-btn {
    font-size: var(--text-sm);
  }
}


/* =============================================================
   Section: Hero
   ============================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(44, 85, 48, 0.72) 0%, rgba(30, 60, 34, 0.60) 100%),
    url('../assets/images/preeti-hero-v1.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Desktop: text sits to the right of the doctor, so lighten the overlay
   over her on the left and keep it dark behind the text on the right.
   Below 1024px the text overlaps the photo and needs the full overlay. */
@media (min-width: 1024px) {
  .hero-bg {
    background-image:
      linear-gradient(to right,
        rgba(30, 60, 34, 0.25) 0%,
        rgba(30, 60, 34, 0.35) 35%,
        rgba(30, 60, 34, 0.75) 60%,
        rgba(30, 60, 34, 0.82) 100%),
      url('../assets/images/preeti-hero-v1.jpg');
  }
}

/* Subtle texture overlay for depth */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(44, 44, 42, 0.15) 0%,
    rgba(44, 44, 42, 0.35) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--nav-height) + var(--announcement-height));
  padding-bottom: var(--space-12);
  max-width: 700px;
}

/* Desktop: push the text block to the right so it clears the doctor's face.
   The right margin matches the empty space either side of a max-width
   .container, so the box's right edge lines up with the header container
   and the .container gutter lines the text up with the header CTA. */
@media (min-width: 1024px) {
  .hero-content {
    max-width: 560px;
    margin-left: auto;
    margin-right: max(0px, calc((100% - var(--container-max)) / 2));
  }
}

/* Below 1024px: stack the photo on top and the text below on solid green.
   The fixed banner and header still float over the top of the photo,
   so the overlay keeps a light dark band there for the white logo and
   hamburger, stays clear over her face, then fades into the hero green. */
@media (max-width: 1023px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    background-color: rgb(30, 60, 34);
  }

  .hero-bg {
    position: relative;
    inset: auto;
    height: 60vh;
    height: 60svh;
    background-image:
      linear-gradient(to bottom,
        rgba(30, 60, 34, 0.55) 0%,
        rgba(30, 60, 34, 0.45) calc(var(--announcement-height) + var(--nav-height) - 16px),
        rgba(30, 60, 34, 0) calc(var(--announcement-height) + var(--nav-height) + 24px),
        rgba(30, 60, 34, 0) 60%,
        rgb(30, 60, 34) 96%),
      url('../assets/images/preeti-hero-v1.jpg');
    background-position: 25% top;
  }

  .hero-bg::after {
    display: none;
  }

  .hero-content {
    padding-top: var(--space-3);
  }
}

.hero-heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-4xl), 5vw, 3.25rem);
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}

.hero-subhead {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-10);
  max-width: 520px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Contact line under the CTAs */
.hero-contact {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.85);
}

.hero-contact a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Phones: hours on their own line, no separator */
@media (max-width: 767px) {
  .hero-contact-sep {
    display: none;
  }

  .hero-contact-hours {
    display: block;
  }
}

/* Trust row — stacked on mobile, one row with dividers from tablet up */
.hero-trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero-trust-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-white);
}

.hero-trust-detail {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.85);
}

a.hero-trust-detail {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.hero-trust-detail:hover,
.hero-contact a:hover {
  color: var(--color-white);
  text-decoration-thickness: 2px;
}

/* The default green focus ring is hard to see on the green overlay */
.hero-contact a:focus-visible,
a.hero-trust-detail:focus-visible {
  outline-color: var(--color-white);
}

@media (min-width: 768px) {
  .hero-trust {
    flex-direction: row;
    gap: 0;
  }

  .hero-trust-item {
    padding: 0 var(--space-6);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
  }

  .hero-trust-item:first-child {
    padding-left: 0;
    border-left: none;
  }

  .hero-trust-item:last-child {
    padding-right: 0;
  }
}

/* Ghost button — white outline, white text, for use on dark backgrounds */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-white);
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
  transform: translateY(-1px);
}

.btn-ghost:active {
  transform: translateY(0);
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}


/* =============================================================
   Section: Welcome Strip
   ============================================================= */

.welcome-strip {
  background-color: var(--color-bg);
}

.welcome-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 768px) {
  .welcome-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

/* Text-only welcome strip: used until a real clinic photo is available */
.welcome-inner--text-only {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.welcome-inner--text-only .welcome-text {
  align-items: center;
}

.welcome-image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-surface);
  aspect-ratio: 4 / 3;
}

.welcome-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.welcome-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.welcome-text h2 {
  margin-bottom: var(--space-2);
}

/* Text link — arrow style */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  font-size: var(--text-sm);
  transition: gap var(--transition-base), color var(--transition-base);
  margin-top: var(--space-2);
}

.text-link:hover {
  gap: var(--space-3);
  color: var(--color-primary-dark);
}


/* =============================================================
   Section: Meet the Doctor
   ============================================================= */

.doctor-section {
  background-color: var(--color-surface);
}

.doctor-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  justify-items: center;
}

@media (min-width: 768px) {
  .doctor-inner {
    grid-template-columns: 280px 1fr;
    gap: var(--space-16);
    justify-items: start;
  }
}

.doctor-photo-wrap {
  width: 220px;
  height: 220px;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-primary-light);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .doctor-photo-wrap {
    width: 280px;
    height: 280px;
  }
}

.doctor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.doctor-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

@media (min-width: 768px) {
  .doctor-bio {
    text-align: left;
  }
}

.doctor-credentials {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: calc(var(--space-1) * -1);
}


/* =============================================================
   Section: Services Grid
   ============================================================= */

.services-section {
  background-color: var(--color-bg);
}

.section-header {
  margin-bottom: var(--space-12);
}

.section-header h2 {
  margin-top: var(--space-2);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.service-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.service-card-title {
  font-size: var(--text-xl);
}

.service-card-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  flex: 1;
}

.service-link {
  margin-top: auto;
}


/* =============================================================
   Section: Why Choose Us
   ============================================================= */

.why-section {
  background-color: var(--color-surface);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-6);
}

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

.why-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
}

@media (min-width: 768px) {
  .why-item {
    align-items: center;
    text-align: center;
  }
}

.why-icon {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.why-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.why-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}


/* =============================================================
   Section: Testimonials
   ============================================================= */

.testimonials-section {
  background-color: var(--color-bg);
}

/* Section: Testimonials Carousel */

.carousel-outer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.carousel-viewport {
  overflow: hidden;
  flex: 1;
}

.carousel-track {
  display: flex;
  column-gap: 24px; /* must match GAP_PX constant in main.js carousel section */
  transition: transform 0.45s ease;
  will-change: transform;
}

.carousel-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.carousel-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

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

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.carousel-dot.is-active {
  background-color: var(--color-primary);
  transform: scale(1.3);
}

.carousel-dot:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* Carousel context: prevent flex-shrink from compressing cards below their JS-set width */
.carousel-track .testimonial-card {
  flex-shrink: 0;
  min-width: 0;
}

.testimonial-stars {
  font-size: var(--text-lg);
  color: var(--color-star);
  letter-spacing: 2px;
  line-height: 1;
}

.testimonial-card blockquote p,
.review-text {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text);
  font-style: italic;
}

.review-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  cursor: pointer;
  transition: color var(--transition-base);
  align-self: flex-start;
}

.read-more-btn:hover {
  color: var(--color-primary-dark);
}

.read-more-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.testimonial-attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.testimonial-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.testimonial-source {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}


/* =============================================================
   Section: WhatsApp Strip
   ============================================================= */

.whatsapp-strip {
  background-color: var(--color-primary);
  padding-block: var(--space-10);
}

.whatsapp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .whatsapp-inner {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-8);
    text-align: left;
  }
}

.whatsapp-text {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-white);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  background-color: var(--color-white);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  white-space: nowrap;
  transition: background-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.btn-whatsapp:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-whatsapp:active {
  transform: translateY(0);
}

.btn-whatsapp:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}


/* =============================================================
   Section: CTA Banner
   ============================================================= */

.cta-banner {
  background-color: var(--color-surface);
}

.cta-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 560px;
  margin-inline: auto;
}

.cta-banner-inner h2 {
  margin-top: var(--space-2);
}

.cta-banner-inner p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}


/* =============================================================
   Section: Footer
   ============================================================= */

.site-footer {
  background-color: var(--color-text);
  color: var(--color-white);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-8);
  }
}

/* Footer logo — inherits logo component but on dark bg */
.footer-logo {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}

.footer-logo .logo-name {
  color: var(--color-white);
}

.footer-logo .logo-tagline {
  color: rgba(255, 255, 255, 0.65);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--leading-normal);
  max-width: 260px;
  margin-bottom: var(--space-6);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.social-link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-4);
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-base);
}

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

.footer-address {
  font-style: normal;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-4);
}

.footer-hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.footer-hours p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}

.footer-hours strong {
  color: var(--color-white);
}

.footer-phone {
  display: block;
  width: fit-content;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary-light);
  transition: color var(--transition-base);
}

.footer-phone:hover {
  color: var(--color-white);
}

.footer-phone + .footer-phone {
  margin-top: var(--space-1);
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-copy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
}

.footer-legal {
  display: flex;
  gap: var(--space-6);
}

.footer-legal a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--transition-base);
}

.footer-legal a:hover {
  color: var(--color-white);
}


/* =============================================================
   Section: Active nav link
   ============================================================= */

.nav-link[aria-current="page"],
.nav-link[aria-current="true"] {
  color: var(--color-primary);
}

.site-header:not(.is-scrolled) .nav-link[aria-current="page"],
.site-header:not(.is-scrolled) .nav-link[aria-current="true"] {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Drawer is white: keep the current link primary before scroll too */
@media (max-width: 1023px) {
  .site-header:not(.is-scrolled) .nav-link[aria-current="page"],
  .site-header:not(.is-scrolled) .nav-link[aria-current="true"] {
    color: var(--color-primary);
    text-decoration: none;
  }
}


/* =============================================================
   Section: Announcement Banner
   ============================================================= */

.announcement-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.announcement-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.announcement-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: center;
  line-height: var(--leading-snug);
  color: var(--color-text-inverse);
}

.announcement-link {
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.announcement-link:hover,
.announcement-link:focus-visible {
  color: var(--color-text-inverse);
  text-decoration-thickness: 2px;
}

.announcement-link:focus-visible {
  outline-color: var(--color-text-inverse);
}

.announcement-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-text-inverse);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base);
}

.announcement-dismiss:hover,
.announcement-dismiss:focus-visible {
  color: var(--color-text-inverse);
  background-color: rgba(255, 255, 255, 0.15);
}

.announcement-dismiss:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

.announcement-msg-short {
  display: none;
}

@media (max-width: 1023px) {
  /* One-line message: trim padding so the 44px dismiss button sets the height (52px total) */
  .announcement-banner-inner {
    padding-block: var(--space-1);
  }

  .announcement-msg-full {
    display: none;
  }

  .announcement-msg-short {
    display: inline;
  }
}

@media (max-width: 767px) {
  .announcement-text {
    font-size: var(--text-xs);
  }
}


/* =============================================================
   Section: Page Hero (inner pages)
   ============================================================= */

.page-hero {
  background-color: var(--color-surface);
  padding-top: calc(var(--nav-height) + var(--announcement-height) + var(--space-10));
  padding-bottom: var(--space-10);
}

.page-hero h1 {
  max-width: 720px;
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.page-hero h1::after {
  content: "";
  display: block;
  width: var(--space-12);
  height: 3px;
  margin-top: var(--space-4);
  background-color: var(--color-accent);
}

.page-hero-subhead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 560px;
  line-height: var(--leading-normal);
}


/* =============================================================
   Section: Breadcrumb
   ============================================================= */

.breadcrumb {
  margin-bottom: var(--space-4);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--space-1);
  color: var(--color-text-muted);
  opacity: 0.6;
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

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

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
}


/* =============================================================
   Section: About Page
   ============================================================= */

.about-doctor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 768px) {
  .about-doctor {
    grid-template-columns: 340px 1fr;
    gap: var(--space-16);
  }
}

.about-photo-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-primary-light);
  aspect-ratio: 3 / 4;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-bio h2 {
  margin-bottom: var(--space-1);
}


/* Values strip */
.values-strip {
  background-color: var(--color-primary);
  padding-block: var(--space-20);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

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

.value-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .value-item {
    align-items: center;
    text-align: center;
  }
}

.value-icon {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.15);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.value-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.value-item p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--leading-normal);
}


/* =============================================================
   Section: Associate Dentist
   ============================================================= */

/* Follows the doctor section directly — one section padding between them, not two */
.associate-section {
  padding-top: 0;
}

/* Same grid as .about-doctor so text columns align; photo ~3/4 of Dr. Preeti's 340px */
@media (min-width: 768px) {
  .about-associate .about-photo-wrap {
    max-width: 255px;
    justify-self: start;
  }
}

.about-associate h2 {
  font-size: var(--text-3xl);
}


/* =============================================================
   Section: Consultants
   ============================================================= */

/* Anchor offset — matches the sticky header (also used by service page card anchors) */
#consultants,
#dr-sneha-nagaraj,
.service-detail-card {
  scroll-margin-top: calc(var(--nav-height) + var(--announcement-height) + var(--space-4));
}

/* Follows the doctor section directly — one section padding between them, not two */
.consultants-section {
  padding-top: 0;
}

.consultants-section .section-header p {
  margin-top: var(--space-4);
  max-width: 65ch;
}

.consultant-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.consultant-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .consultant-card {
    padding: var(--space-8);
  }
}

.consultant-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  height: 128px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .consultant-avatar {
    width: 120px;
    height: 160px;
  }
}

.consultant-avatar picture {
  display: block;
  width: 100%;
  height: 100%;
}

.consultant-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.consultant-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: break-word;
}

.consultant-name {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.consultant-credentials,
.consultant-reg,
.doctor-registration {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Sits directly under .doctor-credentials — pulls up against the .about-bio flex gap */
.doctor-registration {
  margin-top: calc(var(--space-3) * -1);
}

.doctor-registration abbr {
  text-decoration: none;
}

.consultant-summary {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Below desktop: photo floats beside name and credentials; bio and link run full width underneath */
@media (max-width: 1023px) {
  .consultant-card {
    display: flow-root;
  }

  .consultant-avatar {
    float: left;
    margin: 0 var(--space-4) var(--space-3) 0;
  }

  .consultant-body {
    display: block;
  }

  .consultant-body > * + * {
    margin-top: var(--space-2);
  }

  .consultant-body > .consultant-summary {
    clear: left;
    margin-top: var(--space-3);
  }

  .consultant-body > .text-link {
    margin-top: var(--space-4);
  }
}

.consultants-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-10);
}


/* =============================================================
   Section: Service Detail Page
   ============================================================= */

.service-intro {
  max-width: 680px;
  margin-bottom: var(--space-12);
}

.service-intro p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-top: var(--space-4);
}

.service-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

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

.service-detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-detail-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.service-detail-icon {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-bottom: var(--space-1);
}

.service-detail-title {
  font-size: var(--text-xl);
  color: var(--color-text);
}

.service-detail-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  flex: 1;
}

.service-detail-desc a {
  color: var(--color-primary);
  text-decoration: underline;
}


/* =============================================================
   Section: Contact Page
   ============================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.form-label .required {
  color: var(--color-error);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-white);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 480px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.form-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.form-confirm:focus {
  outline: none;
}

.form-confirm:focus-visible {
  box-shadow: var(--shadow-focus);
}

.form-confirm-title {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.form-confirm .btn-secondary {
  margin-top: var(--space-2);
}

/* Both elements set display, which would otherwise override [hidden] */
.contact-form[hidden],
.form-confirm[hidden] {
  display: none;
}

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

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-info-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.contact-address {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
}

.contact-hours p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.contact-hours strong {
  color: var(--color-text);
}

.map-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* Section: Map tap-to-load */
.map-facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
}

.map-facade-note {
  margin: 0;
  max-width: 36ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.map-directions {
  margin-top: var(--space-3);
}


/* =============================================================
   Section: Prose (Privacy Policy, Patient Info)
   ============================================================= */

.prose-layout {
  max-width: 740px;
}

.prose-section {
  margin-bottom: var(--space-12);
}

.prose-section h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.prose-section p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

.prose-section ul {
  list-style: disc;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose-section li {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-2);
}

.prose-address {
  font-style: normal;
}

.prose-last-updated {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}


/* =============================================================
   Section: FAQ (details/summary)
   ============================================================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-white);
}

.faq-item summary {
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text);
  transition: background-color var(--transition-base), color var(--transition-base);
  user-select: none;
}

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

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

.faq-item[open] > summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover,
.faq-item[open] > summary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.faq-body {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.faq-body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}


/* =============================================================
   Section: Blog Page
   ============================================================= */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.article-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.article-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.article-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  flex: 1;
}

.article-card .text-link {
  margin-top: var(--space-2);
}


/* Context overrides: values strip (primary bg — flip text to white) */
.values-strip .section-label {
  color: rgba(255, 255, 255, 0.7);
}

.values-strip h2 {
  color: var(--color-white);
}

/* About page: left-align CTA button inside bio column */
.about-bio .btn-primary {
  align-self: flex-start;
  margin-top: var(--space-4);
}


/* =============================================================
   Section: Photo Placeholders
   ============================================================= */

.hero-bg .photo-coming-soon-label {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-6);
  z-index: 1;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clinic-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-surface) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.clinic-photo-placeholder .photo-coming-soon-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doctor-photo-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  color: var(--color-white);
}

.doctor-initials-circle {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  color: var(--color-white);
}

/* Section: Doctor Photo */
.doctor-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Section: Professional Affiliations */
.affiliations {
  margin-top: var(--space-8);
}

.affiliations-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.affiliations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-surface);
}

.affiliations-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-surface);
  text-align: left;
}


/* =============================================================
   Section: Mobile CTA Bar (Call / WhatsApp, phones only)
   ============================================================= */

.mobile-cta-bar {
  display: none;
}

@media (max-width: 767px) {
  /* Footer colour runs to the bottom of the page, last line clears the pill */
  .site-footer {
    padding-bottom: calc(var(--mobile-cta-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Floating frosted-glass pill */
  .mobile-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    /* Below the nav overlay (z-sticky - 1) so the open menu covers the bar */
    z-index: calc(var(--z-sticky) - 2);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background-color: rgba(30, 60, 34, 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    /* Light edge + depth as shadows so neither adds to the pill's height */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                inset 0 0 0 1px rgba(255, 255, 255, 0.2),
                0 8px 24px rgba(0, 0, 0, 0.22);
    animation: mobile-cta-enter 300ms var(--ease-spring) 400ms backwards;
    /* Visibility flips after the slide-out so a hidden pill can't be reached */
    transition: transform 250ms var(--ease-spring),
                opacity 250ms ease,
                visibility 0s linear 0s;
  }

  /* Hidden while an on-page Call / WhatsApp button is on screen (main.js) */
  .mobile-cta-bar.is-hidden {
    opacity: 0;
    transform: translateY(calc(100% + var(--space-3)));
    visibility: hidden;
    pointer-events: none;
    transition: transform 250ms var(--ease-spring),
                opacity 250ms ease,
                visibility 0s linear 250ms;
  }

  /* Entrance already handled (or skipped): stop it replaying on show */
  .mobile-cta-bar.is-settled {
    animation: none;
  }

  .mobile-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background-color var(--transition-base),
                transform 200ms var(--ease-spring);
  }

  .mobile-cta-btn:active {
    transform: scale(0.96);
  }

  .mobile-cta-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .mobile-cta-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }

  .mobile-cta-call {
    background-color: transparent;
    color: var(--color-white);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  }

  .mobile-cta-call:active {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .mobile-cta-whatsapp {
    background-color: var(--color-white);
    color: rgb(30, 60, 34);
  }

  .mobile-cta-whatsapp:active {
    background-color: var(--color-surface);
  }

  /* No backdrop blur → near-opaque so text stays readable */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-cta-bar {
      background-color: rgba(30, 60, 34, 0.96);
    }
  }
}

/* Slide up + fade in. "backwards" fill only applies during the delay, so the
   pill's resting state is fully visible even if the animation never runs. */
@keyframes mobile-cta-enter {
  from {
    opacity: 0;
    transform: translateY(calc(100% + var(--space-3)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No slide, scale or spring: plain opacity fade only */
  .mobile-cta-bar,
  .mobile-cta-bar.is-hidden {
    animation: none;
    transform: none;
  }

  .mobile-cta-bar {
    transition: opacity 150ms linear, visibility 0s linear 0s;
  }

  .mobile-cta-bar.is-hidden {
    transition: opacity 150ms linear, visibility 0s linear 150ms;
  }

  .mobile-cta-btn:active {
    transform: none;
  }
}