/* site.css -- the site-wide enhancement layer (2026-09-23, WO38242).
 *
 * Loaded on EVERY page, on every host, AFTER davar-site.css and BEFORE the per-subdomain skin.
 * /assets/skins/* is cache-exempt (davar_http.c is_skin): editing this file ships on the next
 * request -- no ?v= bump, no rebuild, no binary swap. For pages the R510 serves, also run
 * `py C:\Projects\tmp\site_publish.py publish` so its copy updates.
 *
 * Body hooks (davar_http_render.c): .dm-p-<page>  .dm-v-<subdomain>  .dm-has-q (URL has ?query)
 * Rule: CSS only. The site is server-rendered with NO client JS -- keep it that way.
 */

/* ── 1. Readability: the muted grey passed WCAG (6.2:1) but read dim in small italics ── */
:root { --muted: #a3adba; }                       /* ~8.3:1 on --bg */
body { text-rendering: optimizeLegibility; }
.dm-section-body { line-height: 1.75; }
h1, h2, h3, .dm-section-title { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(240, 201, 99, .28); color: #fff; }

/* ── 2. The opening scripture band sat flush against the window edge on desktop while every
 *       section below sits in the centred 1100px column. Put it in the same column. ── */
.dm-scripture-anchor,
.dm-scripture-orig-anchor,
.dm-scripture-anchor-en {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 2rem;
  box-sizing: border-box;
}
.dm-scripture-anchor { letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; color: var(--muted); }
.dm-scripture-anchor-en { color: #c3cad4; font-size: 1.02rem; line-height: 1.7; }

/* ── 3. Verse pages: /bible?ref=… opened with the hub's banner verse (Psalm 119:105) before the
 *       verse the reader asked for. On a query page, the requested verse comes first. ── */
body.dm-has-q.dm-p-bible .dm-scripture-anchor,
body.dm-has-q.dm-p-bible .dm-scripture-orig-anchor,
body.dm-has-q.dm-p-bible .dm-scripture-anchor-en,
body.dm-has-q.dm-p-bible-reader .dm-scripture-anchor,
body.dm-has-q.dm-p-bible-reader .dm-scripture-orig-anchor,
body.dm-has-q.dm-p-bible-reader .dm-scripture-anchor-en { display: none; }
body.dm-has-q.dm-p-bible #main { padding-top: 76px; }   /* clear the fixed nav the band used to */

/* ── 4. Keyboard users: a visible, on-brand focus ring everywhere ── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
a { text-underline-offset: .18em; }

/* ── 5. Respect people who ask for less motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── 6. HOME: "The Web of Scripture" hero ─────────────────────────────────────────────────────
 *  The first section is "The whole Bible, open to everyone", drawn over every cross-reference in
 *  dave_bible.db (395,950 arcs; generator C:\Projects\tmp\_web_of_scripture.py). Scoped to the home
 *  page two ways: the body class, and :has() on the home-only caption anchor. */
body.dm-p-home .dm-corridor-grid-section,
main:has(> #sec-web_of_scripture) > .dm-corridor-grid-section {
  max-width: none;
  margin: 0;
  padding: clamp(5.5rem, 13vw, 10rem) 2rem clamp(3rem, 6vw, 5rem);
  text-align: center;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(2,5,7,.15) 18%, rgba(2,5,7,0) 45%, rgba(2,5,7,.25) 80%, var(--bg) 100%),
    url("/assets/dncz_web_of_scripture.webp") center 88% / cover no-repeat,
    var(--bg);
  border-bottom: 1px solid rgba(240, 201, 99, .08);
}
body.dm-p-home .dm-corridor-grid-section .dm-section-title,
main:has(> #sec-web_of_scripture) > .dm-corridor-grid-section .dm-section-title {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #fff7d9;
  text-shadow: 0 2px 30px rgba(0,0,0,.85), 0 0 60px rgba(240,201,99,.18);
  max-width: 16ch;
  margin: 0 auto 1.4rem;
}
body.dm-p-home .dm-cg-body,
main:has(> #sec-web_of_scripture) > .dm-corridor-grid-section .dm-cg-body {
  max-width: 44rem;
  margin: 0 auto 2.6rem;
  color: #dfe4ea;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
body.dm-p-home .dm-corridor-grid,
main:has(> #sec-web_of_scripture) > .dm-corridor-grid-section .dm-corridor-grid {
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
}
body.dm-p-home .dm-corridor-card,
main:has(> #sec-web_of_scripture) > .dm-corridor-grid-section .dm-corridor-card {
  background: rgba(8, 12, 18, .62);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(240, 201, 99, .18);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
body.dm-p-home .dm-corridor-card:hover,
main:has(> #sec-web_of_scripture) > .dm-corridor-grid-section .dm-corridor-card:hover {
  border-color: rgba(240, 201, 99, .55);
  background: rgba(12, 17, 25, .78);
  transform: translateY(-2px);
}
/* the caption: small, quiet, right under the image, credits the CC BY 4.0 data */
#sec-web_of_scripture + .dm-section { padding-top: .6rem; padding-bottom: 2.5rem; }
#sec-web_of_scripture + .dm-section .dm-section-title:empty { display: none; }
#sec-web_of_scripture + .dm-section .dm-section-body {
  max-width: 46rem; margin: 0 auto; text-align: center;
  font-size: .82rem; line-height: 1.6; color: var(--muted); font-style: italic;
}
@media (max-width: 640px) {
  body.dm-p-home .dm-corridor-grid-section,
  main:has(> #sec-web_of_scripture) > .dm-corridor-grid-section {
    padding: 4.5rem 20px 2.5rem;
    background:
      linear-gradient(to bottom, rgba(2,5,7,.55) 0%, rgba(2,5,7,.2) 35%, rgba(2,5,7,.85) 80%, var(--bg) 100%),
      url("/assets/dncz_web_of_scripture_mobile.webp") center top / cover no-repeat,
      var(--bg);
  }
}

/* ── 7. VERSE PAGES (/bible?ref=…) — the flagship ─────────────────────────────────────────────
 *  The words themselves came AFTER two long context panels ("When", "Dated Events"), so a reader
 *  scrolled past essays to reach the Greek. Visual order is now: reference → the verse → the
 *  original words → how to read them → context. CSS `order` only; the DOM is untouched. */
body.dm-p-bible.dm-has-q #interlinear-section { display: flex; flex-direction: column; }
body.dm-p-bible.dm-has-q #interlinear-section > * { order: 20; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-interlinear-eyebrow      { order: 1; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-section-title            { order: 2; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-bible-kjv                { order: 3; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-plumbline                { order: 4; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-interlinear-lang-label   { order: 5; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-interlinear              { order: 6; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-section-body             { order: 7; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-il-notice                { order: 8; }
body.dm-p-bible.dm-has-q #interlinear-section > #verse-date                  { order: 9; }
body.dm-p-bible.dm-has-q #interlinear-section > #verse-events                { order: 10; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-drawer                   { order: 11; }

body.dm-p-bible.dm-has-q #interlinear-section > .dm-section-title {
  text-align: center; font-size: clamp(2.3rem, 5.2vw, 3.6rem); margin-bottom: .6rem; color: #fff7d9;
}
body.dm-p-bible.dm-has-q .dm-interlinear-eyebrow { text-align: center; }
/* the verse, set as the centrepiece */
body.dm-p-bible.dm-has-q #interlinear-section > .dm-bible-kjv {
  max-width: 46rem; margin: .4rem auto 1rem; padding: 1.5rem 1.2rem;
  font-size: clamp(1.28rem, 2.5vw, 1.72rem); line-height: 1.55; font-style: normal;
  text-align: center; color: #fff7d9; background: none;
  border: 0; border-top: 1px solid rgba(240,201,99,.22); border-bottom: 1px solid rgba(240,201,99,.22);
}
body.dm-p-bible.dm-has-q .dm-bible-kjv-tag { font-size: .62em; letter-spacing: .08em; color: var(--muted); }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-plumbline { justify-content: center; text-align: center; margin: 0 auto 2rem; }
body.dm-p-bible.dm-has-q #interlinear-section > .dm-interlinear-lang-label {
  text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  color: rgba(240,201,99,.8); margin-bottom: 1rem;
}
body.dm-p-bible.dm-has-q #interlinear-section > .dm-section-body {
  text-align: center; font-size: .88rem; max-width: 40rem; margin: 1.2rem auto 2.4rem;
}
/* word cards */
body.dm-p-bible .dm-interlinear { max-width: 1060px; gap: .7rem; }
body.dm-p-bible .dm-interlinear[lang="he"] { direction: rtl; }
body.dm-p-bible .dm-il-word {
  min-width: 104px; padding: .85rem .75rem .75rem; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  background: rgba(10, 14, 20, .72); border: 1px solid rgba(240, 201, 99, .14);
  transition: border-color .2s ease, transform .2s ease;
}
body.dm-p-bible .dm-il-word:hover, body.dm-p-bible .dm-il-word:focus-within {
  border-color: rgba(240, 201, 99, .5); transform: translateY(-2px);
}
body.dm-p-bible .dm-il-orig { font-size: 1.95rem; line-height: 1.25; color: #fff7d9; margin-bottom: .15rem; }
body.dm-p-bible .dm-il-tr { font-style: italic; font-size: .8rem; }
body.dm-p-bible .dm-il-gloss { font-size: .94rem; font-weight: 600; color: #e8e8f0; }
/* OT data carries full Strong's definitions in the gloss slot ("the first, in place, time, order or
   rank (specifically…") — wrap them inside a sane card width instead of stretching the card */
body.dm-p-bible .dm-il-gloss { max-width: 12rem; white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.3; }
body.dm-p-bible .dm-interlinear[lang="he"] .dm-il-gloss { font-size: .82rem; font-weight: 500; }
body.dm-p-bible .dm-il-strongs {
  display: inline-block; margin-top: .4rem; padding: .08rem .55rem; border-radius: 999px;
  border: 1px solid rgba(240, 201, 99, .35); font-size: .7rem; letter-spacing: .04em;
  text-decoration: none; color: var(--gold);
}
body.dm-p-bible .dm-il-strongs:hover { background: rgba(240, 201, 99, .12); }
body.dm-p-bible .dm-il-morph { font-size: .66rem; max-width: 140px; margin-top: .3rem; text-align: center; }
/* context panels read as quiet cards under the words */
body.dm-p-bible.dm-has-q #verse-date, body.dm-p-bible.dm-has-q #verse-events {
  max-width: 46rem; width: 100%; margin-inline: auto; box-sizing: border-box;
}
@media (max-width: 640px) {
  /* phones: an even grid instead of ragged flex rows (one oversized card per row read as broken) */
  /* flex items default to min-width:auto and could not shrink below their content -> a 4th column
     was clipped at the screen edge. Let every child of the verse section shrink to the column. */
  body.dm-p-bible.dm-has-q #interlinear-section > * { min-width: 0; max-width: 100%; }
  body.dm-p-bible .dm-interlinear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; }
  body.dm-p-bible .dm-il-word { min-width: 0; padding: .65rem .3rem .55rem; }
  /* never break a Greek/Hebrew word mid-word; scale it to the card instead */
  body.dm-p-bible .dm-il-orig { font-size: clamp(.98rem, 5vw, 1.25rem); word-break: keep-all; overflow-wrap: normal; white-space: nowrap; }
  body.dm-p-bible .dm-il-gloss { font-size: .8rem; }
  body.dm-p-bible .dm-il-morph { display: none; }   /* grammar detail stays one tap away on the Strong's page */
}

/* ── phones ── */
@media (max-width: 640px) {
  .dm-scripture-anchor, .dm-scripture-orig-anchor, .dm-scripture-anchor-en { padding-inline: 20px; }
}