/* =====================================================================
   ACO — shared GIVING-FORM stylesheet
   Extracted from the (previously duplicated) inline <style> of donate.html
   and give-fund.html. Edit giving-form styles HERE, once — both pages use it.
   Page-specific rules stay inline (give-fund's .fund-fixed / .amount-chips).
   ===================================================================== */
/* ===== Online Giving — shared giving-page styles (used by donate.html, give-fund.html) ===== */
  :root{ --aco-red-deep:#74231D; --aco-accent:linear-gradient(135deg,var(--aco-gold),var(--aco-orange)); }
  /* HERO (.aco-hero) — shared giving-page hero */
  .aco-hero{position:relative;overflow:hidden;padding:78px 0 66px;border-bottom:1px solid rgba(255,255,255,.16);background:
  linear-gradient(90deg, rgba(24,18,14,.74) 0%, rgba(24,18,14,.58) 34%, rgba(24,18,14,.32) 68%, rgba(24,18,14,.38) 100%),
  url("img/img_ec0c2d8833f6e35c.jpg") center center / cover no-repeat}   /* path is relative to THIS stylesheet (assets/), not the page — was "assets/img/…" → 404 */
  .aco-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,248,238,.08) 0%, rgba(255,248,238,.04) 46%, rgba(24,18,14,.10) 100%);pointer-events:none}
  .aco-hero-inner{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:42px;align-items:center}
  .aco-hero-copy{position:relative;padding-left:28px}
  .aco-hero-copy::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:999px;background:linear-gradient(180deg,var(--aco-red-deep) 0%,var(--aco-red) 45%,var(--aco-orange) 78%,var(--aco-gold) 100%)}
  /* scoped .aco-hero .aco-eyebrow so it beats `.aco-hero p` (which otherwise forced 18px / wrong margin); canon 12px · 2.2px · 16px */
  .aco-hero .aco-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--aco-red);font-size:12px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase}
  .aco-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aco-accent)}
  .aco-eyebrow{color:#F9D488!important}
  .aco-hero h1{margin:0;color:#fff;font-size:clamp(42px,5vw,62px);font-weight:900;line-height:1.04;letter-spacing:-2px;text-shadow:0 12px 34px rgba(0,0,0,.22)}
  .aco-hero p{max-width:650px;margin:19px 0 0;color:rgba(255,255,255,.92);font-size:18px;line-height:1.75;text-shadow:0 8px 24px rgba(0,0,0,.18)}
  @media(max-width:900px){ .aco-hero-inner{grid-template-columns:1fr;gap:22px} }
  @media(max-width:640px){ .aco-hero{padding:50px 0 42px} .aco-hero-inner{width:min(100% - 28px,1180px)} .aco-hero-copy{padding-left:22px} .aco-hero-copy::before{width:5px} .aco-hero h1{font-size:40px;letter-spacing:-1.5px} .aco-hero p{font-size:16px} }

  .og-wrap{ max-width:760px; margin:0 auto; padding:34px 22px 70px; }

  /* intro: Give Now / Sign in tabs + how-to + contact */
  .og-intro{ margin-bottom:26px; }
  .top-tabs{ display:flex; gap:34px; justify-content:center; border-bottom:1px solid var(--border); margin-bottom:22px; }
  .ttab{ border:none; background:transparent; font:inherit; font-weight:800; font-size:15px; color:var(--text-muted);
    padding:0 2px 12px; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; text-decoration:none; }
  .ttab.active{ color:var(--aco-red); border-bottom-color:var(--aco-red); }
  /* How-to, collapsed by default: a donor who came to give reaches the form without
     scrolling past it, and a first-timer is still one tap from the full walkthrough. */
  .instructions{ border:1px solid var(--border); border-radius:14px; padding:0 16px; }
  .instructions[open]{ padding-bottom:14px; }
  .instructions > summary{ display:flex; align-items:center; gap:10px; padding:13px 2px;
    font-size:16px; font-weight:800; color:var(--aco-ink); cursor:pointer; list-style:none; }
  .instructions > summary::-webkit-details-marker{ display:none; }
  .instructions > summary::before{ content:""; flex:none; width:8px; height:8px;
    border-right:2px solid var(--aco-red); border-bottom:2px solid var(--aco-red);
    transform:rotate(-45deg); transition:transform .18s ease; }
  .instructions[open] > summary::before{ transform:rotate(45deg); }
  .instructions > summary:focus-visible{ outline:2px solid var(--aco-red); outline-offset:3px; border-radius:8px; }
  @media(prefers-reduced-motion:reduce){ .instructions > summary::before{ transition:none; } }
  .instructions strong{ color:var(--aco-ink); }
  .instructions ul{ margin:4px 0 0; padding-left:20px; }
  .instructions li{ margin:9px 0; font-size:13.5px; color:var(--text-main); line-height:1.6; }
  .contact-line{ margin-top:18px; font-size:13.5px; color:var(--text-muted); }
  .contact-line a{ color:var(--aco-red); font-weight:800; text-decoration:none; }

  /* form card */
  .og-card{ padding:30px 30px 24px; }
  .gift-tabs{ display:flex; gap:0; border-bottom:1.5px solid var(--border); margin-bottom:24px; }
  .gift-tabs .tab{ flex:1; border:none; background:transparent; font:inherit; font-weight:800; font-size:15px; color:var(--text-muted);
    padding:12px 8px; border-bottom:3px solid transparent; margin-bottom:-1.5px; cursor:pointer; }
  .gift-tabs .tab.on{ color:var(--aco-red); border-bottom-color:var(--aco-red); }

  .fl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.1px; color:var(--text-muted); margin-bottom:6px; }
  .ccy{ position:relative } .ccy input{ padding-left:26px } .ccy::before{ content:"$"; position:absolute; left:12px; top:12px; color:var(--text-muted); font-weight:700 }

  /* multi-fund donation rows + Add Donation */
  .don-head{ display:grid; grid-template-columns:1fr 210px 38px; gap:14px; margin-bottom:6px; }
  .don-head .fl:last-child{ grid-column:2; }
  .don-row{ display:grid; grid-template-columns:1fr 210px 38px; gap:14px; align-items:center; margin-bottom:10px; }
  .row-del{ width:38px; height:44px; border:1.5px solid var(--border); background:#fff; border-radius:10px; color:var(--text-muted); font-weight:900; font-size:15px; cursor:pointer; }
  .row-del:hover{ border-color:var(--aco-red); color:var(--aco-red); }
  @media(max-width:560px){ .don-head{ display:none; } .don-row{ grid-template-columns:1fr 1fr; } .don-row .row-del{ grid-column:2; justify-self:end; width:38px; } }
  .btn-add{ display:inline-flex; align-items:center; gap:9px; border:1.5px solid #e2b6ad; background:#faece9; color:var(--aco-red);
    border-radius:10px; padding:11px 18px; font:inherit; font-weight:800; font-size:14px; cursor:pointer; margin:6px 0 4px; transition:background .15s,border-color .15s; }
  .btn-add:hover{ background:#f3d9d2; border-color:var(--aco-red); }
  .btn-add .plus{ font-size:20px; line-height:0; }

  .recur-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px; }
  .recur-grid select, .recur-grid input{ box-sizing:border-box; height:48px; }

  .og-h3{ font-size:16px; font-weight:900; color:var(--aco-ink); margin:28px 0 14px; }
  .identity-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
  @media(max-width:560px){ .identity-row,.recur-grid,.cc-row{ grid-template-columns:1fr; } }

  /* payment-method cards ("I'd Like To Give By") */
  .pay-methods{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 6px; }
  @media(max-width:560px){ .pay-methods{ grid-template-columns:repeat(2,1fr); } }
  .pm{ position:relative; border:1.5px solid var(--border); background:#fff; border-radius:14px; padding:16px 10px 13px; font:inherit; font-weight:800; font-size:13.5px;
    color:var(--text-main); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; min-height:84px; justify-content:center; transition:border-color .15s,box-shadow .15s; }
  .pm:hover{ border-color:var(--aco-orange); }
  .pm.on{ border-color:#1E8E5A; box-shadow:0 0 0 2px rgba(30,142,90,.18); }
  .pm.on::after{ content:"✓"; position:absolute; top:-9px; right:-9px; width:22px; height:22px; border-radius:50%; background:#1E8E5A; color:#fff; font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; }
  .pm .pmic{ font-size:24px; line-height:1; }

  .brands{ display:flex; gap:5px; align-items:center; }
  .brands span{ font-size:9px; font-weight:900; letter-spacing:.3px; padding:2px 4px; border-radius:3px; background:#eef1f5; color:#55606e; }
  .cardnum{ position:relative; margin-bottom:12px; }
  .cardnum .brands{ position:absolute; right:12px; top:11px; }
  .cc-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

  .wallet-note{ background:#f3f6fc; border:1px solid #d6e0f5; border-radius:12px; padding:14px 16px; font-size:13px; color:#33415c; line-height:1.55; }
  .wallet-note .wlogo{ font-weight:900; color:#003087; }

  .feebox{ display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--text-main);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:16px 2px; margin:22px 0; cursor:pointer; }
  .feebox input{ width:18px; height:18px; margin:0; flex:none; accent-color:var(--aco-red); }

  .total-row{ display:flex; align-items:center; justify-content:space-between; padding:4px 2px 0; }
  .total-row .tlbl{ font-size:18px; font-weight:900; color:var(--aco-ink); }
  .total-row .total-amt{ font-size:24px; font-weight:900; color:var(--aco-red); }

  /* (removed dead .give-btn rules — both giving pages pay via the PayPal JS SDK buttons in #paypal-box) */
  #giveOut{ margin-top:16px }
  .auth-head{ text-align:center; font-size:12.5px; font-weight:800; color:var(--text-main); margin-top:22px; }
  .auth-text{ text-align:center; font-size:11.5px; color:var(--text-muted); line-height:1.6; max-width:560px; margin:8px auto 0; }
  .secure-note{ text-align:center; font-size:12.5px; color:var(--text-main); margin-top:20px; }
  .secure-note strong{ font-weight:800; }
  .secure-sub{ text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
  .powered-paypal{ text-align:center; color:var(--text-muted); font-style:italic; font-size:14px; margin-top:14px; }
  .powered-paypal strong{ color:#003087; font-style:normal; }
  .who-line{ text-align:center; font-size:12.5px; color:var(--text-muted); margin-top:12px; }

  /* ===== match font & UI of aco-annual-mission-outreach.html ===== */
  body{ font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
  /* softer marketing body-copy color (--text:#4F5B67) */
  .og-wrap, .instructions li, .contact-line, .wallet-note, .auth-text{ color:#4F5B67; }
  .instructions{ line-height:1.72; }
  /* form section headings (Donor Information / Recurrence / Choose how to give) — Inter, page-specific form scale (smaller than .section-title, which is for marketing pages) */
  .og-h3{ font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:23px; font-weight:700; letter-spacing:-.6px; color:var(--aco-ink); margin:30px 0 14px; }
  .total-row .tlbl, .total-row .total-amt{ font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
  /* generous rounded marketing cards (--radius:28px, --shadow-lg) */
  .og-card{ border-radius:var(--radius-lg,28px); box-shadow:var(--shadow-lg,0 20px 55px rgba(24,22,20,.07)); padding:34px 36px 28px; }
  /* larger, softer inputs to match the marketing form feel */
  .og-card input, .og-card select, .og-card textarea{ min-height:52px; padding:13px 15px; font-size:15.5px; border-radius:12px; background:#FFFDF9; }
  .og-card .feebox input{ min-height:0; padding:0; }
  .og-card .ccy input{ padding-left:30px; }
  .ccy::before{ top:16px; left:14px; }
  .gift-tabs .tab, .ttab{ font-size:16px; }

  /* fund & amount: identical heights + balanced widths */
  .don-head{ grid-template-columns:minmax(0,1fr) 220px 44px; }
  .don-row{ grid-template-columns:minmax(0,1fr) 220px 44px; align-items:center; }
  .don-row .fundSel, .don-row .amtInp{ height:54px; }
  .row-del{ height:54px; width:44px; }
  @media(max-width:560px){ .don-row{ grid-template-columns:1fr 1fr; } .don-row .row-del{ grid-column:2; justify-self:end; } }

  /* progressive disclosure: roomier rhythm in the revealed "I'd Like To Give By" area */
  #paySection .pay-methods{ margin-bottom:22px; }
  .og-card .identity-row{ margin-bottom:18px; }
  #paySection .cardnum{ margin-bottom:18px; }
  #paySection .cc-row{ margin-bottom:6px; }
  #paySection .og-h3{ margin:34px 0 18px; }