/* ═══════════════════════════════════════════════════════════════════
   ZALI theme: WordPress-only additions.
   zali.css stays a copy of the static site's file; anything WordPress
   needs on top of it goes here. Loaded after zali.css, front end and
   editor canvas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Screen reader text (WordPress core markup uses this class) ──── */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;word-wrap:normal !important;
}
.screen-reader-text:focus{
  clip:auto !important;clip-path:none;width:auto;height:auto;z-index:100000;
  top:5px;left:5px;padding:12px 20px;background:var(--paper);color:var(--ink);
  font-size:14px;font-weight:700;border-radius:var(--r-pill);
}

/* ── Admin bar ───────────────────────────────────────────────────────
   Logged-in users get the WordPress bar fixed at the top: 32px, 46px at
   782px and below. At 600px and below it scrolls away with the page, so
   sticky things go back to top:0 there. --zali-wpbar is the offset. */
body.admin-bar{--zali-wpbar:32px}
@media screen and (max-width:782px){body.admin-bar{--zali-wpbar:46px}}
@media screen and (max-width:600px){body.admin-bar{--zali-wpbar:0px}}

body.admin-bar .bb-nav{top:var(--zali-wpbar)}
body.admin-bar .mnav{top:calc(var(--nav-vis) + 12px + var(--zali-wpbar))}
body.admin-bar .srch{top:var(--zali-wpbar)}
body.admin-bar .bb-md-drawer{top:var(--zali-wpbar);height:calc(100dvh - var(--zali-wpbar))}
@media (min-width:901px){
  body.admin-bar .mdet-media{top:calc(var(--nav-vis) + 86px + var(--zali-wpbar))}
}

/* Skip link sits under the bar; on phones the bar is at the top of the
   page when the skip link is first focused, so clear it there too. */
body.admin-bar .skip{top:calc(12px + var(--zali-wpbar))}
@media screen and (max-width:600px){
  body.admin-bar .skip{top:58px}
  /* The phone drawer opens over the scrolled-away bar's space. */
  body.admin-bar .bb-md-overlay{z-index:100000}
  body.admin-bar .bb-md-drawer{z-index:100001}
}

/* In-page anchors land below the nav and the bar. */
html:has(>body.admin-bar){scroll-padding-top:calc(var(--nav-h) + 50px)}
html:has(>body.admin-bar):has(.mnav){scroll-padding-top:calc(var(--nav-h) + 118px)}
@media screen and (max-width:782px){
  html:has(>body.admin-bar){scroll-padding-top:calc(var(--nav-h) + 64px)}
  html:has(>body.admin-bar):has(.mnav){scroll-padding-top:calc(var(--nav-h) + 132px)}
}
@media screen and (max-width:600px){
  html:has(>body.admin-bar){scroll-padding-top:calc(var(--nav-h) + 18px)}
  html:has(>body.admin-bar):has(.mnav){scroll-padding-top:calc(var(--nav-h) + 86px)}
}

/* ── Block content ───────────────────────────────────────────────────
   Section blocks print their own markup straight into <main>. Stray
   empty paragraphs from the editor are hidden. */
#main>p:empty{display:none}

/* ── Plain link list (index.php, the fallback listing) ────────────── */
.zali-stub-links{display:grid;gap:4px;margin-top:12px;font-size:var(--fs-sm);color:var(--t-body)}
.zali-stub-links a{display:inline-block;padding-block:6px;transition:color .2s}
.zali-stub-links a:hover{color:var(--accent-text)}
.zali-stub-links span{margin-left:6px;font-size:13px;color:var(--t-mute)}

/* ── Plain pages (no ZALI section blocks): a readable text column ─── */
.page-body-sec{padding-top:clamp(8px,1.2vw,16px)}
.page-body{max-width:70ch;font-size:var(--fs-body);line-height:1.7;color:var(--t-body)}
.page-body>*+*{margin-top:1em}
.page-body h2,.page-body h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:1;color:var(--t-strong);margin-top:1.6em}
.page-body h2{font-size:var(--fs-d3)}
.page-body h3{font-size:var(--fs-d4)}
.page-body ul,.page-body ol{padding-left:1.3em}
.page-body ul{list-style:disc}
.page-body a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* ── Closing band picture (zali/cta-band, picture layout) ─────────── */
.cta-media{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}