/*
Theme Name: Barbara Lauer
Theme URI: https://barbaralauer.com
Author: Grounded Warmth design system
Author URI: https://barbaralauer.com
Description: A warm, grounded WordPress theme for Barbara Lauer, LCSW — a licensed clinical social worker in Portland, Oregon. Recreates the "Grounded Warmth" visual system (clay, sage, espresso on sand-cream; Cormorant Garamond + Mulish) across Home, About, My Practice, Therapy Dog, Forms, and Contact. All page copy is editable from the WordPress dashboard via the Customizer, and the WPForms plugin is styled to match.
Version: 1.15.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barbara-lauer
*/

/* ============================================================
   Barbara Lauer, LCSW — "Grounded Warmth"
   Tokens: color, type, spacing, radii, shadows, motion.
   (Fonts are enqueued from Google Fonts in functions.php.)
   ============================================================ */

:root {
  /* ---------- Brand palette ---------- */
  --sand:        #F4EDE1;  /* warm cream ground */
  --paper:       #FBF7EF;  /* lifted surface / cards */
  --surface-2:   #EFE6D7;  /* sunk panels, alt sections */
  --ink:         #2C2823;  /* deep warm espresso — primary text */
  --ink-2:       #6E6456;  /* muted taupe — secondary text */
  --ink-3:       #9A8F7D;  /* light taupe — captions, meta */

  --clay:        #B0664A;  /* terracotta — primary action */
  --clay-deep:   #8F4F38;  /* hover / pressed clay */
  --clay-soft:   #E8D2C5;  /* clay tint — washes, chips */

  --sage:        #7E8C6E;  /* sage green — secondary */
  --sage-deep:   #5F6B52;  /* hover / pressed sage */
  --sage-soft:   #DCE2D2;  /* sage tint — washes, chips */

  --gold:        #C7A765;  /* warm gold — fine accents, rules */

  --line:        #E2D7C5;  /* hairline borders on sand */
  --line-strong: #D2C4AD;  /* stronger dividers */

  /* ---------- Semantic color roles ---------- */
  --bg:            var(--sand);
  --surface:       var(--paper);
  --surface-sunk:  var(--surface-2);
  --fg1:           var(--ink);
  --fg2:           var(--ink-2);
  --fg3:           var(--ink-3);
  --primary:       var(--clay);
  --primary-hover: var(--clay-deep);
  --secondary:       var(--sage);
  --secondary-hover: var(--sage-deep);
  --accent:        var(--gold);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --focus-ring:    #B0664A66;

  /* ---------- Type families ---------- */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Type scale (fluid) ---------- */
  --fs-display: clamp(3rem, 6.5vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 4vw, 3rem);
  --fs-h2:      clamp(1.75rem, 2.6vw, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-body-lg: 1.25rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.08;
  --lh-snug:   1.3;
  --lh-body:   1.72;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* ---------- Radii ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* ---------- Shadows (warm-tinted, soft) ---------- */
  --shadow-sm: 0 1px 2px rgba(58, 44, 30, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(58, 44, 30, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(58, 44, 30, 0.22);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  240ms;
}

/* ============================================================
   Base / reset
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }
a { color: var(--clay-deep); }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 28px; }
#content:focus { outline: none; }

/* Accessibility: visually-hidden text + skip link that appears on focus. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link.screen-reader-text:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  width: auto; height: auto; clip: auto; margin: 0; white-space: normal;
  background: var(--clay); color: #FBF7EF; font-weight: 600; font-size: 14px;
  padding: 12px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.kicker {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay);
  margin-bottom: 18px;
}
.display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.01em; color: var(--fg1); margin: 0; text-wrap: balance; }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.12; color: var(--fg1); margin: 0; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.18; color: var(--fg1); margin: 0; }
.h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); color: var(--fg1); margin: 0; }
.lead { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--fg2); margin: 0; text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: 1.72; color: var(--fg2); margin: 0; text-wrap: pretty; }
.quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem,3vw,2.25rem); line-height: 1.35; color: var(--fg1); text-wrap: pretty; }
.measure { max-width: 64ch; }

/* ============================================================
   Sections
   ============================================================ */
.section { padding: clamp(56px, 9vw, 112px) 0; }
.section-sand   { background: var(--sand); }
.section-paper  { background: var(--paper); }
.section-sunk   { background: var(--surface-2); }
.section-sage   { background: var(--sage); }
.section-sage .h1, .section-sage .h2, .section-sage .display { color: #FBF7EF; }
.section-sage .body, .section-sage .lead { color: #EEF1E7; }
.section-sage .kicker { color: #E8D2C5; }
.section-clay   { background: var(--clay); }
.section-clay .h1, .section-clay .h2, .section-clay .display { color: #FBF7EF; }
.section-clay .body, .section-clay .lead { color: #F4E4DA; }
.section-clay .kicker { color: #F1D9B6; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  border-radius: var(--r-pill); padding: 13px 26px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--clay); color: #FBF7EF; }
.btn-primary:hover { background: var(--clay-deep); color: #FBF7EF; }
.btn-secondary { background: transparent; color: var(--clay-deep); border-color: var(--clay); }
.btn-secondary:hover { background: var(--clay-soft); }
.btn-ghost { background: transparent; color: var(--fg2); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--fg1); }
.btn-light { background: #FBF7EF; color: var(--clay-deep); }
.btn-light:hover { background: #fff; color: var(--clay-deep); }

/* ============================================================
   Chips
   ============================================================ */
.chip { display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; padding: 10px 20px; border-radius: var(--r-pill); }
.chip-sage { background: var(--sage-soft); color: var(--sage-deep); }
.chip-clay { background: var(--clay-soft); color: var(--clay-deep); }
.chip-outline { background: transparent; border: 1px solid var(--sage-deep); color: var(--sage-deep); }
.chip-insurance { background: var(--paper); border: 1px solid var(--line-strong); color: var(--fg2); font-weight: 500; font-size: 14px; padding: 9px 16px; }

/* ============================================================
   Arch image motif
   ============================================================ */
.arch-fig { margin: 0; width: 100%; }
.arch-frame {
  width: 100%; overflow: hidden; position: relative;
  border-top-left-radius: 999px; border-top-right-radius: 999px;
  border-bottom-left-radius: 28px; border-bottom-right-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.arch-frame img { width: 100%; height: 100%; object-fit: cover; }
.arch-clay { background: var(--clay-soft); outline: 8px solid #FBF7EF; }
.arch-sage { background: var(--sage-soft); outline: 8px solid #FBF7EF; }
.arch-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--clay-deep); background:
    radial-gradient(120% 80% at 50% 0%, #E8D2C5 0%, transparent 60%),
    linear-gradient(180deg, var(--clay-soft), var(--sand));
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}

/* ============================================================
   Navigation (floating pill)
   ============================================================ */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 24px; transition: padding var(--dur) var(--ease); }
.nav-wrap.is-scrolled { padding: 10px 24px; }
.admin-bar .nav-wrap { top: 32px; }
.nav {
  max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  background: rgba(251,247,239,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 11px 14px 11px 20px; box-shadow: var(--shadow-sm);
}
.nav-brand { display: flex; align-items: center; gap: 11px; background: none; border: 0; cursor: pointer; padding: 0; text-decoration: none; }
.nav-brand img { width: 28px; height: 28px; }
.nav-wm { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-menu a, .nav-link { background: none; border: 0; cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--fg2); padding: 9px 14px; border-radius: var(--r-pill); white-space: nowrap; text-decoration: none; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); display: inline-block; }
.nav-menu a:hover, .nav-link:hover { color: var(--fg1); background: var(--surface-2); }
.nav-link.active, .nav-menu .current-menu-item > a, .nav-menu .current_page_item > a { color: var(--clay-deep); }
.nav-cta { margin-left: 6px; padding: 10px 20px; font-size: 14px; color: #FBF7EF; }
.nav-cta:hover { color: #FBF7EF; background: var(--clay-deep); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 6px; }
.nav-mobile { max-width: 1120px; margin: 8px auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; display: none; flex-direction: column; box-shadow: var(--shadow-md); list-style: none; }
.nav-mobile.is-open { display: flex; }
.nav-mlink, .nav-mobile a { background: none; border: 0; text-align: left; cursor: pointer; font-size: 16px; color: var(--fg1); padding: 13px 16px; border-radius: var(--r-sm); text-decoration: none; display: block; }
.nav-mlink.active, .nav-mobile .current-menu-item > a, .nav-mobile .current_page_item > a { color: var(--clay-deep); background: var(--clay-soft); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink); color: #E7DECE; padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 48px; }
.footer-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-lockup img { width: 40px; height: 40px; }
.footer-name { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: #FBF7EF; }
.footer-cred { font-size: 13px; color: #B9AE99; letter-spacing: 0.02em; }
.footer-tag { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.45; color: #CFC4AE; max-width: 38ch; margin: 0; }
.footer-col h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #9A8F7D; margin: 0 0 16px; font-weight: 700; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col button, .footer-col a, .footer-addr { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; color: #D9D0BF; font-size: 15px; text-decoration: none; padding: 0 0 12px; text-align: left; line-height: 1.5; }
.footer-col button:hover, .footer-col a:hover { color: var(--gold); }
.footer-addr { cursor: default; align-items: flex-start; }
.footer-base { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 22px; border-top: 1px solid #463f36; font-size: 13px; color: #9A8F7D; }

/* ============================================================
   Layout utilities
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.stack-sm > * + * { margin-top: 14px; }
.stack-md > * + * { margin-top: 24px; }
.stack-lg > * + * { margin-top: 40px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* feature card */
.fcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fcard .medallion { width: 46px; height: 46px; border-radius: 999px; background: var(--clay-soft); color: var(--clay-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.fcard h3 { margin: 0 0 8px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* list with markers */
.bl-list { list-style: none; padding: 0; margin: 0; }
.bl-list li { position: relative; padding-left: 30px; margin-bottom: 14px; font-size: var(--fs-body); line-height: 1.6; color: var(--fg2); }
.bl-list li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 999px; background: var(--clay); }

.rule { height: 1px; background: var(--line-strong); border: 0; margin: 0; }
.fade-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   Page-specific styles
   ============================================================ */
.page-top { padding-top: 96px; }

/* Full-bleed image sections */
.poem-section {
  padding: clamp(72px, 12vw, 140px) 0;
  background-size: cover; background-position: center;
  background-attachment: fixed;
}
.poem-light .poem-open { color: #FBF7EF; }
.poem-light .kicker { color: #F1D9B6; }
.poem-light .poem-lines span { color: #E7DCCB; }
.poem-light .poem-lines span:nth-child(odd) { color: #F1D9B6; }
.poem-light .poem-lines span:last-child { color: #FBF7EF; font-weight: 500; }

.nature-band {
  min-height: 460px; display: flex; align-items: flex-end;
  padding: clamp(40px, 7vw, 80px) 0;
  background-size: cover; background-position: center 38%;
  background-attachment: fixed;
}
.nature-band-inner .quote { line-height: 1.2; }

.forms-hero {
  padding: clamp(120px, 16vw, 180px) 0 clamp(64px, 9vw, 96px);
  background-size: cover; background-position: center;
}
.forms-hero-inner { position: relative; }

/* background-attachment: fixed sizes the background to the viewport, not the
   element — combined with `cover` this over-zooms the crop on tablets/touch
   devices (the band is only ~460px tall but the image is scaled to fill the
   whole viewport). Fall back to `scroll` on any tablet-width OR touch device so
   the images stay proportioned; real desktop (wide + fine pointer) keeps the
   subtle parallax. The old rule only caught phones + iPad portrait (≤860px),
   leaving iPad landscape (~1024px) broken. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .poem-section, .nature-band { background-attachment: scroll; }
}

/* Hero */
.hero-section { position: relative; }
.hero { align-items: center; }
.hero .display { font-size: clamp(2.4rem, 4.2vw, 3.5rem); }
.hero-img { display: flex; justify-content: center; }

/* Scroll cue — a soft down-chevron that gently bobs at the foot of the hero,
   inviting visitors further down. Calm, low-contrast clay; fades out (via the
   .is-hidden class set in JS) the moment the page is scrolled. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2.4vw, 26px);
  transform: translateX(-50%);
  color: var(--clay);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
  animation: bl-cue-bob 2.8s ease-in-out infinite;
}
.scroll-cue svg { display: block; width: 39px; height: 39px; }
.scroll-cue.is-hidden { opacity: 0; }

@keyframes bl-cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* Respect reduced-motion: hold the chevron still (no bob), keep it as a static
   cue. The opacity fade-on-scroll is a gentle, non-essential transition. */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* Prose poem */
.poem { max-width: 760px; margin: 0 auto; text-align: center; }
.poem-open { margin: 0 auto 36px; max-width: 640px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.poem-lines { display: flex; flex-direction: column; gap: 14px; }
.poem-lines span {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.4; color: var(--fg2);
}
.poem-lines span:nth-child(odd) { color: var(--clay-deep); }
.poem-lines span:last-child { color: var(--fg1); font-weight: 500; margin-top: 6px; }

/* Invitation band */
.invite { max-width: 820px; margin: 0 auto; text-align: center; }
.invite-mark { width: 56px; height: 56px; margin: 0 auto 26px; filter: brightness(0) invert(1) opacity(0.9); }
.invite .quote { margin: 0 0 30px; }

/* About */
.study-card { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.edu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.edu-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; box-shadow: var(--shadow-sm); }
.edu-deg { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--clay); line-height: 1; margin-bottom: 12px; }
.edu-school { font-weight: 700; font-size: 16px; color: var(--fg1); line-height: 1.35; }
.edu-meta { font-size: 13.5px; color: var(--fg3); margin-top: 6px; }

/* Practice: modalities */
.mod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mod-card { display: flex; align-items: center; gap: 14px; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mod-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mod-ic { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--sage-soft); color: var(--sage-deep); display: flex; align-items: center; justify-content: center; }
.mod-name { font-weight: 600; font-size: 15px; color: var(--fg1); line-height: 1.25; }

/* Practice: info blocks */
.practice-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.info-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.info-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.info-head h3 { flex: 1; }
.info-ic { width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--clay-soft); color: var(--clay-deep); display: flex; align-items: center; justify-content: center; }
.fee-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm); }

/* Cedar stats */
.cedar-stats { display: flex; gap: 14px; margin-top: 10px; }
.stat { flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); }
.stat-num { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--clay); line-height: 1; }
.stat-num span { font-size: 15px; margin-left: 2px; }
.stat-ic { display: flex; justify-content: center; color: var(--clay-deep); }
.stat-ic svg { width: 26px; height: 26px; }
.stat-lbl { font-size: 14px; color: var(--fg2); margin-top: 10px; letter-spacing: 0.01em; }

/* Forms */
.forms-list { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; align-items: center; gap: 20px; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 24px; transition: box-shadow var(--dur) var(--ease); }
.form-row:hover { box-shadow: var(--shadow-md); }
.form-row.is-primary { background: var(--clay-soft); border-color: transparent; }
.form-ic { width: 48px; height: 48px; flex: none; border-radius: 999px; background: var(--paper); color: var(--clay-deep); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.form-text { flex: 1; }
.form-text .body { font-size: 14.5px; margin-top: 2px; }
.disclaimer { margin-top: 28px; font-size: 13.5px; color: var(--fg3); display: flex; align-items: center; }

/* Contact */
/* Dedicated two-column grid for the contact page. Uses its own class (not the
   shared .grid-2) and high specificity so leftover global CSS from other
   plugins/themes (Elementor, OceanWP, etc.) cannot disturb the side-by-side
   layout or cause the info column and form card to overlap. */
.section .contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: start;
	position: static;
}
.section .contact-grid > * { min-width: 0; position: static; float: none; }
@media (max-width: 860px) {
	.section .contact-grid { grid-template-columns: 1fr; }
}
.contact-info { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ci-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ci-row:last-child { border-bottom: 0; }
.ci-ic { width: 42px; height: 42px; flex: none; border-radius: 999px; background: var(--clay-soft); color: var(--clay-deep); display: flex; align-items: center; justify-content: center; }
.ci-lbl { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); font-weight: 600; }
.ci-val { font-size: 16px; color: var(--fg1); margin-top: 3px; line-height: 1.4; }

.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow-md); }
.form-note { font-size: 13.5px; line-height: 1.55; color: var(--fg3); margin: -4px 0 0; }
.form-note + .form-note { margin-top: 2px; }
.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); height: 380px; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Visual placeholder form (.ifrm) — shown until the WPForms shortcode is set;
   mirrors the WPForms styling so the page looks complete either way. */
.ifrm { display: flex; flex-direction: column; gap: 16px; }
.ifrm label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--fg2); letter-spacing: 0.02em; min-width: 0; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frow > * { min-width: 0; }
.ifrm input, .ifrm textarea, .ifrm select {
  width: 100%; box-sizing: border-box; max-width: 100%;
  font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--fg1);
  background: var(--sand); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 12px 14px; outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Long option labels must not stretch the closed select past its cell. */
.ifrm select { text-overflow: ellipsis; }
.ifrm input:focus, .ifrm textarea:focus, .ifrm select:focus { border-color: var(--clay); box-shadow: 0 0 0 3px var(--focus-ring); }
.ifrm .chk { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; font-size: 13.5px; color: var(--fg2); }
.ifrm .chk input { width: 18px; height: 18px; accent-color: var(--clay); padding: 0; }
.ifrm .btn { align-self: flex-start; margin-top: 6px; }

/* Native interest-form: validation + status states */
.bl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-alert { background: var(--clay-soft); color: var(--clay-deep); border: 1px solid var(--clay); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.form-alert a { color: var(--clay-deep); font-weight: 600; }
.ifrm .field-err { color: var(--clay-deep); font-size: 12.5px; font-weight: 600; }
.ifrm .chk.chk-err { color: var(--clay-deep); }
.ifrm input[aria-invalid="true"], .ifrm textarea[aria-invalid="true"], .ifrm select[aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ============================================================
   Lucide icons
   ============================================================ */
.lucide, [data-lucide] { width: 20px; height: 20px; stroke-width: 1.75; vertical-align: -0.15em; }
.kicker .lucide { width: 14px; height: 14px; }
.btn .lucide { width: 17px; height: 17px; }
.footer-col .lucide { width: 15px; height: 15px; }
.medallion .lucide { width: 22px; height: 22px; }
.mod-ic .lucide, .info-ic .lucide { width: 20px; height: 20px; }
.form-ic .lucide { width: 22px; height: 22px; }
.ci-ic .lucide { width: 18px; height: 18px; }

/* ============================================================
   Editor content (the_content) inside prose blocks
   ============================================================ */
.bl-prose > * + * { margin-top: 1.1em; }
.bl-prose p { font-size: var(--fs-body); line-height: 1.72; color: var(--fg2); margin: 0; }
.bl-prose h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); color: var(--fg1); }
.bl-prose h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); color: var(--fg1); }
.bl-prose a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   WPForms — styled to match "Grounded Warmth"
   Scoped under .wpforms-container so site CSS doesn't leak.
   ============================================================ */
.wpforms-container { margin: 0; }
.wpforms-container .wpforms-form { display: flex; flex-direction: column; gap: 16px; }
.wpforms-container .wpforms-field { padding: 0; margin: 0; }

/* Labels */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-label-inline {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--fg2); letter-spacing: 0.02em; margin: 0 0 7px; line-height: 1.4;
}
.wpforms-container .wpforms-required-label { color: var(--clay); }

/* Sublabels / descriptions */
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
  font-family: var(--font-sans); font-size: 13px; color: var(--fg3); line-height: 1.55; margin-top: 6px;
}

/* Inputs, textareas, selects */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container input[type=number],
.wpforms-container input[type=password],
.wpforms-container input[type=date],
.wpforms-container textarea,
.wpforms-container select {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--fg1);
  background: var(--sand); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 12px 14px; outline: none; box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wpforms-container textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: var(--ink-3); }
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  border-color: var(--clay); box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Multi-column rows */
.wpforms-container .wpforms-field-row { gap: 16px; }

/* Checkboxes & radios */
.wpforms-container .wpforms-field-checkbox input[type=checkbox],
.wpforms-container .wpforms-field-radio input[type=radio],
.wpforms-container .wpforms-field-gdpr-checkbox input[type=checkbox] {
  accent-color: var(--clay); width: 18px; height: 18px; margin-right: 10px;
}
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-radio label,
.wpforms-container .wpforms-field-gdpr-checkbox label {
  font-weight: 400; font-size: 14px; color: var(--fg2);
}

/* Submit button */
.wpforms-container .wpforms-submit-container { margin-top: 4px; }
.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  background: var(--clay); color: #FBF7EF; border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 13px 28px; cursor: pointer; line-height: 1;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: none; text-transform: none; width: auto;
}
.wpforms-container button[type=submit]:hover,
.wpforms-container .wpforms-submit:hover { background: var(--clay-deep); color: #FBF7EF; }
.wpforms-container button[type=submit]:active,
.wpforms-container .wpforms-submit:active { transform: scale(0.98); }

/* Validation errors */
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error { color: var(--clay-deep); font-size: 13px; }
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error { border-color: var(--clay); }

/* Confirmation message — mirrors the kit's "form-sent" panel */
.wpforms-confirmation-container-full,
div[submit-success] .wpforms-confirmation-container-full {
  background: var(--sage-soft); border: 1px solid var(--sage); color: var(--sage-deep);
  border-radius: var(--r-lg); padding: 26px 28px; margin: 0;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
}
.wpforms-confirmation-container-full p { margin: 0; color: var(--sage-deep); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .grid-2 { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-base { flex-direction: column; gap: 8px; }
  .edu-grid, .practice-cols, .frow { grid-template-columns: 1fr; }
  .mod-grid { grid-template-columns: 1fr 1fr; }
  .cedar-stats { flex-wrap: wrap; }
  .form-row { flex-wrap: wrap; }
}