/* Looking Within Psychotherapy — shared component library
   Nav, footer, buttons, card hover, and the recurring "approach band" /
   boxed callout / dark closing CTA patterns documented in
   docs/claude-code-handoff.md. Keep these exact everywhere they're used;
   page-specific numbers (unique widths, section layouts, blob color
   pairings) live in each page's own <style> block, not here. */

/* ============ Nav ============
   .nav-inner uses a fixed max-width + fixed px padding, NOT vw-relative
   padding directly on <nav> — vw-based nav padding rendered inconsistently
   across pages with different content widths. Don't reintroduce it. */
nav.site-nav { padding: 0; }
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 48px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-lockup .mark { width: 34px; height: 34px; }
.logo-lockup .word {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--plum-deep);
}
.nav-links { display: flex; gap: 34px; font-size: 14px; letter-spacing: 0.3px; }
.nav-links a { color: var(--ink); text-decoration: none; }
.nav-links a:hover { color: var(--plum); }
.nav-links a.current {
  color: var(--plum);
  border-bottom: 1px solid var(--plum);
  padding-bottom: 4px;
}
.nav-cta {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  background: var(--plum);
  color: var(--white);
  padding: 11px 26px;
  border-radius: 30px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cta:hover { background: var(--plum-deep); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ============ Buttons ============ */
.btn {
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 16px 34px;
  border-radius: 30px;
  display: inline-block;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn-primary { background: var(--plum); color: var(--white); }
.btn-primary:hover { background: var(--plum-deep); }
.btn-secondary { background: transparent; color: var(--plum); border: 1px solid var(--plum); }

/* ============ Card hover ============
   translateY(-4px), no added shadow. Pillar cards (Home), featured cards
   (Who I Help), blog post cards. Keep this exact, minimal treatment
   everywhere a card exists. */
.pillar-card, .featured-card, .post-card {
  transition: transform .2s ease;
}
.pillar-card:hover, .featured-card:hover, .post-card:hover {
  transform: translateY(-4px);
}

/* ============ Approach band ============
   The site's one recurring "elevated" full-bleed moment: About Me's
   "How I Work", ED Recovery's "My Approach", Mothers' "Meeting You Where
   You Are". Geometry is shared; each page sets its own background
   gradient + blob colors — that per-page accent pairing is intentional,
   not drift, so it stays in each page's own CSS. */
.approach {
  position: relative;
  overflow: hidden;
  margin: 0 -6vw;
  padding: 90px 6vw;
}
.approach-blob {
  position: absolute;
  top: -22%;
  right: -8%;
  width: 580px;
  height: 580px;
  border-radius: 55% 45% 60% 40% / 45% 58% 42% 55%;
  z-index: 0;
}
.approach-blob-2 {
  position: absolute;
  bottom: -18%;
  left: 4%;
  width: 260px;
  height: 260px;
  border-radius: 50% 50% 42% 58% / 55% 45% 55% 45%;
  z-index: 0;
}
.approach-inner { position: relative; z-index: 1; margin: 0 auto; }

/* Small italic section label used inside the approach band, the boxed
   callout, and a few other section intros. */
.section-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--olive);
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 16px;
  display: block;
}

/* ============ Boxed callout ============
   About Me's "Outside the Therapy Room", ED Recovery's "Why This Work",
   Mothers' "As a Mother, Too". */
.personal {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 44px 50px;
  margin: 90px 0;
}
.personal p { max-width: 640px; font-size: 16.5px; }
.personal p:not(:last-child) { margin-bottom: 18px; }

/* ============ Dark closing CTA ============
   plum-deep background, one bleeding blob accent, one "Book a Consult"
   button. Present on every content page. Blog posts use a softer peach
   box instead (see .post-cta in the blog post page CSS) — a hard sales
   close felt tonally wrong right after a reflective essay. */
.closing {
  background: var(--plum-deep);
  color: var(--cream);
  text-align: center;
  padding: 100px 6vw;
  position: relative;
  overflow: hidden;
}
.closing-blob {
  position: absolute;
  bottom: -100px;
  width: 320px;
  height: 320px;
  background: var(--plum);
  opacity: .5;
  border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
}
.closing-blob.left { left: -90px; }
.closing-blob.right { right: -90px; }
.closing-inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.closing h2 { color: var(--peach-light); font-size: 32px; margin-bottom: 22px; }
.closing p { margin-bottom: 32px; color: #E9DCD3; }

/* ============ Footer (unified) ============
   Previously inconsistent across pages — see docs/claude-code-handoff.md.
   This is now the one footer, used identically everywhere. Link colors
   are self-contained (ink-muted, explicit underline) so it looks right
   regardless of a page's own base `a` styling. */
footer {
  text-align: center;
  padding: 50px 6vw 40px;
  font-size: 13px;
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
}
footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
footer .footer-links a { color: var(--ink-muted); text-decoration: underline; }
footer .footer-links a:hover { color: var(--plum); }