/* Macoupin County VAC — "American Civic Institutionalism"
   Recreated from the Manus build. Navy + Gold + Cream; Merriweather + Source Sans 3.
   NOTE: gold accents are per the original Manus design and conflict with the VAC
   "no gold" brand standard — swap --gold to a blue to convert. */
:root{
  --navy:#1B2A4A; --navy-dark:#122039; --gold:#C9A84C; --gold-dark:#b8963c; --gold-text:#7C5F14;
  --gold-light:#E7D7A6; --cream:#F5F3EE; --crisis:#9A3324;
  --ink:#20262f; --muted:#5A6478; --muted2:#676F82; --border:#D7DBE2;
  --foot:#DCD9D0; --foot-border:#3A4A6B;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;line-height:1.6;}
h1,h2,h3,h4,h5,h6{font-family:'Merriweather',Georgia,serif;}
a{color:var(--navy);}
.container-x{max-width:1280px;margin:0 auto;padding-left:1rem;padding-right:1rem;}
@media(min-width:640px){.container-x{padding-left:1.5rem;padding-right:1.5rem;}}
@media(min-width:1024px){.container-x{padding-left:2rem;padding-right:2rem;}}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* dividers */
.gold-divider{height:3px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:1.5rem 0;}
.gold-divider-left{height:3px;width:80px;background:var(--gold);margin-bottom:1rem;}

/* section bg helpers */
.section-navy{background:var(--navy);color:#fff;}
.section-cream{background:var(--cream);}
.section-white{background:#fff;}
.crisis-bar{background:var(--crisis);color:#fff;}

/* buttons */
.btn-gold,.btn-navy,.btn-outline-gold{display:inline-block;font-family:'Source Sans 3',sans-serif;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem;border-radius:2px;
  text-decoration:none;transition:all .2s ease;cursor:pointer;}
.btn-gold{background:var(--gold);color:var(--navy-dark);padding:.75rem 1.75rem;border:2px solid var(--gold);}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(201,168,76,.4);}
.btn-navy{background:var(--navy);color:#fff;padding:.75rem 1.75rem;border:2px solid var(--navy);}
.btn-navy:hover{background:var(--navy-dark);transform:translateY(-1px);}
.btn-outline-gold{border:2px solid var(--gold-text);color:var(--gold-text);background:transparent;padding:.65rem 1.5rem;}
.btn-outline-gold:hover{background:var(--gold);color:var(--navy-dark);}

/* cards */
.service-card{background:#fff;border-top:4px solid var(--gold);border-radius:2px;padding:2rem;
  box-shadow:0 2px 12px rgba(27,42,74,.08);transition:all .25s ease;height:100%;text-decoration:none;display:block;color:var(--ink);}
.service-card:hover{box-shadow:0 8px 24px rgba(27,42,74,.15);transform:translateY(-3px);}
.benefit-card{border-left:4px solid var(--gold);padding:1.25rem 1.5rem;background:var(--cream);
  margin-bottom:.75rem;transition:all .2s ease;}
.benefit-card:hover{background:#fff;box-shadow:0 2px 8px rgba(27,42,74,.1);}
.stat-number{font-family:'Merriweather',Georgia,serif;font-size:3rem;font-weight:900;color:var(--gold-text);line-height:1;}

/* nav */
.navlink{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:.9rem;color:var(--navy);
  padding:.5rem .75rem;border-radius:2px;text-decoration:none;transition:all .2s;}
.navlink:hover,.navlink.active{background:var(--navy);color:#fff;}

/* animation */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.reveal{opacity:0;}
.reveal.in{animation:fadeInUp .6s ease forwards;}

/* generic helpers used in pages */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);font-family:'Source Sans 3',sans-serif;}
.lead{font-size:1.12rem;color:var(--muted);}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:200;}
.skip:focus{left:8px;top:8px;}

/* ---- page-level helpers for interior pages ---- */
.pagehead{background:var(--navy);color:#fff;padding:3.25rem 0;}
.pagehead h1{font-size:2.2rem;font-weight:900;color:#fff;margin:.2rem 0 .4rem;}
.pagehead p{color:rgba(255,255,255,.78);font-size:1.05rem;margin:0;}
.h2blk{font-weight:900;font-size:1.55rem;color:var(--navy);margin:0 0 1rem;}
.vactable{width:100%;border-collapse:collapse;font-size:.9rem;}
.vactable th{background:var(--navy);color:#fff;text-align:left;padding:.6rem .75rem;font-family:'Source Sans 3',sans-serif;}
.vactable td{padding:.6rem .75rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink);}
.vactable tr:nth-child(even) td{background:var(--cream);}
.card-b{background:#fff;border:1px solid var(--border);border-radius:2px;padding:1.25rem;}
.callout-l{border-left:4px solid var(--gold);background:#fff;padding:1.25rem 1.5rem;border-radius:2px;}
.callout-crisis{border-left:4px solid var(--crisis);background:#fff;padding:1.25rem 1.5rem;border-radius:2px;}
details.acc-item{border:1px solid var(--border);border-radius:2px;margin-bottom:.75rem;background:#fff;overflow:hidden;}
details.acc-item>summary{padding:1.1rem 1.25rem;font-family:Merriweather,serif;font-weight:700;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;}
details.acc-item>summary::-webkit-details-marker{display:none;}
details.acc-item>summary::after{content:"+";color:var(--gold-text);font-weight:700;font-size:1.3rem;}
details.acc-item[open]>summary{background:var(--navy);color:#fff;}
details.acc-item[open]>summary::after{content:"\2013";color:#fff;}
details.acc-item .acc-body{padding:1.5rem;border-top:1px solid var(--border);background:#fcfdff;}
.acc-sub{font-size:.8rem;font-weight:400;color:var(--muted2);font-family:'Source Sans 3',sans-serif;display:block;margin-top:.15rem;}
.reslink{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-text);text-decoration:none;}

/* ---- unified dropdown navigation ---- */
.mainnav .navmenu{list-style:none;display:flex;gap:.15rem;margin:0;padding:0;align-items:center;}
.mainnav .navmenu>li{position:relative;}
.mainnav .navmenu>li>a,.mainnav .navtop{display:block;padding:.55rem .7rem;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:.85rem;color:var(--navy);text-decoration:none;border-radius:2px;cursor:pointer;white-space:nowrap;background:none;border:0;}
.mainnav .navmenu>li>a:hover,.mainnav .navtop:hover,.mainnav .has-sub:hover .navtop,.mainnav .has-sub:focus-within .navtop{background:var(--navy);color:#fff;}
.mainnav .sub{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--border);border-top:3px solid var(--gold);box-shadow:0 10px 26px rgba(27,42,74,.18);list-style:none;margin:0;padding:.3rem;display:none;z-index:60;}
.mainnav .has-sub:hover .sub,.mainnav .has-sub:focus-within .sub{display:block;}
.mainnav .sub li a{display:block;padding:.5rem .7rem;font-size:.85rem;color:var(--navy);text-decoration:none;border-radius:2px;white-space:nowrap;}
.mainnav .sub li a:hover{background:var(--cream);color:var(--gold-text);}
@media(max-width:1023px){.mainnav{display:none;}}

/* ---- nav: click-open + responsive (paired with nav.js) ---- */
.navtoggle{display:none;background:var(--navy);color:#fff;border:0;font-weight:700;font-size:.9rem;padding:.55rem .95rem;border-radius:3px;cursor:pointer;font-family:'Source Sans 3',sans-serif;flex-shrink:0;}
.mainnav .has-sub.open .sub{display:block;}   /* click-open on desktop */
header .container-x{position:relative;}
@media(max-width:1023px){
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--border);box-shadow:0 12px 26px rgba(27,42,74,.18);z-index:70;max-height:80vh;overflow:auto;}
  .mainnav.open{display:block;}
  .mainnav .navmenu{flex-direction:column;align-items:stretch;gap:0;padding:.4rem;}
  .mainnav .navmenu>li{position:static;border-bottom:1px solid var(--cream);}
  .mainnav .navmenu>li>a,.mainnav .navtop{padding:.8rem .7rem;font-size:.95rem;}
  .mainnav .sub{position:static;display:none;min-width:0;border:0;border-top:0;box-shadow:none;padding:0 0 .4rem 1.1rem;}
  .mainnav .has-sub.open .sub{display:block;}
  .navtoggle{display:inline-block;}
}

/* ---- round 1: contrast + header CTA ---- */
.reslink{color:var(--navy);}            /* small link text -> navy for AA contrast */
.hdr-cta{display:inline-block;background:var(--gold);color:var(--navy-dark);font-family:'Source Sans 3',sans-serif;font-weight:700;letter-spacing:.03em;font-size:.82rem;text-transform:uppercase;padding:.6rem 1rem;border-radius:3px;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.hdr-cta:hover{background:var(--gold-dark);}
@media(max-width:1023px){.hdr-cta{display:none;}}

/* ---- emails always lowercase (override .reslink uppercase) ---- */
a.reslink[href^="mailto:"]{text-transform:lowercase;letter-spacing:normal;}

/* ---- readability: enlarge small captions/links/tables ---- */
.reslink{font-size:.84rem;}
.acc-sub{font-size:.9rem;}
.vactable{font-size:.96rem;}
.eyebrow{font-size:.78rem;}
figcaption{font-size:.9rem;}

/* ---- mobile: compact tables (horizontal scroll preserved) ---- */
@media(max-width:640px){
  .vactable{font-size:.84rem;}
  .vactable th,.vactable td{padding:.45rem .5rem;}
}

/* ---- staff photo placeholders (Our Team) ---- */
.staff-photo{width:120px;height:120px;margin:0 auto .9rem;border-radius:50%;overflow:hidden;border:3px solid var(--gold);box-shadow:0 2px 10px rgba(27,42,74,.15);background:var(--cream);}
.staff-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.staff-ph{display:none;width:100%;height:100%;align-items:center;justify-content:center;background:var(--navy);color:var(--gold);font-family:Merriweather,serif;font-weight:700;font-size:2rem;letter-spacing:.04em;}

/* ---- core values chips (home) ---- */
.val-chip{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--gold);border-radius:999px;padding:.42rem .95rem;font-size:.85rem;font-weight:600;font-family:'Source Sans 3',sans-serif;}

/* ============================================================
   MOBILE FIX (2026-07-06): keep header on-screen on phones.
   The logo link is flex-shrink:0 with a large non-wrapping
   org name, which pushed the ☰ menu button off the right edge
   on narrow devices. Let the logo shrink and scale on mobile,
   and guard against any horizontal overflow.
   ============================================================ */
html, body { overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }

@media (max-width: 640px){
  /* white header bar: tighten and stop forcing desktop width */
  header .container-x[style*="min-height"]{ min-height: 68px !important; gap: .5rem !important; }
  /* logo: allow it to shrink so the menu button stays visible */
  header a[href="index.html"].flex{ flex-shrink: 1 !important; min-width: 0 !important; gap: .5rem !important; }
  header a[href="index.html"].flex img{ width: 46px !important; height: 46px !important; }
  header a[href="index.html"].flex > span{ min-width: 0; }
  header a[href="index.html"].flex > span > span:first-child{ font-size: .9rem !important; line-height: 1.1 !important; }
  header a[href="index.html"].flex > span > span:last-child{ font-size: .62rem !important; letter-spacing: .03em !important; }
  /* hamburger: compact and never shrink away */
  .navtoggle{ padding: .5rem .7rem !important; flex-shrink: 0 !important; }
  /* media never wider than the screen */
  img, iframe, video, table { max-width: 100% !important; }
}

/* very small phones: hide the county sub-line to save width */
@media (max-width: 380px){
  header a[href="index.html"].flex > span > span:last-child{ display: none !important; }
}

/* mobile: crisis bar — shrink text so the phone number isn't clipped */
@media (max-width: 640px){
  .crisis-bar .container-x{ font-size: .74rem !important; }
  .crisis-bar .container-x [class*="gap-"]{ gap: .5rem !important; }
}
@media (max-width: 400px){
  .crisis-bar .container-x{ font-size: .68rem !important; }
}

/* ============================================================
   HEADER BRANDING EMPHASIS (2026-07-06): the seal + Commission
   name are the center of who we are — make them prominent.
   Overrides the inline sizes in the page markup.
   ============================================================ */
header a[href="index.html"].flex img{ width: 104px !important; height: 104px !important; }
header a[href="index.html"].flex > span > span:first-child{ font-size: 1.55rem !important; line-height: 1.1 !important; letter-spacing: .005em !important; }
header a[href="index.html"].flex > span > span:last-child{ font-size: .95rem !important; letter-spacing: .14em !important; }
header .container-x[style*="min-height"]{ min-height: 128px !important; }

/* prominent but still on-screen on phones (menu button stays put) */
@media (max-width: 640px){
  header .container-x[style*="min-height"]{ min-height: 92px !important; }
  header a[href="index.html"].flex img{ width: 74px !important; height: 74px !important; }
  header a[href="index.html"].flex > span > span:first-child{ font-size: 1.15rem !important; }
  header a[href="index.html"].flex > span > span:last-child{ font-size: .7rem !important; }
}
@media (max-width: 380px){
  header a[href="index.html"].flex img{ width: 64px !important; height: 64px !important; }
  header a[href="index.html"].flex > span > span:first-child{ font-size: 1.02rem !important; }
  header a[href="index.html"].flex > span > span:last-child{ display: none !important; }
}

/* ============================================================
   CALLOUT CARDS (2026-07-06): make service cards read clearly
   as tappable buttons — especially on mobile.
   ============================================================ */
.service-card{
  border:1px solid var(--border) !important;
  border-top:4px solid var(--gold) !important;
  border-radius:10px !important;
  box-shadow:0 3px 12px rgba(27,42,74,.12) !important;
}
.service-card:hover, .service-card:focus-visible{
  box-shadow:0 12px 28px rgba(27,42,74,.22) !important;
  transform:translateY(-4px) !important;
  border-color:var(--gold) !important;
}
.service-card:active{ transform:translateY(-1px) !important; }
.service-card:hover h3{ color:var(--gold-text) !important; }
.card-cta{
  display:inline-block; margin-top:1.1rem;
  background:var(--gold); color:var(--navy-dark);
  font-family:'Source Sans 3',sans-serif; font-weight:800;
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.55rem 1.1rem; border-radius:8px; text-decoration:none;
  box-shadow:0 2px 6px rgba(27,42,74,.15);
}
.service-card:hover .card-cta{ background:var(--gold-dark); }
@media (max-width:640px){
  .service-card{ box-shadow:0 4px 16px rgba(27,42,74,.18) !important; }
  .card-cta{ display:block; text-align:center; margin-top:1rem; }
}

/* ===== SECONDARY "Learn More" GHOST BUTTONS (How We Serve You cards) ===== */
.card-learn{ display:inline-block; margin-top:.6rem; border:2px solid var(--navy); color:var(--navy); background:transparent; font-family:'Source Sans 3',sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:.45rem 1rem; border-radius:8px; text-decoration:none; transition:background .15s ease,color .15s ease; }
.service-card:hover .card-learn, .service-card:focus-visible .card-learn{ background:var(--navy); color:#fff; }
@media (max-width:640px){ .card-learn{ display:block; text-align:center; margin-top:.85rem; } }

/* ============================================================
   SEAL ASPECT-RATIO FIX (2026-07-06): keep the header seal a
   perfect circle on phones. Flexbox + min-width:0 was squashing
   its width while height held, making it oblong. Lock it square.
   ============================================================ */
header a[href="index.html"].flex img{ flex-shrink:0 !important; aspect-ratio:1 / 1 !important; object-fit:contain !important; min-width:0 !important; }

/* ============================================================
   CARD ACTION LINKS (2026-07-06): reslinks that live INSIDE a
   service-card become navy-outline buttons so they clearly read
   as tappable — matching the homepage "Learn More" treatment.
   Scoped to cards only; inline/prose/email reslinks are untouched.
   ============================================================ */
.service-card a.reslink:not([href^="mailto:"]){
  display:inline-block; margin-top:.85rem;
  border:2px solid var(--navy); color:var(--navy) !important; background:transparent;
  font-family:'Source Sans 3',sans-serif; font-weight:800; font-size:.75rem;
  letter-spacing:.04em; text-transform:uppercase; padding:.45rem 1rem;
  border-radius:8px; text-decoration:none; transition:background .15s ease,color .15s ease;
}
.service-card a.reslink:not([href^="mailto:"]):hover,
.service-card a.reslink:not([href^="mailto:"]):focus-visible,
.service-card:hover a.reslink:not([href^="mailto:"]){ background:var(--navy); color:#fff !important; }
@media (max-width:640px){
  .service-card a.reslink:not([href^="mailto:"]){ display:block; text-align:center; margin-top:.9rem; }
}

/* standalone navy-outline buttons (e.g., "Read Our Mission" in Who We Are) fill on their own hover */
a.card-learn:hover, a.card-learn:focus-visible{ background:var(--navy); color:#fff !important; }

/* ============================================================
   HYPERLINK VISIBILITY (2026-07-07): text links in page content
   render blue + underlined so they clearly read as clickable.
   Scoped to <main> so the header, nav, footer, buttons, and
   whole-card (.card-b / .service-card) links are untouched.
   ============================================================ */
main a{ color:#0B57A6; text-decoration:underline; text-underline-offset:2px; }
main a:hover{ color:#08417a; }
main .reslink{ color:#0B57A6; text-decoration:underline; }
main a.card-b{ text-decoration:none; }
/* outlined "->" action links become blue boxes (match the link color) */
main .service-card a.reslink:not([href^="mailto:"]),
main a.card-learn{ border-color:#0B57A6 !important; color:#0B57A6 !important; text-decoration:none; }
main .service-card a.reslink:not([href^="mailto:"]):hover,
main .service-card a.reslink:not([href^="mailto:"]):focus-visible,
main .service-card:hover a.reslink:not([href^="mailto:"]),
main a.card-learn:hover, main a.card-learn:focus-visible{ background:#0B57A6 !important; color:#fff !important; }

/* ============================================================
   DEVICE-AWARE PHONE LINKS (2026-07-30)
   Applied by nav.js on desktops and laptops only. On phones and
   tablets none of these rules match, because the class is never
   added and the tel: link is left untouched.
   Purpose: stop the "how do you want to open this?" app-picker
   that was confusing Veterans into thinking an app was required.
   ============================================================ */
a.tel-static{
  cursor: copy;
  position: relative;
  white-space: nowrap;
}
a.tel-static:hover,
a.tel-static:focus-visible{
  text-decoration-style: dotted;
}
a.tel-static:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.tel-toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  background: var(--navy, #1B3A6B);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  padding: .7rem 1.15rem;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  max-width: calc(100vw - 32px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 9999;
}
.tel-toast.show{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .tel-toast{ transition: opacity .01s linear, visibility .01s; transform: translateX(-50%); }
  .tel-toast.show{ transform: translateX(-50%); }
}
@media print{
  a.tel-static{ cursor: auto; }
  .tel-toast{ display: none; }
}


/* ============================================================
   WCAG 2.1 AA CONTRAST REMEDIATION (2026-07-30)
   ADA Title II requires WCAG 2.1 AA for macvac.org by
   26 April 2028 (DOJ interim final rule, 17 Apr 2026).
   --muted2 darkened #6E7689 -> #676F82: was 4.10:1 on cream,
   below the 4.5:1 threshold for normal text (SC 1.4.3).
   Gold is retained as a BACKGROUND with navy text (6.22:1).
   GOLD AS TEXT IS BACKGROUND-DEPENDENT and this is the trap:
     on light backgrounds use --gold-text #7C5F14 (5.99:1);
     on the navy footer that same colour is 2.71:1 and FAILS.
     Footers use --gold #C9A84C (7.12:1) or --gold-light (11.36:1).
   Footer link opacity was also blending #DCD9D0 down to #82868c
   (4.44:1, just under threshold); forced to full opacity below.
   ============================================================ */

/* Footer sits on --navy-dark #122039. Force legible values there. */
footer a, footer a:visited{ color:#E7D7A6 !important; opacity:1 !important; }
footer a:hover, footer a:focus-visible{ color:#FFFFFF !important; }
footer, footer p, footer span, footer li, footer div{ opacity:1 !important; }
footer [style*="--foot"], footer [style*="var(--foot)"]{ color:#DCD9D0 !important; opacity:1 !important; }
footer [style*="--gold-text"], footer .reslink{ color:#C9A84C !important; opacity:1 !important; }

/* Small white-on-goldenrod badges: darken the plate to clear 4.5:1 */
/* Goldenrod plate: keep the brand colour, darken the TEXT instead of the plate,
   because the card also carries dark-on-gold children that a darker plate broke. */
[style*="rgb(184, 134, 11)"], [style*="#b8860b"], [style*="#B8860B"]{ color:#122039 !important; }
[style*="rgb(184, 134, 11)"] *, [style*="#b8860b"] *, [style*="#B8860B"] *{ color:#122039 !important; }
[style*="rgb(224, 122, 47)"]{ background:#BF590E !important; }


/* Gold outline buttons sitting on navy panels: --gold-text is 2.37:1 there.
   Light gold clears 9.93:1 and keeps the outlined-gold look. */

/* NOT FIXED IN CSS — .btn-outline-gold appears on BOTH light and navy panels and
   the class alone cannot distinguish them. Three instances (contact.html and the
   "Call" buttons on community/eras) render --gold-text #7C5F14 on navy at 2.37:1.
   Fix per instance in the HTML: add style="color:#E7D7A6;border-color:#E7D7A6"
   to the ones on navy. Do NOT attempt a blanket CSS override — it regresses the
   light-panel instances. Verified 2026-07-30. */