/* ============================================================
   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_BereanSuccess.cfm

   Include ONCE in the site <head>:
     <link rel="stylesheet" href="/css/berean.css">
   then delete any per-template <style> blocks so the two forms
   can't drift apart again.
   ============================================================ */

.berean-box{
  /* --- Design tokens. Theme the whole component by overriding these.
     Dark mode: hook into the site's existing Light/Dark toggle, e.g.
       body.dark-mode .berean-box{
         --berean-bg-top:#1d2531; --berean-bg-bottom:#171e28;
         --berean-border:#2c3644; --berean-field-bg:#10161e;
         --berean-ink:#e5e7eb; --berean-ink-soft:#c9d1dc;
         --berean-ink-muted:#9aa4b2; --berean-brand:#7fb2e5;
         --berean-brand-dark:#a7cbee;
       }
     (Adjust the selector to whatever class/attribute the toggle sets.) */
  --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-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-brand); 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;
}

.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-brand);
  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-brand);
  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-brand); }

.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-brand);
  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-brand); 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-brand);
  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; }
}
