/* Shared styles for every page: kit colors, header, footer and form fields. Linked before each page's own <style>,
   so a page can still add to or override these. Colors and fonts follow social-kit/brand-kit.html. */
:root{--black:#0a1a3f;--ink:#16181d;--red:#d8283a;--red-d:#a81b2b;--muted:#5d5b53;--head:"Oswald","Arial Narrow","Impact",sans-serif}

/* header (partials/header.html) */
nav{position:sticky;top:0;z-index:100;background:var(--black);border-bottom:1px solid #1d3266}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font:700 1.35rem var(--head);letter-spacing:.08em;text-decoration:none}
.brand .star{color:#fff;font-size:1.5rem;line-height:1}
.brand .logo{background:var(--red);padding:0 8px;transform:skew(-8deg)}
.brand .logo span{display:inline-block;transform:skew(8deg)}
.nlink{color:#fff;font:600 .95rem var(--head);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
.nlink:hover{border-color:#fff}
.navright{display:flex;align-items:center;gap:26px;flex:1;margin-left:48px}
.navlinks{display:flex;gap:26px;list-style:none;flex:1;margin:0;padding:0}
.navlinks a{color:#d7ddf0;font:600 .95rem var(--head);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:2px 0;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a[aria-current=true]{color:#fff;border-color:#fff}
.navsocial{margin-left:auto}   /* links sit left, next to the logo; icons and Contact us sit right */
.navsocial .lbl{display:none}
.navlinks .social a{width:40px;height:32px;padding:0;border:0}
.navlinks .social svg{width:18px;height:18px}
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:#fff;margin:5px 0;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:1200px){
  .burger{display:block}
  .navright{gap:14px;justify-content:flex-end}
  .nlink{font-size:.85rem;letter-spacing:.1em}
  .navlinks{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;background:var(--black);border-top:1px solid #1d3266;border-bottom:4px solid var(--red);box-shadow:0 18px 30px rgba(0,0,0,.35)}
  .navlinks.open{display:flex}
  .navlinks a{display:block;padding:18px 24px;font-size:1.25rem;border-bottom:1px solid #1d3266}
  .navlinks a[aria-current=true]{border-bottom-color:#1d3266;background:#13306b}
  .navlinks .navsocial{padding:18px 24px;margin-left:0}
  .navsocial .lbl{display:inline}
  .navlinks .social a{display:inline-grid;width:56px;height:44px}
  .navlinks .social svg{width:22px;height:22px}
}
@media(max-width:380px){.brand{font-size:1.1rem}.nlink{font-size:.78rem}}
nav .wrap{max-width:1400px}

/* footer and the Follow us icons (partials/footer.html) */
.social{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.social .lbl{font:600 1rem var(--head);letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-right:6px}
.social a{position:relative;isolation:isolate;display:inline-grid;place-items:center;width:56px;height:44px;color:#fff;transition:color .15s}
.social a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);transition:background .15s}
.social a:hover,.social a:focus-visible{color:var(--black)}
.social a:hover::before,.social a:focus-visible::before{background:#fff}
.social svg{width:22px;height:22px}
footer .social{margin-bottom:18px}

footer{background:#06112b;color:#aaa;padding:40px 0;font-size:.9rem;border-top:1px solid #1d3266}
footer a{color:#fff}
footer details{background:none;border:0;padding:0;margin:0;color:inherit;max-width:760px}
footer summary{font:inherit;letter-spacing:0;text-transform:none;padding:0;color:#fff;text-decoration:underline;text-underline-offset:2px}
footer details p,footer details li{font-size:inherit}
footer details+details{margin-top:12px}
footer details h4{color:#fff}
footer details h4{margin:16px 0 2px}
footer summary{cursor:pointer}
footer .small{font-size:.85rem}

/* form fields: sign-up form (index.html) and pledge form (day-of-action.html) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.frow>*{min-width:0}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.field{margin-bottom:6px}
.field label{display:block;font:600 .9rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--black);margin-bottom:6px}
.field .opt{font:400 .85rem var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:1.05rem;padding:12px 14px;border:2px solid var(--black);border-radius:0;background:#fff;color:var(--ink)}
.field input,.field select{height:3.45rem}
.field textarea{resize:vertical;min-height:110px}
.field select:invalid{color:var(--muted)}   /* "Choose your state" looks like a placeholder */
.field select option{color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red)}
.field [aria-invalid=true]{border-color:var(--red-d);background:#fff6f6}
.ferr{min-height:1.4em;margin:4px 0 0;font-size:.85rem;font-weight:600;color:var(--red-d)}
.fstatus{margin:12px 0 0;font-size:.92rem;font-weight:600;color:var(--red-d)}
.fstatus:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}