/* Fixed behind all page content, same proven pattern as the Music page's earlier "Dot Field"
   background (since removed, but the mechanism itself worked fine — see PROGRESS.md).
   js/iridescence.js appends the actual <canvas> to this. */
.iridescence-bg {
  position: fixed;
  inset: 0;
  /* Load-bearing, not decorative: a positioned element with z-index left at auto still paints
     ABOVE normal in-flow content regardless of DOM order (position, not z-index value, is what
     moves it out of the "in-flow" painting step) — confirmed directly, this covered every page
     element until z-index:-1 was added. Negative z-index is what actually drops it behind normal
     content again, matching the proven Music-page "Dot Field" background this pattern is copied
     from. */
  z-index: -1;
}

.iridescence-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The nav has no background of its own (see base.css's own note on .site-nav) — it normally just
   shows through whatever body happens to be. Pinned back to the sitewide white/dark-text look
   here specifically, same override (and same reasoning) as every other page with a non-default
   background (Videos' black page, the Lyrics detail template's per-album colours) — otherwise
   the moving iridescent colours would bleed through the nav bar too. */
body[data-page="news"] .site-nav {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Sitewide h1 rule goes grey (base.css) — overridden back to plain black here per request, same
   pattern as the Bio page's own explicit h1 override. */
body[data-page="news"] h1 {
  color: var(--color-text);
}

/* Makes the Threads embed the only thing on this page that scrolls, instead of the embed forcing
   the whole *page* to grow past the viewport too (its own internal feed already scrolls on its
   own). A first pass measured "available space" in JS and set the iframe's height to match —
   works, but is fundamentally a snapshot: it can only be as correct as whatever moment it happened
   to run at, and re-measuring on every plausible trigger (load, resize, partials finishing) still
   isn't the same guarantee as a layout that's simply always correct. This does the equivalent with
   plain flexbox instead: body is exactly one viewport tall and a column flex container; nav and
   footer (flex-shrink:0) keep their natural size; main and, inside it, .news-page__feed both
   stretch to absorb whatever's actually left (flex:1 1 auto + min-height:0 — the min-height reset
   is what lets a flex item shrink below its content's intrinsic size instead of forcing its parent
   to grow around it, the usual reason a "flex:1" alone doesn't do what you'd expect); the iframe
   then just fills that fully-resolved height at 100%. No JS, no measurement, no timing window
   where it can be wrong. */
body[data-page="news"] {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

body[data-page="news"] > [data-include] {
  flex-shrink: 0;
}

body[data-page="news"] main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body[data-page="news"] main > h1,
body[data-page="news"] .news-page__socials {
  flex-shrink: 0;
}

.news-page__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.news-page__socials a {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--color-text);
  transition: color 0.4s ease 0.1s;
}

.news-page__socials a:hover,
.news-page__socials a:focus-visible {
  color: var(--color-accent);
  transition-duration: 0.2s;
  transition-delay: 0s;
}

.news-page__socials svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Centres whatever embed widget currently lives here — a no-op for the current SociableKit
   iframe (width:100%, so it already fills the row), but kept because the News page has already
   swapped embeds twice this project (X's widget, then Facebook's Page Plugin) before landing on
   this one, and both of those rendered their own fixed-width box rather than anything fluid —
   without this, a fixed-width embed sits stranded at the page's own left edge, the same
   left-aligned default every other block-level element on the page gets. flex:1 1 auto +
   min-height:0 is the other half of the no-page-scroll layout above — this is what actually
   stretches to fill whatever's left inside <main>, with the iframe then just matching it at
   height:100%. */
.news-page__feed {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

.news-page__feed iframe {
  height: 100%;
  /* A floor, not a target — on an unusually short viewport (a landscape phone, say) flex would
     otherwise happily shrink this all the way to 0 to keep the page scroll-free. Past this point
     it's better to let the page grow past the viewport and fall back to an ordinary page scroll
     (the widget's own internal scroll still works fine inside that) than to render an invisible
     widget with nothing on screen explaining why. */
  min-height: 300px;
}