/* ==========================================================================
   Optivro ISPU Pages — oip-give.css (added 1.1.0)
   Shared base for the DONATE (.dn) and WAYS TO GIVE (.wg) widgets: tokens, scoped reset,
   eyebrow / headings / buttons / To-confirm tag, the Ways-to-Give accordion, reveal.
   Copied VERBATIM from the approved HTML (new-pages/source/donate/index.html v3 and
   ways-to-give/index.html v2). Every rule is scoped under .dn or .wg (each widget root is
   <div class="oip-scope dn|wg oip-dn-…|oip-wg-…">); nothing leaks.
   Plugin-only additions (marked): theme/kit resets learnt on live ispu.org (AMP 1.0.2),
   hover text colours that beat the kit's `a:hover`, the html.oip-anim reveal gate (instead
   of the HTML's html.dn-js / html.wg-js), editor-only markers.
   ========================================================================== */

.dn{
  --navy:#001D3A; --blue:#003278; --blue-2:#587AB5; --steel:#7AA1BF; --sky:#7BAAC9;
  --accent:#FF7043; --gold:#FFC03A; --mist:#EBEFF2; --cream:#F5F7FA; --border:#E4E8ED;
  --ink:rgb(25,25,35); --ink-2:rgb(45,45,45); --muted:#5B6776;
  --serif:"OrpheusPro Regular","orpheus pro",orpheus,Georgia,"Times New Roman",serif;
  --sans:Lato,"Helvetica Neue",Arial,sans-serif;
  --wrap:1200px; --gutter:clamp(20px,4vw,40px); --radius:14px;
  --shadow-sm:0 1px 2px rgba(0,29,58,.06),0 4px 14px rgba(0,29,58,.06);
  --shadow-md:0 10px 30px rgba(0,29,58,.10),0 2px 6px rgba(0,29,58,.06);
  --shadow-lg:0 30px 60px -20px rgba(0,29,58,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.6;font-size:16px;
}
.wg{
  --navy:#001D3A; --blue:#003278; --blue-2:#587AB5; --steel:#7AA1BF; --sky:#7BAAC9;
  --accent:#FF7043; --gold:#FFC03A; --mist:#EBEFF2; --cream:#F5F7FA; --border:#E4E8ED;
  --ink:rgb(25,25,35); --ink-2:rgb(45,45,45); --muted:#5B6776;
  --serif:"OrpheusPro Regular","orpheus pro",orpheus,Georgia,"Times New Roman",serif;
  --sans:Lato,"Helvetica Neue",Arial,sans-serif;
  --wrap:1200px; --gutter:clamp(20px,4vw,40px);
  --shadow-sm:0 1px 2px rgba(0,29,58,.06),0 4px 14px rgba(0,29,58,.06);
  --shadow-md:0 10px 30px rgba(0,29,58,.10),0 2px 6px rgba(0,29,58,.06);
  --shadow-lg:0 30px 60px -20px rgba(0,29,58,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.6;font-size:16px;
}

/* ---------- scoped reset (HTML) + theme/kit resets (plugin, same as the AMP widgets) ---------- */
.dn *,.dn *::before,.dn *::after,.wg *,.wg *::before,.wg *::after{box-sizing:border-box;}
.dn h1,.dn h2,.dn h3,.dn h4,.dn h5,.dn h6,.dn p,.dn ul,.dn ol,.dn li,.dn figure,.dn blockquote,.dn dl,.dn dd,
.wg h1,.wg h2,.wg h3,.wg h4,.wg h5,.wg h6,.wg p,.wg ul,.wg ol,.wg li,.wg figure,.wg blockquote,.wg dl,.wg dd{margin:0;padding:0;}
.dn h1,.dn h2,.dn h3,.dn h4,.dn h5,.dn h6,.wg h1,.wg h2,.wg h3,.wg h4,.wg h5,.wg h6{text-transform:none;}
.dn ul,.dn ol,.wg ul,.wg ol{list-style:none;}
.dn img,.wg img{max-width:100%;display:block;}
.dn a,.wg a{color:inherit;text-decoration:none;}
.dn a:hover,.dn a:focus,.wg a:hover,.wg a:focus{text-decoration:none;}
.dn [role="button"],.wg [role="button"]{cursor:pointer;-webkit-user-select:none;user-select:none;}
.dn :focus-visible,.wg :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* ==========================================================================
   DONATE — shared type, buttons (donate/index.html)
   ========================================================================== */
.dn .dn-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.dn .dn-sec{padding-block:clamp(72px,9vw,120px);}

.dn .dn-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);}
.dn .dn-eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px;}
.dn .dn-h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,52px);line-height:1.08;letter-spacing:-.5px;color:var(--navy);margin-top:18px;}
.dn .dn-h2 em{font-style:italic;color:var(--blue-2);}
.dn .dn-lede{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:var(--muted);max-width:620px;margin-top:16px;}
.dn .dn-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(32px,4.5vw,52px);}

.dn .dn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:16px 28px;border-radius:100px;border:2px solid transparent;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s,border-color .3s;}
.dn .dn-btn svg{width:16px;height:16px;flex:none;}
.dn .dn-btn:hover{transform:translateY(-2px);}
.dn .dn-btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(255,112,67,.65);}
.dn .dn-btn--accent:hover{background:#ff5f2c;color:#fff;}
.dn .dn-btn--navy{background:var(--navy);color:#fff;}
.dn .dn-btn--navy:hover{background:var(--blue);box-shadow:var(--shadow-md);color:#fff;}
.dn .dn-btn--line{border-color:var(--navy);color:var(--navy);}
.dn .dn-btn--line:hover{background:var(--navy);color:#fff;}
.dn .dn-btn--sm{font-size:12px;letter-spacing:1.2px;padding:12px 16px;white-space:normal;text-align:center;}

/* "To confirm" marker — Elementor editor only in the plugin */
.dn .dn-todo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#6B4E00;background:#FFE9A8;border:1px dashed #D9A300;border-radius:100px;padding:4px 10px;vertical-align:middle;white-space:nowrap;}
.dn .dn-todo::before{content:"!";display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#D9A300;color:#fff;font-size:10px;}

/* ==========================================================================
   WAYS TO GIVE — shared type, buttons, accordion (ways-to-give/index.html)
   ========================================================================== */
.wg .wg-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}

.wg .wg-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);}
.wg .wg-eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px;}

.wg .wg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:15px 26px;border-radius:100px;border:2px solid transparent;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s,border-color .3s;}
.wg .wg-btn svg{width:16px;height:16px;flex:none;}
.wg .wg-btn:hover{transform:translateY(-2px);}
.wg .wg-btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(255,112,67,.65);}
.wg .wg-btn--accent:hover{background:#ff5f2c;color:#fff;}
.wg .wg-btn--navy{background:var(--navy);color:#fff;}
.wg .wg-btn--navy:hover{background:var(--blue);box-shadow:var(--shadow-md);color:#fff;}
.wg .wg-btn--line{border-color:var(--navy);color:var(--navy);}
.wg .wg-btn--line:hover{background:var(--navy);color:#fff;}
.wg .wg-btn--sm{font-size:12px;letter-spacing:1.2px;padding:11px 18px;}

/* "To confirm" marker — Elementor editor only in the plugin */
.wg .wg-todo{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:10.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#6B4E00;background:#FFE9A8;border:1px dashed #D9A300;border-radius:100px;padding:4px 10px;vertical-align:middle;white-space:normal;line-height:1.3;}
.wg .wg-todo::before{content:"!";display:grid;place-items:center;flex:none;width:14px;height:14px;border-radius:50%;background:#D9A300;color:#fff;font-size:10px;}

/* centred column + section heading (options, at a glance, contact) */
.wg .wg-col{max-width:920px;margin:0 auto;}
.wg .wg-sec-head{margin-bottom:clamp(26px,3.5vw,40px);}
.wg .wg-h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,52px);line-height:1.08;letter-spacing:-.5px;color:var(--navy);margin-top:18px;}
.wg .wg-h2 em{font-style:italic;color:var(--blue-2);}
.wg .wg-sec-head .wg-todo{margin-top:12px;}

/* accordion — Giving options + Gift policy */
.wg .wg-acc{display:flex;flex-direction:column;gap:12px;counter-reset:wg;}
.wg .wg-acc-item{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;scroll-margin-top:24px;transition:box-shadow .3s,border-color .3s;}
.wg .wg-acc-item.is-open{box-shadow:var(--shadow-md);border-color:transparent;}
.wg .wg-acc-item.is-suggested{border-style:dashed;border-color:#D9A300;}
.wg .wg-acc-head{display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;user-select:none;}
.wg .wg-acc-head::before{counter-increment:wg;content:counter(wg,decimal-leading-zero);flex:none;width:34px;font-size:12px;font-weight:900;letter-spacing:1px;color:var(--steel);}
.wg .wg-acc-head h3{flex:1;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.9vw,23px);line-height:1.3;color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wg .wg-acc-ico{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--cream);color:var(--navy);transition:background .3s,color .3s,transform .4s var(--ease);}
.wg .wg-acc-ico svg{width:16px;height:16px;}
.wg .wg-acc-head:hover .wg-acc-ico{background:var(--mist);}
.wg .wg-acc-item.is-open .wg-acc-ico{background:var(--accent);color:#fff;transform:rotate(45deg);}
/* closed only on the live frontend with JS (html.oip-anim): in the editor and without JS every answer is visible */
.wg .wg-acc-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease);}
html.oip-anim .wg .wg-acc-body{grid-template-rows:0fr;}
html.oip-anim .wg .wg-acc-item.is-open .wg-acc-body{grid-template-rows:1fr;}
.wg .wg-acc-body > div{overflow:hidden;}
.wg .wg-acc-in{padding:0 24px 26px 72px;}
.wg .wg-acc-in > * + *{margin-top:14px;}
.wg .wg-acc-in p,.wg .wg-acc-in li{font-size:16px;line-height:1.75;color:var(--ink-2);}
.wg .wg-acc-in a:not(.wg-btn){color:var(--blue);font-weight:700;border-bottom:1px solid currentColor;}
.wg .wg-acc-in h4{font-size:12px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;color:var(--navy);margin-top:22px;}
/* 1.1.1: the site kit styles every h4 (OrpheusPro, 36px line height); the HTML's h4 inherits Lato + 1.6 — stated explicitly */
.wg .wg-acc-in h4{font-family:var(--sans);line-height:1.6;}
.wg .wg-acc-in ul li{position:relative;padding-left:20px;}
.wg .wg-acc-in ul li + li{margin-top:6px;}
.wg .wg-acc-in ul li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.wg .wg-acc-in ol{counter-reset:st;}
.wg .wg-acc-in ol > li{position:relative;padding-left:40px;}
.wg .wg-acc-in ol > li + li{margin-top:10px;}
.wg .wg-acc-in ol > li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;background:var(--navy);color:#fff;}

/* ---------- editor-only markers (plugin): items hidden for visitors stay visible, dimmed, in the editor ---------- */
.dn .is-hidden-live,.wg .is-hidden-live,.dn.is-hidden-live,.wg.is-hidden-live{opacity:.5;outline:2px dashed #D9A300;outline-offset:2px;}
.wg .wg-acc-item.is-hidden-live .wg-acc-head::before{counter-increment:none;content:"–";}

/* ==========================================================================
   REVEAL — hidden state only on the live frontend (html.oip-anim), never in the
   editor, never without JS. oip-core.js reveals everything if the observer doesn't
   run within 1.5 s. Uses `translate` (not transform) so hover lifts keep working.
   ========================================================================== */
html.oip-anim .dn .dn-rv,html.oip-anim .wg .wg-rv{opacity:0;translate:0 24px;transition:opacity .9s var(--ease),translate .9s var(--ease),transform .3s var(--ease),box-shadow .3s;}
html.oip-anim .dn .dn-rv.is-in,html.oip-anim .wg .wg-rv.is-in{opacity:1;translate:none;}
html.oip-anim .dn .dn-rv[data-d="1"],html.oip-anim .wg .wg-rv[data-d="1"]{transition-delay:.08s,.08s,0s,0s;}
html.oip-anim .dn .dn-rv[data-d="2"],html.oip-anim .wg .wg-rv[data-d="2"]{transition-delay:.16s,.16s,0s,0s;}

@media (max-width:680px){
  .wg .wg-acc-head{padding:18px 16px;gap:12px;}
  .wg .wg-acc-head::before{width:24px;}
  .wg .wg-acc-in{padding:0 18px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .dn *,.dn *::before,.dn *::after,.wg *,.wg *::before,.wg *::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important;}
}