/* ============================================================
   The Berean — shared signup component styles
   Single source of truth for:
     - inline card ........ dsp_BereanSignup.cfm
     - modal / slidebox ... dsp_BereanAd.cfm (+ dsp_BereanAdCore.cfm)
     - success fragment ... dsp_BereanAdSuccess.cfm
     - confirmation page .. dsp_BereanConfirmed.cfm
     - footer band ........ default.cfm (theberean.org)

   Include ONCE in each site's <head>:
     <link rel="stylesheet" href="https://a.theberean.org/berean.css">
   then delete any per-template <style> blocks so the placements
   can't drift apart again.
   ============================================================ */

.berean-box{
  /* --- Design tokens. Theme the whole component by overriding these.
     (theberean.org's toggle sets body.dark-mode; the live dark theme
     is defined at the bottom of this file.) */
  --berean-serif:Georgia,'Times New Roman',Times,serif;
  --berean-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --berean-brand:#004080;
  --berean-brand-dark:#00305f;
  --berean-accent:var(--berean-brand);   /* text/border/icon accents; splits from the fill color in dark mode */
  --berean-ink:#333;
  --berean-ink-soft:#374151;
  --berean-ink-muted:#4b5563;   /* was #6b7280 — darkened; old value sat at ~4.5:1 on the gradient's gray end */
  --berean-bg-top:#fefefe;
  --berean-bg-bottom:#f7f7f7;
  --berean-border:#e0e0e0;
  --berean-field-border:#cbd5e1;
  --berean-field-bg:#fff;
  --berean-error:#b91c1c;       /* 5.9:1 on white; the old inline color:red measured 4.0:1 and failed AA */
  --berean-error-bg:#fef2f2;
  --berean-focus:rgba(0,64,128,.4);

  max-width:480px; margin:0 auto; padding:2.2em 2em 1.6em;
  background:linear-gradient(to bottom,var(--berean-bg-top),var(--berean-bg-bottom));
  border:1px solid var(--berean-border); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  text-align:center; color:var(--berean-ink); box-sizing:border-box;
}

.berean-box .berean-logo{ max-width:190px; height:auto; margin:0 auto .6em; display:inline-block; }

.berean-box .berean-eyebrow{
  font:600 .8rem/1 var(--berean-sans);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--berean-ink-muted); margin:0 0 .35em;
}

.berean-box .berean-head{
  /* Georgia ships only 400/700; the old 600 forced synthesized faux-bold.
     700 renders the true bold cut on every platform. */
  font:700 1.7rem/1.2 var(--berean-serif);
  color:var(--berean-accent); margin:0 0 .5em;
}

.berean-box .berean-sub{
  font:1rem/1.55 var(--berean-sans);
  color:var(--berean-ink-soft); margin:0 auto 1em; max-width:34ch;
}

/* Isolated problem line (two-paragraph sub) — added in production 2026-07-16;
   tightens the pause between the problem sentence and the solution paragraph */
.berean-box .berean-problem{ margin-bottom:.35em; }

/* Sample issue — the component's "key visual": scripture voice in
   Georgia italic, attribution in the utility sans. */
.berean-box .berean-sample{
  margin:0 auto 1.1em; padding:.85em 1em; max-width:38ch;
  text-align:left; border-left:3px solid var(--berean-accent);
  border-radius:0 8px 8px 0; background:rgba(0,64,128,.05);
  font:italic 1rem/1.5 var(--berean-serif); color:var(--berean-ink-soft);
}
.berean-box .berean-sample cite{
  display:block; margin-top:.5em;
  font:600 .72rem/1.3 var(--berean-sans); font-style:normal;
  letter-spacing:.05em; text-transform:uppercase; color:var(--berean-ink-muted);
}

.berean-box form{ margin:0; }

.berean-box input[type=email]{
  width:100%; box-sizing:border-box; padding:.85em 1em;
  font:1rem var(--berean-sans);   /* keep >=16px: smaller triggers iOS auto-zoom */
  color:var(--berean-ink); background:var(--berean-field-bg);
  border:1px solid var(--berean-field-border); border-radius:8px;
  margin-bottom:.75em; box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
  transition:border-color .15s, box-shadow .15s;
}
.berean-box input[type=email]:focus{
  outline:none; border-color:var(--berean-accent);
  box-shadow:0 0 0 3px rgba(0,64,128,.15);
}

/* Primary CTA carries its own class so the success state's version
   buttons (also type=submit) don't inherit it. */
.berean-box .berean-cta{
  width:100%; box-sizing:border-box; padding:.9em 1.2em;
  color:#fff; font:600 1.05rem var(--berean-sans);
  background:var(--berean-brand); border:none; border-radius:8px; cursor:pointer;
  transition:background-color .18s, transform .05s;
}
.berean-box .berean-cta:hover{ background:var(--berean-brand-dark); }
.berean-box .berean-cta:active{ transform:translateY(1px); }
.berean-box .berean-cta:focus-visible{ outline:3px solid var(--berean-focus); outline-offset:2px; }

.berean-box .berean-fineprint{
  font:.85rem/1.4 var(--berean-sans); color:var(--berean-ink-muted); margin:.9em 0 0;
}

.berean-box .berean-error{
  margin:.75em 0 0; padding:.6em .8em; text-align:left;
  font:.9rem/1.45 var(--berean-sans); color:var(--berean-error);
  background:var(--berean-error-bg); border:1px solid currentColor; border-radius:8px;
}

.berean-box .visually-hidden{ position:absolute; width:1px; height:1px; clip:rect(0 0 0 0); overflow:hidden; }

/* --- Modal variant -------------------------------------------- */
.berean-modal{ position:relative; }
/* If the surrounding slidebox already draws its own panel, flatten
   the card chrome:  .berean-modal{ background:none; border:none; box-shadow:none; } */

.berean-modal .berean-close{
  position:absolute; top:.35em; right:.35em;
  width:44px; height:44px;   /* full-size touch target */
  border:none; background:transparent; border-radius:8px;
  font:1.5rem/1 var(--berean-sans); color:var(--berean-ink-muted); cursor:pointer;
}
.berean-modal .berean-close:hover{ background:rgba(0,0,0,.06); color:var(--berean-ink); }
.berean-modal .berean-close:focus-visible{ outline:3px solid var(--berean-focus); outline-offset:2px; }

/* --- Success / confirmation states ------------------------------ */
.berean-box .berean-check,
.berean-box .berean-icon{ display:block; margin:0 auto .5em; color:var(--berean-accent); }

.berean-box .berean-versions{ display:flex; flex-wrap:wrap; gap:.5em; margin:.5em 0 .6em; }
.berean-box .berean-versions button{
  flex:1 1 45%; padding:.65em .5em;
  font:600 .9rem var(--berean-sans); color:var(--berean-accent);
  background:var(--berean-field-bg); border:1px solid var(--berean-field-border);
  border-radius:8px; cursor:pointer;
  transition:background-color .15s, border-color .15s;
}
.berean-box .berean-versions button:hover{ border-color:var(--berean-accent); background:rgba(0,64,128,.06); }
.berean-box .berean-versions button:focus-visible{ outline:3px solid var(--berean-focus); outline-offset:2px; }
.berean-box .berean-versions button[aria-pressed=true]{
  background:var(--berean-brand); border-color:var(--berean-brand); color:#fff;
}

.berean-box .berean-linkbtn{
  margin-top:.9em; padding:.4em .6em;
  background:none; border:none; border-radius:6px;
  font:600 .9rem var(--berean-sans); color:var(--berean-accent);
  text-decoration:underline; cursor:pointer;
}
.berean-box .berean-linkbtn:focus-visible{ outline:3px solid var(--berean-focus); outline-offset:2px; }

@media (max-width:480px){
  .berean-box{ padding:1.6em 1.2em 1.2em; }
  .berean-box .berean-head{ font-size:1.45rem; }
}

@media (prefers-reduced-motion:reduce){
  .berean-box *, .berean-box .berean-cta{ transition:none !important; }
}

/* --- Dark theme (theberean.org's toggle sets body.dark-mode) ----------
   Fill/accent split: large fills (CTA, pressed version buttons) use a
   muted mid-tone blue so they sit IN the dark scheme instead of glowing
   on top of it; text accents (headline, borders, icons, links) use a
   soft, low-chroma light blue. Checked: white CTA text on #3a70a5 is
   4.8:1 (AA); button fill vs card is 3.2:1 (WCAG 1.4.11); #9dc1e4
   headline on the card is ~8:1. */
body.dark-mode .berean-box{
  --berean-bg-top:#1d2531;
  --berean-bg-bottom:#171e28;
  --berean-border:#2c3644;
  --berean-field-bg:#10161e;
  --berean-field-border:#3a4656;
  --berean-ink:#e5e7eb;
  --berean-ink-soft:#c9d1dc;
  --berean-ink-muted:#9aa4b2;
  --berean-brand:#3a70a5;        /* fills: muted mid-tone, white text stays */
  --berean-brand-dark:#2f5d8a;   /* hover: darkens, matching light-mode behavior */
  --berean-accent:#9dc1e4;       /* accents: soft light blue, low chroma */
  --berean-error:#f2a6a6;
  --berean-error-bg:#3a1d1d;
  --berean-focus:rgba(157,193,228,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
body.dark-mode .berean-box input[type=email]:focus{ box-shadow:0 0 0 3px rgba(157,193,228,.22); }
body.dark-mode .berean-box .berean-sample{ background:rgba(157,193,228,.09); }
/* If bereanlogo-2.png is dark-on-transparent it will vanish on the dark card.
   Ship a light logo variant, or as a stopgap:
body.dark-mode .berean-box .berean-logo{ filter:brightness(0) invert(.92); } */

/* --- Footer band (default.cfm) ---------------------------------------- */
.berean-footer-band{
  padding:3.5em 1em;
  background:#f3ede4;   /* quiet parchment nod to the brand's tan heritage */
  border-top:1px solid #e0e0e0;
}
body.dark-mode .berean-footer-band{ background:#181d24; border-top-color:#2c3644; }

/* Optional Bible-version select (footer fallback; commented in the markup) */
.berean-box .berean-select{
  width:100%; box-sizing:border-box; padding:.8em 1em; margin-bottom:.75em;
  font:1rem var(--berean-sans); color:var(--berean-ink);
  background:var(--berean-field-bg); border:1px solid var(--berean-field-border);
  border-radius:8px;
}

@media (max-width:480px){
  .berean-footer-band{ padding:2.25em .75em; }
}
