/*
 * Oakland clinic page (4283 Piedmont Ave) — additions layered on the shared
 * couples-sf-predeploy design system. The page root carries BOTH
 * `couples-sf-predeploy` (shared chrome) and `oakland-clinic` (the deltas below), so
 * this page stays visually identical to the other rebuilt pages without
 * duplicating ~1,400 lines of CSS.
 */

.oakland-clinic {
  --font-couples-sf-sans: Montserrat;
  --font-couples-sf-serif: "Cormorant Garamond";
  --font-couples-sf-script: Caveat;
}

/* renderHeadingText() emits <span class="accent"> for **wrapped** phrases. */
.oakland-clinic .accent {
  color: var(--brand);
}

.oakland-clinic .bg-cta .accent {
  color: var(--gold);
}

/* Native <details> FAQ — no client JS, so Visual Editor annotations survive. */
.oakland-clinic details.faq-item > summary.faq-btn {
  list-style: none;
}

.oakland-clinic details.faq-item > summary.faq-btn::-webkit-details-marker {
  display: none;
}

.oakland-clinic details.faq-item[open] > summary.faq-btn {
  background: #dfe9d3;
  color: var(--brand);
}

.oakland-clinic details.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.oakland-clinic details.faq-item .faq-body {
  max-height: none;
}

/* Approach collage without the book covers — reclaim the space they occupied. */
.oakland-clinic .approach-collage {
  min-height: 360px;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .oakland-clinic .approach-collage {
    min-height: 440px;
    padding-bottom: 2.5rem;
  }
}

.oakland-clinic .approach-collage-session {
  top: auto;
  bottom: 0;
}

@media (max-width: 639px) {
  .oakland-clinic .approach-collage {
    min-height: 340px;
    padding-bottom: 2rem;
  }

  .oakland-clinic .approach-collage-session {
    top: auto;
    bottom: 0;
  }
}

/* "How to start" numbered steps */
.oakland-clinic .step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 2.25rem 1.5rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.oakland-clinic .step-num {
  position: absolute;
  top: -1.1rem;
  left: 1.5rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-couples-sf-serif), "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 6px 14px rgba(120, 157, 83, 0.35);
}

.oakland-clinic .step-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.oakland-clinic .step-body {
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Featured-in marquee strip (shared home-page carousel component) */
.oakland-clinic .featured-strip {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 2rem 0 2.25rem;
}

.oakland-clinic .featured-strip .press-label {
  margin-bottom: 1.5rem;
}

/* The marquee renders outside the container so logos can bleed to the edges. */
.oakland-clinic .featured-strip-track {
  padding: 0 1rem;
}

/* Map + Street View pair under the hours & contact block */
.oakland-clinic .clinic-map-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 900px) {
  .oakland-clinic .clinic-map-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.oakland-clinic .clinic-map {
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  background: #fff;
  line-height: 0;
}

.oakland-clinic .clinic-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

@media (min-width: 768px) {
  .oakland-clinic .clinic-map iframe {
    height: 400px;
  }
}

.oakland-clinic .clinic-map-caption {
  line-height: 1.4;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border);
  background: #fff;
}

/* ------------------------------------------------------------------ *
 * Modular type scale — base 13px, ratio 1.25 (major third).
 *
 *   13 -> 16 -> 20 -> 25 -> 32 -> 40 -> 50
 *
 * Every size below is a step on that scale. Nothing is hand-tuned, which
 * is what keeps headings proportional to the copy underneath them.
 *
 * SCOPING: prefixed with `.oakland-clinic`; the base stylesheet is
 * shared by nine pages, so this stays on this page only.
 * ------------------------------------------------------------------ */

/* --- step 1: 13px — dense card copy and small chrome --- */
.oakland-clinic .card-body,
.oakland-clinic .skill-body,
.oakland-clinic .step-body,
.oakland-clinic .book-blurb,
.oakland-clinic .check-label {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.65;
}

.oakland-clinic .eyebrow,
.oakland-clinic .press-label {
  font-size: 0.8125rem; /* 13px */
  letter-spacing: 0.15em;
}

.oakland-clinic .badge,
.oakland-clinic .modality-chip,
.oakland-clinic .blog-tag,
.oakland-clinic .online-badge-sub {
  font-size: 0.8125rem; /* 13px */
}

/* --- step 2: 16px — running paragraphs and controls --- */
.oakland-clinic .section-copy,
.oakland-clinic .bullet-list,
.oakland-clinic .faq-body-inner,
.oakland-clinic .location-pill {
  font-size: 1rem; /* 16px */
  line-height: 1.7;
}

.oakland-clinic .btn-brand,
.oakland-clinic .btn-outline-brand,
.oakland-clinic .book-link,
.oakland-clinic .blog-read,
.oakland-clinic .online-badge-title,
.oakland-clinic .retreat-badge {
  font-size: 1rem; /* 16px */
}

/* --- step 3: 20px — card titles and lead-in copy --- */
.oakland-clinic .card-title,
.oakland-clinic .skill-title,
.oakland-clinic .step-title,
.oakland-clinic .book-title,
.oakland-clinic .blog-title,
.oakland-clinic .faq-btn {
  font-size: 1.25rem; /* 20px */
  line-height: 1.35;
}

.oakland-clinic .hero-desc,
.oakland-clinic .cta-desc {
  font-size: 1.25rem; /* 20px */
  line-height: 1.65;
}

/* --- step 4: 25px — sub-headings --- */
.oakland-clinic .section-h3 {
  font-size: 1.5625rem; /* 25px */
  line-height: 1.25;
}

/* --- step 5: 32px — section headings --- */
.oakland-clinic .section-h2,
.oakland-clinic .cta-h2 {
  font-size: 2rem; /* 32px */
  line-height: 1.2;
}

/* --- step 7: 50px — page title --- */
.oakland-clinic .hero-h1 {
  font-size: 3.125rem; /* 50px */
  line-height: 1.1;
}

/* Tablet — drop the top two steps, hold the rest. */
@media (max-width: 1023px) {
  .oakland-clinic .hero-h1 {
    font-size: 2.5rem; /* 40px — one step down */
  }

  .oakland-clinic .section-h2,
  .oakland-clinic .cta-h2 {
    font-size: 1.75rem; /* 28px */
  }

  .oakland-clinic .section-h3 {
    font-size: 1.375rem; /* 22px */
  }
}

/* Phone — shift the whole scale down one step, ratio intact. */
@media (max-width: 639px) {
  .oakland-clinic .hero-h1 {
    font-size: 2rem; /* 32px */
  }

  .oakland-clinic .section-h2,
  .oakland-clinic .cta-h2 {
    font-size: 1.5625rem; /* 25px */
  }

  .oakland-clinic .section-h3 {
    font-size: 1.25rem; /* 20px */
  }

  .oakland-clinic .card-title,
  .oakland-clinic .skill-title,
  .oakland-clinic .step-title,
  .oakland-clinic .book-title,
  .oakland-clinic .blog-title,
  .oakland-clinic .faq-btn {
    font-size: 1.125rem; /* 18px */
  }

  .oakland-clinic .hero-desc,
  .oakland-clinic .cta-desc {
    font-size: 1.125rem; /* 18px */
  }

  .oakland-clinic .section-copy,
  .oakland-clinic .bullet-list,
  .oakland-clinic .faq-body-inner {
    font-size: 1rem; /* 16px */
  }
}