/*
Theme Name: Heroes of America
Theme URI: https://heroesofamerica.org
Author: Gator IT Solutions
Author URI: https://gatorits.com/
Description: One-page theme for the Heroes of America Foundation, supporting military, veterans, first responders and teachers.
Version: 1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: heroes-of-america
*/

:root{
  /* light sections */
  --paper:#EEF0F3; --surface:#FFFFFF; --ink:#0D1626; --muted:#4A556A; --line:#D3D8E0;
  /* dark sections (stay dark in both themes) */
  --night:#0A1220; --night-2:#111C31; --on-night:#E9EDF3; --night-muted:#9AA6BA; --night-line:rgba(255,255,255,.12);
  --gold:#C9A24A; --red:#B3261E;
  --display:"Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0D1729; --surface:#121E35; --ink:#E9EDF3; --muted:#A3AEC2; --line:#243251; color-scheme:dark;}}
:root[data-theme="dark"]{--paper:#0D1729; --surface:#121E35; --ink:#E9EDF3; --muted:#A3AEC2; --line:#243251; color-scheme:dark;}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.95;margin:0;letter-spacing:.01em;font-weight:800}
h2{font-size:clamp(2.6rem,1.6rem + 3.6vw,4.6rem)}
h3{font-size:1.75rem;font-weight:700;line-height:1}
p{margin:0}
.lede{font-size:1.18rem;max-width:56ch;color:var(--muted)}
section{padding:clamp(4rem,8vw,7rem) 0}
.dark{background:var(--night);color:var(--on-night)}
.dark .lede,.dark p{color:var(--night-muted)}
.kicker{display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;margin-bottom:1.2rem}
.kicker::before{content:"";width:40px;height:3px;background:var(--gold)}
.head{margin-bottom:3rem;max-width:46rem}
.head .lede{margin-top:1.2rem}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.9rem;font:700 1.1rem/1 var(--display);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#951D17}
.btn-line{border-color:rgba(255,255,255,.6);color:#fff;background:none}
.btn-line:hover{background:#fff;color:var(--night)}

/* header */
header.site{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top,0px);transition:background .25s}
header.site.solid{background:rgba(10,18,32,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--night-line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;color:#fff}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;line-height:1}
.brand img{height:50px;width:auto;flex:none}
.brand b{font:800 1.45rem var(--display);text-transform:uppercase;letter-spacing:.03em;display:block}
.brand small{font:700 .8rem var(--display);color:var(--gold);letter-spacing:.32em;text-transform:uppercase}
nav.links{display:flex;gap:2rem;align-items:center}
nav.links a{text-decoration:none;font:600 1.1rem var(--display);text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.82)}
nav.links a:hover{color:#fff}
nav.links .btn{color:#fff;padding:.75rem 1.4rem}
.menu-btn{display:none;background:none;border:2px solid rgba(255,255,255,.4);padding:.5rem .8rem;color:#fff;font:700 1rem var(--display);text-transform:uppercase;letter-spacing:.1em}
@media (max-width:900px){
  .menu-btn{display:block}
  nav.links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:1.2rem;padding:1.5rem 1.25rem 2rem;background:var(--night);border-bottom:1px solid var(--night-line)}
  nav.links.open{display:flex}
}

/* photo slots */
.ph{position:relative;overflow:hidden;background:var(--night-2)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.ph .hint{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;text-align:center;padding:1rem;color:rgba(255,255,255,.55);font-size:.85rem;
  background:radial-gradient(120% 90% at 50% 30%,#1C2B48 0%,#0A1220 75%)}
.ph .hint svg{width:36px;height:36px;opacity:.6}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:0;color:#fff;background:var(--night)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:62% 25%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,32,.96) 0%,rgba(10,18,32,.82) 38%,rgba(10,18,32,.25) 75%),linear-gradient(0deg,rgba(10,18,32,1) 0%,rgba(10,18,32,0) 40%)}
.hero .wrap{position:relative;z-index:2;padding:9rem 0 clamp(4rem,9vh,7rem)}
.hero h1{font-size:clamp(3.4rem,1.8rem + 7vw,8rem);max-width:11ch;margin-bottom:1.6rem}
.hero h1 span{color:var(--gold)}
.hero p{font-size:1.25rem;max-width:46ch;color:rgba(255,255,255,.82);margin-bottom:2.4rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem}
@media (max-width:700px){.hero::after{background:linear-gradient(0deg,rgba(10,18,32,1) 15%,rgba(10,18,32,.7) 60%,rgba(10,18,32,.45) 100%)}}

/* serve strip */
.serve{padding:0;background:var(--night)}
.strip{display:grid;grid-template-columns:repeat(3,1fr)}
.panel{position:relative;aspect-ratio:3/4;max-height:620px;width:100%;color:#fff;border-right:1px solid var(--night-line)}
.panel:last-child{border-right:0}
.panel .ph{position:absolute;inset:0}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,18,32,.95) 0%,rgba(10,18,32,.2) 55%,rgba(10,18,32,0) 100%);pointer-events:none}
.panel .txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2rem}
.panel .txt i{display:block;width:44px;height:4px;background:var(--tone);margin-bottom:1rem}
.panel h3{font-size:clamp(1.9rem,1.2rem + 1.6vw,2.6rem);margin-bottom:.6rem}
.panel p{color:rgba(255,255,255,.75);max-width:30ch}
@media (max-width:860px){.strip{grid-template-columns:1fr}.panel{aspect-ratio:16/11;border-right:0;border-bottom:1px solid var(--night-line)}}

/* story */
.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.story blockquote{margin:0 0 2rem;font:800 clamp(2.2rem,1.4rem + 2.8vw,3.8rem)/.98 var(--display);text-transform:uppercase;color:var(--on-night)}
.story p + p{margin-top:1rem}
.story .ph{aspect-ratio:4/5}
.story .frame{position:relative}
.story .frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--gold)}
@media (max-width:880px){.story-grid{grid-template-columns:1fr}.story .ph{aspect-ratio:3/2}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.pillar{padding:2rem 1.8rem 0 0;border-right:1px solid var(--line);margin-right:1.8rem}
.pillar:last-child{border-right:0;margin-right:0}
.pillar h3{margin-bottom:1rem}
.pillar p{color:var(--muted)}
@media (max-width:980px){.pillars{grid-template-columns:1fr 1fr;row-gap:2.5rem}.pillar:nth-child(2){border-right:0;margin-right:0}}
@media (max-width:600px){.pillars{grid-template-columns:1fr}.pillar{border-right:0;margin-right:0}}

/* impact */
.impact{background:var(--night-2);color:var(--on-night)}
.impact-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:3rem;align-items:end}
.stat{border-left:4px solid var(--gold);padding-left:1.5rem}
.stat b{display:block;font:800 clamp(5rem,3rem + 6vw,9rem)/.85 var(--display);color:#fff}
.stat span{font:700 1.3rem var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
@media (max-width:860px){.impact-grid{grid-template-columns:1fr 1fr}.impact-grid>div:first-child{grid-column:1/-1}}

/* partners */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--night-line);border:1px solid var(--night-line)}
.partner{background:var(--night);display:grid;place-items:center;padding:2.2rem;min-height:200px}
.partner img{max-height:120px;max-width:100%;width:auto;opacity:.92;transition:opacity .15s}
.partner:hover img{opacity:1}
.partner.add{text-decoration:none;text-align:center;gap:.5rem;align-content:center}
.partner.add strong{font:800 1.6rem var(--display);text-transform:uppercase}
.partner.add strong{color:var(--on-night)}
.partner.add span{color:var(--night-muted)}
.partner.add:hover strong{color:var(--gold)}

/* charities */
.charities{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.charity{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gold);padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.5rem;min-height:170px;justify-content:center}
.charity strong{font:800 1.8rem/1 var(--display);text-transform:uppercase}
.charity span{color:var(--muted)}
.charity.invite{border-style:dashed;border-top-style:solid;text-decoration:none}
.charity.invite:hover strong{color:var(--red)}

/* give */
.give{background:var(--red);color:#fff;padding:clamp(4rem,8vw,6.5rem) 0}
.give-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem}
.give h2{max-width:16ch}
.give p{color:rgba(255,255,255,.88);margin-top:1rem;max-width:46ch;font-size:1.15rem}
.give .btn{background:#fff;color:var(--red);font-size:1.25rem;padding:1.2rem 2.6rem}
.give .btn:hover{background:var(--night);color:#fff}

/* footer */
footer{background:var(--night);color:var(--on-night);padding:4.5rem 0 2.5rem}
.foot{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem}
footer h4{font:800 1.6rem var(--display);text-transform:uppercase;margin:0 0 1rem}
footer p,footer li{color:var(--night-muted)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
footer a{color:var(--on-night);text-decoration:none}
footer a:hover{color:var(--gold)}
.signup{display:flex;margin-top:1.2rem;max-width:520px}
.signup input{flex:1;min-width:0;padding:1rem 1.1rem;border:1px solid var(--night-line);border-right:0;background:var(--night-2);color:var(--on-night);font:1rem var(--body)}
.signup input::placeholder{color:rgba(255,255,255,.45)}
.signup .btn{background:var(--gold);color:#0A1220}
.signup .btn:hover{background:#fff}
footer small{display:block;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--night-line);color:rgba(233,237,243,.5)}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* WordPress admin bar */
.admin-bar header.site{top:32px}
@media (max-width:782px){.admin-bar header.site{top:46px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact-info ul{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.4rem}
.contact-info li span{display:block;font:700 1rem var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.contact-info li a,.contact-info li b{font:700 1.5rem var(--display);text-decoration:none;color:var(--ink)}
.contact-info li a:hover{color:var(--red)}
.contact-form{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--red);padding:clamp(1.5rem,4vw,2.5rem);display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.contact-form .full{grid-column:1/-1}
.contact-form label{display:block;font:700 .95rem var(--display);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:.9rem 1rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:1rem var(--body);border-radius:0}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.contact-form .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{grid-column:1/-1;padding:1rem 1.2rem;font-weight:600;border-left:4px solid}
.notice.ok{border-color:#2E8B57;background:rgba(46,139,87,.12)}
.notice.err{border-color:var(--red);background:rgba(179,38,30,.1)}
.signup-msg{margin-top:.8rem;color:var(--gold)!important;font-weight:600}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}.contact-form{grid-template-columns:1fr}}

/* standard pages */
.page-main{padding:calc(9rem + env(safe-area-inset-top,0px)) 0 5rem}
.page-content{max-width:780px}
.page-content h1{font-size:clamp(2.6rem,1.8rem + 3vw,4rem);margin-bottom:2rem}
.entry h2{font-size:1.9rem;margin:2.4rem 0 .8rem}
.entry p,.entry li{color:var(--muted)}
.entry p{margin:0 0 1rem}
.entry ul{margin:0 0 1rem;padding-left:1.3rem}
.entry a{color:var(--red)}
.form-note{font-size:.9rem;color:var(--muted);margin:0}
.form-note a{color:var(--red)}
footer small a{color:inherit;text-decoration:underline}