/* ==========================================================================
   WordPress-only adjustments.

   fonts / tokens / base / site.css are kept identical to the prototype so
   fixes can be copied across either way. Anything the theme needs that the
   static build did not goes here.
   ========================================================================== */

/* --- Admin bar ---------------------------------------------------------- */
/* The header is fixed and already offset by the top banner (--banner-h); the
   admin bar adds to that rather than replacing it. Without the addition the
   header was drawn straight over the banner for logged-in users. */
/* The banner offset rides on the header's transform, so the admin bar only
   has to supply its own height here. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
/* Below 600px the admin bar scrolls away with the page, so a stuck header
   must not keep a gap for it. */
@media (max-width: 600px) {
  .admin-bar .site-header.is-stuck { top: 0; }
}

/* --- Archive filters are links now, not buttons ------------------------- */
/* Server-side filtering: each filter is a category archive URL. */
a.filter {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.filter[aria-current="page"] {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

/* --- Archives: the "Our thinking" band is a <p> there, not the H1 -------- */
/* The H1 moves to the section label (the category, tag or search), so every
   archive URL has its own H1. base.css gives h1-h4 the display face; a <p>
   needs it restated to look identical. */
p.page-head__title { font-family: var(--ff-display); }

/* Category/tag description, when one is set in the admin. */
.archive-desc {
  max-width: var(--measure);
  margin: calc(-1 * clamp(0.5rem, 2vw, 2rem)) 0 clamp(1.5rem, 3vw, 2.5rem);
  color: var(--c-ink-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.archive-desc p { margin: 0; }
.archive-desc p + p { margin-top: var(--sp-4); }

/* --- FAQ intro is a wysiwyg field, so it arrives as <div><p>… ---------- */
.faq__intro p { margin: 0; }
.faq__intro p + p { margin-top: var(--sp-4); }

/* --- Home intro / bio / case body: wysiwyg output inside stacks ---------- */
.u-stack > p:empty { display: none; }

/* --- Page-head intro: an empty trailing paragraph from the editor ------- */
.page-head__intro p:empty { display: none; }

/* --- 4-D thinking: real content replaces the placeholder text ----------- */
.diagram-slot > * { margin: 0; }
.diagram-slot > * + * { margin-top: var(--sp-4); }
.diagram-slot img { max-width: 100%; height: auto; }

/* --- 30 years: oEmbed player and optional timeline image ---------------- */
.video__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-navy-deep);
  outline: 1px solid rgba(255, 255, 255, 0.22);
}
.video__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.timeline__img {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  margin-top: var(--sp-6);
}

/* --- Editor content inside .post-body ----------------------------------- */
.post-body .u-wrap > .wp-block-image,
.post-body .u-wrap > .alignwide,
.post-body .u-wrap > .alignfull {
  max-width: min(100%, 64rem);
  margin: var(--sp-12) 0;
}
.post-body .wp-block-image img { display: block; width: 100%; height: auto; }
.post-body .wp-block-embed__wrapper iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.post-body .wp-block-quote,
.post-body blockquote {
  margin: var(--sp-12) 0;
  padding-left: var(--sp-6);
  border-left: 3px solid var(--c-cyan);
  color: var(--c-navy);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.post-body blockquote p { font-size: inherit; line-height: inherit; }
.post-body .wp-block-separator,
.post-body hr {
  border: 0;
  border-top: 1px solid var(--c-rule);
  margin: var(--sp-12) 0;
}
.post-body .alignleft { float: left; margin: 0 var(--sp-6) var(--sp-4) 0; }
.post-body .alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); }
.post-body .aligncenter { margin-inline: auto; }

/* WordPress's own screen-reader class, used by core markup (e.g. comments,
   pagination). Same rules as .u-sr-only. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}