/* =====================================================================
 *  blog-enhancements.css — Living in Riverdale (2026-07-01)
 *  - Real styled tables (replaces leaked markdown pipe tables)
 *  - Hides the broken template "Related blog posts" grid (fake authors,
 *    template images, dead template links)
 *  Token-only: brand greens/neutrals from tokens-brand-override.css.
 * =================================================================== */

/* ---- Article tables ---- */
.rt-blog-table-wrap { width: 100%; overflow-x: auto; margin: 1.75rem 0; -webkit-overflow-scrolling: touch; }
.rt-blog-table {
  width: 100%; border-collapse: collapse; font-family: var(--font-body);
  font-size: .95rem; line-height: 1.5; color: var(--text-body);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.rt-blog-table thead th {
  background: var(--brand-green-deep, #0F4C3A); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: .9rem;
  text-align: left; padding: .7rem .9rem; letter-spacing: .01em;
}
.rt-blog-table tbody td { padding: .65rem .9rem; border-top: 1px solid var(--border); vertical-align: top; }
.rt-blog-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--brand-theme-green, #4E6D43) 6%, transparent); }
.rt-blog-table tbody tr:hover { background: color-mix(in srgb, var(--brand-theme-green, #4E6D43) 11%, transparent); }
.rt-blog-table tbody td:first-child { font-weight: 600; color: var(--text-heading); }

/* ---- Hide broken template "Related blog posts" grid + its heading ---- */
.rt-blog-overview-right-wrapper .w-dyn-list:has(.rt-blog-overview-card-wrapper) { display: none !important; }
.rt-blog-overview-right-wrapper .rt-text-style-h3:has(+ .w-dyn-list .rt-blog-overview-card-wrapper) { display: none !important; }

/* ---- Blog / Guides landing cards: remove the author row (JB request) ---- */
.rt-blog-v1-card-bottom-wrapper { display: none !important; }

/* ---- Hide the template "Our latest articles" strip (rt-blog-v4): links to non-existent template posts, duplicates the Guides page ---- */
.rt-blog-v4 { display: none !important; }

/* =====================================================================
 *  Blog article layout + reading rhythm (2026-07-01, impeccable-layout)
 *  Collapse the 2-col template to one comfortable reading column and
 *  give the body proper vertical rhythm. Applies to all posts.
 * =================================================================== */

/* 1) Remove the now-empty right sidebar (related posts were hidden) and
 *    center the article in a comfortable measure (~68ch). */
.rt-blog-overview-right-wrapper { display: none !important; }
.rt-blog-overview-wrapper { justify-content: center; }
.rt-blog-overview-left-wrapper { max-width: 46rem; width: 100%; margin-inline: auto; }

/* 2) Body typography rhythm */
.rt-blog-overview-left-wrapper p {
  font-size: 1.0625rem; line-height: 1.75; margin: 0 0 1.15em; color: var(--text-body);
}
.rt-blog-overview-left-wrapper p:last-child { margin-bottom: 0; }

/* Headings: generous space ABOVE (was 0), tight to the paragraph that follows */
.rt-blog-overview-left-wrapper h2 {
  font-family: var(--font-heading); font-weight: 700; color: var(--text-heading);
  font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.22;
  margin: 2.5em 0 .55em; scroll-margin-top: 96px;
}
.rt-blog-overview-left-wrapper h3 {
  font-family: var(--font-heading); font-weight: 700; color: var(--text-heading);
  font-size: 1.3rem; line-height: 1.25; margin: 2em 0 .5em; scroll-margin-top: 96px;
}
.rt-blog-overview-left-wrapper h1 {
  font-family: var(--font-heading); font-weight: 700; color: var(--text-heading);
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 0 0 .7em; letter-spacing: -.01em;
}
.rt-blog-overview-left-wrapper h1 + h2 { margin-top: 1.1em; }

/* Links in body copy */
.rt-blog-overview-left-wrapper .w-richtext a,
.rt-blog-overview-left-wrapper p a {
  color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px;
}
.rt-blog-overview-left-wrapper .w-richtext a:hover { color: var(--brand-green-deep); }

/* Lists */
.rt-blog-overview-left-wrapper ul, .rt-blog-overview-left-wrapper ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.rt-blog-overview-left-wrapper li { margin-bottom: .45em; line-height: 1.7; }

/* In-body images: rounded + breathing room */
.rt-blog-details-one-gap img, .rt-blog-details-two-gap img { border-radius: 12px; margin: 1.75rem 0; display: block; }

/* 3) Pull-quote -> real brand callout (was a flat gray box) */
.rt-blog-quoted-box {
  margin: 2.25rem 0; padding: 1.35rem 1.6rem;
  background: color-mix(in srgb, var(--brand-theme-green, #4E6D43) 9%, transparent);
  border-radius: 14px;
}
.rt-blog-quoted-box .w-richtext > *, .rt-blog-quoted-box h5 {
  font-family: var(--font-heading); font-weight: 700; font-style: normal;
  font-size: 1.15rem; line-height: 1.45; color: var(--brand-green-deep, #0F4C3A); margin: 0;
}

/* 4) Byline row breathing room */
.rt-blog-overview-left-wrapper .rt-blog-overview-top-card { gap: .2rem; }

/* =====================================================================
 *  Related guides — real "read next" section at the end of each post
 *  (replaces the hidden template rt-blog-v4). 3 topic-matched posts.
 * =================================================================== */
.rt-related-guides { padding: clamp(2.75rem, 5vw, 4.5rem) 0; background: var(--surface-alt, #f5f4f1); border-top: 1px solid var(--border); }
.rt-related-guides .rt-container { max-width: 72rem; margin-inline: auto; }
.rt-related-guides-title { font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; text-align: center; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.rt-related-guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.rt-related-card { display: flex; flex-direction: column; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .3s ease; }
.rt-related-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand-theme-green, #4E6D43) 45%, var(--border)); box-shadow: 0 18px 42px rgba(15,76,58,.15); }
.rt-related-card-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.rt-related-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.rt-related-card:hover .rt-related-card-thumb img { transform: scale(1.05); }
.rt-related-card-body { padding: 1.05rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.rt-related-card-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-primary); }
.rt-related-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--text-heading); flex: 1; }
.rt-related-card-cta { font-family: var(--font-body); font-weight: 700; font-size: .85rem; color: var(--brand-primary); }
.rt-related-card-cta::after { content: " \2192"; display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.rt-related-card:hover .rt-related-card-cta { color: var(--brand-green-deep); }
.rt-related-card:hover .rt-related-card-cta::after { transform: translateX(4px); }