/* ==========================================================================
   The Tonic Clinic — Single blog post
   File: tonic-post.css  ·  loaded by the tonic-blog-design plugin

   The site's global body font is Cinzel Decorative in green, which is a
   display face — unreadable at paragraph length. The tc- pages escape it by
   declaring their own fonts locally; the post template does not, so article
   copy renders as green small-caps. This restores the tc- type system.
   Scoped to body.tonic-post.
   ========================================================================== */

body.tonic-post {
  --tc-green:      #567546;
  --tc-green-dk:   #2d3e24;
  --tc-green-lt:   #6d8f5a;
  --tc-green-pale: #edf1e8;
  --tc-cream:      #edeadd;
  --tc-white:      #ffffff;
  --tc-ink:        #1a1a18;
  --tc-body:       #3a3830;
  --tc-muted:      #6e6860;
  --tc-border:     #dddacc;
  --tc-r:          6px;
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
}

/* ── Title banner → hero ─────────────────────────────────────────────── */

body.tonic-post .ast-single-entry-banner[data-post-type="post"] {
  position: relative;
  min-height: 40vh;
  padding: 4.5rem 2rem;
  overflow: hidden;

  /* Astra fills this banner with the featured image. Most of these posts use
     branded graphics with the headline already baked into the artwork, so the
     title ended up printed twice and fighting itself. Use the brand green and
     leaf texture from the tc- CTA bands instead — consistent on every post,
     and always legible. The featured image still does its job on the archive
     cards and in link previews. */
  background-image: none !important;
  background-color: var(--tc-green) !important;
}

body.tonic-post .ast-single-entry-banner[data-post-type="post"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://thetonicclinic.com/wp-content/uploads/2025/01/leaf-pattern-sand.png') center center / cover no-repeat;
  opacity: .12;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 1;
}

body.tonic-post .ast-single-entry-banner[data-post-type="post"] .ast-container {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

body.tonic-post .ast-single-entry-banner[data-post-type="post"] .entry-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 4.2vw, 52px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tc-cream) !important;
  margin: 0;
}

/* ── Reading surface ─────────────────────────────────────────────────── */

body.tonic-post #content.site-content { background: var(--tc-cream); }

body.tonic-post .ast-separate-container .ast-article-single {
  background: var(--tc-white);
  border: 1px solid var(--tc-border);
  border-radius: 8px;
  padding: 3.5rem 3rem;
}

body.tonic-post .entry-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Article typography ──────────────────────────────────────────────── */

body.tonic-post .entry-content p,
body.tonic-post .entry-content li,
body.tonic-post .tcp-meta {
  font-family: var(--font-body) !important;
  color: var(--tc-body) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

body.tonic-post .entry-content p {
  font-size: 17px !important;
  font-weight: 300;
  line-height: 1.8 !important;
  margin: 0 0 1.5rem;
}

body.tonic-post .entry-content p:last-child { margin-bottom: 0; }

body.tonic-post .entry-content h2,
body.tonic-post .entry-content h3,
body.tonic-post .entry-content h4 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--tc-ink) !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.tonic-post .entry-content h2 {
  font-size: clamp(26px, 2.6vw, 33px) !important;
  margin: 3rem 0 1rem;
}

body.tonic-post .entry-content h3 {
  font-size: clamp(21px, 2vw, 25px) !important;
  margin: 2.25rem 0 .8rem;
}

body.tonic-post .entry-content > *:first-child { margin-top: 0; }

/* Opening paragraph reads as a standfirst */
body.tonic-post .entry-content > p:first-of-type {
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: var(--tc-ink) !important;
}

body.tonic-post .entry-content a {
  color: var(--tc-green) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.tonic-post .entry-content a:hover { color: var(--tc-green-dk) !important; }

body.tonic-post .entry-content strong { font-weight: 600; color: var(--tc-ink) !important; }
body.tonic-post .entry-content em { font-style: italic; }

body.tonic-post .entry-content ul,
body.tonic-post .entry-content ol {
  margin: 0 0 1.75rem;
  padding-left: 1.3rem;
}

body.tonic-post .entry-content li {
  font-size: 17px !important;
  font-weight: 300;
  line-height: 1.7 !important;
  margin-bottom: .7rem;
  padding-left: .3rem;
}

body.tonic-post .entry-content ul li::marker { color: var(--tc-green); }
body.tonic-post .entry-content ol li::marker { color: var(--tc-green); font-weight: 600; }

body.tonic-post .entry-content hr.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--tc-border);
  max-width: 100%;
  margin: 2.75rem 0;
  opacity: 1;
}

body.tonic-post .entry-content blockquote {
  border-left: 2px solid var(--tc-green);
  background: var(--tc-green-pale);
  border-radius: 0 var(--tc-r) var(--tc-r) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

body.tonic-post .entry-content img { border-radius: var(--tc-r); }

/* ── Meta strip above the article ────────────────────────────────────── */

body.tonic-post .tcp-meta {
  max-width: 720px;
  margin: 0 auto 2.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--tc-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase !important;
  color: var(--tc-muted) !important;
}

body.tonic-post .tcp-meta a {
  color: var(--tc-green) !important;
  text-decoration: none;
}
body.tonic-post .tcp-meta a:hover { color: var(--tc-green-dk) !important; }
body.tonic-post .tcp-meta span[aria-hidden] { color: var(--tc-border) !important; }

/* ── Closing CTA ─────────────────────────────────────────────────────── */

body.tonic-post .tcp-cta {
  background-color: var(--tc-green);
  padding: 5rem 0;
  text-align: center;
}

body.tonic-post .tcp-cta__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

body.tonic-post .tcp-cta__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(237, 234, 221, .85);
  margin-bottom: .6rem;
}

body.tonic-post .tcp-cta__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--tc-cream);
  margin: 0;
}

body.tonic-post .tcp-cta__lead {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(237, 234, 221, .82);
  max-width: 620px;
  margin: .75rem auto 0;
}

body.tonic-post .tcp-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 2rem;
}

body.tonic-post .tcp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--tc-r);
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease;
}

body.tonic-post .tcp-btn--white {
  background: var(--tc-cream);
  color: var(--tc-green-dk) !important;
  border: 1px solid var(--tc-cream);
}
body.tonic-post .tcp-btn--white:hover { background: var(--tc-white); }

body.tonic-post .tcp-btn--outline {
  background: transparent;
  color: var(--tc-cream) !important;
  border: 1px solid rgba(237, 234, 221, .55);
}
body.tonic-post .tcp-btn--outline:hover { background: rgba(237, 234, 221, .12); }

/* ── Astra's related-posts block, brought into line ──────────────────── */

body.tonic-post .ast-related-posts-title,
body.tonic-post .ast-related-post-title {
  font-family: var(--font-display) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.tonic-post .ast-related-post-content p,
body.tonic-post .ast-related-post-excerpt {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  color: var(--tc-muted) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 921px) {
  body.tonic-post .ast-separate-container .ast-article-single { padding: 2.5rem 1.75rem; }
}

@media (max-width: 600px) {
  body.tonic-post .ast-single-entry-banner[data-post-type="post"] {
    min-height: 38vh;
    padding: 3rem 1.5rem;
  }
  body.tonic-post .ast-separate-container .ast-article-single {
    padding: 2rem 1.25rem;
    border-radius: 0;
  }
  body.tonic-post .entry-content p,
  body.tonic-post .entry-content li { font-size: 16px !important; }
  body.tonic-post .entry-content > p:first-of-type { font-size: 17.5px !important; }
  body.tonic-post .tcp-cta { padding: 3.5rem 0; }
}