/* ==========================================================================
   Unsung Heroes of America — site stylesheet
   ========================================================================== */

:root{
  --navy:#3d1f6d;
  --navy-mid:#542d91;
  --navy-light:#6b3aaa;
  --gold:#c8973f;
  --gold-light:#e0b45c;
  --gold-pale:#faf4e8;
  --white:#ffffff;
  --off-white:#f8f7fb;
  --blue-pale:#f4f1fa;
  --text:#24242e;
  --text-light:#5a5f6e;
  --border:#e4e2ec;
  --crisis:#b3261e;
  --crisis-pale:#fdf0ef;
  --radius:10px;
  --shadow:0 2px 10px rgba(61,31,109,.07);
  --shadow-lg:0 8px 28px rgba(61,31,109,.13);
  --maxw:1140px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}

h1,h2,h3,h4{line-height:1.22;margin:0 0 .6rem;font-weight:800;letter-spacing:-.02em;}
h1{font-size:clamp(2rem,5vw,3.1rem);}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);}
h3{font-size:1.2rem;font-weight:700;}
h4{font-size:1.02rem;font-weight:700;}
p{margin:0 0 1rem;}
a{color:var(--navy-mid);}
a:hover{color:var(--navy);}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-block;padding:.72rem 1.5rem;border:2px solid transparent;
  border-radius:var(--radius);font-size:.95rem;font-weight:700;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold);color:#2b2109;border-color:var(--gold);}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);color:#2b2109;box-shadow:var(--shadow-lg);}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6);}
.btn-outline:hover{background:var(--white);color:var(--navy);border-color:var(--white);}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy);}
.btn-navy:hover{background:var(--navy-mid);border-color:var(--navy-mid);color:var(--white);box-shadow:var(--shadow-lg);}
.btn-outline-navy{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy);color:var(--white);}
.btn-group{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* --- Header / nav ------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid var(--border);box-shadow:0 1px 6px rgba(61,31,109,.06);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px;}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);flex-shrink:0;}
.nav-logo-mark img{width:46px;height:46px;object-fit:contain;}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.12;}
.nav-logo-text strong{font-size:1.04rem;font-weight:800;letter-spacing:-.02em;}
.nav-logo-text span{font-size:.76rem;color:var(--text-light);letter-spacing:.09em;text-transform:uppercase;}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.nav-links a{
  display:block;padding:.5rem .78rem;border-radius:7px;
  font-size:.92rem;font-weight:600;color:var(--text);text-decoration:none;transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--blue-pale);color:var(--navy);}
.nav-donate a{background:var(--gold);color:#2b2109;margin-left:6px;}
.nav-donate a:hover{background:var(--gold-light);color:#2b2109;}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;padding:0 9px;background:none;border:0;cursor:pointer;
}
.nav-toggle span{display:block;height:3px;border-radius:2px;background:var(--navy);transition:transform .25s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media (max-width:900px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);
    padding:8px 16px 16px;display:none;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:.72rem .6rem;border-radius:7px;}
  .nav-donate a{margin:6px 0 0;text-align:center;}
}

/* --- Sections ----------------------------------------------------------- */
.section{padding:76px 0;}
.section-alt{background:var(--off-white);}
.section-header{max-width:720px;margin:0 auto 44px;text-align:center;}
.section-header h2{color:var(--navy);}
.section-header p{color:var(--text-light);font-size:1.05rem;margin-bottom:0;}
.section-label{
  display:inline-block;margin-bottom:14px;
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:36px;}.section{padding:56px 0;}}

/* --- Page hero ---------------------------------------------------------- */
.page-hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--navy-light) 100%);
  color:var(--white);padding:74px 0 66px;text-align:center;
}
.page-hero h1{margin-bottom:1rem;}
.page-hero p{max-width:660px;margin:0 auto;font-size:1.1rem;opacity:.9;}
.gold-bar{width:76px;height:4px;border-radius:2px;background:var(--gold);margin:26px auto 0;}

/* --- Stats bar ---------------------------------------------------------- */
.stats-bar{background:var(--navy);color:var(--white);padding:36px 0;}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat-number{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:800;color:var(--gold);line-height:1.15;}
.stat-label{font-size:.83rem;opacity:.85;margin-top:6px;}
@media (max-width:760px){.stats-inner{grid-template-columns:repeat(2,1fr);gap:26px 16px;}}

/* --- Cards -------------------------------------------------------------- */
.card-grid{display:grid;gap:24px;}
.card-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:940px){.card-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.card-grid-3{grid-template-columns:1fr;}}

.card{
  background:var(--white);border:1px solid var(--border);border-top:4px solid var(--border);
  border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.card h3{color:var(--navy);}
.card p{color:var(--text-light);font-size:.95rem;margin-bottom:0;}
.card-gold{border-top-color:var(--gold);}
.card-navy{border-top-color:var(--navy);}
.card-icon{font-size:2.1rem;line-height:1;margin-bottom:14px;}

/* --- Mission / vision --------------------------------------------------- */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:560px){.mv-grid{grid-template-columns:1fr;}}
.mv-box{border-radius:var(--radius);padding:26px 22px;color:var(--white);box-shadow:var(--shadow);}
.mv-box h3{margin-bottom:.5rem;color:var(--gold);font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;}
.mv-box p{margin-bottom:0;font-size:.95rem;opacity:.94;}
.mv-box-mission{background:linear-gradient(140deg,var(--navy),var(--navy-mid));}
.mv-box-vision{background:linear-gradient(140deg,var(--navy-mid),var(--navy-light));}

/* --- Callouts ----------------------------------------------------------- */
.callout{
  display:flex;gap:16px;align-items:flex-start;
  border-radius:var(--radius);padding:20px 22px;border-left:5px solid var(--gold);
  background:var(--gold-pale);
}
.callout p{margin-bottom:0;font-size:.94rem;}
.callout p:last-child{margin-bottom:0;}
.callout-icon{font-size:1.5rem;line-height:1.2;flex-shrink:0;}
.callout-info{background:var(--blue-pale);border-left-color:var(--navy-light);}
.callout-crisis{background:var(--crisis-pale);border-left-color:var(--crisis);}
.callout-crisis strong{color:var(--crisis);display:block;margin-bottom:4px;}
.callout-crisis a{color:var(--crisis);font-weight:700;}

/* --- Badges ------------------------------------------------------------- */
.badge{
  display:inline-block;margin-bottom:10px;padding:.28rem .72rem;border-radius:99px;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.badge-gold{background:var(--gold-pale);color:#8a6212;border:1px solid #e8d5ac;}
.badge-navy{background:var(--blue-pale);color:var(--navy);border:1px solid #ddd4ee;}

/* --- Check list --------------------------------------------------------- */
.check-list{list-style:none;margin:0 0 1rem;padding:0;}
.check-list li{position:relative;padding-left:28px;margin-bottom:.5rem;color:var(--text-light);}
.check-list li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--gold);font-weight:800;
}

/* --- Program blocks ----------------------------------------------------- */
.program-block{
  display:grid;grid-template-columns:88px 1fr;gap:26px;align-items:start;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 28px;margin-bottom:24px;box-shadow:var(--shadow);
}
.program-block h3{color:var(--navy);font-size:1.35rem;}
.program-icon-lg{
  display:flex;align-items:center;justify-content:center;
  width:88px;height:88px;border-radius:50%;background:var(--blue-pale);font-size:2.4rem;
}
@media (max-width:660px){
  .program-block{grid-template-columns:1fr;gap:16px;padding:26px 20px;}
  .program-icon-lg{width:64px;height:64px;font-size:1.8rem;}
}

/* --- Resource cards ----------------------------------------------------- */
.resource-card{
  background:var(--navy);color:var(--white);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);
}
.resource-card h3{color:var(--white);font-size:1.05rem;margin-bottom:.6rem;}
.resource-card p{color:rgba(255,255,255,.82);font-size:.9rem;margin-bottom:0;}
.resource-number{font-size:1.5rem;font-weight:800;color:var(--gold);margin-bottom:.5rem;line-height:1.2;}
.resource-number a:hover{text-decoration:underline !important;}

/* --- Volunteer roles ---------------------------------------------------- */
.volunteer-role{
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 22px;margin-bottom:18px;box-shadow:var(--shadow);
}
.volunteer-role h3{color:var(--navy);font-size:1.12rem;}
.volunteer-role p{color:var(--text-light);font-size:.94rem;margin-bottom:0;}
.volunteer-role-icon{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;background:var(--gold-pale);font-size:1.8rem;
}
@media (max-width:560px){.volunteer-role{grid-template-columns:1fr;gap:14px;}}

/* --- Donation impact ---------------------------------------------------- */
.impact-item{padding:20px 18px;text-align:center;}
.impact-amount{font-size:1.65rem;font-weight:800;color:var(--navy);line-height:1.2;}
.impact-desc{font-size:.88rem;color:var(--text-light);margin-top:6px;}

/* --- Accordion ---------------------------------------------------------- */
.accordion-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;background:var(--white);overflow:hidden;}
.accordion-trigger{
  position:relative;display:block;width:100%;
  padding:18px 52px 18px 22px;border:0;background:none;
  font-family:inherit;font-size:1rem;font-weight:700;color:var(--navy);
  text-align:left;cursor:pointer;transition:background .15s;
}
.accordion-trigger:hover{background:var(--blue-pale);}
.accordion-trigger::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--gold);line-height:1;transition:transform .2s;
}
.accordion-trigger.is-open::after{content:"–";}
.accordion-body{display:none;padding:0 22px 20px;border-top:1px solid var(--border);}
.accordion-body.is-open{display:block;padding-top:16px;}
.accordion-body p{color:var(--text-light);font-size:.95rem;margin-bottom:0;}

/* --- Forms -------------------------------------------------------------- */
.form-group{margin-bottom:16px;}
.form-group label{display:block;margin-bottom:6px;font-size:.87rem;font-weight:700;color:var(--navy);}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.68rem .85rem;
  border:1.5px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:.95rem;color:var(--text);background:var(--white);
  transition:border-color .15s,box-shadow .15s;
}
.form-group textarea{resize:vertical;min-height:110px;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--navy-light);box-shadow:0 0 0 3px rgba(107,58,170,.14);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:#9aa0ad;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media (max-width:560px){.form-grid-2{grid-template-columns:1fr;}}

/* --- CTA strip ---------------------------------------------------------- */
.cta-strip{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--navy-light) 100%);
  color:var(--white);padding:66px 0;text-align:center;
}
.cta-strip h2{margin-bottom:.75rem;}
.cta-strip p{max-width:640px;margin:0 auto 2rem;opacity:.9;font-size:1.05rem;}

/* --- Footer ------------------------------------------------------------- */
.site-footer{background:#2a1450;color:rgba(255,255,255,.76);padding:58px 0 0;font-size:.92rem;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.35fr;gap:40px;}
@media (max-width:940px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

.footer-logo{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.footer-logo .logo-mark img{width:46px;height:46px;object-fit:contain;}
.footer-logo .logo-name{font-size:1.03rem;font-weight:800;color:var(--white);line-height:1.25;letter-spacing:-.02em;}
.footer-brand p{font-size:.9rem;line-height:1.6;}
.ein{font-size:.8rem;color:rgba(255,255,255,.55);}

.footer-col h4{margin-bottom:14px;color:var(--gold);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:8px;}
.footer-col a,.footer-contact-item a{color:rgba(255,255,255,.76);text-decoration:none;transition:color .15s;}
.footer-col a:hover,.footer-contact-item a:hover{color:var(--gold);}

.footer-contact-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:.88rem;line-height:1.5;word-break:break-word;}
.footer-contact-item .icon{flex-shrink:0;}
.site-footer .callout-crisis{background:rgba(255,255,255,.08);border-left-color:var(--crisis);}
.site-footer .callout-crisis strong{color:#ff9c95;display:inline;}
.site-footer .callout-crisis a{color:#ff9c95;}

.footer-bottom{margin-top:44px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);text-align:center;}
.footer-bottom p{margin:0;font-size:.83rem;color:rgba(255,255,255,.55);}

/* --- Utilities / print -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .btn:hover,.card:hover{transform:none;}
}
@media print{
  .site-header,.cta-strip,.nav-toggle{display:none;}
  body{color:#000;}
}