/* Therapist starter — site-wide chrome stylesheet (header / footer / brand). */
/* Auto-loaded on every front-end page when the Therapist starter is installed. */
/* All rules scoped under body.starter-therapist so they only apply to Therapist sites. */

/* --- Web fonts (loaded once for the whole site, including chrome) ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=Geist:wght@300;400;500;600;700&display=swap');

/* --- Page shell: let starter-built pages span full viewport ---------- */
/* The parent theme constrains .entry-content to var(--bp-max-width) (1200px)
   with 24-40px gutters (set up by class-setup-wizard.php). For pages built
   from .t-root sections that handle their own internal max-width via .t-wrap,
   we drop the parent constraint so dark CTAs and alt-cream bands bleed
   edge-to-edge — matching the design. The :has() guard means a vanilla
   Gutenberg page on the same site keeps its readable column. */
body.starter-therapist .entry-content:has(> .t-root) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* The auto-rendered "Home" page title duplicates the hero. Hide on every
   page that uses the .t-root system. (Inner pages also use .t-root, so this
   covers Services/About/FAQ/Contact too.) */
body.starter-therapist article:has(.entry-content > .t-root) > .entry-header,
body.starter-therapist article:has(.entry-content > .t-root) > .post-thumbnail {
  display: none;
}
/* Belt-and-suspenders: site.main and article should not contribute their
   own gutters either. */
body.starter-therapist .site-main,
body.starter-therapist .site-main > article {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* :has() fallback for browsers without selector(:has(*)) support
   (Firefox <121, Safari <15.4, Chrome <105). Drops the entry-content
   constraint unconditionally on Therapist sites — vanilla pages with no
   .t-root lose their readable column on those legacy browsers, but every
   starter-built page renders correctly. We accept the trade-off because
   the `:has()`-aware path is more precise and 96%+ of users get it. */
@supports not selector(:has(*)) {
  body.starter-therapist .entry-content {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  body.starter-therapist .entry-header,
  body.starter-therapist .post-thumbnail {
    display: none;
  }
}

/* Server-side <noscript> crisis-line fallback (rendered by
   BoltPress_Blog_Templates::output_noscript_crisis). Hidden for JS-enabled
   visitors so we don't show it twice — site.js injects the styled version
   into .site-info; the <noscript> path only renders when JS is off. */
body.starter-therapist noscript .bp-noscript-crisis {
  background: var(--t-ink, #1F1B17);
  color: rgba(245, 241, 236, 0.85);
  text-align: center;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .85rem;
  border-top: 1px solid rgba(221, 213, 203, 0.18);
}
body.starter-therapist noscript .bp-noscript-crisis strong {
  color: #fff;
  font-weight: 600;
}

/* --- Tokens + body base ---------------------------------------------- */
body.starter-therapist {
  --t-cream: #F5F1EC;
  --t-cream-alt: #EAE5DE;
  --t-ink: #1F1B17;
  --t-ink-soft: rgba(31, 27, 23, 0.72);
  --t-terra: #B0543A;
  --t-terra-dark: #8A3E27;
  --t-muted: #4A4540;
  --t-subtle: #7A736C;
  --t-border: #DDD5CB;
  --t-ease: cubic-bezier(.2, .7, .2, 1);

  background: var(--t-cream);
  color: var(--t-ink);
  font-family: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Header: cream sticky with backdrop blur -------------------------- */
body.starter-therapist .site-header-wrapper { position: sticky; top: 0; z-index: 50; }

body.starter-therapist .site-header {
  background: rgba(245, 241, 236, 0.86);
  backdrop-filter: saturate(1.15) blur(14px);
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: border-color .35s var(--t-ease), background-color .35s var(--t-ease);
}
body.starter-therapist .site-header.is-sticky {
  background: rgba(245, 241, 236, 0.94) !important;
  border-bottom-color: var(--t-border) !important;
}

body.starter-therapist .site-header .container {
  max-width: 1280px;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* --- Brand: terracotta donut mark + Newsreader wordmark -------------- */
body.starter-therapist .site-branding {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
/* Donut: a single 28px circle, terracotta ring + cream hole via radial gradient.
   Avoids the absolute-positioning gymnastics of a two-element design. */
body.starter-therapist .site-branding::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--t-cream) 0 7px, var(--t-terra) 8px 100%);
  flex-shrink: 0;
}

body.starter-therapist .site-title,
body.starter-therapist .site-title a {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.012em;
  line-height: 1;
  margin: 0;
  color: var(--t-ink);
  text-decoration: none;
  font-optical-sizing: auto;
}
body.starter-therapist .site-title a:hover { color: var(--t-ink); }
body.starter-therapist .site-title .brand-i {
  font-style: italic;
  color: var(--t-terra);
  font-weight: 500;
}

/* Hide tagline ("Psychotherapy") in the header — design uses just the wordmark. */
body.starter-therapist .site-header .site-description { display: none; }

/* If user uploaded a custom logo, sit it next to the brand mark with no extra
   donut (the logo replaces the wordmark). */
body.starter-therapist .site-branding:has(.custom-logo)::before,
body.starter-therapist .site-branding:has(.custom-logo)::after { display: none; }
body.starter-therapist .custom-logo { max-height: 36px; width: auto; }

/* --- Nav: editorial inline links ------------------------------------- */
body.starter-therapist .main-navigation { display: block; }
body.starter-therapist .main-navigation ul,
body.starter-therapist .main-navigation #primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
body.starter-therapist .main-navigation li { margin: 0; }
body.starter-therapist .main-navigation a {
  position: relative;
  color: var(--t-ink);
  text-decoration: none;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: .25rem 0;
  background: transparent;
  transition: color .3s var(--t-ease);
}
body.starter-therapist .main-navigation a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--t-terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--t-ease);
}
body.starter-therapist .main-navigation a:hover { color: var(--t-terra); }
body.starter-therapist .main-navigation a:hover::after { transform: scaleX(1); }
body.starter-therapist .main-navigation .current-menu-item > a { color: var(--t-terra); }
body.starter-therapist .main-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* --- Header CTA button: pulsing dot + arrow, no pill -------------------- */
body.starter-therapist .header-buttons { display: inline-flex; align-items: center; }
body.starter-therapist .header-buttons.before-menu { margin-right: 0; }
body.starter-therapist .header-button.primary,
body.starter-therapist .header-button.secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem 0 .45rem;
  background: transparent !important;
  color: var(--t-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'Geist', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: none !important;
  transition: color .35s var(--t-ease);
}
body.starter-therapist .header-button.primary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-terra);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(176, 84, 58, 0.45);
  animation: t-pulse 2.4s var(--t-ease) infinite;
}
@keyframes t-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 84, 58, 0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(176, 84, 58, 0); }
}
body.starter-therapist .header-button.primary::after {
  content: '\2192';
  color: var(--t-terra);
  font-style: normal;
  margin-left: .15rem;
  display: inline-block;
  transition: transform .4s var(--t-ease);
}
body.starter-therapist .header-button.primary:hover::after { transform: translateX(4px); }

body.starter-therapist .header-button.primary:hover,
body.starter-therapist .header-button.secondary:hover {
  color: var(--t-ink) !important;
  background: transparent !important;
}

/* --- Mobile menu toggle: hidden until needed ------------------------- */
body.starter-therapist .menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  color: var(--t-ink);
}
body.starter-therapist .menu-toggle .menu-toggle-icon,
body.starter-therapist .menu-toggle .menu-toggle-icon::before,
body.starter-therapist .menu-toggle .menu-toggle-icon::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  border-radius: 1px;
}
body.starter-therapist .menu-toggle .menu-toggle-icon::before { content: ''; position: absolute; top: -7px; left: 0; right: 0; }
body.starter-therapist .menu-toggle .menu-toggle-icon::after  { content: ''; position: absolute; top: 7px;  left: 0; right: 0; }

@media (max-width: 820px) {
  body.starter-therapist .main-navigation #primary-menu {
    flex-direction: column;
    align-items: flex-end;
    gap: 1.25rem;
  }
  body.starter-therapist .main-navigation:not(.toggled) { display: none; }
  body.starter-therapist .menu-toggle { display: inline-flex; }
}

/* --- Preheader (if user enables it) ---------------------------------- */
body.starter-therapist .site-preheader {
  background: var(--t-ink) !important;
  color: rgba(245, 241, 236, 0.85) !important;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: 0.01em;
}
body.starter-therapist .site-preheader a {
  color: var(--t-cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Footer: dark with terracotta radial wash ------------------------ */
body.starter-therapist .site-footer {
  background: var(--t-ink) !important;
  color: rgba(221, 213, 203, 0.8);
  padding: clamp(4rem, 8vw, 6rem) 0 0;
  position: relative;
  overflow: hidden;
}
body.starter-therapist .site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(176, 84, 58, 0.18), transparent 55%),
    radial-gradient(circle at 82% 90%, rgba(176, 84, 58, 0.10), transparent 60%);
  pointer-events: none;
}
body.starter-therapist .site-footer > * { position: relative; }

body.starter-therapist .footer-widgets {
  background: transparent !important;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
  max-width: 1280px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 980px) {
  body.starter-therapist .footer-widgets { grid-template-columns: 1.4fr 1fr 1fr; }
  body.starter-therapist .footer-widgets .footer-widget-area:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body.starter-therapist .footer-widgets { grid-template-columns: 1fr 1fr; }
  body.starter-therapist .footer-widgets .footer-widget-area:first-child { grid-column: 1 / -1; }
}
body.starter-therapist .footer-widgets-vertical { grid-template-columns: 1fr !important; }

body.starter-therapist .footer-widget-area {
  background: transparent;
  color: rgba(221, 213, 203, 0.8);
}

body.starter-therapist .footer-widget-area .widget-title,
body.starter-therapist .footer-widget-area h2.widget-title,
body.starter-therapist .footer-widget-area h3.widget-title,
body.starter-therapist .footer-widget-area h2,
body.starter-therapist .footer-widget-area h3,
body.starter-therapist .footer-widget-area h4 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(221, 213, 203, 0.55);
  font-weight: 600;
  margin: 0 0 1.25rem;
}

body.starter-therapist .footer-widget-area ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .65rem;
}
body.starter-therapist .footer-widget-area li { margin: 0; padding: 0; border: 0; }
body.starter-therapist .footer-widget-area a {
  color: rgba(245, 241, 236, 0.85);
  text-decoration: none;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .95rem;
  transition: color .3s var(--t-ease);
}
body.starter-therapist .footer-widget-area a:hover { color: var(--t-terra); }
body.starter-therapist .footer-widget-area p {
  color: rgba(245, 241, 236, 0.85);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 .65rem;
}

/* First column = brand: large wordmark + italic Newsreader tagline */
body.starter-therapist .footer-widget-area:first-child .widget-title,
body.starter-therapist .footer-widget-area:first-child > h2,
body.starter-therapist .footer-widget-area:first-child > h3 {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
  color: var(--t-cream) !important;
  margin: 0 0 1rem !important;
}
body.starter-therapist .footer-widget-area:first-child p,
body.starter-therapist .footer-widget-area:first-child .textwidget {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(221, 213, 203, 0.75);
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 32ch;
  font-optical-sizing: auto;
}

/* Footer nav (between widgets and copyright on default footer) ------- */
body.starter-therapist .footer-navigation {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
}
body.starter-therapist .footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
body.starter-therapist .footer-navigation a {
  color: rgba(245, 241, 236, 0.85);
  text-decoration: none;
  font-size: .9rem;
  transition: color .3s var(--t-ease);
}
body.starter-therapist .footer-navigation a:hover { color: var(--t-terra); }

/* Copyright row (turned into the design's footer-bottom strip) -------- */
body.starter-therapist .site-info {
  position: relative;
  background: transparent !important;
  border-top: 1px solid rgba(221, 213, 203, 0.18);
  margin-top: 1.25rem;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .8rem;
  color: rgba(221, 213, 203, 0.55);
  flex-wrap: wrap;
}
body.starter-therapist .site-info a {
  color: rgba(221, 213, 203, 0.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--t-ease), border-color .3s var(--t-ease);
}
body.starter-therapist .site-info a:hover {
  color: var(--t-cream);
  border-bottom-color: var(--t-terra);
}
body.starter-therapist .site-info .sep { opacity: 0.5; }

/* Crisis disclaimer injected by site.js into .site-info -------------- */
body.starter-therapist .site-info .bp-th-crisis {
  font-family: 'Geist', system-ui, sans-serif;
  font-style: normal;
  font-size: .82rem;
  color: rgba(221, 213, 203, 0.7);
  flex: 1;
  text-align: center;
}
body.starter-therapist .site-info .bp-th-crisis strong {
  color: var(--t-cream);
  font-weight: 600;
}
@media (max-width: 720px) {
  body.starter-therapist .site-info .bp-th-crisis {
    flex: 1 1 100%;
    text-align: left;
    order: 99;
  }
}

/* --- Skip link (accessibility) ---------------------------------------- */
body.starter-therapist .skip-link {
  background: var(--t-ink);
  color: var(--t-cream);
  font-family: 'Geist', system-ui, sans-serif;
}
body.starter-therapist .skip-link:focus {
  outline: 2px solid var(--t-terra);
  outline-offset: 2px;
}

/* --- [bp_recent_posts] shortcode (used on home page + anywhere else) - */
body.starter-therapist .bp-recent-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (max-width: 880px) { body.starter-therapist .bp-recent-posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { body.starter-therapist .bp-recent-posts { grid-template-columns: 1fr; } }
body.starter-therapist .bp-recent-card {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.starter-therapist .bp-recent-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--t-cream);
  border: 1px solid var(--t-border);
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  transition: border-color .4s var(--t-ease), transform .5s var(--t-ease);
}
body.starter-therapist .bp-recent-card a.bp-recent-card-link:hover {
  border-color: rgba(176, 84, 58, 0.35);
  transform: translateY(-2px);
}
body.starter-therapist .bp-recent-card--placeholder .bp-recent-card-link { cursor: default; opacity: 0.85; }
body.starter-therapist .bp-recent-card-cover {
  aspect-ratio: 5 / 3;
  background: var(--t-cream-alt);
  border-bottom: 1px solid var(--t-border);
  overflow: hidden;
}
body.starter-therapist .bp-recent-card-cover svg,
body.starter-therapist .bp-recent-card-cover img.bp-recent-card-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--t-ease);
}
body.starter-therapist .bp-recent-card a.bp-recent-card-link:hover .bp-recent-card-cover svg,
body.starter-therapist .bp-recent-card a.bp-recent-card-link:hover .bp-recent-card-cover img {
  transform: scale(1.03);
}
body.starter-therapist .bp-recent-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}
body.starter-therapist .bp-recent-card-meta {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-terra);
  margin: 0;
}
body.starter-therapist .bp-recent-card-meta .date {
  color: var(--t-subtle);
  margin-left: .65rem;
  padding-left: .65rem;
  border-left: 1px solid var(--t-border);
}
body.starter-therapist .bp-recent-card-title {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-weight: 450;
  font-size: 1.4rem;
  letter-spacing: -0.014em;
  line-height: 1.22;
  margin: 0;
  color: var(--t-ink);
  font-optical-sizing: auto;
  text-wrap: balance;
  transition: color .3s var(--t-ease);
}
body.starter-therapist .bp-recent-card a.bp-recent-card-link:hover .bp-recent-card-title { color: var(--t-terra); }

/* When the homepage [bp_recent_posts] shortcode emits an empty wrapper
   (no published posts), hide the entire "Notes from the practice"
   section so we don't leave an orphan heading + "All articles" link
   pointing at a still-empty archive. */
body.starter-therapist #articles.t-root:has(.bp-recent-posts:empty) {
  display: none;
}

/* --- Reduced motion guard for chrome animations ---------------------- */
@media (prefers-reduced-motion: reduce) {
  body.starter-therapist .header-button.primary::before { animation: none !important; }
  body.starter-therapist .main-navigation a::after { transition: none !important; }
  body.starter-therapist .bp-recent-card a.bp-recent-card-link,
  body.starter-therapist .bp-recent-card-cover svg,
  body.starter-therapist .bp-recent-card-cover img { transition: none !important; }
}