/* tok-a11y 1014: shared readability layer for every tok site (loaded after the site's own CSS).
   Lifts dim text, borders, tabs, footer links and buttons to WCAG AA (4.5:1 text, 3:1 large text / UI) without
   changing each site's look, and styles the centred Sponsor dialog (tok-a11y.js). Same file on every site. */

/* ---------- 1. Form fields (all sites): visible edge and readable placeholder, in the field's own text colour ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]),
textarea, select {
  border-color: color-mix(in srgb, currentColor 62%, transparent) !important;
}
input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, currentColor 72%, transparent) !important;
  opacity: 1 !important;
}

/* ---------- 2. Sponsor page centred on the engine sites (JesusTok, AngelTok, DivineTok, BibVid) ---------- */
.sponsor-page { margin-inline: auto !important; }
.sponsor-page .sp-chips, .sponsor-page .sp-month { justify-content: flex-start; }

/* ---------- 3. JesusTok + AngelTok (tokv15 engine): footer, tabs, counts, meta text ---------- */
body.jt footer.foot, body.jt footer.foot a, body.jt footer.foot span { color: rgba(243, 234, 219, .88) !important; }
body.jt nav.tabs a:not([aria-current]), body.jt .tabbar a:not([aria-current=page]) { color: rgba(243, 234, 219, .86) !important; }
body.jt .tok-filter small, body.jt button > small { opacity: 1 !important; color: rgba(243, 234, 219, .8) !important; }
body.jt .muted, body.jt .small.muted { color: rgba(243, 234, 219, .82) !important; }
body.jt .solo-src, body.solo-page .solo-card .solo-src { opacity: 1 !important; color: rgba(255, 250, 240, .84) !important; }
/* home page (desktop): the fixed link row at the bottom ran over the feed, the Radio bar and the network strip.
   Give it a dark band, keep it clear of the Radio bar, and leave room under the network strip. */
@media (min-width: 900px) {
  body.home:is(.jt, .at) { padding-bottom: 56px; }
  body.home.jt footer.foot { bottom: 0 !important; padding: 10px 16px 10px 196px !important; background: linear-gradient(to top, rgba(7, 8, 12, .96), rgba(7, 8, 12, .82)); }
  body.home.at footer.foot { bottom: 0 !important; padding: 10px 16px 10px 196px !important; background: linear-gradient(to top, rgba(245, 247, 252, .97), rgba(245, 247, 252, .86)); }
}

/* AngelTok is a light theme */
body.at footer.foot, body.at footer.foot a, body.at footer.foot span { color: rgba(24, 32, 58, .86) !important; }
body.at .tabbar a:not([aria-current=page]) { color: rgba(24, 32, 58, .84) !important; }
body.at .tabbar a[aria-current=page] { color: #1d4f8c !important; }
body.at .tabbar a.tb-share { color: #14213d !important; }
body.at .page-kicker, body.at .p-k, body.at .at-who, body.at span.word > b, body.at .enc-acts .btn.sm { color: #6f5310 !important; }
body.at p > a.btn.sm { color: #14213d !important; }
body.at .solo-src { opacity: 1 !important; }
body.at .at-label { color: rgba(20, 27, 51, .86) !important; }
/* AngelTok single-saying page: the card is a dark photo, so its words are light */
body.at .solo-card .solo-text, body.at .solo-card .solo-text p, body.at .solo-card blockquote p { color: #fbf8f1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
body.at .solo-card figcaption, body.at .solo-card .solo-src { color: rgba(255, 255, 255, .86) !important; }
body.at .solo-card figcaption b { color: #a9cbff !important; }
/* the floating Radio | Ask bar sat white-on-white on AngelTok */
body.at #tokRadio .trBar, body.at .trBar { background: #1b2440 !important; border-color: #c9a24a !important; }
body.at .twn-pill { color: #fff !important; }

/* ---------- 4. DivineTok + BibVid (React app + chat pages) ---------- */
[data-brand=divinetok], .b-divinetok { --dim: #aeaac6; --muted: #c4c0d8; }
[data-brand=bibvid], .b-bibvid { --dim: #aaa293; --muted: #c6bead; }
[data-brand] footer, [data-brand] footer span, [data-brand] footer p, [data-brand] .shareRow > span { color: var(--muted) !important; opacity: 1 !important; }
[data-brand] .dtChipRow .dtAuto { color: #1a1308 !important; }
[data-brand] .oNowB button.on { color: #fff3d6 !important; }
[data-brand] .rStoryT small, [data-brand] .fTile > span, [data-brand] .rCrumbs span { color: var(--muted) !important; }

/* ---------- 5. Article-style tok sites (CatholicTok, HellTok, JewTok, MuslimTok, ApologeticTok, BuddhistTok, MormonTok, ScientologyTok) ---------- */
/* (scope: not the engine sites above: no data-brand on <html>, no jt/at/chat-body class on <body>) */
/* weekly-email card in the dark footer: its heading took the footer's pale colour on a cream card (HellTok's card is dark: left alone) */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body):not([data-site=helltok]) footer.foot form.card :is(h2, h3, .h2-sm) { color: #1e2230 !important; }
/* "Send a question or correction" link sits on the dark ask panel */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) .qs-note .linkbtn { color: #cfe0ff !important; text-decoration: underline; }
/* header tag line under the logo (light header) */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) header a.brand small { color: #4a4e5e !important; }
/* HellTok: dark text on the red What's new pill */
body[data-site=helltok] .twn-pill { color: #fff !important; }
/* words over hero photos: brighter gold plus a dark halo so they read on any part of the picture */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero :is(.eyebrow, .eyebrow-gold, .lead, h1, .hero-verse, .hero-verse span, .hero-heb, .cta .btn-ghost) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .75);
}
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero :is(.eyebrow-gold, .hero-verse, .hero-heb) { color: #f8e2a2 !important; }
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero .hero-verse span { color: #fff1e6 !important; }
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero .cta .btn-ghost { background-color: rgba(10, 12, 20, .55) !important; }

/* ---------- 6. Sponsor dialog (tok-a11y.js) ---------- */
html.tka-lock { overflow: hidden; }
dialog.tka-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: transparent; color: inherit;
  overflow: auto; overscroll-behavior: contain; box-sizing: border-box;
}
dialog.tka-modal[open] { display: grid; place-items: center; }
dialog.tka-modal::backdrop { background: rgba(4, 6, 12, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tka-box {
  position: relative; box-sizing: border-box; width: 100%; max-width: 600px;
  max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 52px 24px 24px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  text-align: left;
}
@supports not (height: 100dvh) { .tka-box { max-height: calc(100vh - 32px); } }
.tka-x {
  position: sticky; top: 0; float: right; margin: -40px -12px 0 0; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  background: inherit; background-color: color-mix(in srgb, currentColor 10%, transparent); color: inherit;
}
.tka-x:hover { background-color: color-mix(in srgb, currentColor 18%, transparent); }
.tka-x:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.tka-body { clear: none; }
.tka-body .tka-content { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; min-height: 0 !important; }
.tka-body .tka-content .wrap, .tka-body .tka-content .narrow { max-width: none !important; padding-inline: 0 !important; margin: 0 !important; }
.tka-body h1, .tka-body h2 { margin-top: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.15; }
.tka-body .btnrow a[href="/"] { display: none; }
.tka-load { text-align: center; }
@media (max-width: 420px) { dialog.tka-modal { padding: 10px; } .tka-box { padding: 50px 16px 18px; max-height: calc(100dvh - 20px); border-radius: 16px; } }