/* ---------------------------------------------------------------------------
   Article Body — long-form prose inside a Beaver Builder layout.

   The prose treatment here MIRRORS assets/css/post-content.css (the classic
   post styling). It is deliberately duplicated, not shared: post-content.css
   guards nearly every rule with :not(.fl-builder-content *) because classic
   posts embed saved BB layouts, while this module renders INSIDE
   .fl-builder-content — a merged scope would need those live guards rewritten.
   The two files consume the same tokens, so brand changes propagate to both.
   If you change the type scale, buttons, or link treatment in one file,
   change the other.

   Cascade armor: every heading rule carries an explicit color at doubled-class
   specificity — the Customizer global paints .fl-builder-content h2 (and
   h2 span) brown #683326 otherwise.

   1rem = 10px. Type floor: nothing renders below 1.8rem.
   --------------------------------------------------------------------------- */

.cs-article-body {
  font-family: var(--cs-font-display);
  color: var(--cs-ink);
}

.cs-article-body--spacing-none { padding-block: 0; }
.cs-article-body--spacing-sm   { padding-block: var(--cs-space-md); }
.cs-article-body--spacing-md   { padding-block: var(--cs-space-lg); }
.cs-article-body--spacing-lg   { padding-block: var(--cs-space-xl); }

.cs-article-body__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  font-size: 1.8rem; /* 18px — site-wide body-copy floor */
  line-height: 1.6;
  letter-spacing: var(--cs-tracking-tight);
}

.cs-article-body--measure-wide .cs-article-body__inner {
  max-width: var(--cs-container);
}

.cs-article-body__inner p {
  font-size: 1.8rem;
  line-height: 1.6;
  margin: 0 0 var(--cs-space-md);
}

/* ---------- Headings ---------- */
.cs-article-body .cs-article-body__inner :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--cs-font-display);
  color: var(--cs-ink);
  letter-spacing: var(--cs-tracking-tight);
  text-wrap: balance;
}

/* The Customizer skin also paints `h2 span` — keep any inline spans on brand. */
.cs-article-body .cs-article-body__inner :is(h1, h2, h3, h4, h5, h6) span {
  color: inherit;
}

.cs-article-body .cs-article-body__inner h2 { font-size: clamp(2.8rem, 2.5vw + 1rem, 4rem); font-weight: 800; line-height: 1.2; margin: var(--cs-space-xl) 0 var(--cs-space-md); color: var(--cs-ink); }
.cs-article-body .cs-article-body__inner h3 { font-size: clamp(2.2rem, 1.5vw + 1rem, 2.8rem); font-weight: 700; line-height: 1.35; margin: var(--cs-space-lg) 0 var(--cs-space-sm); color: var(--cs-ink); }
.cs-article-body .cs-article-body__inner h4 { font-size: 2rem; font-weight: 700; line-height: 1.4; margin: var(--cs-space-lg) 0 var(--cs-space-sm); color: var(--cs-ink); }
.cs-article-body .cs-article-body__inner :is(h5, h6) { font-size: 1.8rem; font-weight: 700; line-height: 1.45; margin: var(--cs-space-md) 0 var(--cs-space-sm); color: var(--cs-ink); }

/* First heading in the stream shouldn't push away from the title band above. */
.cs-article-body__inner > :is(h2, h3):first-child {
  margin-top: 0;
}

/* ---------- Links (everything except the pill buttons below) ---------- */
.cs-article-body__inner a:not(.cs-article-body__btn) {
  color: var(--cs-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: color 200ms ease;
}

.cs-article-body__inner a:not(.cs-article-body__btn):is(:hover, :focus-visible) {
  color: var(--cs-blue);
}

/* ---------- Pill buttons ----------
   :link/:visited listed explicitly: BB Theme's Customizer skin styles
   `.fl-page a:visited` flavours and would win over a bare class selector. */
.cs-article-body .cs-article-body__inner .cs-article-body__btn,
.cs-article-body .cs-article-body__inner .cs-article-body__btn:is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(33rem, 100%); /* 330px — matches the promo-cta/section-header CTA */
  min-height: 4.4rem; /* clears the 44px tap-target minimum */
  padding: 1rem 3.2rem;
  border: 0;
  border-radius: var(--cs-radius-pill);
  background: var(--cs-orange);
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background 250ms ease-in-out, transform 250ms ease-in-out;
}

.cs-article-body .cs-article-body__inner .cs-article-body__btn:is(:hover, :focus-visible) {
  background: var(--cs-blue-dark);
  color: var(--cs-white);
  text-decoration: none;
  transform: scale(1.02);
}

.cs-article-body__btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-sm);
  margin: var(--cs-space-lg) 0;
}

/* ---------- SimplePractice booking links ----------
   Same href-matched catch as post-content.css so hand-authored booking links
   get the pill even without the class. !important beats author inline styles. */
.cs-article-body__inner a[href*="clientsecure.me"]:not(:is(p:not(.cs-article-body__btn-row), li) a) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100% !important;
  min-width: min(33rem, 100%);
  min-height: 4.4rem;
  padding: 1rem 3.2rem !important;
  border: 0 !important;
  border-radius: var(--cs-radius-pill) !important;
  box-shadow: none !important;
  background-color: var(--cs-orange) !important;
  color: var(--cs-white) !important;
  font-family: var(--cs-font-display);
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  line-height: 1.5 !important;
  letter-spacing: var(--cs-tracking-tight);
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 250ms ease-in-out, transform 250ms ease-in-out;
}

/* Mid-sentence booking links render as PLAIN links (user decision
   2026-09-25): the pill rule above excludes p/li contexts (button rows
   excepted), so they fall through to the standard link styling. */

.cs-article-body__inner a[href*="clientsecure.me"]:not(:is(p:not(.cs-article-body__btn-row), li) a):is(:hover, :focus-visible) {
  background-color: var(--cs-blue-dark) !important;
  color: var(--cs-white) !important;
  transform: scale(1.02);
}

/* ---------- Lists ---------- */
.cs-article-body__inner :is(ul, ol) {
  margin: 0 0 var(--cs-space-md);
  padding-left: var(--cs-space-md);
}

.cs-article-body__inner li {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: var(--cs-space-xs);
}

.cs-article-body__inner li::marker {
  color: var(--cs-orange);
}

/* ---------- Quotes ---------- */
.cs-article-body__inner blockquote {
  margin: var(--cs-space-lg) 0;
  padding: var(--cs-space-md) var(--cs-space-lg);
  border-left: 3px solid var(--cs-orange);
  background: var(--cs-blue-pale-40);
  border-radius: 0 1.6rem 1.6rem 0;
  font-style: italic;
  color: var(--cs-ink);
}

.cs-article-body__inner blockquote p:last-child {
  margin-bottom: 0;
}

/* ---------- Media & rules ---------- */
.cs-article-body__inner img {
  max-width: 100%;
  height: auto;
  border-radius: 1.6rem;
}

.cs-article-body__figure {
  margin: var(--cs-space-lg) 0;
}

.cs-article-body__figure figcaption {
  margin-top: var(--cs-space-xs);
  font-size: 1.8rem;
  color: var(--cs-ink-soft);
}

.cs-article-body__video {
  margin: var(--cs-space-lg) 0;
}

.cs-article-body__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 1.6rem;
}

.cs-article-body__inner hr {
  border: 0;
  border-top: 1px solid var(--cs-blue-pale);
  margin: var(--cs-space-xl) 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .cs-article-body .cs-article-body__inner .cs-article-body__btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-article-body .cs-article-body__inner .cs-article-body__btn:hover,
  .cs-article-body__inner a[href*="clientsecure.me"]:not(:is(p:not(.cs-article-body__btn-row), li) a):hover {
    transform: none;
  }
}