/*
Theme Name: Veterans Alliance
Theme URI: https://vatexas.org
Author: Veterans Alliance
Description: One-page site for Veterans Alliance with Oklahoma and Texas chapter pages and the Pauls Valley Veterans Residence campaign.
Version: 1.0
Requires at least: 5.0
License: GNU General Public License v2 or later
Text Domain: veterans-alliance
*/

:root{
  color-scheme:dark;
  --ground:#121417;      /* gunmetal, from the badge fields */
  --plate:#1B1E23;       /* raised steel */
  --plate-2:#23272E;
  --line:#343A43;
  --steel:#C9CED6;       /* brushed-silver lettering */
  --text:#E9ECF0;
  --muted:#A2A9B4;
  --red:#C8102E;         /* flag red */
  --red-hi:#E0283F;
  --blue:#1F3E8F;        /* old glory blue */
  --blue-hi:#3559C2;
  --brass:#D4A62A;       /* ALLIANCE gold */
  --brass-lo:#9C7A1C;
  --display:"Saira Extra Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --label:"Saira Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--text);font:400 17px/1.6 var(--body);margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.98;text-wrap:balance;margin:0}
h1{font-size:clamp(46px,8vw,92px)}
h2{font-size:clamp(34px,5vw,54px)}
h3{font-size:26px;letter-spacing:.02em}
p{margin:0}
.eyebrow{font:600 14px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.lede{font-size:19px;color:var(--steel);max-width:58ch}

/* draft ribbon */
.draft{background:var(--brass);color:#1a1405;font:600 13px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:7px 16px}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(18,20,23,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);flex-shrink:0}
.brand img{width:56px;height:auto}
.brand span{font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.brand small{display:block;font:500 12px/1.2 var(--label);letter-spacing:.14em;color:var(--muted);margin-top:3px}
nav{margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;white-space:nowrap}
nav a{display:block;padding:10px 10px;font:600 15px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--steel);text-decoration:none;border-bottom:3px solid transparent}
nav a:hover{color:var(--text)}
nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--red)}
nav a.nav-donate{background:var(--red);color:#fff;border-radius:3px;border-bottom-color:transparent;margin-left:6px}
nav a.nav-donate:hover{background:var(--red-hi)}
@media (max-width:1240px){.brand small{display:none}}
@media (max-width:760px){
  .bar{flex-wrap:wrap;gap:6px}
  nav{margin-left:0;width:100%}
  .brand small{display:none}
}

/* stripe band: the wing stripes from the badges */
.stripes{display:grid;gap:5px}
.stripes i{display:block;height:9px;transform:skewX(-30deg)}
.stripes i:nth-child(1){background:var(--red)}
.stripes i:nth-child(2){background:var(--blue)}
.stripes i:nth-child(3){background:var(--blue);opacity:.75}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font:700 17px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:3px;border:2px solid transparent;cursor:pointer}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi)}
.btn-line{border-color:var(--steel);color:var(--text);background:transparent}
.btn-line:hover{border-color:var(--brass);color:var(--brass)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

section.page{padding-block:0 72px}
.block{padding-block:64px}
.block + .block{border-top:1px solid var(--line)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:56px 40px}
.hero .copy{display:grid;gap:22px}
.hero .badge{justify-self:center;width:min(440px,100%);filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero .badge{order:-1;width:min(300px,80%)}}

.motto{font:600 15px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.motto b{color:var(--steel);font-weight:600}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.pillar{background:var(--plate);padding:28px 26px;display:grid;gap:10px;align-content:start}
.pillar .tag{font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.pillar p{color:var(--steel)}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}

/* chapters */
.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.chapter{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;padding:26px;background:var(--plate);border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s}
.chapter:hover{border-color:var(--brass);transform:translateY(-2px)}
.chapter .info{display:grid;gap:8px}
.chapter .go{font:700 15px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.chapter p{color:var(--steel);font-size:16px}
@media (max-width:860px){.chapters{grid-template-columns:1fr}}
@media (max-width:460px){.chapter{grid-template-columns:1fr}.chapter img{width:130px}}

.trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.trades span{font:600 14px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line);color:var(--steel);border-radius:2px}

/* state page head */
.statehead{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:center;padding-block:48px 24px}
.statehead img{filter:drop-shadow(0 14px 32px rgba(0,0,0,.55))}
.statehead .copy{display:grid;gap:18px}
@media (max-width:760px){.statehead{grid-template-columns:1fr}.statehead img{width:220px}}

.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.list{display:grid;gap:14px;margin:18px 0 0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;color:var(--steel)}
.list li::before{content:"★";color:var(--brass);font-size:14px;line-height:1.8}

/* contact cards */
.contacts{display:grid;gap:10px;margin-top:18px}
.crow{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:var(--plate);border:1px solid var(--line);border-radius:3px}
.crow .k{font:600 13px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crow .v{font-weight:600;overflow-wrap:anywhere;user-select:all}
.copy-btn{font:600 12px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--steel);border:1px solid var(--line);border-radius:2px;padding:8px 10px;cursor:pointer}
.copy-btn:hover{border-color:var(--brass);color:var(--brass)}
@media (max-width:520px){.crow{grid-template-columns:1fr auto}.crow .k{grid-column:1 / -1}}
.addr{margin-top:14px;padding:18px;border-left:4px solid var(--red);background:var(--plate);font-style:normal;line-height:1.55}
.addr .k{display:block;font:600 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* board */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.member{padding:24px;background:var(--plate);border:1px solid var(--line);border-radius:4px;display:grid;gap:6px}
.member .role{font:600 13px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.member h3{font-size:30px}
@media (max-width:760px){.board{grid-template-columns:1fr}}

/* donate */
.donate-panel{display:grid;gap:22px;padding:36px;background:linear-gradient(180deg,var(--plate-2),var(--plate));border:1px solid var(--line);border-top:4px solid var(--red);border-radius:4px}
.note{font-size:15px;color:var(--muted)}
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.uses div{background:var(--plate);padding:22px;display:grid;gap:6px}
.uses b{font:800 24px/1 var(--display);text-transform:uppercase}
.uses span{color:var(--steel);font-size:16px}
@media (max-width:760px){.uses{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);background:#0D0F11;padding-block:40px 32px}
.foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center}
.foot img{width:84px}
.foot p{color:var(--muted);font-size:15px}
.foot nav ul{flex-wrap:wrap;gap:0}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

.project{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.project img{border-radius:4px;border:1px solid var(--line)}
.project .copy{display:grid;gap:16px}
@media (max-width:860px){.project{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}