/* chokinghazard.org: the Donate button in the menu bar, and the Donate page.
   Uses the site's own tokens from site.css (--ink, --mint, --yellow, --hazink, --slate, --logo, --teal). */

/* ---------- Donate button in the menu bar ---------- */
body>nav a.t.tgive{margin-left:6px;background:var(--mint);color:var(--hazink);border-color:var(--hazink)}
body>nav a.t.tgive:hover{background:#4affd6;color:var(--hazink);border-color:var(--hazink)}
body>nav a.t.tgive[aria-current]{background:var(--yellow);border-color:var(--hazink);box-shadow:0 0 0 2px var(--yellow)}
@media(min-width:901px) and (max-width:1060px){body>nav a.t.tgive{margin-left:4px}}
@media(max-width:900px){body>nav a.t.tgive{margin:4px 0 0;text-align:center}}
/* room for the extra button: the menu's tighter mid-width sizing now runs up to 1140px, and tightens a little more below 960px */
@media(min-width:1061px) and (max-width:1140px){.navlinks{gap:2px}body>nav a.t{padding:10px 8px;font-size:12.5px}.wm.wm3 img{height:48px}}
@media(min-width:901px) and (max-width:960px){body>nav a.t{padding:10px 6px}.wm.wm3 img{height:42px}body>nav a.t.tgive{margin-left:2px}}

/* ---------- Donate page ---------- */
.subhero.x-give h1{max-width:none}
/* phones: "chokinghazard.org." is one long word, so the heading shrinks until it fits on one line */
@media(max-width:700px){.subhero.x-sub.x-give h1{font-size:min(32px,calc((100vw - 40px) / 13.2))!important}}

/* the donation form: a branded side panel beside the Zeffy form, in one card */
.gv-card{display:grid;grid-template-columns:minmax(0,min(380px,34%)) minmax(0,1fr);background:#fff;border:3px solid var(--hazink);box-shadow:8px 8px 0 rgba(0,0,0,.45)}
.gv-side{position:relative;background:var(--slate);color:#fff;padding:40px 30px 30px;border-right:3px solid var(--hazink)}
.gv-side::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,var(--hazink) 12px 24px)}
.gv-sidein{position:sticky;top:110px}
.gv-tag{display:block;font:700 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.gv-side h2{font-size:clamp(28px,2.6vw,36px);line-height:.98;color:#fff;margin:12px 0 0;max-width:none}
.gv-fee{font:500 clamp(17px,1.4vw,19px)/1.5 var(--serif);color:#fff;margin:18px 0 0}
.gv-fine{font:400 15px/1.5 var(--serif);color:#c3dde2;margin:10px 0 0}
.gv-stk{display:block;width:min(100%,280px);height:auto;margin:26px 0 6px;transform:rotate(-4deg);filter:drop-shadow(4px 5px 0 rgba(0,0,0,.4))}
.gv-alt{font:400 15px/1.5 var(--serif);color:#c3dde2;margin:14px 0 0}
.gv-alt a{color:var(--mint);font-weight:600;text-underline-offset:3px}
.gv-embed{min-width:0;background:#fff}
.gv-embed iframe{display:block;width:100%;height:1000px;border:0;background:transparent}
@media(max-width:900px){
  .gv-card{grid-template-columns:minmax(0,1fr)}
  .gv-side{border-right:0;border-bottom:3px solid var(--hazink)}
  .gv-sidein{position:static}
  .gv-stk{width:min(60%,240px)}
  .gv-embed iframe{height:1100px}
}

/* who we are + why: full width, under the form */
.gv-about{display:grid;gap:28px;margin-top:clamp(40px,5vw,64px)}
.gv-blk + .gv-blk{padding-top:28px;border-top:3px solid var(--ink)}
.gv-blk h2{font-size:clamp(24px,2.6vw,34px);line-height:1.02;color:var(--ink);margin:6px 0 0;max-width:none;text-wrap:balance}
.gv-blk p{font:400 clamp(17.5px,1.5vw,20px)/1.6 var(--serif);color:var(--ink2);margin:14px 0 0;max-width:none}
.gv-blk p b{color:var(--ink)}
.gv-alt a:focus-visible,.gv-res a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* more from SafeBAE */
#more h2{max-width:none}
.gv-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:3px;margin-top:26px}   /* two across at every width above phones; every box the same size */
@media(max-width:560px){.gv-res{grid-template-columns:minmax(0,1fr)}}
.gv-res a{display:flex;flex-direction:column;min-width:0;text-decoration:none;background:var(--slate);padding:26px 24px 24px;transition:background .15s}
.gv-res a:hover{background:var(--logo)}
.gv-res b{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:900 21px/1.05 var(--disp);color:#fff;text-transform:uppercase}
.gv-res .farr{font-style:normal;color:var(--mint)}
.gv-res span{display:block;font:700 10.5px/1.3 var(--mono);letter-spacing:.12em;color:var(--mint);margin-top:10px;overflow-wrap:anywhere}
.gv-res em{display:block;font:400 15.5px/1.55 var(--serif);font-style:normal;color:#c3dde2;margin-top:12px}

@media(prefers-reduced-motion:reduce){.gv-res a{transition:none}}