/* =============================================================================
   AAPA Civic Warmth — Global Stylesheet
   -----------------------------------------------------------------------------
   Loaded after tokens.css. Holds @font-face declarations, page chrome
   (utility bar, site header, breadcrumb, site footer), and design-system
   primitives extracted verbatim from Style_Guide.html.

   Sections:
     1. @font-face          — self-hosted variable WOFF2s
     2. Element resets      — minimal additions to tokens.css base styles
     3. Layout chrome       — container, utility bar, site header, breadcrumb,
                              site footer, lozenge ornament
     4. Primitives          — buttons, eyebrow, cards, staff frame/card,
                              resource tile, callout, CTA band, form fields

   Notes for Design (flag upstream alongside the tokens.css patch):
     - The Style Guide buttons referenced var(--aapa-fs-small, 15px); no
       such token exists in tokens.css. Reconciled here to
       var(--aapa-fs-body-sm) (same value, 15px).
     - Form fields are renamed from .sg-field to .field — Style Guide
       chrome prefix dropped per Style Guide's own README rule.
============================================================================= */


/* -----------------------------------------------------------------------------
   1. @font-face — self-hosted variable WOFF2s
----------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-italic-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-variable.woff2') format('woff2-variations');
}


/* -----------------------------------------------------------------------------
   2. Element resets — small additions to tokens.css base styles
----------------------------------------------------------------------------- */
body {
  font-feature-settings: "kern", "liga";
}
a {
  color: var(--aapa-teal);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--aapa-teal-dark);
}
img {
  max-width: 100%;
  height: auto;
}


/* -----------------------------------------------------------------------------
   3. Layout chrome
----------------------------------------------------------------------------- */

/* ===== Container ===== */
.container {
  max-width: var(--aapa-container);
  margin: 0 auto;
  padding: 0 var(--aapa-gutter);
}

/* ===== Utility bar ===== */
.utility-bar {
  background: var(--aapa-teal-darker);
  color: var(--aapa-teal-veil);
  font-size: var(--aapa-fs-caption);
  letter-spacing: var(--aapa-ls-tight);
}
.utility-bar__inner {
  max-width: var(--aapa-container);
  margin: 0 auto;
  padding: 10px var(--aapa-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--aapa-space-7);
}
.utility-bar__tagline { font-style: italic; }
.utility-bar__links { display: flex; align-items: center; gap: var(--aapa-space-7); }
.utility-bar__links a { color: var(--aapa-teal-veil); text-decoration: none; }
.utility-bar__links a:hover { color: var(--aapa-white); }
.utility-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--aapa-space-2);
  color: var(--aapa-teal-veil);
  text-decoration: none;
}
.utility-bar__phone:hover {
  color: var(--aapa-white);
}
.utility-bar__phone-icon {
  color: var(--aapa-coral-soft);
  flex-shrink: 0;
}
.utility-bar__phone strong {
  color: var(--aapa-white);
  font-weight: var(--aapa-fw-semibold);
  letter-spacing: 0;
}

/* ===== Site header ===== */
.site-header { background: var(--aapa-paper); border-bottom: var(--aapa-border-soft); }
.site-header__inner {
  max-width: var(--aapa-container);
  margin: 0 auto;
  padding: var(--aapa-space-6) var(--aapa-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aapa-space-8);
}
.brand { display: flex; align-items: center; gap: var(--aapa-space-4); text-decoration: none; }
.brand__mark {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}
.brand__text { display: flex; flex-direction: column; gap: 2px; }
.brand__name {
  font-family: var(--aapa-font-serif);
  font-size: 20px;
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  line-height: 1.1;
  letter-spacing: var(--aapa-ls-tight);
  white-space: nowrap;
}
.brand__cities {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-widest);
  color: var(--aapa-ink-muted);
  white-space: nowrap;
}

/* Primary nav — WP-shaped (wp_nav_menu outputs a <ul class="menu">). */
.primary-nav { white-space: nowrap; }
.primary-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--aapa-space-6);
}
.primary-nav li { margin: 0; padding: 0; }
.primary-nav a {
  font-size: var(--aapa-fs-body-sm);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink);
  text-decoration: none;
}
.primary-nav a:hover { color: var(--aapa-teal-dark); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
  color: var(--aapa-coral);
  border-bottom: 1.5px solid var(--aapa-coral);
  padding-bottom: 2px;
}

/* ===== Breadcrumb ===== */
.breadcrumb { background: var(--aapa-paper-deep); border-bottom: var(--aapa-border-soft); }
.breadcrumb__inner {
  max-width: var(--aapa-container);
  margin: 0 auto;
  padding: var(--aapa-space-3) var(--aapa-gutter);
  font-size: var(--aapa-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--aapa-ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--aapa-teal-dark); }
.breadcrumb__sep { margin: 0 var(--aapa-space-3); opacity: 0.55; }
.breadcrumb__current { color: var(--aapa-ink-soft); }

/* ===== Site footer ===== */
/* Composed from wireframe (index.html) using Civic Warmth tokens. The
   Style Guide's .sg-foot established the dark teal-darker treatment;
   this expands to the wireframe's 4-column composition. Resources column
   is static for Phase A; Phase B may convert it to a dynamic taxonomy
   query once resource_category is registered. */
.site-footer {
  background: var(--aapa-teal-darker);
  color: rgba(244, 239, 230, 0.7);
  padding: var(--aapa-space-9) 0 var(--aapa-space-6);
}
.site-footer__inner {
  max-width: var(--aapa-container);
  margin: 0 auto;
  padding: 0 var(--aapa-gutter);
}
.site-footer__columns {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--aapa-space-8);
  padding-bottom: var(--aapa-space-8);
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.site-footer__heading {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h5);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-white);
  line-height: 1.3;
  letter-spacing: var(--aapa-ls-tight);
  margin: 0 0 var(--aapa-space-4);
}
.site-footer p {
  font-size: var(--aapa-fs-body-sm);
  line-height: 1.65;
  margin: 0 0 var(--aapa-space-4);
}
.site-footer p:last-child { margin-bottom: 0; }
.site-footer__address strong,
.site-footer p strong {
  color: var(--aapa-teal-veil);
  font-weight: var(--aapa-fw-medium);
}
.site-footer a {
  color: var(--aapa-teal-veil);
  text-decoration: none;
}
.site-footer a:hover { color: var(--aapa-white); }
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links li + li { margin-top: var(--aapa-space-3); }
.site-footer__links a {
  font-size: var(--aapa-fs-body-sm);
  display: inline-block;
}
.site-footer__bottom {
  padding-top: var(--aapa-space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--aapa-space-5);
  font-size: var(--aapa-fs-caption);
  color: rgba(244, 239, 230, 0.5);
}
.site-footer__bottom .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--aapa-space-6);
}
.site-footer__bottom a { color: rgba(244, 239, 230, 0.7); }

/* ===== Lozenge ornament ===== */
.lozenge { display: flex; align-items: center; gap: var(--aapa-space-3); margin: var(--aapa-space-4) 0 0; }
.lozenge::before, .lozenge::after {
  content: ""; height: 1px; flex: 0 0 32px; background: var(--aapa-coral);
}
.lozenge__dot { width: 5px; height: 5px; background: var(--aapa-coral); transform: rotate(45deg); }


/* -----------------------------------------------------------------------------
   4. Primitives
   Extracted verbatim from Style_Guide.html. .sg-* and .dx* guide-chrome
   classes are NOT included here per Style Guide README.
----------------------------------------------------------------------------- */

/* ===== Buttons ===== */
.btn-coral, .btn-ghost, .btn-link, .btn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--aapa-space-3);
  font-family: var(--aapa-font-sans);
  font-weight: var(--aapa-fw-medium);
  font-size: var(--aapa-fs-body-sm);     /* was var(--aapa-fs-small,15px); reconciled to real token */
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--aapa-dur-base) var(--aapa-ease-standard),
              color var(--aapa-dur-base) var(--aapa-ease-standard),
              border-color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.btn-coral { padding: 16px 30px; background: var(--aapa-coral); color: #fff; border-color: var(--aapa-coral); }
.btn-coral:hover { background: var(--aapa-coral-deep); border-color: var(--aapa-coral-deep); }
.btn-ghost { padding: 16px 26px; background: transparent; color: var(--aapa-teal); border-color: var(--aapa-teal); }
.btn-ghost:hover { background: var(--aapa-teal); color: #fff; }
.btn-link {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--aapa-teal);
  color: var(--aapa-teal);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  font-size: 13px;
}
.btn-link:hover { color: var(--aapa-coral); border-bottom-color: var(--aapa-coral); }
.btn-pill {
  padding: 14px 22px;
  background: var(--aapa-teal);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  font-size: 13px;
}
.btn-pill:hover { background: var(--aapa-teal-dark); }
.btn-coral:disabled,
.btn-coral.is-disabled {
  background: var(--aapa-rule);
  color: var(--aapa-ink-muted);
  border-color: var(--aapa-rule);
  cursor: not-allowed;
}
.btn-coral:focus-visible,
.btn-ghost:focus-visible,
.btn-pill:focus-visible {
  outline: 2px solid var(--aapa-focus);
  outline-offset: 3px;
}

/* ===== Eyebrow ===== */
.eyebrow {
  font-size: var(--aapa-fs-eyebrow);
  letter-spacing: var(--aapa-ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--aapa-coral);
}
.eyebrow.teal  { color: var(--aapa-teal); }
.eyebrow.muted { color: var(--aapa-ink-muted); }

/* ===== Cards ===== */
.card {
  background: var(--aapa-card);
  border: var(--aapa-border);
  padding: var(--aapa-space-8) var(--aapa-space-7);
  position: relative;
}
.card .double-rule {
  position: absolute;
  inset: 8px;
  border: 1px solid var(--aapa-rule-soft);
  pointer-events: none;
}
.card.tight { padding: var(--aapa-space-6); }

/* ===== Location card ===== */
.loc-card { text-align: center; }
.loc-card .roman {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  color: var(--aapa-teal);
  font-feature-settings: "tnum";
  margin-bottom: var(--aapa-space-4);
}
.loc-card h3 {
  font-family: var(--aapa-font-serif);
  font-size: 26px;
  color: var(--aapa-teal-dark);
  margin: 0 0 4px;
  letter-spacing: var(--aapa-ls-tight);
}
.loc-card .tag {
  font-size: var(--aapa-fs-eyebrow);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  color: var(--aapa-coral);
  margin-bottom: var(--aapa-space-3);
}
.loc-card .addr {
  font-size: 15px;
  line-height: 1.7;
  color: var(--aapa-ink);
}

/* ===== Staff frame / card ===== */
.staff-frame {
  aspect-ratio: 1 / 1.1;
  background: var(--aapa-card);
  border: var(--aapa-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.staff-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--aapa-rule-soft);
  pointer-events: none;
  z-index: 1;
}
.staff-frame .initials {
  font-family: var(--aapa-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: var(--aapa-teal);
  line-height: 1;
}
.staff-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.staff-card .name {
  font-family: var(--aapa-font-serif);
  font-size: 16px;
  color: var(--aapa-ink);
  margin-top: var(--aapa-space-4);
  line-height: 1.25;
}
.staff-card .deg {
  font-size: 11px;
  color: var(--aapa-teal);
  letter-spacing: var(--aapa-ls-wider);
  margin-top: 4px;
}
.staff-card .role {
  font-size: 12px;
  color: var(--aapa-ink-soft);
  margin-top: 6px;
  line-height: 1.45;
}

/* ===== Resource tile ===== */
.res-tile {
  background: var(--aapa-card);
  border: var(--aapa-border);
  padding: var(--aapa-space-7) var(--aapa-space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  text-decoration: none;
  color: var(--aapa-ink);
  cursor: pointer;
  transition: background var(--aapa-dur-base);
}
.res-tile:hover { background: var(--aapa-paper); }
.res-tile .num {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  color: var(--aapa-teal);
  font-feature-settings: "tnum";
}
.res-tile .title {
  font-family: var(--aapa-font-serif);
  font-size: 19px;
  margin-top: var(--aapa-space-7);
  margin-bottom: var(--aapa-space-2);
  color: var(--aapa-ink);
}
.res-tile .read {
  font-size: 12px;
  letter-spacing: var(--aapa-ls-wider);
  text-transform: uppercase;
  color: var(--aapa-coral);
}

/* ===== Callout — true team practice ===== */
.callout-team {
  background: var(--aapa-card);
  border: var(--aapa-border);
  padding: var(--aapa-space-8) var(--aapa-space-7);
  position: relative;
}
.callout-team .corner {
  position: absolute;
  top: 22px;
  right: 22px;
}
.callout-team .quote {
  font-family: var(--aapa-font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--aapa-ink);
  margin: 0 0 var(--aapa-space-6);
}

/* ===== Inverted CTA band ===== */
.cta-band {
  background: linear-gradient(180deg, var(--aapa-teal-dark) 0%, #18403F 100%);
  color: #F4EFE6;
  padding: var(--aapa-space-12) var(--aapa-space-9);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 24px);
  pointer-events: none;
}
.cta-band h3 {
  font-family: var(--aapa-font-serif);
  color: #fff;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: var(--aapa-ls-tighter);
  margin: var(--aapa-space-3) 0;
  font-weight: 500;
}
.cta-band .phone-frame {
  display: inline-block;
  padding: 32px 48px;
  border: 1px solid rgba(244, 239, 230, 0.25);
  margin-top: var(--aapa-space-6);
}
.cta-band .phone-frame .label {
  font-size: var(--aapa-fs-eyebrow);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.6);
  margin-bottom: 12px;
}
.cta-band .phone-frame .num {
  font-family: var(--aapa-font-serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: var(--aapa-ls-tighter);
  color: #fff;
  font-feature-settings: "tnum";
  font-weight: 500;
}

/* ===== Form fields ===== */
/* Renamed from .sg-field (Style Guide chrome prefix). Max-width constraint
   dropped — fields fit their container in production composition. */
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field label {
  font-size: var(--aapa-fs-eyebrow);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  color: var(--aapa-ink-soft);
}
.field input,
.field textarea,
.field select {
  font-family: var(--aapa-font-sans);
  font-size: 16px;
  color: var(--aapa-ink);
  padding: 12px 14px;
  background: var(--aapa-white);
  border: 1px solid var(--aapa-rule);
  border-radius: var(--aapa-radius-sm);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--aapa-teal);
  box-shadow: 0 0 0 3px var(--aapa-focus-ring);
}
.field .help { font-size: 12px; color: var(--aapa-ink-muted); }
.field.is-error input { border-color: var(--aapa-error); }
.field.is-error .help { color: var(--aapa-error); }

/* =============================================================================
   Contact Form 7 — Civic Warmth integration (Phase E)
   -----------------------------------------------------------------------------
   CF7 wraps every form control in <span class="wpcf7-form-control-wrap">.
   These rules adapt the CF7 output to the existing .field component so
   contact-page forms render in the same visual language as the Style Guide.

   Submit button replicates .btn-coral values inline because CF7 emits
   <input class="wpcf7-submit"> rather than an anchor we could class with
   .btn-coral directly.

   Adds the .phi-notice callout used above the form on /contact-* pages,
   authored via the PHI Notice synced pattern.
   ========================================================================== */

.field .wpcf7-form-control-wrap { display: block; }
.field .wpcf7-form-control-wrap input,
.field .wpcf7-form-control-wrap textarea { width: 100%; }

.field textarea {
  min-height: 180px;
  resize: vertical;
}

.field .wpcf7-not-valid-tip {
  color: var(--aapa-error);
  font-size: var(--aapa-fs-caption);
  margin-top: 4px;
}

.field--submit { margin-top: var(--aapa-space-7); }

.field--submit .wpcf7-submit {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-semibold);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  background: var(--aapa-coral);
  color: var(--aapa-white);
  border: 1px solid var(--aapa-coral);
  border-radius: var(--aapa-radius-sm);
  padding: 16px 30px;
  cursor: pointer;
  transition: background var(--aapa-dur-base) var(--aapa-ease-standard),
              border-color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.field--submit .wpcf7-submit:hover {
  background: var(--aapa-coral-deep);
  border-color: var(--aapa-coral-deep);
}
.field--submit .wpcf7-submit:focus-visible {
  outline: 2px solid var(--aapa-focus);
  outline-offset: 2px;
}

/* CF7 response output (success / validation / spam) */
.wpcf7-response-output {
  margin: var(--aapa-space-6) 0 0 !important;
  padding: var(--aapa-space-4) var(--aapa-space-5) !important;
  border-width: 1px !important;
  font-size: var(--aapa-fs-body-sm);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--aapa-success) !important;
  background: rgba(43, 122, 120, 0.08);
  color: var(--aapa-ink);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--aapa-error) !important;
  background: rgba(176, 57, 42, 0.06);
  color: var(--aapa-ink);
}

/* PHI notice callout */
.phi-notice {
  background: var(--aapa-paper-deep);
  border-left: 3px solid var(--aapa-coral);
  padding: var(--aapa-space-5) var(--aapa-space-6);
  margin: 0 0 var(--aapa-space-8);
}
.phi-notice p {
  margin: 0;
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-base);
  color: var(--aapa-ink);
}

/* =============================================================================
   AAPA Civic Warmth — global.css Round A additions (Phase B.1)
   -----------------------------------------------------------------------------
   APPEND the contents of this file to assets/css/global.css.

   These additions support single-clinician.php. CSS for single-location.php
   and page-team.php arrives in Rounds B and C respectively; the
   portrait-frame primitives below are deliberately written to support
   both the large header variant (single-clinician) and the card variant
   (single-location / page-team), so Round B mostly adds layout context.

   Sections added:
     5. Button variants    — .btn-teal-dark, .btn-ghost-on-dark
     6. Portrait frame     — large (header) + card modifier
     7. Clinician header   — portrait grid, name, meta strip
     8. Bio section        — two-column grid, prose
     9. Pull quote         — coral-rule, lozenge marker
    10. Data panel         — inline content panel (insurance plans)
    11. Bio sidebar        — sticky two-card column
    12. Schedule CTA       — consolidated dark/light variants

   Class-name notes:
     - Prototype HTML used .btn .btn--coral; we follow Phase A's single-
       class convention (.btn-coral). Templates emit single-class names.
     - Prototype HTML used .schedule-band (dark) and .schedule-section
       (light) as separate primitives. Consolidated here to .schedule-cta
       with --dark / --light modifiers.
============================================================================= */


/* -----------------------------------------------------------------------------
   5. Button variants — additions to the Phase A primitive set
----------------------------------------------------------------------------- */

/* Shared base for the new variants. Mirrors the base from .btn-coral et al.
   in section 4; duplicated here to keep this an append-only patch. */
.btn-teal-dark,
.btn-ghost-on-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--aapa-space-3);
  font-family: var(--aapa-font-sans);
  font-weight: var(--aapa-fw-medium);
  font-size: var(--aapa-fs-body-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 16px 30px;
  transition: background var(--aapa-dur-base) var(--aapa-ease-standard),
              color var(--aapa-dur-base) var(--aapa-ease-standard),
              border-color var(--aapa-dur-base) var(--aapa-ease-standard);
}

.btn-teal-dark {
  background: var(--aapa-teal-dark);
  color: #fff;
  border-color: var(--aapa-teal-dark);
}
.btn-teal-dark:hover {
  background: var(--aapa-teal-darker);
  border-color: var(--aapa-teal-darker);
  color: #fff;
}

.btn-ghost-on-dark {
  background: transparent;
  color: #fff;
  border-color: var(--aapa-teal-veil);
}
.btn-ghost-on-dark:hover {
  background: var(--aapa-teal-veil);
  color: var(--aapa-teal-darker);
  border-color: var(--aapa-teal-veil);
}

.btn-teal-dark:focus-visible,
.btn-ghost-on-dark:focus-visible {
  outline: 2px solid var(--aapa-focus);
  outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   6. Portrait frame
   Used by single-clinician.php (large) and single-location.php /
   page-team.php (card modifier — styled here for forward compatibility,
   layout context arrives in Round B).
----------------------------------------------------------------------------- */
.portrait-frame {
  background: var(--aapa-paper-deep);
  padding: var(--aapa-space-3);
  aspect-ratio: 350 / 500;
  width: 240px;
  outline: 1px solid var(--aapa-rule);
  outline-offset: -1px;
  position: relative;
  overflow: hidden;
}
.portrait-frame__inner {
  width: 100%;
  height: 100%;
  background: var(--aapa-paper-deep);
  border: 1px solid var(--aapa-rule-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--aapa-space-3);
}
.portrait-frame__monogram {
  font-family: var(--aapa-font-serif);
  font-size: 64px;
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  letter-spacing: var(--aapa-ls-tight);
  line-height: 1;
}
.portrait-frame__caption {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
  text-align: center;
}
.portrait-frame__image,
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Filter applied to actual portraits; matches the desaturated look in
     the comp. Remove this declaration if the design intent shifts. */
  filter: saturate(0.85);
}

/* Card variant — used in single-location and page-team. Smaller, inset
   double-rule rendered via ::before since outline + padding scales poorly
   at this size. */
.portrait-frame--card {
  width: 100%;
  padding: 0;
  outline: none;
}
.portrait-frame--card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--aapa-rule-soft);
  pointer-events: none;
  z-index: 1;
}
.portrait-frame--card .portrait-frame__inner {
  border: none;
  background: transparent;
  padding: var(--aapa-space-3);
  gap: var(--aapa-space-2);
}
.portrait-frame--card .portrait-frame__monogram {
  font-size: 38px;
}
.portrait-frame--card .portrait-frame__caption {
  font-family: var(--aapa-font-mono);
  font-size: 8px;
  opacity: 0.55;
  letter-spacing: var(--aapa-ls-wide);
}


/* -----------------------------------------------------------------------------
   7. Clinician header — portrait + name + meta strip
----------------------------------------------------------------------------- */
.clinician-header {
  background: var(--aapa-paper);
  padding: var(--aapa-space-9) 0 var(--aapa-space-10);
}
.clinician-header__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--aapa-space-9);
  align-items: start;
}
.clinician-header__body { padding-top: var(--aapa-space-2); }

.clinician-name {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h1);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  color: var(--aapa-teal-dark);
  margin: 0;
}
.clinician-name__credentials {
  font-style: italic;
  font-weight: var(--aapa-fw-regular);
  color: var(--aapa-teal-dark);
}

.clinician-meta {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--aapa-space-8);
  align-items: end;
  margin-top: var(--aapa-space-6);
  padding-bottom: var(--aapa-space-6);
  border-bottom: var(--aapa-border-soft);
}
.clinician-meta__field {
  display: flex;
  flex-direction: column;
  gap: var(--aapa-space-1);
}
.clinician-meta__label {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
}
.clinician-meta__value {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h5);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-ink);
  letter-spacing: var(--aapa-ls-tight);
}
.clinician-meta__value-ext {
  font-style: italic;
  font-weight: var(--aapa-fw-regular);
  color: var(--aapa-ink-soft);
  font-size: var(--aapa-fs-lead);
  margin-left: 4px;
}
.clinician-meta__cta {
  justify-self: end;
  align-self: end;
}


/* -----------------------------------------------------------------------------
   8. Bio section — two-column body + sticky sidebar
----------------------------------------------------------------------------- */
.bio-section {
  background: var(--aapa-white);
  padding: var(--aapa-space-10) 0 var(--aapa-space-12);
  border-top: var(--aapa-border-soft);
}
.bio-section__grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--aapa-space-9);
  align-items: start;
}

.bio-prose p {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-ink);
  margin: 0 0 var(--aapa-space-6);
}


/* -----------------------------------------------------------------------------
   9. Pull quote — authored inside post body via Custom HTML block
   Block-pattern registration to make this one-click is a Phase C nicety.
----------------------------------------------------------------------------- */
.pull-quote {
  margin: var(--aapa-space-9) 0;
  padding-left: var(--aapa-space-6);
  border-left: 2px solid var(--aapa-coral);
  position: relative;
}
.pull-quote::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--aapa-coral);
  transform: rotate(45deg);
}
.pull-quote__text {
  font-family: var(--aapa-font-serif);
  font-style: italic;
  font-size: var(--aapa-fs-h4);
  line-height: 1.5;
  color: var(--aapa-ink);
  margin: 0 0 var(--aapa-space-4);
  text-wrap: balance;
}
.pull-quote__attr {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
}


/* -----------------------------------------------------------------------------
   10. Data panel — inline content panel (e.g., insurance plans list)
   Authored inside post body via Custom HTML block.
----------------------------------------------------------------------------- */
.data-panel {
  background: var(--aapa-paper);
  padding: var(--aapa-space-6) var(--aapa-space-7);
  margin: var(--aapa-space-7) 0;
  outline: 1px solid var(--aapa-rule-soft);
  outline-offset: -1px;
}
.data-panel__label {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-teal);
  margin-bottom: var(--aapa-space-3);
}
.data-panel__body {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-body-sm);
  line-height: var(--aapa-lh-base);
  color: var(--aapa-ink-soft);
  margin: 0;
}
.data-panel__body em {
  font-style: italic;
  color: var(--aapa-ink-muted);
}


/* -----------------------------------------------------------------------------
   11. Bio sidebar — sticky stack of cards
----------------------------------------------------------------------------- */
.bio-sidebar {
  position: sticky;
  top: var(--aapa-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--aapa-space-7);
}

.sidebar-card {
  background: var(--aapa-paper);
  padding: var(--aapa-space-6);
  outline: 1px solid var(--aapa-rule-soft);
  outline-offset: -1px;
}
.sidebar-card__label {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
  margin-bottom: var(--aapa-space-5);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--aapa-space-4);
}
.sidebar-card__label-aside {
  color: var(--aapa-coral);
  letter-spacing: var(--aapa-ls-wide);
}
.sidebar-card__more {
  display: inline-block;
  margin-top: var(--aapa-space-5);
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--aapa-rule);
  padding-bottom: 2px;
}
.sidebar-card__more:hover {
  color: var(--aapa-teal-dark);
  border-color: var(--aapa-teal-dark);
}

/* Location list in sidebar */
.sidebar-locations {
  display: flex;
  flex-direction: column;
  gap: var(--aapa-space-5);
}
.sidebar-location__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--aapa-space-2);
  gap: var(--aapa-space-3);
}
.sidebar-location__name {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h5);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  text-decoration: none;
}
.sidebar-location__name:hover {
  color: var(--aapa-teal);
}
.sidebar-location__badge {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wide);
  color: var(--aapa-coral);
  white-space: nowrap;
}
.sidebar-location__addr {
  font-size: var(--aapa-fs-body-sm);
  line-height: 1.5;
  color: var(--aapa-ink-soft);
  margin: 0;
}

/* Article list */
.sidebar-articles {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-articles > li + li {
  margin-top: var(--aapa-space-4);
  padding-top: var(--aapa-space-4);
  border-top: 1px solid var(--aapa-rule-soft);
}
.sidebar-article {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sidebar-article__marker {
  flex-shrink: 0;
  margin-top: 7px;
}
.sidebar-article__body {
  flex: 1;
  min-width: 0;
}
.sidebar-article__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-body-sm);
  line-height: 1.4;
  color: var(--aapa-ink);
  margin: 0 0 var(--aapa-space-1);
  text-decoration: none;
  display: block;
}
.sidebar-article__title:hover { color: var(--aapa-teal-dark); }
.sidebar-article__cat {
  font-family: var(--aapa-font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--aapa-ink-muted);
}


/* -----------------------------------------------------------------------------
   12. Schedule CTA — consolidated primitive
   Replaces prototype's separate .schedule-band (dark) and .schedule-section
   (light). Use --dark on single-clinician.php; --light on single-location.php.
----------------------------------------------------------------------------- */
.schedule-cta {
  padding: var(--aapa-space-11) 0;
  text-align: center;
}
.schedule-cta--dark {
  background: var(--aapa-teal-dark);
  color: var(--aapa-white);
}
.schedule-cta--light {
  background: var(--aapa-paper);
  color: var(--aapa-ink);
}

.schedule-cta__heading {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h2);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  margin: 0 0 var(--aapa-space-5);
}
.schedule-cta--dark .schedule-cta__heading {
  color: var(--aapa-white);
}
.schedule-cta--light .schedule-cta__heading {
  color: var(--aapa-teal-dark);
}

.schedule-cta__lead {
  max-width: 56ch;
  margin: 0 auto var(--aapa-space-8);
  font-size: var(--aapa-fs-lead);
  line-height: var(--aapa-lh-prose);
}
.schedule-cta--dark .schedule-cta__lead {
  color: var(--aapa-teal-veil);
}
.schedule-cta--light .schedule-cta__lead {
  font-size: var(--aapa-fs-body);
  color: var(--aapa-ink-soft);
}

.schedule-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--aapa-space-4);
  flex-wrap: wrap;
}

/* =============================================================================
   AAPA Civic Warmth — global.css Round B additions (Phase B.1)
   -----------------------------------------------------------------------------
   APPEND the contents of this file to assets/css/global.css (after the
   Round A additions, before any future round).

   These additions support single-location.php. The clinician card and
   portrait-frame card variant were already shipped in Round A.

   Sections added:
     13. Location header   — H1 + lozenge band
     14. Address & map     — two-column grid, phone/fax split, map frame
     15. Clinicians section + suite group
     16. Clinician card    — 130px portrait + body
============================================================================= */


/* -----------------------------------------------------------------------------
   13. Location header
----------------------------------------------------------------------------- */
.location-header {
  background: var(--aapa-paper);
  padding: var(--aapa-space-9) 0 var(--aapa-space-8);
}
.location-name {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h1);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  color: var(--aapa-teal-dark);
  margin: 0;
}


/* -----------------------------------------------------------------------------
   14. Address & map section
----------------------------------------------------------------------------- */
.address-map-section {
  background: var(--aapa-paper);
  padding: 0 0 var(--aapa-space-11);
}
.address-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aapa-space-9);
  align-items: start;
}

/* Address block — three-row stack: label + address, phone/fax split, CTA. */
.address-block__label {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
  margin-bottom: var(--aapa-space-3);
}
.address-block__lines {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h3);
  line-height: 1.35;
  color: var(--aapa-ink);
  margin: 0;
  letter-spacing: var(--aapa-ls-tight);
}
.address-block__suite {
  font-style: italic;
  color: var(--aapa-ink-soft);
  font-weight: var(--aapa-fw-regular);
}

.phonefax-split {
  margin-top: var(--aapa-space-7);
  padding-top: var(--aapa-space-5);
  padding-bottom: var(--aapa-space-5);
  border-top: var(--aapa-border-soft);
  border-bottom: var(--aapa-border-soft);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: var(--aapa-space-7);
}
.phonefax-split__divider {
  width: 1px;
  height: 36px;
  background: var(--aapa-rule-soft);
  justify-self: center;
}
.phonefax-field {
  display: flex;
  flex-direction: column;
  gap: var(--aapa-space-1);
}
.phonefax-field__label {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
}
.phonefax-field__value {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  color: var(--aapa-ink);
  text-decoration: none;
}
a.phonefax-field__value:hover {
  color: var(--aapa-teal-dark);
}

.address-block__cta {
  margin-top: var(--aapa-space-6);
}

/* Map embed frame — 4:3 outer with inset double-rule. */
.map-embed-frame {
  background: var(--aapa-paper-deep);
  padding: var(--aapa-space-3);
  outline: 1px solid var(--aapa-rule);
  outline-offset: -1px;
}
.map-embed-frame__inner {
  aspect-ratio: 4 / 3;
  background: var(--aapa-paper-deep);
  border: 1px solid var(--aapa-rule-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Publisher-supplied iframe fills the inner frame. */
.map-embed-frame__inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Placeholder treatment when no iframe is set. */
.map-embed-frame__placeholder {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, transparent 49.5%, var(--aapa-teal-veil) 49.5%, var(--aapa-teal-veil) 50.3%, transparent 50.3%),
    linear-gradient(70deg,  transparent 38.5%, var(--aapa-teal-veil) 38.5%, var(--aapa-teal-veil) 39.1%, transparent 39.1%);
  opacity: 0.45;
}
.map-embed-frame__pin {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--aapa-space-2);
  padding: 6px 12px;
  background: var(--aapa-teal-darker);
  color: var(--aapa-white);
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
}
.map-embed-frame__pin::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--aapa-coral);
  border-radius: 50%;
  margin-left: 4px;
  box-shadow: 0 0 0 2px var(--aapa-paper-deep);
}

.map-caption-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--aapa-space-3);
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
  gap: var(--aapa-space-4);
}
.map-caption-row a {
  color: var(--aapa-teal);
  border-bottom: 1px solid var(--aapa-rule);
  padding-bottom: 2px;
  text-decoration: none;
}
.map-caption-row a:hover {
  color: var(--aapa-teal-dark);
  border-color: var(--aapa-teal-dark);
}


/* -----------------------------------------------------------------------------
   15. Clinicians section + suite group
----------------------------------------------------------------------------- */
.clinicians-section {
  background: var(--aapa-paper-deep);
  padding: var(--aapa-space-11) 0;
}

.suite-group {
  margin-bottom: var(--aapa-space-10);
}
.suite-group:last-child {
  margin-bottom: 0;
}

.suite-group__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--aapa-space-5);
  align-items: baseline;
  margin-bottom: var(--aapa-space-6);
}
.suite-group__label {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h3);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  letter-spacing: var(--aapa-ls-tight);
}
.suite-group__rule {
  height: 1px;
  background: var(--aapa-rule);
  align-self: center;
}


/* -----------------------------------------------------------------------------
   16. Clinician card — 130px portrait + body column
----------------------------------------------------------------------------- */
.clinician-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aapa-space-6);
}

.clinician-card {
  background: var(--aapa-card);
  padding: var(--aapa-space-5);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--aapa-space-6);
  outline: 1px solid var(--aapa-rule-soft);
  outline-offset: -1px;
  transition: outline-color var(--aapa-dur-base) var(--aapa-ease-standard),
              box-shadow var(--aapa-dur-base) var(--aapa-ease-standard);
}
.clinician-card:hover {
  outline-color: var(--aapa-teal);
  box-shadow: var(--aapa-shadow-md);
}

.clinician-card__body {
  display: flex;
  flex-direction: column;
}
.clinician-card__role {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-ink-muted);
  margin-bottom: var(--aapa-space-2);
}
.clinician-card__name {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  font-weight: var(--aapa-fw-medium);
  line-height: 1.2;
  color: var(--aapa-teal-dark);
  margin: 0 0 var(--aapa-space-1);
  letter-spacing: var(--aapa-ls-tight);
}
.clinician-card__creds {
  font-family: var(--aapa-font-serif);
  font-style: italic;
  font-weight: var(--aapa-fw-regular);
  color: var(--aapa-teal-dark);
}
.clinician-card__link {
  margin-top: auto;
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--aapa-rule);
  padding-bottom: 2px;
  align-self: flex-start;
}
.clinician-card__link:hover {
  color: var(--aapa-teal-dark);
  border-color: var(--aapa-teal-dark);
}

/* =============================================================================
   AAPA Civic Warmth — global.css Round C additions (Phase B.1)
   -----------------------------------------------------------------------------
   APPEND the contents of this file to assets/css/global.css after the
   Round B additions.

   These additions support page-team.php. The clinician-card primitive
   itself was shipped in Round B; this round only adds the page-level
   layout (header + 3-column grid).

   First responsive treatment in the codebase — see section 19.

   Sections added:
     17. Team header        — page banner with H1 + lozenge + intro
     18. Team grid section  — paper-deep band wrapping the grid
     19. Team grid          — 3-col desktop, 2-col tablet, 1-col mobile
============================================================================= */


/* -----------------------------------------------------------------------------
   17. Team header
----------------------------------------------------------------------------- */
.team-header {
  background: var(--aapa-paper);
  padding: var(--aapa-space-9) 0 var(--aapa-space-8);
}
.team-name {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h1);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  color: var(--aapa-teal-dark);
  margin: 0;
}

/* Optional intro paragraph(s) authored in the page body. */
.team-intro {
  margin-top: var(--aapa-space-6);
  max-width: 60ch;
}
.team-intro p {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-lead);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-ink-soft);
  margin: 0 0 var(--aapa-space-4);
}
.team-intro p:last-child {
  margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   18. Team grid section
----------------------------------------------------------------------------- */
.team-grid-section {
  background: var(--aapa-paper-deep);
  padding: var(--aapa-space-11) 0;
}


/* -----------------------------------------------------------------------------
   19. Team grid — first responsive treatment in the codebase

   Desktop default: 3 columns (per Phase B.1 spec — 6 clinicians on 2 rows
   of 3 at the 1280px design width).
   Tablet (≤1023px): 2 columns.
   Mobile (≤639px): 1 column stacked.

   Note: this only handles the GRID. The clinician-card itself keeps its
   130px portrait + body layout at all sizes. A future responsive pass may
   want to stack portrait above body on very narrow viewports.
----------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aapa-space-6);
}

@media (max-width: 1023px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* =============================================================================
 * Phase B.2 — single.php (article template)
 * ========================================================================== */

/* Article header — title + byline */
.article-header {
  background: var(--aapa-paper);
  padding: var(--aapa-space-9) 0 var(--aapa-space-7);
}
.article-header__inner {
  max-width: var(--aapa-measure);
  margin: 0 auto;
  padding: 0 var(--aapa-gutter);
}
.article-title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h1);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  color: var(--aapa-teal-dark);
  margin: 0;
}
.article-byline {
  font-family: var(--aapa-font-serif);
  font-style: italic;
  font-size: var(--aapa-fs-lead);
  color: var(--aapa-ink-soft);
  margin: var(--aapa-space-4) 0 0;
}
.article-byline a {
  color: var(--aapa-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--aapa-rule);
}
.article-byline a:hover { color: var(--aapa-teal-dark); border-color: var(--aapa-teal-dark); }

/* Article body — the_content() region, neutral styling */
.article-body-section {
  background: var(--aapa-paper);
  padding: var(--aapa-space-6) 0 var(--aapa-space-11);
}
.article-body {
  max-width: calc(var(--aapa-measure) + 2 * var(--aapa-gutter));
  margin: 0 auto;
  padding: 0 var(--aapa-gutter);
}
.article-body p {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-ink);
  margin: 0 0 var(--aapa-space-6);
}
.article-body strong { font-weight: var(--aapa-fw-semibold); color: var(--aapa-ink); }
.article-body em     { font-style: italic; }
.article-body a      { color: var(--aapa-teal); text-underline-offset: 3px; }
.article-body h2 {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  line-height: var(--aapa-lh-snug);
  margin: var(--aapa-space-8) 0 var(--aapa-space-4);
}
.article-body h3 {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h5);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  margin: var(--aapa-space-7) 0 var(--aapa-space-3);
}
.article-body ul, .article-body ol {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-ink);
  margin: 0 0 var(--aapa-space-6);
  padding-left: var(--aapa-space-7);
}
.article-body li { margin-bottom: var(--aapa-space-2); }
.article-body blockquote {
  margin: var(--aapa-space-7) 0;
  padding-left: var(--aapa-space-6);
  border-left: 2px solid var(--aapa-coral);
  font-style: italic;
  color: var(--aapa-ink-soft);
}

/* Related articles */
.related-section {
  background: var(--aapa-paper-deep);
  border-top: 1px solid var(--aapa-rule);
  border-bottom: 1px solid var(--aapa-rule);
}
.related-inner {
  max-width: calc(var(--aapa-measure) + 2 * var(--aapa-gutter));
  margin: 0 auto;
  padding: var(--aapa-space-10) var(--aapa-gutter) var(--aapa-space-11);
}
.related-heading {
  font-family: var(--aapa-font-serif);
  font-size: 36px;
  font-weight: var(--aapa-fw-medium);
  line-height: 1.1;
  letter-spacing: var(--aapa-ls-tight);
  color: var(--aapa-teal-dark);
  margin: 0 0 var(--aapa-space-8);
}

/* article-list primitive — base.
 * The list-item primitive is shared with the taxonomy archive (Group D
 * adds the two-column layout via .archive-list-section scoping there).
 * On single.php this is single-column with stronger rules. */
.article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-list__item       { break-inside: avoid; }
.article-list__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: var(--aapa-space-5) 0;
  text-decoration: none;
}
.article-list__marker     { flex-shrink: 0; margin-top: 8px; }
.article-list__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h5);
  font-weight: var(--aapa-fw-regular);
  line-height: var(--aapa-lh-snug);
  color: var(--aapa-ink);
  letter-spacing: var(--aapa-ls-tight);
  flex: 1;
  transition: color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.article-list__link:hover .article-list__title { color: var(--aapa-teal-dark); }

/* Single-column variant (related-articles context) */
.related-section .article-list      { border-top: 1px solid var(--aapa-rule); }
.related-section .article-list__item { border-bottom: 1px solid var(--aapa-rule); }

/* =============================================================================
 * Phase B.2 — taxonomy-resource_category.php (category archive)
 * ========================================================================== */

/* Archive header — term title */
.archive-header {
  background: var(--aapa-paper);
  padding: var(--aapa-space-9) 0 var(--aapa-space-8);
}
.archive-title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h1);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  color: var(--aapa-teal-dark);
  margin: 0;
}

/* Archive list section — two-column variant of the article-list primitive.
 * The base list/item/link/marker/title styles ship in the Group C CSS;
 * this scope adds the columns and softer rules. */
.archive-list-section {
  background: var(--aapa-paper);
  padding: 0 0 var(--aapa-space-11);
}
.archive-list-section .article-list {
  columns: 2;
  column-gap: var(--aapa-space-10);
  border-top: 1px solid var(--aapa-rule-soft);
}
.archive-list-section .article-list__item {
  border-bottom: 1px solid var(--aapa-rule-soft);
}

/* "Other categories" nav block */
.other-categories {
  background: var(--aapa-paper-deep);
  padding: var(--aapa-space-10) 0 var(--aapa-space-11);
}
.other-categories__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--aapa-space-6);
  align-items: baseline;
  margin-bottom: var(--aapa-space-8);
}
.other-categories__label {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h3);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  letter-spacing: var(--aapa-ls-tight);
}
.other-categories__rule {
  height: 1px;
  background: var(--aapa-rule);
  align-self: center;
}
.other-categories__library {
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-eyebrow);
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--aapa-rule);
  padding-bottom: 2px;
  white-space: nowrap;
}
.other-categories__library:hover {
  color: var(--aapa-teal-dark);
  border-color: var(--aapa-teal-dark);
}

/* Category cards grid (4-up) */
.category-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aapa-space-4);
}
.category-card {
  background: var(--aapa-card);
  padding: var(--aapa-space-5) var(--aapa-space-6);
  outline: 1px solid var(--aapa-rule-soft);
  outline-offset: -1px;
  text-decoration: none;
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-body-sm);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-ink);
  transition: outline-color var(--aapa-dur-base) var(--aapa-ease-standard),
              color var(--aapa-dur-base) var(--aapa-ease-standard),
              box-shadow var(--aapa-dur-base) var(--aapa-ease-standard);
}
.category-card:hover {
  outline-color: var(--aapa-teal);
  color: var(--aapa-teal-dark);
  box-shadow: var(--aapa-shadow-sm);
}

/* =============================================================================
   B.3 additions — Resources landing (page-resources.php)
============================================================================= */

/* ===== Page header (Resources landing) ===== */
.page-header {
  background: var(--aapa-paper);
  padding: var(--aapa-space-11) 0 var(--aapa-space-8);
}
.page-header__inner {
  max-width: var(--aapa-container);
  margin: 0 auto;
  padding: 0 var(--aapa-gutter);
}
/* H1 is rendered at literal 80px per R3 spec — larger than --aapa-fs-h1
   (64px). Not tokenized in this round; flag for a future type-scale pass
   if other templates adopt this size. */
.page-header__title {
  font-family: var(--aapa-font-serif);
  font-size: 80px;
  font-weight: var(--aapa-fw-medium);
  line-height: 1.0;
  letter-spacing: var(--aapa-ls-tighter);
  color: var(--aapa-teal-dark);
  margin: 0;
  text-wrap: balance;
}

/* ===== Flat-lozenge ornament (R3 marker primitive at ornament scale) =====
   Distinct from .lozenge above, which uses a 5x5 rotated-square dot.
   The R3 design system standardized on the flat-lozenge shape (clip-path
   polygon, 8x5 dimensions) across every marker context. .lozenge is left
   in place for backward compatibility with B.1/B.2 templates; future
   cleanup pass owed to consolidate to a single ornament primitive. */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--aapa-space-2);
  margin: var(--aapa-space-7) 0 var(--aapa-space-8);
  width: 140px;
}
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--aapa-coral);
}
.ornament__dot {
  width: 8px;
  height: 5px;
  background: var(--aapa-coral);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

/* ===== Editor-owed intro (Page post_content) ===== */
/* Renders the_content() of the resources Page. Italic-serif body
   treatment to read as a page lede rather than article body. */
.page-intro {
  max-width: 720px;
  font-family: var(--aapa-font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  color: var(--aapa-ink-soft);
}
.page-intro > :first-child { margin-top: 0; }
.page-intro > :last-child  { margin-bottom: 0; }
.page-intro p { margin: 0 0 var(--aapa-space-4); }

/* ===== Listing — two-column main + 320px sidebar ===== */
.listing-section {
  background: var(--aapa-paper);
  padding-bottom: var(--aapa-space-12);
}
.listing-grid {
  max-width: var(--aapa-container);
  margin: 0 auto;
  padding: var(--aapa-space-2) var(--aapa-gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
  border-top: 1px solid var(--aapa-rule);
}
.listing-main { min-width: 0; }

/* ===== Category section (per-term block in the main column) ===== */
.category-section { margin-top: var(--aapa-space-10); }
.category-section:first-of-type { margin-top: var(--aapa-space-8); }
.category-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--aapa-space-6);
  margin-bottom: var(--aapa-space-1);
}
.category-section__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h3);
  font-weight: var(--aapa-fw-medium);
  line-height: 1.15;
  letter-spacing: var(--aapa-ls-tight);
  color: var(--aapa-teal-dark);
  margin: 0;
}
.category-section__rule {
  flex: 1;
  height: 1px;
  background: var(--aapa-rule);
  align-self: center;
}
.category-section__link {
  font-family: var(--aapa-font-sans);
  font-size: 11px;
  font-weight: var(--aapa-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--aapa-ls-wider);
  color: var(--aapa-teal);
  text-decoration: none;
  white-space: nowrap;
}
.category-section__link:hover { color: var(--aapa-teal-dark); }

/* ===== Article list (R3 primitive — scoped, no category eyebrow) =====
   Two-column inside the main column. If the B.2 archive template
   already added .article-list / __item / __marker / __title rules to
   global.css with a different __link child structure, reconcile rather
   than duplicate. */
.article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--aapa-rule);
  column-count: 2;
  column-gap: 48px;
}
.article-list--single { column-count: 1; }
.article-list__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--aapa-rule);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.article-list__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.article-list__marker {
  flex-shrink: 0;
  margin-top: 8px;
}
.article-list__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h5);
  line-height: 1.3;
  color: var(--aapa-ink);
  letter-spacing: -0.005em;
  text-decoration: none;
  flex: 1;
  transition: color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.article-list__title:hover { color: var(--aapa-teal-dark); }

/* ===== Sidebar rail ===== */
.sidebar {
  position: sticky;
  top: var(--aapa-space-6);
  margin-top: var(--aapa-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--aapa-space-7);
}

/* ===== Clinician list card (sidebar) =====
   Naming differs from prototype's .staff-card to avoid collision with
   the team-grid .staff-card primitive (.staff-card .name / .deg / .role)
   already in this stylesheet. Same composition, different class. */
.clinician-list-card {
  background: var(--aapa-card);
  border: 1px solid var(--aapa-rule);
  padding: 24px 24px 22px;
}
.clinician-list-card__label {
  font-family: var(--aapa-font-sans);
  font-size: 10px;
  font-weight: var(--aapa-fw-medium);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  color: var(--aapa-teal);
  margin-bottom: 14px;
}
.clinician-list-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.clinician-list-card__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--aapa-rule-soft);
}
.clinician-list-card__item:first-child {
  border-top: 1px solid var(--aapa-rule-soft);
}
.clinician-list-card__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.clinician-list-card__marker {
  flex-shrink: 0;
  margin-top: 7px;
}
.clinician-list-card__name {
  font-family: var(--aapa-font-serif);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--aapa-ink);
  text-decoration: none;
  flex: 1;
  transition: color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.clinician-list-card__name:hover { color: var(--aapa-teal-dark); }
.clinician-list-card__directory {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--aapa-font-sans);
  font-size: 11px;
  font-weight: var(--aapa-fw-medium);
  letter-spacing: var(--aapa-ls-wider);
  text-transform: uppercase;
  color: var(--aapa-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--aapa-teal);
  padding-bottom: 3px;
}
.clinician-list-card__directory:hover {
  color: var(--aapa-teal-dark);
  border-color: var(--aapa-teal-dark);
}

/* ===== Appointment card (sidebar) ===== */
.appointment-card {
  background: var(--aapa-teal);
  color: #F4EFE6;
  padding: 28px 26px 30px;
  position: relative;
}
.appointment-card__frame {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(166, 199, 197, 0.22);
  pointer-events: none;
}
.appointment-card__inner { position: relative; }
.appointment-card__label {
  font-family: var(--aapa-font-sans);
  font-size: 10px;
  font-weight: var(--aapa-fw-medium);
  letter-spacing: var(--aapa-ls-widest);
  text-transform: uppercase;
  color: var(--aapa-teal-veil);
  margin-bottom: 14px;
}
.appointment-card__heading {
  font-family: var(--aapa-font-serif);
  font-weight: var(--aapa-fw-medium);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: var(--aapa-ls-tight);
  color: var(--aapa-white);
  margin: 0;
}
.appointment-card__body {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.82);
}
.appointment-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 15px 18px;
  background: var(--aapa-coral);
  color: var(--aapa-white);
  text-decoration: none;
  font-family: var(--aapa-font-sans);
  font-size: 13px;
  font-weight: var(--aapa-fw-medium);
  letter-spacing: var(--aapa-ls-wide);
  text-transform: uppercase;
  font-feature-settings: "tnum";
  transition: background var(--aapa-dur-base) var(--aapa-ease-standard);
}
.appointment-card__cta:hover {
  background: var(--aapa-coral-deep);
  color: var(--aapa-white);
}

/* ===== Homepage hero ===== */
/* front-page.php — section 1.
   Composed from wireframe (legacy index.html) using Civic Warmth tokens:
   teal-dark band, white serif H1 spanning the container, two-column body
   below — prose + two coral CTAs on the left, intake card on the right.
   The intake card's three-locations stub queries the location CPT
   (aapa_get_all_locations()) so the hero stays in sync with the locations
   strip downpage without manual duplication. */
.home-hero {
  background: var(--aapa-teal-dark);
  color: var(--aapa-paper);
  padding: var(--aapa-space-12) 0;
}
.home-hero__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h1);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  color: var(--aapa-white);
  margin: 0 0 var(--aapa-space-9);
}
.home-hero__body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--aapa-space-9);
  align-items: start;
}
.home-hero__content p {
  font-size: var(--aapa-fs-lead);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-paper);
  margin: 0 0 var(--aapa-space-5);
}
.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aapa-space-4);
  margin-top: var(--aapa-space-7);
}

/* Intake card — inset panel on the dark hero. Title + tap-to-call phone
   + intake-coordinator copy + three-locations stub (data-driven from the
   location CPT, see aapa_get_all_locations()). */
.home-hero__intake {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(244, 239, 230, 0.15);
  padding: var(--aapa-space-8);
}
.home-hero__intake-title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  font-weight: var(--aapa-fw-medium);
  line-height: var(--aapa-lh-snug);
  color: var(--aapa-white);
  margin: 0 0 var(--aapa-space-4);
}
.home-hero__intake-phone {
  display: block;
  font-family: var(--aapa-font-serif);
  font-size: 34px;
  font-weight: var(--aapa-fw-medium);
  letter-spacing: var(--aapa-ls-tight);
  color: var(--aapa-white);
  text-decoration: none;
  margin: 0 0 var(--aapa-space-5);
  font-feature-settings: "tnum";
}
.home-hero__intake-phone:hover {
  color: var(--aapa-coral-soft);
}
.home-hero__intake-copy {
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-base);
  color: var(--aapa-paper);
  margin: 0 0 var(--aapa-space-6);
}
.home-hero__intake-locations {
  font-size: var(--aapa-fs-body-sm);
  line-height: var(--aapa-lh-base);
  color: var(--aapa-teal-veil);
  margin: 0;
}
.home-hero__intake-locations strong {
  display: block;
  color: var(--aapa-white);
  font-weight: var(--aapa-fw-semibold);
  margin-bottom: var(--aapa-space-1);
}

/* ===== Homepage Services section ===== */
/* front-page.php — section 2.
   Paper band. Centered serif H2, centered intro paragraph capped at the
   body measure, bordered "Services Include:" panel with the 8-item list
   in two columns, centered teal-pill CTA. Long intro copy is verbatim
   from the wireframe (legacy index.html) — hardcoded in the template,
   not editor-owned, per the kickoff's section-opener convention. */
.home-services {
  background: var(--aapa-paper);
  padding: var(--aapa-space-12) 0;
}
.home-services__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h2);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  text-align: center;
  margin: 0 0 var(--aapa-space-7);
}
.home-services__intro {
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-ink-soft);
  max-width: var(--aapa-measure);
  margin: 0 auto var(--aapa-space-9);
  text-align: center;
}
.home-services__panel {
  background: var(--aapa-card);
  border: var(--aapa-border);
  padding: var(--aapa-space-8) var(--aapa-space-9);
  max-width: 720px; /* narrower than container; two-column list fits comfortably */
  margin: 0 auto var(--aapa-space-9);
}
.home-services__panel-title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  font-weight: var(--aapa-fw-semibold);
  color: var(--aapa-teal-dark);
  text-align: center;
  margin: 0 0 var(--aapa-space-6);
}
.home-services__panel-list {
  list-style: disc;
  column-count: 2;
  column-gap: var(--aapa-space-9);
  margin: 0;
  padding: 0 0 0 var(--aapa-space-5);
}
.home-services__panel-list li {
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-base);
  color: var(--aapa-ink);
  margin: 0 0 var(--aapa-space-3);
  break-inside: avoid;
}
.home-services__panel-list li::marker {
  color: var(--aapa-coral);
}
.home-services__panel-list li:last-child {
  margin-bottom: 0;
}
.home-services__cta {
  text-align: center;
  margin: 0;
}

/* ===== Homepage CTA band ===== */
/* front-page.php — section 3.
   Paper band — the wireframe inverts the R3 mockup's CTA treatment (we
   went with the wireframe's rhythm per the Phase C kickoff resolution).
   Centered serif H2, lead subtitle, prominent coral phone CTA at the
   focal center, then a small intake-coordinator note and a secondary
   "send us a message" text link. Distinct from the inverted .cta-band
   primitive used on inner-page schedule bands. */
.home-cta {
  background: var(--aapa-paper);
  padding: var(--aapa-space-12) 0;
  text-align: center;
}
.home-cta__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h2);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  margin: 0 0 var(--aapa-space-5);
}
.home-cta__lead {
  font-size: var(--aapa-fs-lead);
  line-height: var(--aapa-lh-base);
  color: var(--aapa-ink-soft);
  max-width: 640px;
  margin: 0 auto var(--aapa-space-8);
}

/* Phone CTA — extends .btn-coral with larger padding, serif type, and
   tabular figures. This is the focal CTA of the section, deliberately
   sized larger than standard .btn-coral instances on the homepage. */
.home-cta__phone-btn {
  padding: 22px 44px;
  font-family: var(--aapa-font-serif);
  font-size: 28px;
  font-weight: var(--aapa-fw-medium);
  letter-spacing: var(--aapa-ls-tight);
  font-feature-settings: "tnum";
  text-transform: none;
}
.home-cta__note {
  font-size: var(--aapa-fs-body);
  font-style: italic;
  color: var(--aapa-ink-muted);
  margin: var(--aapa-space-5) 0 var(--aapa-space-6);
}
.home-cta__alt {
  margin: 0;
}
.home-cta__alt-link {
  font-size: var(--aapa-fs-body);
  color: var(--aapa-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--aapa-dur-base) var(--aapa-ease-standard),
              border-color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.home-cta__alt-link:hover {
  color: var(--aapa-coral);
  border-bottom-color: var(--aapa-coral);
}

/* ===== Homepage Our Staff section ===== */
/* front-page.php — section 4.
   Paper band. Centered serif H2, centered intro paragraph capped at the
   body measure, .callout-team primitive holding the "A True Team
   Practice" quote, centered insurance paragraph below, coral "Meet Our
   Team" CTA. The wireframe's composition is purely vertical and
   centered — distinct from the Style Guide's side-by-side
   callout/insurance card layout (.callout-team box is reused; contents
   differ). No clinician portrait grid — cut from the R3 mockup per the
   Phase C kickoff; the Our Team page carries that material. */
.home-staff {
  background: var(--aapa-paper);
  padding: var(--aapa-space-12) 0;
  text-align: center;
}
.home-staff__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h2);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  margin: 0 0 var(--aapa-space-7);
}
.home-staff__intro {
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-ink-soft);
  max-width: var(--aapa-measure);
  margin: 0 auto var(--aapa-space-9);
}
.home-staff__callout {
  max-width: 720px;
  margin: 0 auto var(--aapa-space-9);
}
.home-staff__callout-title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  font-weight: var(--aapa-fw-semibold);
  color: var(--aapa-teal-dark);
  margin: 0 0 var(--aapa-space-5);
}
/* Override .callout-team .quote bottom margin — quote is the last
   element in the box for this section, so the box's own padding
   provides the bottom breathing room. */
.home-staff__callout .quote {
  margin: 0;
}
.home-staff__insurance {
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-base);
  color: var(--aapa-ink-soft);
  max-width: 720px;
  margin: 0 auto var(--aapa-space-9);
}
.home-staff__insurance-phone {
  color: var(--aapa-teal);
  text-decoration: none;
  font-feature-settings: "tnum";
  font-weight: var(--aapa-fw-medium);
}
.home-staff__insurance-phone:hover {
  color: var(--aapa-coral);
  text-decoration: underline;
}
.home-staff__cta {
  margin: 0;
}

/* ===== Homepage Learn section ===== */
/* front-page.php — section 5.
   Inverted teal-dark band (second on the page, the first being the
   hero). Two-column composition per wireframe: left column holds the
   "Learn" title, intro paragraph, and "Visit Resource Library" outline
   CTA; right column holds the 8 resource categories as a 2×4 tile
   grid. Tiles are simple text-only (category name only) — distinct
   from the .res-tile primitive on the /resources/ landing which
   includes number eyebrows and read-articles links. The category query
   is delegated to aapa_get_resource_categories() so the homepage and
   the Resources landing stay in sync. */
.home-learn {
  background: var(--aapa-teal-dark);
  color: var(--aapa-paper);
  padding: var(--aapa-space-12) 0;
}
.home-learn__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--aapa-space-10);
  align-items: start;
}
.home-learn__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h2);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-white);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  margin: 0 0 var(--aapa-space-6);
}
.home-learn__intro {
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-paper);
  margin: 0 0 var(--aapa-space-7);
}
.home-learn__cta {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--aapa-white);
  border: 1px solid var(--aapa-white);
  padding: 16px 26px;
  font-family: var(--aapa-font-sans);
  font-weight: var(--aapa-fw-medium);
  font-size: var(--aapa-fs-body-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--aapa-dur-base) var(--aapa-ease-standard),
              color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.home-learn__cta:hover {
  background: var(--aapa-white);
  color: var(--aapa-teal-dark);
}

/* Tile grid: 2 columns × 4 rows. Tiles are content-sized but with a
   min-height to keep short single-word names from feeling cramped
   against multi-word neighbours in the same row. */
.home-learn__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aapa-space-4);
}
.home-learn__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(244, 239, 230, 0.18);
  padding: var(--aapa-space-7) var(--aapa-space-5);
  min-height: 92px;
  text-align: center;
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-body);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-paper);
  text-decoration: none;
  transition: background var(--aapa-dur-base) var(--aapa-ease-standard),
              border-color var(--aapa-dur-base) var(--aapa-ease-standard),
              color var(--aapa-dur-base) var(--aapa-ease-standard);
}
.home-learn__tile:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--aapa-teal-light);
  color: var(--aapa-white);
}

/* ===== Homepage Locations section ===== */
/* front-page.php — section 6.
   Paper band. Centered serif H2, centered intro paragraph (with clickable
   phone link), "Serving the Atlanta area since 1980" tagline (the
   homepage's date anchor — matches the locations strip subtitle from the
   wireframe), then a 3-card grid of locations from the CPT, ordered
   menu_order ASC. Each card composes .card.loc-card primitives plus the
   homepage-scoped .home-locations__card wrapper. Building name (new
   Phase C ACF field) renders as the first address-block line when
   populated. Suite line (.address_line_2) renders italic small below
   the street address per existing single-location pattern. */
.home-locations {
  background: var(--aapa-paper);
  padding: var(--aapa-space-12) 0;
  text-align: center;
}
.home-locations__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h2);
  font-weight: var(--aapa-fw-medium);
  color: var(--aapa-teal-dark);
  line-height: var(--aapa-lh-tight);
  letter-spacing: var(--aapa-ls-tighter);
  margin: 0 0 var(--aapa-space-7);
}
.home-locations__intro {
  font-size: var(--aapa-fs-body);
  line-height: var(--aapa-lh-prose);
  color: var(--aapa-ink-soft);
  max-width: var(--aapa-measure);
  margin: 0 auto var(--aapa-space-6);
}
.home-locations__intro-phone {
  color: var(--aapa-teal);
  text-decoration: none;
  font-feature-settings: "tnum";
  font-weight: var(--aapa-fw-medium);
}
.home-locations__intro-phone:hover {
  color: var(--aapa-coral);
  text-decoration: underline;
}
.home-locations__tagline {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h5);
  font-weight: var(--aapa-fw-semibold);
  color: var(--aapa-teal-dark);
  margin: 0 0 var(--aapa-space-9);
}
.home-locations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aapa-space-6);
  text-align: center;
}

/* Card-specific tunes layered over .card.loc-card primitives. */
.home-locations__card .addr {
  margin-top: var(--aapa-space-5);
}
.home-locations__card-suite {
  display: inline-block;
  font-style: italic;
  font-size: var(--aapa-fs-body-sm);
  color: var(--aapa-ink-soft);
}
.home-locations__card-details {
  display: inline-block;
  margin-top: var(--aapa-space-6);
}

/* ===== Phase C — address-block tweaks ===== */
/* Building / complex name: semibold on the single-location address block
   to distinguish it from the street address below. Address-line-2 (suite):
   italics dropped from both single-location and the homepage card per
   Cary's call — keeps the muted color and smaller size on the homepage
   card, just upright instead of italic. */
.address-block__building {
  font-weight: var(--aapa-fw-semibold);
}
.address-block__suite {
  font-style: normal;
}
.home-locations__card-suite {
  font-style: normal;
}

/* ---------------------------------------------------------------------------
 * Page header — compact variant (Phase D.1)
 *
 * For editor-owned content pages (page-aboutus, page-patientinfo,
 * page-privacy) where the page-header contains only H1 + ornament, with
 * no .intro-slot following. Tightens the bottom rhythm so the ornament
 * doesn't trail into a long empty band before the body content.
 * --------------------------------------------------------------------------- */

.page-header--compact {
  padding-bottom: var(--aapa-space-3);
}

.page-header--compact .ornament {
  margin-bottom: var(--aapa-space-3);
}

/* ---------------------------------------------------------------------------
 * Inner page body (Phase D.1)
 *
 * Single-column body section used by editor-owned content pages such as
 * page-aboutus, page-patientinfo, page-privacy. Sits between the page
 * header and the closing schedule CTA. Prose measure matches the article
 * single (--aapa-measure, 920px) for consistency across long-form reading
 * contexts.
 * --------------------------------------------------------------------------- */

.page-body {
  padding: var(--aapa-space-8) 0 var(--aapa-space-11);
}

.page-body__prose {
  max-width: var(--aapa-measure);
  margin-inline: auto;
}


/* ---------------------------------------------------------------------------
 * Schedule CTA — trailing text-link sub-block (Phase D.1)
 *
 * The "Or Contact Us for further information." line that appears below
 * the coral phone button on the inner-page schedule CTA variant
 * (rendered via template-parts/schedule-cta.php). Single-clinician and
 * single-location CTAs use the two-button row pattern and do not render
 * this sub-block.
 * --------------------------------------------------------------------------- */

.schedule-cta__trailing {
  margin-top: var(--aapa-space-4);
  text-align: center;
}

.schedule-cta__trailing a {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Locations listing (Phase D.2)
 *
 * 3-column grid of location cards rendered from the location CPT on the
 * /locations/ page. Each card carries address, contact, map embed, and
 * therapist list (with Acworth suite-grouping inside the card). Cards
 * tint paper-deep against the page paper background.
 *
 * Responsive collapse to 2-column / 1-column lands in Phase E.
 * --------------------------------------------------------------------------- */

.locations-listing {
  padding: 0 0 var(--aapa-space-9);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(7, auto);
  column-gap: var(--aapa-space-7);
  row-gap: var(--aapa-space-4);
}

.location-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 7;
  background: var(--aapa-paper-deep);
  padding: var(--aapa-space-7);
  text-align: center;
}

.location-card__title {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  color: var(--aapa-teal);
  margin: 0;
}

.location-card__label {
  font-weight: 600;
  color: var(--aapa-teal);
  margin: 0 0 var(--aapa-space-2);
}

.location-card__addr {
  font-style: normal;
  line-height: var(--aapa-lh-snug);
  margin: 0;
}

.location-card__building {
  font-weight: 600;
}

.location-card__contact {
  line-height: var(--aapa-lh-snug);
  margin: 0;
}

.location-card__contact a {
  color: var(--aapa-teal);
}

.location-card__main-flag {
  font-style: italic;
  color: var(--aapa-ink-soft);
  margin: 0;
}

.location-card__map {
  margin: 0;
}

.location-card__rule {
  border: 0;
  border-top: 1px solid var(--aapa-rule);
  margin: 0;
}

.location-card__suite-label {
  font-weight: 600;
  color: var(--aapa-teal);
  margin: var(--aapa-space-4) 0 var(--aapa-space-2);
}

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

.location-card__therapist-list li {
  margin-bottom: var(--aapa-space-2);
}

.location-card__therapist-list a {
  color: var(--aapa-teal);
  text-decoration: none;
}

.location-card__therapist-list a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * Mailing Address block (Phase D.2)
 *
 * The "Mailing Address for All Providers" panel that closes the
 * /locations/ page. Paper-deep panel within the container, centered
 * content, composed from the main_office location's ACF fields.
 * --------------------------------------------------------------------------- */

.mailing-address-block {
  margin-bottom: var(--aapa-space-10);
}

.mailing-address-block__inner {
  background: var(--aapa-paper-deep);
  padding: var(--aapa-space-8) var(--aapa-space-7);
  text-align: center;
}

.mailing-address-block__heading {
  font-family: var(--aapa-font-serif);
  font-size: var(--aapa-fs-h4);
  color: var(--aapa-teal);
  margin: 0 0 var(--aapa-space-5);
}

.mailing-address-block__title {
  font-weight: 600;
  margin: 0 0 var(--aapa-space-3);
}

.mailing-address-block__lines {
  font-style: normal;
  line-height: var(--aapa-lh-snug);
  margin: 0 0 var(--aapa-space-4);
}

.mailing-address-block__fax {
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Payment submit button (Phase D.3)
 *
 * The submit input on the NMI payment form embedded in the page-make-
 * payment.php body. Styled to match .btn-coral, but applied to a native
 * input[type="submit"] (since the form is raw HTML posting to the
 * processor, not a styled anchor). Class is added to the <input> in the
 * Custom HTML block.
 * --------------------------------------------------------------------------- */

.payment-submit {
  display: block;
  margin: var(--aapa-space-6) auto var(--aapa-space-9);
  padding: var(--aapa-space-3) var(--aapa-space-7);
  background: var(--aapa-coral);
  color: var(--aapa-teal-dark);
  border: 0;
  font-family: var(--aapa-font-sans);
  font-size: var(--aapa-fs-body);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: var(--aapa-ls-wider);
  text-transform: uppercase;
}

.payment-submit:hover {
  opacity: 0.9;
}