/* eboofl — the blog's own styles (e8).

   site.css is the original site's stylesheet, ported byte-for-byte, and wp.css holds the
   adjustments that exist only because this is WordPress. The blog did not exist on the
   original site, so its design lives here instead of in either of those: site.css stays a
   faithful port, and wp.css stays about WordPress.

   Everything below is built from the variables and the type scale site.css already defines,
   so a post reads as part of the site rather than as a WordPress default. */

/* ---------- post lists: the /blog index, archives, search, and the homepage teaser ---------- */

.post-list .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.post-list .wp-block-post {
  border-top: 1px solid var(--rule);
  flex-direction: column;
  gap: 10px;
  padding-block: 32px;
  display: flex;
}

.post-list .wp-block-post:last-child { border-bottom: 1px solid var(--rule); }

.post-card__date {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--light-green);
  font-size: 11px;
  font-weight: 600;
}

.post-card__title { margin: 0; }
.post-card__title a { color: var(--teal); }
.post-card__title a:hover { color: var(--sage); }

.post-card__body { margin: 0; }
.post-card__body p { margin: 0; }
.post-card__body a { text-decoration: underline; }

.post-list__pagination {
  border-top: 1px solid var(--rule);
  letter-spacing: .06em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

/* ---------- the /blog index, archives and search ---------- */

.blog-index__inner {
  flex-direction: column;
  gap: 40px;
  display: flex;
}

.blog-index__header {
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  display: flex;
}

.blog-index__header .lead { max-width: 560px; }

.post-search { max-width: 420px; }
.post-search .wp-block-search__input {
  border: 1px solid var(--rule);
  color: var(--teal);
  padding: 12px 14px;
  font-size: 15px;
}
.post-search .wp-block-search__button {
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--teal);
  color: var(--white);
  border: 0;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 600;
}
.post-search .wp-block-search__button:hover { background: var(--sage); }

/* ---------- the homepage teaser (R15) ---------- */

.blog-teaser { background: var(--mist); }

.blog-teaser__inner {
  flex-direction: column;
  gap: 40px;
  display: flex;
}

.blog-teaser__header {
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  display: flex;
}

/* Cards here, a list on the index — same blocks, same classes, different shape. */
.blog-teaser .post-list .wp-block-post-template {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.blog-teaser .post-list .wp-block-post {
  background: var(--white);
  border: 0;
  padding: 32px 28px;
}

.blog-teaser .post-list .wp-block-post:last-child { border-bottom: 0; }
.blog-teaser .post-card__title { font-size: 22px; font-weight: 600; }
.blog-teaser .post-card__body p { font-size: 14px; line-height: 1.7; }
.blog-teaser__more { margin: 0; }

/* ---------- a single post ---------- */

.container.post__inner {
  max-width: 760px;
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.post__crumbs { display: flex; gap: 8px; }
.post__crumbs a { color: var(--sage); }
.post__crumbs span { color: var(--muted); }

.post__title { margin: 0; }

.post__date {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--light-green);
  margin: -8px 0 0;
  font-size: 11px;
  font-weight: 600;
}

/* The byline (e9). Kyle ruled a named clinician (R29), and the name links to the bio page that
   already exists on thelcoa.com — which is the whole point of it: a reader, and an answer engine,
   can follow it to a real person with real credentials. */
.post__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  color: var(--muted);
  margin: 2px 0 0;
  font-size: 14px;
}

.post__byline-name {
  color: var(--teal);
  text-decoration: underline;
  font-weight: 600;
}
.post__byline-name:hover { color: var(--sage); }

.post__byline-role {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.post__image { margin-block: 12px 0; }
.post__image img { width: 100%; height: auto; display: block; }

/* The body of a post is the one place on this site with ordinary flowing prose, so it is
   the one place that needs type rules for headings, lists, quotes and tables. */
.post__body { color: var(--body-on-white); }
.post__body > * { margin-block: 0 22px; }
.post__body > :last-child { margin-block-end: 0; }

.post__body p,
.post__body li {
  font-family: var(--font-serif);
  text-wrap: pretty;
  font-size: 16px;
  line-height: 1.8;
}

.post__body h2 {
  letter-spacing: -.01em;
  color: var(--teal);
  margin-block: 44px 14px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.15;
}

.post__body h3 {
  color: var(--teal);
  margin-block: 32px 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.post__body h4 {
  color: var(--teal);
  margin-block: 26px 8px;
  font-size: 17px;
  font-weight: 600;
}

.post__body ul, .post__body ol { padding-left: 24px; }
.post__body li { margin-block-end: 8px; }

.post__body a { color: var(--sage); text-decoration: underline; }
.post__body a:hover { color: var(--teal); }

.post__body blockquote {
  border-left: 3px solid var(--light-green);
  margin-inline: 0;
  padding-left: 22px;
}
.post__body blockquote p { font-style: italic; }

.post__body figure { margin-inline: 0; }
.post__body figcaption { color: var(--muted); font-size: 12px; line-height: 1.5; }

.post__body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.post__body th, .post__body td {
  border-bottom: 1px solid var(--rule);
  text-align: left;
  padding: 10px 12px;
}
.post__body th { color: var(--teal); font-weight: 600; }

.post__body code {
  background: var(--footer-bg);
  padding: 2px 6px;
  font-size: 14px;
}
.post__body pre { background: var(--footer-bg); padding: 18px; overflow-x: auto; }

.post__body hr { border: 0; border-top: 1px solid var(--rule); margin-block: 36px; }

/* Every post ends with the one thing we want a reader to do next (e9). Internal links are how a
   new post gets found at all, and the deeper /ebo3 link appears here by itself once e10 has made
   that page — see patterns/post-cta.php. The "All posts" link below is a plain link now, not a
   button, so that it does not compete with the booking button above it. */
.post__cta {
  background: var(--mist);
  border-top: 1px solid var(--rule);
  margin-block: 40px 0;
  padding: 28px;
}

.post__cta-text {
  font-family: var(--font-serif);
  color: var(--teal);
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
}

.post__cta-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  display: flex;
}

.post__cta-phone {
  color: var(--muted);
  margin: 16px 0 0;
  font-size: 14px;
}
.post__cta-phone a { color: var(--sage); text-decoration: underline; }

.post__back { margin-block: 16px 0; font-size: 14px; }
.post__back a { color: var(--sage); text-decoration: underline; }

@media (width <= 860px) {
  .post-list__pagination { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* WordPress's own layout stylesheet gives every child after the first a 24px top margin
   (its "block gap"), which knocked the second and third teaser cards down out of line with
   the first. wp.css already zeroes the same rule for the page wrapper and for the homepage's
   sections; this is the post list's share of it. */
.post-list .wp-block-post { margin-block: 0; }

/* ---------- the nav, now that it carries a fifth link ---------- */

/* Measured 2026-10-02 at 880px wide (the tightest width at which the links are still shown —
   site.css hides them at 860px and below): with "Blog" added, the five links needed exactly
   the space available, "How it works" wrapped onto two lines and the first link touched the
   logo. Without "Blog" there were 29px to spare. So: never let a nav link wrap, and close the
   36px gap up a little in the band where it is tight. Nothing changes above 1040px. */
.nav__link { white-space: nowrap; }

@media (width <= 1040px) {
  .nav__links { gap: 22px; }
}

/* site.css hides every nav link at 860px and below, so on a phone the bar is the logo and the
   booking button only. That was fine while the four links were jump-links to sections of the one
   page; it is not fine now that /blog is a page of its own, because a phone reader of a post had
   no route back to the blog but the button at the foot of it. Kyle's ruling, 2026-10-02 (OQ-16):
   show Blog alone at phone width, leave the other four hidden. Measured at 400px: it fits, with
   no sideways scroll. */
@media (width <= 860px) {
  .nav__links .nav__link--blog { display: block; }
}

/* ---------- the outline button, and /ebo3 (e10) ---------- */

/* ⛔ .btn--outline did not exist. patterns/post-cta.php has asked for it since e9 — it is the
   "How EBOO works, in detail" button on every post — and the three stylesheets between them
   define only .btn--outline-accent and .btn--outline-light, both of which draw a light border
   for a TEAL background. On .post__cta's pale --mist panel the class matched nothing, so the
   button rendered as bare .btn: 12px uppercase text with no border, background or padding.
   Nobody saw it because /ebo3 did not exist yet, so the button was never printed.
   The padding is 11px + a 1px border on purpose, so it stands exactly as tall as the
   .btn--primary beside it (12px, no border) instead of a pixel taller. */
.btn--outline {
  background: 0 0;
  border: 1px solid var(--teal);
  color: var(--teal);
  padding: 11px 21px;
}
.btn--outline:hover { background: var(--teal); color: var(--white); }

/* R18's one new homepage link, at the foot of the How it works column. In blog.css and not
   site.css for the same reason .blog-teaser is: site.css is the original site's CSS ported byte
   for byte and stays that way, so anything this project ADDS to the homepage lives here. */
.how__more { margin: 32px 0 0; }

/* /ebo3 reuses .container.post__inner and .post__body, which are the only prose rules on this
   site and are exactly right for this page. These two are the whole of its own design. */
.ebo3__lead { font-size: 18px; }

/* The direct answer under each question. It is the paragraph an answer engine quotes — it is the
   one copied word for word into the page's FAQ markup — so it reads as the answer and not as the
   first of several paragraphs. */
.post__body .ebo3__answer { color: var(--teal); font-size: 17px; }

/* ⛔ .post__body's prose rules reach the buttons inside it, and BEAT them on specificity:
   `.post__body a` is (0,1,1) where `.btn--primary` is (0,1,0), so a button inside the page's own
   content came out underlined AND in the prose link colour -- sage text on the primary button's
   dark teal, which is the contrast failure in the pair. On a POST the call to action is a sibling
   of .post__body and never meets these rules, which is why nothing has hit this before.
   Both found by looking at a screenshot of the rendered page, not by reasoning about the CSS. */
.post__body .btn { text-decoration: none; }
.post__body .btn--primary { color: var(--white); }
.post__body .btn--primary:hover { color: var(--white); }
.post__body .btn--outline { color: var(--teal); }
.post__body .btn--outline:hover { color: var(--white); }