/* ============================================================================
   templates.css — the four field-driven pages.

   WIDGET-CODING-STANDARD §5 said this file "was planned and never built,
   because the PHP templates it would have styled do not exist yet." They exist
   now: single-lw_home.php, archive-lw_home.php, single.php, home.php.

   It loads AFTER widgets.css and styles only what the widget set cannot:
   the WordPress editor's own output, a pager, and the adjacent-post links.
   Everything else on those pages is a widget and is already styled.

   ⚠️ `.lw-` is ONE FLAT NAMESPACE across this file, widgets.css and the child
   theme's style.css — §5. Everything new here is prefixed `.lw-tpl-` so it
   cannot collide. Three classes are deliberately BORROWED from widgets.css
   rather than reinvented, and they are interfaces, not decoration:
     .lw-pgrid__cap  the caption under a photograph — a sourced frame's caption
                     must look the same everywhere or it stops reading as one
     .lw-post__d     the date stamp on an update
     .lw-tiny        the small label above an adjacent-post link
   Changing any of those three in widgets.css changes these pages too. That is
   the point of them; it is also the trap.
   ========================================================================= */

/* ============================================================ THE CONTAINER ===
   ⚠️ Undo Astra's container on our own templates. This is the first rule in the
   file because without it nothing else matters.

   An Elementor page neutralises Astra through `astra_get_content_layout` and the
   `elementor_header_footer` page template. A PHP template does not: it calls
   `get_header()` and lands inside `.ast-container`, which on the blog and archive
   layouts is **`display:flex; flex-direction:row`**. Our sections are direct-ish
   children of it, so they become flex items — and the whole page renders as
   three narrow columns side by side instead of stacking.

   It looked exactly like a broken stylesheet and it was a container two levels up.
   Worse, `audit.mjs` PASSED all four pages while they looked like that: status
   200, no horizontal overflow, one `<h1>`, no console errors. A column layout
   fails none of those. §8 #36. */

body.lw-own-template .ast-container {
  display: block;
  max-width: none;
  padding: 0;
}

/* The sections carry their own full-bleed grounds and their own rhythm, so the
   theme's content padding would inset them from the viewport edge. */
body.lw-own-template #content.site-content,
body.lw-own-template #primary,
body.lw-own-template .site-main {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/* Astra hides its own article wrappers' spacing differently per layout; ours
   never want it. */
body.lw-own-template .ast-article-single,
body.lw-own-template .ast-article-post {
  padding: 0;
  border: 0;
}

/* --------------------------------------------------- the editor's output --- */
/* Used by single.php for an update's body, and by single-lw_home.php for
   whatever has been typed into a house's editor. Matched to the measure and
   rhythm of `lw-prose` so a post and a prose section read as one typeface at
   one size, not as "the page" and "the blog". */

.lw-tpl-entry__in > * {
  max-width: var(--lw-maxw-narrow);
  margin-inline: auto;
}

.lw-tpl-entry__in {
  color: var(--lw-ink-soft);
  font-size: var(--lw-body-lg);
}

.lw-tpl-entry__in > p {
  margin: 0 auto 1.05em;
}

.lw-tpl-entry__in > p:last-child {
  margin-bottom: 0;
}

.lw-tpl-entry__in strong {
  color: var(--lw-ink);
  font-weight: 600;
}

.lw-tpl-entry__in em {
  font-family: var(--lw-display);
  font-style: italic;
  color: var(--lw-ink);
}

.lw-tpl-entry__in h2,
.lw-tpl-entry__in h3,
.lw-tpl-entry__in h4 {
  color: var(--lw-ink);
  font-family: var(--lw-display);
  margin: 1.8em auto 0.6em;
}

.lw-tpl-entry__in h2 { font-size: var(--lw-h-sm); }
.lw-tpl-entry__in h3 { font-size: calc(var(--lw-h-sm) * 0.82); }
.lw-tpl-entry__in h4 { font-size: calc(var(--lw-h-sm) * 0.72); }

.lw-tpl-entry__in ul,
.lw-tpl-entry__in ol {
  margin: 1.2em auto;
  padding-inline-start: 1.4em;
}

.lw-tpl-entry__in li { margin-bottom: 0.5em; }

.lw-tpl-entry__in blockquote {
  border-inline-start: 3px solid var(--lw-amber-rule);
  padding-inline-start: var(--lw-s3);
  margin: 1.6em auto;
  font-family: var(--lw-display);
  font-style: italic;
  color: var(--lw-ink);
}

/* An image dropped into the editor. It has no caption control we can enforce,
   so it is sized and left alone — the compliance check for a SOURCED frame is
   in the template, which refuses to render one without its caption. */
.lw-tpl-entry__in img {
  height: auto;
  border-radius: var(--lw-radius);
}

.lw-tpl-entry__in a {
  color: var(--lw-green-dk);
  text-underline-offset: 3px;
}

/* ------------------------------------------------------ a featured image --- */

.lw-tpl-figure__f {
  margin: 0;
}

.lw-tpl-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lw-radius-lg);
  box-shadow: var(--lw-shadow);
}

/* The caption sits INSIDE the figure — §8 #32. A caption that has drifted out
   of its <figure> is not a caption, and alt.mjs fails the build for it. */
.lw-tpl-figure__f .lw-pgrid__cap {
  margin-top: var(--lw-s2);
}

/* ------------------------------------------- the plain list, page 2 onward --- */

.lw-tpl-list {
  list-style: none;
  margin: 0 0 var(--lw-s5);
  padding: 0;
  border-top: 1px solid var(--lw-line);
}

.lw-tpl-list__i {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lw-s2);
  padding: var(--lw-s3) 0;
  border-bottom: 1px solid var(--lw-line);
}

.lw-tpl-list__t {
  color: var(--lw-ink);
  font-family: var(--lw-display);
  font-size: var(--lw-h-sm);
  text-decoration: none;
}

.lw-tpl-list__t:hover,
.lw-tpl-list__t:focus-visible {
  color: var(--lw-green-dk);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ----------------------------------------------------------------- pager --- */

.lw-pager ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lw-s2);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.lw-pager a,
.lw-pager span {
  display: inline-block;
  min-width: 44px;               /* a tap target, not a number */
  padding: 10px 14px;
  border: 1px solid var(--lw-line-strong);
  border-radius: var(--lw-radius);
  text-align: center;
  text-decoration: none;
  color: var(--lw-ink);
}

.lw-pager a:hover,
.lw-pager a:focus-visible {
  border-color: var(--lw-green);
  color: var(--lw-green-dk);
}

.lw-pager .current {
  background: var(--lw-green);
  border-color: var(--lw-green);
  color: var(--lw-white);
}

/* ------------------------------------------------ previous / next update --- */

.lw-tpl-adjacent {
  display: grid;
  gap: var(--lw-s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .lw-tpl-adjacent { grid-template-columns: minmax(0, 1fr); }
}

.lw-tpl-adjacent__a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--lw-s3);
  border: 1px solid var(--lw-line);
  border-radius: var(--lw-radius-lg);
  background: var(--lw-white);
  text-decoration: none;
}

.lw-tpl-adjacent__a:hover,
.lw-tpl-adjacent__a:focus-visible {
  border-color: var(--lw-green);
  box-shadow: var(--lw-shadow-sm);
}

/* "Newer" reads right-to-left, the way a next link does everywhere else. */
.lw-tpl-adjacent__a--next {
  text-align: end;
  align-items: flex-end;
}

/* ----------------------------------------------------- editor-only notes --- */
/* Rendered only for a logged-in editor — LW_Template::admin_warning(). A
   logged-out visitor must never see the site talking about itself. */

.lw-tpl-warn {
  max-width: var(--lw-maxw-narrow);
  margin: var(--lw-s4) auto;
  padding: 14px 18px;
  border: 1px dashed var(--lw-amber);
  border-radius: var(--lw-radius);
  background: var(--lw-amber-lit);
  color: var(--lw-ink);
  font-size: 0.95rem;
}