/* ---------------------------------------------------------------------------
   Classic post content — design-system alignment.

   Loaded only on singular content that is NOT built with Beaver Builder (see
   includes/helpers/cs-post-content.php, which adds .cs-classic-content). These
   posts are written in the block editor, so they render with stock theme
   styling: teal buttons from the Customizer skin, default link blue, and
   system type — none of which matches the redesign.

   Scope is `.cs-classic-content .fl-post-content`, minus anything inside a
   nested `.fl-builder-content`. Several of these posts embed saved BB layouts
   via shortcode (the SimplePractice booking buttons, for one), and those bring
   their own styling — half-restyling them is worse than leaving them alone.
   The guard also keeps this sheet away from any cs-* module rendered that way.

   Kept deliberately narrow: buttons, links and type, not a re-theme of the
   block editor.

   All rem values follow BB Theme's html { font-size: 10px } base — 1.8rem = 18px.

   NOTE: the prose treatment (type scale, links, pill buttons, lists, quotes,
   images) is MIRRORED in includes/modules/cs-article-body/css/frontend.css for
   prose living inside BB layouts. If you change it here, change it there.
   --------------------------------------------------------------------------- */

.cs-classic-content .fl-post-content {
  font-family: var(--cs-font-display);
  font-size: 1.8rem; /* 18px — matches the site-wide body-copy floor */
  line-height: 1.6;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-ink);
}

.cs-classic-content .fl-post-content p:not(.fl-builder-content *) {
  font-size: 1.8rem;
  line-height: 1.6;
  margin: 0 0 var(--cs-space-md);
}

/* The block editor's own size classes otherwise drop copy below the floor. */
.cs-classic-content .fl-post-content :is(.has-small-font-size, .has-medium-font-size):not(.fl-builder-content *) {
  font-size: 1.8rem;
}

/* ---------- Headings ---------- */
.cs-classic-content .fl-post-content :is(h1, h2, h3, h4, h5, h6):not(.fl-builder-content *) {
  font-family: var(--cs-font-display);
  color: var(--cs-ink);
  letter-spacing: var(--cs-tracking-tight);
  text-wrap: balance;
}

.cs-classic-content .fl-post-content h1:not(.fl-builder-content *) { font-size: clamp(3.2rem, 3vw + 1rem, 4.8rem); font-weight: 800; line-height: 1.212; margin: 0 0 var(--cs-space-md); }
.cs-classic-content .fl-post-content h2:not(.fl-builder-content *) { 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); }
.cs-classic-content .fl-post-content h3:not(.fl-builder-content *) { 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); }
.cs-classic-content .fl-post-content h4:not(.fl-builder-content *) { font-size: 2rem; font-weight: 700; line-height: 1.4; margin: var(--cs-space-lg) 0 var(--cs-space-sm); }
.cs-classic-content .fl-post-content :is(h5, h6):not(.fl-builder-content *) { font-size: 1.8rem; font-weight: 700; line-height: 1.45; margin: var(--cs-space-md) 0 var(--cs-space-sm); }

/* ---------- Links ----------
   Everything except the button flavours handled below. */
.cs-classic-content .fl-post-content a:not(.fl-builder-content *):not(.wp-block-button__link):not(.wp-element-button):not(.fl-button) {
  color: var(--cs-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: color 200ms ease;
}

.cs-classic-content .fl-post-content a:not(.fl-builder-content *):not(.wp-block-button__link):not(.wp-element-button):not(.fl-button):is(:hover, :focus-visible) {
  color: var(--cs-blue);
}

/* ---------- Buttons ----------
   :link and :visited are listed explicitly because BB Theme's Customizer skin
   styles buttons through `.fl-page a.fl-button:visited` — a plain class
   selector here would lose the cascade to it on visited links. */
.cs-classic-content .fl-post-content :is(.wp-block-button__link, .wp-element-button, .fl-button, button, input[type="submit"]):not(.fl-builder-content *),
.cs-classic-content .fl-post-content :is(.wp-block-button__link, .wp-element-button, .fl-button):not(.fl-builder-content *):is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem; /* clears the 44px tap-target minimum */
  padding: 1.2rem 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-classic-content .fl-post-content :is(.wp-block-button__link, .wp-element-button, .fl-button, button, input[type="submit"]):not(.fl-builder-content *):is(:hover, :focus-visible) {
  background: var(--cs-blue-dark);
  color: var(--cs-white);
  text-decoration: none;
  transform: scale(1.02);
}

/* Outline variant keeps the same geometry. */
.cs-classic-content .fl-post-content .is-style-outline .wp-block-button__link:not(.fl-builder-content *) {
  background: transparent;
  color: var(--cs-blue-dark);
  border: 2px solid var(--cs-blue-dark);
}
.cs-classic-content .fl-post-content .is-style-outline .wp-block-button__link:not(.fl-builder-content *):hover {
  background: var(--cs-blue-dark);
  color: var(--cs-white);
}

/* ---------- SimplePractice booking buttons ----------
   The "Get a No-Cost Consultation" CTA appears in seven classic posts — twice
   hand-written into the content with an inline green (#4A7C59), and five times
   through the saved-layout shortcode. It is the most visible off-brand button
   on the site, so it is styled here deliberately rather than left to the
   builder guard above, and matched on href so it is caught whether the
   data-spwidget-* attributes are authored in the markup or stamped later by
   cs-simplepractice.js.

   !important is unavoidable: the inline styles are in the post content itself
   and can only be beaten from the author origin this way. Editing seven posts
   by hand would work, but it would not survive the next content edit. */
.cs-classic-content .fl-post-content a[href*="clientsecure.me"]:not(:is(p, li) a) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100% !important;
  min-height: 4.4rem;
  padding: 1.2rem 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;
}

/* Inline mentions — booking links that sit mid-sentence inside a list item
   or paragraph ("Ready to start? ... or call/text us") render as PLAIN links
   (user decision 2026-09-25, supersedes the slim-pill treatment): the pill
   rule above excludes p/li contexts, so these fall through to the standard
   link styling. Saved-layout shortcode buttons render inside
   .fl-builder-content and keep their own full-size styling. */

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

@media (prefers-reduced-motion: reduce) {
  .cs-classic-content .fl-post-content a[href*="clientsecure.me"]:not(:is(p, li) a):hover {
    transform: none;
  }
}

/* ---------- Lists ---------- */
.cs-classic-content .fl-post-content :is(ul, ol):not(.fl-builder-content *) {
  margin: 0 0 var(--cs-space-md);
  padding-left: var(--cs-space-md);
}

.cs-classic-content .fl-post-content li:not(.fl-builder-content *) {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: var(--cs-space-xs);
}

.cs-classic-content .fl-post-content li:not(.fl-builder-content *)::marker {
  color: var(--cs-orange);
}

/* ---------- Quotes ---------- */
.cs-classic-content .fl-post-content blockquote:not(.fl-builder-content *) {
  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-classic-content .fl-post-content blockquote:not(.fl-builder-content *) p:last-child {
  margin-bottom: 0;
}

/* ---------- Media & rules ---------- */
.cs-classic-content .fl-post-content img:not(.fl-builder-content *) {
  border-radius: 1.6rem;
  height: auto;
}

.cs-classic-content .fl-post-content .wp-block-separator:not(.fl-builder-content *) {
  border: 0;
  border-top: 1px solid var(--cs-blue-pale);
  margin: var(--cs-space-xl) 0;
}

/* ---------- Sidebar ----------
   The sidebar renders alongside every classic post, so its MailerLite signup
   is as visible as anything in the article. It ships a teal #519EBA button
   with #F6F7F8 text (2.6:1 — fails AA) and a 34px-tall 14px input, neither of
   which belongs to this design system. Same treatment as the content buttons. */
.cs-classic-content .fl-sidebar :is(button, input[type="submit"], .mailerlite-subscribe-submit) {
  min-height: 4.4rem;
  padding: 1.2rem 2.4rem;
  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);
  cursor: pointer;
  transition: background 250ms ease-in-out;
}

.cs-classic-content .fl-sidebar :is(button, input[type="submit"], .mailerlite-subscribe-submit):is(:hover, :focus-visible) {
  background: var(--cs-blue-dark);
  color: var(--cs-white);
}

.cs-classic-content .fl-sidebar input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  min-height: 4.4rem;
  padding: 1rem 1.6rem;
  border: 1px solid var(--cs-blue-pale);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-white);
  font-family: var(--cs-font-display);
  font-size: 1.8rem; /* was 14px — under the body-copy floor, and iOS zooms on focus below 16px */
  color: var(--cs-ink);
}

.cs-classic-content .fl-sidebar .fl-widget-title {
  font-family: var(--cs-font-display);
  color: var(--cs-ink);
}

/* ---------- Post title ---------- */
.cs-classic-content .fl-post-header .fl-post-title {
  font-family: var(--cs-font-display);
  font-weight: 800;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-ink);
  text-wrap: balance;
}

/* Single posts: the stock display-size H1 overwhelms the reading column —
   step down to 40px with room before the content. */
.cs-classic-content.single .fl-post-header .fl-post-title {
  font-size: 4rem;
  line-height: 1.212;
  margin-bottom: 4rem; /* 40px */
}

/* Bootstrap's .row pulls -15px each side, but the beside-wrap's children
   (.fl-post-image-beside / .fl-post-content-beside) are not padded cols, so
   the post body juts 15px past the title's left edge. Zero it on singles
   only — the outer .container > .row IS balanced by its col-md-12, and
   archive listings restructure their row with display:contents already. */
.cs-classic-content.single .fl-post .row {
  margin-inline: 0;
}

/* ---------- Archive & search listings ----------
   These have no Themer layout, so they render BB Theme's stock markup. Two
   things are off: entry titles are linked, and the Customizer paints heading
   links #683326 — a muddy brown that appears nowhere in the design system —
   and the h1 (.fl-archive-title, 18px) is smaller than the h2 entry titles it
   introduces (64px), so the page reads as if the posts were the page heading. */
.cs-classic-content .fl-archive-title {
  font-family: var(--cs-font-display);
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-ink);
  margin-bottom: var(--cs-space-md);
}

/* Listing pages only — `.fl-post` is on the single-post article too, and the
   single H1 should stay at display size. */
.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-title {
  font-size: 2.8rem;
  line-height: 1.25;
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-title a,
.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-title a:visited {
  color: var(--cs-ink);
  text-decoration: none;
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-title a:is(:hover, :focus-visible) {
  color: var(--cs-blue-dark);
  text-decoration: underline;
}

.cs-classic-content .fl-post-meta {
  font-size: 1.8rem;
  color: var(--cs-ink-soft);
}

.cs-classic-content .fl-post-meta a {
  color: var(--cs-blue-dark);
  font-weight: 700;
}

.cs-classic-content :is(.fl-archive-nav-prev, .fl-archive-nav-next) a {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 1.2rem 3.2rem;
  border-radius: var(--cs-radius-pill);
  background: var(--cs-orange);
  color: var(--cs-white);
  font-weight: 700;
  font-size: 1.8rem;
  text-decoration: none;
  transition: background 250ms ease-in-out;
}

.cs-classic-content :is(.fl-archive-nav-prev, .fl-archive-nav-next) a:is(:hover, :focus-visible) {
  background: var(--cs-blue-dark);
  color: var(--cs-white);
  text-decoration: none;
}

/* ---------- Listing container ----------
   The theme's .container is capped by the Customizer's 1020px content width;
   BB pages run the 1320px design-system container. Align the listing shells
   (blog index, archives, search) so the intro band and entry cards share the
   same edges as every builder page. Singles stay at the narrower measure —
   it's the better reading width for long-form articles. */
.cs-classic-content:is(.blog, .archive, .search) .fl-archive.container {
  max-width: calc(var(--cs-container) + 2 * var(--cs-gutter));
  width: 100%;
}

/* ---------- Listing entries: media-object cards ----------
   BB Theme's "beside" markup ships title above a .row holding the thumb and
   the content. Rebuild each entry as one card grid — photo left, everything
   else (title, excerpt, Read More, meta) right — via display:contents on the
   intermediate .row so its children join the article's grid. */
.cs-classic-content:is(.blog, .archive, .search) .fl-post {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  /* auto 1fr: the tall portrait thumb spans both rows, and with two auto rows
     the grid splits its extra height between them — inflating the title row
     into a huge gap. The 1fr body row absorbs all of it instead. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "img title"
    "img body";
  column-gap: var(--cs-space-lg);
  align-items: start;
  background: var(--cs-white);
  border-radius: var(--cs-radius-md, 1.6rem);
  padding: var(--cs-space-lg);
  /* Cards sit at 80% of the listing container; the intro band stays full. */
  max-width: 80%;
  margin-inline: auto;
  margin-bottom: var(--cs-space-lg);
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post > .row {
  display: contents;
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-title {
  grid-area: title;
  margin: 0 0 var(--cs-space-sm);
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-image-beside {
  grid-area: img;
  align-self: stretch;
  width: auto;
  float: none;
  padding: 0;
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-thumb {
  height: 100%;
  margin: 0;
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-thumb img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  border-radius: var(--cs-radius-sm, 1.2rem);
}

.cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-content-beside {
  grid-area: body;
  width: auto;
  float: none;
  padding: 0;
}

/* Entries without a featured image: single column */
.cs-classic-content:is(.blog, .archive, .search) .fl-post:not(:has(.fl-post-image-beside)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "body";
}

@media (max-width: 860px) {
  .cs-classic-content:is(.blog, .archive, .search) .fl-post {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "img" "title" "body";
    row-gap: var(--cs-space-sm);
    max-width: 100%;
  }

  .cs-classic-content:is(.blog, .archive, .search) .fl-post .fl-post-thumb img {
    height: auto;
    min-height: 0;
    max-height: 32rem;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .cs-classic-content .fl-post-content :is(.wp-block-button__link, .wp-element-button, .fl-button):not(.fl-builder-content *) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-classic-content .fl-post-content :is(.wp-block-button__link, .wp-element-button, .fl-button, button, input[type="submit"]):not(.fl-builder-content *):hover {
    transform: none;
  }
}