/* Therapy With Abby blog: posts and the blog index (plugin twa-blog).
   Uses the theme's own variables, fonts and components (page-hero, sec light, wrap narrow prose, svc cards,
   closing). This file only sizes long-form text for reading and shapes the post cards.
   2026-10-26 launch version: includes the 2026-10-21 fixes that were never pushed (single-card grid on /blog,
   closing buttons gap) and a reading pass (measure, size, rhythm, links, lists, quotes, tables, contents box,
   author box, visible card photos). */

/* Link colour: her clay deepened with her text colour, 5.35:1 on cream (plain clay is 3.99:1). */
.post-body, .post-toc, .post-author { --post-link: #875335; --post-rule: rgba(42, 31, 23, .14); --post-hair: rgba(180, 138, 90, .3); }

/* ---- Hero byline row, in the style of the crumbs line ---- */
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 28px; font: 500 12px/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-light-mute); }
.post-hero h1 { max-width: 20ch; font-size: clamp(2.5rem, 5.4vw, 5.2rem); }
/* Crumbs over the bright post photo: her light text colour, so "Home / Blog" stays above 4.5:1 */
.post-hero .crumbs { color: var(--text-light); }

/* ---- Article column: 19px text, about 68 characters a line on desktop ---- */
.post-sec { padding-top: clamp(64px, 8vw, 116px); padding-bottom: clamp(84px, 10vw, 150px); }
.post-body { font-size: 19px; line-height: 1.7; max-width: calc(29.4em + 2 * var(--pad)); }
.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }
.post-body p, .post-body li { font-size: 1em; line-height: 1.7; }
.post-body p { margin: 0 0 1.1em; text-wrap: pretty; }
.post-body > p:first-child { font-size: 1.1em; line-height: 1.62; }
.post-body strong, .post-body b { font-weight: 600; }
.post-body sup, .post-body sub { font-size: .7em; line-height: 0; }
.post-body mark { background: rgba(214, 165, 101, .28); color: inherit; padding: 0 .1em; }

/* Headings: clear space above, held close to the text they introduce */
.post-body h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.14; margin: 2.05em 0 .55em; }
.post-body h3 { font-size: clamp(1.4rem, 1.9vw, 1.65rem); line-height: 1.25; margin: 1.75em 0 .45em; }
.post-body h4 { font: 600 13px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin: 2.2em 0 .7em; }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: 0; }
.post-body h2 + h3 { margin-top: 1.2em; }
.post-body h2[id], .post-body h3[id], .post-body h4[id] { scroll-margin-top: 110px; }

/* Links: underline always visible */
.post-sec .post-body a:not(.btn):not(.link) { color: var(--post-link); text-decoration: underline; text-decoration-thickness: max(1px, .065em); text-underline-offset: .2em; text-decoration-color: currentColor; overflow-wrap: anywhere; transition: color .3s var(--ease), text-decoration-thickness .3s var(--ease); }
.post-sec .post-body a:not(.btn):not(.link):hover { color: var(--text-dark); text-decoration-thickness: 2px; }
.post-body a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

/* Lists: the theme's hairline list, marker set on the first line */
.post-body ul, .post-body ol { margin: 0 0 1.4em; }
.post-body ul li { padding: 10px 0 10px 28px; }
.post-body ul li::before { top: calc(10px + .85em); }
.post-body ol { padding-left: 1.7em; list-style: decimal; }
.post-body ol li { padding: 7px 0 7px .35em; }
.post-body ol li::marker { color: var(--clay); font: 600 .8em/1 var(--sans); }
.post-body li > ul, .post-body li > ol { margin: 8px 0 0; }
.post-body li li { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
.post-body li > p { margin: 0 0 .5em; }

/* Quotes */
.post-body blockquote { margin: 1.9em 0; padding: 2px 0 2px 28px; border-left: 2px solid var(--clay); font-style: normal; color: var(--text-dark); }
.post-body blockquote p { font-size: 1.12em; line-height: 1.58; margin-bottom: .6em; }
.post-body blockquote > :last-child { margin-bottom: 0; }
.post-body blockquote cite, .post-body .wp-block-pullquote cite { display: block; margin-top: 12px; font: 500 12px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--text-mute); }
.post-body .wp-block-pullquote { margin: 2.4em 0; padding: 30px 0; border-top: 1px solid var(--post-hair); border-bottom: 1px solid var(--post-hair); text-align: center; }
.post-body .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.post-body .wp-block-pullquote p { font-size: clamp(1.35em, 2.2vw, 1.6em); line-height: 1.35; font-weight: 300; }

/* Images and figures */
.post-body figure { margin: 2em 0; }
.post-body img { max-width: 100%; height: auto; border-radius: 4px; }
.post-body figcaption, .post-body .wp-element-caption { margin-top: 10px; font: 400 14px/1.55 var(--sans); color: var(--text-mute); }
.post-body .alignleft { float: left; margin: .3em 26px 16px 0; max-width: 50%; }
.post-body .alignright { float: right; margin: .3em 0 16px 26px; max-width: 50%; }
.post-body .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.post-body hr, .post-body .wp-block-separator { border: 0; border-top: 1px solid var(--post-rule); margin: 2.6em 0; }

/* Tables: scroll inside their own box on phones, never the page */
.post-body .wp-block-table { margin: 2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-body table { width: 100%; border-collapse: collapse; margin: 2em 0; font: 400 15px/1.55 var(--sans); color: var(--text-dark); }
.post-body .wp-block-table table { margin: 0; }
.post-body th, .post-body td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--post-rule); vertical-align: top; }
.post-body thead th { font: 600 11.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); border-bottom-color: rgba(42, 31, 23, .38); }
.post-body tbody th { font-weight: 600; }
.post-body .wp-block-table figcaption { margin-top: 12px; }

.post-body .wp-block-group__inner-container { display: contents; }
.post-body .wp-block-footnotes { margin-top: 2.6em; padding-top: 1.4em; border-top: 1px solid var(--post-rule); font-size: .84em; }
.post-body .wp-block-footnotes li { padding-top: 4px; padding-bottom: 4px; }

/* ---- Table of contents: a Group block with the class "post-toc" (a label paragraph, then a list of links) ---- */
.post-body .post-toc { margin: 2.2em 0 2.6em; padding: 24px 30px 18px; background: var(--paper); border: 1px solid var(--post-hair); border-radius: 4px; }
.post-body .post-toc > :first-child:not(ol):not(ul), .post-body .post-toc .post-toc-title { margin: 0 0 8px; font: 600 11.5px/1.8 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
.post-body .post-toc ol, .post-body .post-toc ul { counter-reset: toc; list-style: none; margin: 0; padding: 0; }
.post-body .post-toc li { counter-increment: toc; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(180, 138, 90, .22); font-size: .92em; line-height: 1.45; }
.post-body .post-toc li:last-child { border-bottom: 0; }
.post-body .post-toc li::before { content: counter(toc, decimal-leading-zero); position: static; width: auto; height: auto; background: none; font: 600 11.5px/1 var(--sans); letter-spacing: .08em; color: var(--text-mute); }
.post-sec .post-body .post-toc a:not(.btn):not(.link) { color: var(--text-dark); text-decoration-color: rgba(135, 83, 53, .6); }
.post-sec .post-body .post-toc a:not(.btn):not(.link):hover { color: var(--post-link); text-decoration-color: currentColor; }

/* ---- Author box: a Group block with the class "post-author" (her photo, then name, one line, a link) ---- */
.post-body .post-author { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 26px; align-items: start; margin: 3.2em 0 0; padding: 32px 0 0; border-top: 1px solid var(--post-rule); }
.post-body .post-author:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.post-body .post-author figure, .post-body .post-author .wp-block-image { margin: 0; }
.post-body .post-author img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.post-body .post-author p { font-size: .9em; line-height: 1.6; margin: 0 0 .55em; color: var(--text-mute); }
.post-body .post-author .post-author-name, .post-body .post-author h2, .post-body .post-author h3 { margin: 0 0 6px; font: 400 1.45rem/1.2 var(--serif); letter-spacing: -.01em; color: var(--text-dark); }
.post-body .post-author > :last-child, .post-body .post-author .wp-block-group > :last-child { margin-bottom: 0; }

/* ---- Closing consultation block: when the post already ends with the consultation sentence, the block
   drops its copy, so the buttons get the gap the paragraph used to make (fix from 2026-10-21). ---- */
.closing h2 + [data-rise] .hero-actions { margin-top: 44px; }

/* ---- Blog index: post cards with a visible photo, date, title, excerpt ---- */
/* The theme's .svc grid paints its hairline colour into empty cells (one post showed beside a blank brown
   block); post cards carry their own hairline instead (fix from 2026-10-21). */
.post-index .svc { background: none; border: 0; gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.post-index .svc a { min-height: 0; padding: 0 0 34px; border: 1px solid rgba(180, 138, 90, .25); margin: 0 -1px -1px 0; }
.post-index .svc a::before { content: ""; position: relative; inset: auto; display: block; flex: none; aspect-ratio: 3 / 2; margin: 0 0 30px; opacity: 1; transform: none; background: var(--bg) center / cover no-repeat, var(--umber); transition: filter .8s var(--ease); }
.post-index .svc a::after { display: none; }
.post-index .svc a:hover { background: var(--umber); }
.post-index .svc a:hover::before { opacity: 1; transform: none; filter: brightness(1.06); }
.post-index .svc a > * { margin-left: 34px; margin-right: 34px; }
.post-index .svc .n { margin-bottom: 0; font: 600 11.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-light-mute); }
.svc h2.card-title { margin: 14px 0 14px; font-size: clamp(1.7rem, 2.2vw, 2.2rem); line-height: 1.12; }
.post-index .svc p { font-size: 16px; line-height: 1.65; color: var(--text-light-mute); margin-bottom: 0; }
.post-index .svc .go { margin-top: auto; padding-top: 26px; }
.post-index .svc a:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* Touch screens: the theme loads card photos only on hover; on post cards the photo is content */
@media (hover: none) { .post-index .svc a::before { background-image: var(--bg); } }

/* Newest post on the first page: one wide card, photo left */
@media (min-width: 900px) {
  body:not(.paged) .post-index .svc a:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: clamp(40px, 4.5vw, 72px); padding: 0; }
  body:not(.paged) .post-index .svc a:first-child::before { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 440px; margin: 0; }
  body:not(.paged) .post-index .svc a:first-child > * { grid-column: 2; margin-left: 0; margin-right: clamp(34px, 4vw, 64px); }
  body:not(.paged) .post-index .svc a:first-child .n { grid-row: 2; padding-top: 48px; }
  body:not(.paged) .post-index .svc a:first-child .card-title { grid-row: 3; font-size: clamp(2.1rem, 3vw, 3rem); margin: 16px 0 18px; }
  body:not(.paged) .post-index .svc a:first-child p { grid-row: 4; max-width: 46ch; font-size: 17px; }
  body:not(.paged) .post-index .svc a:first-child .go { grid-row: 5; padding: 30px 0 48px; }
}

/* Pagination */
.post-index .nav-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.post-index .nav-links a { color: var(--amber); text-decoration: underline; text-underline-offset: .3em; }
.post-index .nav-links .current { color: var(--text-light); }

/* ---- Tablets and phones ---- */
@media (max-width: 1020px) {
  .post-body { font-size: 18px; }
}
@media (max-width: 760px) {
  .post-meta { gap: 6px 18px; font-size: 11px; }
  .post-sec { padding-top: 56px; padding-bottom: 80px; }
  .post-body { font-size: 17px; line-height: 1.7; }
  .post-body p, .post-body li { font-size: 17px; }
  .post-body > p:first-child { font-size: 18.5px; }
  .post-body h2 { margin-top: 1.9em; }
  .post-body ul li { padding-left: 24px; }
  .post-body blockquote { padding-left: 20px; }
  .post-body .alignleft, .post-body .alignright { float: none; margin: 1.6em 0; max-width: 100%; }
  .post-body .post-toc { padding: 20px 20px 14px; }
  .post-body .post-author { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; }
  .post-body .post-author img { width: 72px; height: 72px; }
  .post-index .svc a > * { margin-left: 24px; margin-right: 24px; }
  .post-index .svc a { padding-bottom: 28px; }
  .post-index .svc a::before { margin-bottom: 24px; }
}

/* ---- Print: the article only ---- */
@media print {
  .top, .drawer, .grain, .post-related, .closing, .foot, .hero-media { display: none !important; }
  .page-hero { min-height: 0; color: #000; }
  .page-hero::after { display: none; }
  .post-meta, .crumbs { color: #444; }
  .light, .post-sec { background: #fff; padding: 0; }
  .post-body { max-width: none; padding: 0; font-size: 12pt; }
  .post-sec .post-body a:not(.btn):not(.link) { color: #000; }
}