:root{
  --navy:#0a2342; --navy-2:#123158; --red:#9e1b32; --gold:#b08d57;
  --bg:#f6f7f9; --card:#ffffff; --ink:#1c2433; --muted:#5d6b80;
  --line:#dfe4ec; --shadow:0 1px 3px rgba(10,35,66,.08),0 4px 16px rgba(10,35,66,.06);
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--navy-2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.main{padding:28px 20px 60px}
.muted{color:var(--muted)}

/* Header */
.site-header{background:var(--navy);color:#fff;border-bottom:4px solid var(--red)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand:hover{text-decoration:none}
.brand-star{font-size:30px;color:var(--gold)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:18px;letter-spacing:.3px}
.brand-text small{color:#c7d3e3;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.site-nav a{color:#dbe4f0;font-size:15px}
.site-nav a.active,.site-nav a:hover{color:#fff;text-decoration:none}
.inline-form{display:inline}
.linkbtn{background:none;border:none;color:#dbe4f0;cursor:pointer;font-size:15px;padding:0;font-family:inherit}
.linkbtn:hover{color:#fff;text-decoration:underline}

/* Footer */
.site-footer{background:#0a1a30;color:#aebed4;padding:24px 0;font-size:13px;text-align:center}
.site-footer p{margin:4px 0}

/* Hero / home */
.hero{text-align:center;padding:36px 0 12px}
.hero h1{font-size:34px;color:var(--navy);margin:0 0 10px}
.lead{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 22px}
.hero-search{display:flex;gap:8px;max-width:560px;margin:0 auto}
.hero-search input{flex:1;padding:14px 16px;font-size:16px;border:1px solid var(--line);border-radius:var(--radius)}
.hero-search button{padding:14px 26px}
.hero-links{margin-top:16px;display:flex;gap:24px;justify-content:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:36px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);color:var(--ink)}
.card:hover{text-decoration:none;border-color:var(--gold);transform:translateY(-2px);transition:.15s}
.card h3{margin:0 0 8px;color:var(--navy)}
.card p{margin:0;color:var(--muted);font-size:14px}

/* Buttons + inputs */
button,.btn-primary{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:11px 18px;font-size:15px;cursor:pointer;font-family:inherit}
button:hover,.btn-primary:hover{background:var(--navy-2);text-decoration:none}
.btn-secondary{display:inline-block;background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:8px;padding:9px 16px;font-size:14px}
.btn-secondary:hover{border-color:var(--navy);text-decoration:none}
.btn-tiny{display:inline-block;background:#eef1f6;color:var(--navy);border-radius:6px;padding:4px 10px;font-size:13px}
.btn-tiny:hover{background:#e2e8f1;text-decoration:none}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#7f1527}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=month],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:4px}
label input,label select,label textarea{font-weight:400;margin-top:5px}

/* Search page */
h1{color:var(--navy)}
.search-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:12px}
.field-row.actions{display:flex;align-items:flex-end;gap:10px;margin-bottom:0}
.results-meta{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px}
.pagesize label{display:flex;align-items:center;gap:8px;margin:0}
.pagesize select{width:auto}
table.results{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.results th{background:#eef1f6;text-align:left;padding:11px 14px;font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.4px}
table.results td{padding:11px 14px;border-top:1px solid var(--line);font-size:15px}
table.results tr:hover td{background:#fafbfd}
.pager{display:flex;justify-content:center;align-items:center;gap:20px;margin:22px 0}
.empty{padding:30px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:var(--radius)}

/* Detail */
.crumbs{margin-bottom:14px;font-size:14px}
.vet-detail{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.vet-head{display:flex;gap:22px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}
.vet-photo img,.avatar{width:104px;height:104px;border-radius:12px;object-fit:cover}
.avatar{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--gold);font-size:38px;font-weight:700}
.vet-title h1{margin:0 0 8px}
.vet-sub{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.vet-sub span{background:#eef1f6;color:var(--navy);padding:3px 10px;border-radius:20px;font-size:13px}
.vet-actions{display:flex;gap:8px;flex-wrap:wrap}
.vet-fields{display:grid;grid-template-columns:max-content 1fr;gap:8px 22px;margin:0}
.vet-fields dt{font-weight:600;color:var(--muted)}
.vet-fields dd{margin:0}
.vet-bio{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.vet-bio h2{font-size:18px;color:var(--navy)}
.vet-source{margin-top:18px;color:var(--muted);font-size:14px}

/* Forms / cards */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:560px}
.form-card.wide{max-width:880px}
.form-card label,.login-card label{margin-bottom:14px}
.form-card fieldset{border:1px solid var(--line);border-radius:8px;padding:16px;margin:0 0 18px}
.form-card legend{font-weight:700;color:var(--navy);padding:0 8px}
.form-actions{display:flex;gap:10px}
.danger-zone{margin-top:18px;max-width:880px}
.req{color:var(--red)}
.notice{background:#eef4fb;border:1px solid #cfe0f3;border-radius:8px;padding:12px 16px;margin-bottom:16px}
.notice.success{background:#eef8f0;border-color:#c6e6cd}
.notice.error{background:#fcecec;border-color:#f0c9c9;color:#8a1f2c}
.login-card,.error-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;max-width:420px;margin:20px auto}
.pw-toggle{display:flex;align-items:center;gap:6px;font-weight:400;font-size:13px;color:var(--muted);margin:-8px 0 14px}
.pw-toggle input{margin:0}
.pw-toggle input:focus{outline:2px solid var(--gold);outline-offset:2px}

/* Admin */
.admin-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.stat-row{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0}
.stat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 22px;box-shadow:var(--shadow);min-width:150px;color:var(--ink)}
.stat:hover{text-decoration:none}
.stat-alert{border-color:var(--red)}
.stat-num{font-size:28px;font-weight:700;color:var(--navy)}
.stat-label{font-size:13px;color:var(--muted)}
.admin-search{display:flex;gap:8px;margin:16px 0}
.admin-search input{max-width:360px}
.badge{display:inline-block;background:#eef1f6;color:var(--navy);padding:2px 9px;border-radius:12px;font-size:12px;text-transform:capitalize}
.badge-new{background:#fde8c8;color:#8a5a00}
.badge-accepted{background:#d8f0dd;color:#1d6b2f}
.badge-dismissed{background:#eceff3;color:#5d6b80}
.row-new td{background:#fffdf6}
.msg-cell{max-width:320px;font-size:14px;color:var(--muted)}

/* Print */
.print-body{background:#fff;color:#000;font-family:Georgia,serif}
.print-sheet{max-width:700px;margin:30px auto;padding:0 24px}
.print-head{text-align:center;border-bottom:3px double #000;padding-bottom:10px;margin-bottom:18px}
.print-head h1{font-size:18px;margin:0;color:#000}
.print-head p{margin:4px 0 0;letter-spacing:2px;text-transform:uppercase;font-size:12px}
.print-table{width:100%;border-collapse:collapse;margin-top:10px}
.print-table th{text-align:left;width:170px;padding:6px 8px;vertical-align:top;color:#333}
.print-table td{padding:6px 8px;border-bottom:1px solid #ddd}
.print-foot{margin-top:30px;text-align:center;font-size:11px;color:#666}
@media print{.btn-secondary{display:none}}

/* Kiosk */
.kiosk-body{background:radial-gradient(circle at top,#123158,#06122a);min-height:100vh;color:#fff;margin:0}
.kiosk-wrap{max-width:900px;margin:0 auto;padding:40px 24px;text-align:center}
.kiosk-header .brand-star{font-size:54px;color:var(--gold)}
.kiosk-header h1{font-size:42px;margin:8px 0 4px}
.kiosk-header p{font-size:20px;color:#bcd0ea;margin:0 0 28px}
.kiosk-search{display:flex;gap:12px;max-width:680px;margin:0 auto 10px}
.kiosk-search input{font-size:28px;padding:18px 22px;border-radius:14px;border:none}
.kiosk-search button{font-size:24px;padding:18px 34px;border-radius:14px;background:var(--red)}
.kiosk-search button:hover{background:#7f1527}
.kiosk-clear{display:flex;align-items:center;color:#bcd0ea;font-size:18px;padding:0 8px}
.kiosk-empty{font-size:24px;margin-top:30px;color:#e7c9c9}
.kiosk-results{list-style:none;padding:0;margin:26px 0;display:grid;gap:12px;text-align:left}
.kiosk-results a{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px 24px;color:#fff}
.kiosk-results a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.kr-name{font-size:26px;font-weight:600}
.kr-meta{font-size:18px;color:#bcd0ea}
.kiosk-onscreen{margin-top:30px}
.kiosk-onscreen p{font-size:20px;color:#9fb6d6}
.osk{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:680px;margin:16px auto}
.osk button{width:60px;height:60px;font-size:26px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px}
.osk button:hover{background:rgba(255,255,255,.22)}

@media (max-width:560px){
  .vet-head{flex-direction:column}
  .vet-fields{grid-template-columns:1fr}
  .vet-fields dt{margin-top:8px}
}

/* Service insignia */
.vet-insignia{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;
  margin:18px 0 22px;padding:18px 20px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.vet-insignia .ins{margin:0;text-align:center;width:96px}
.vet-insignia .ins img{height:72px;width:auto;max-width:96px;object-fit:contain;display:block;margin:0 auto 6px}
.vet-insignia .ins figcaption{font-size:12px;color:var(--muted);line-height:1.25}

.vet-medals{margin-top:22px}
.vet-medals h2{color:var(--navy);font-size:18px;margin:0 0 12px}
.medal-row{display:flex;flex-wrap:wrap;gap:18px}
.medal{margin:0;text-align:center;width:84px}
.medal img{height:56px;width:auto;max-width:84px;object-fit:contain;display:block;margin:0 auto 6px}
.medal figcaption{font-size:11px;color:var(--muted);line-height:1.2}

/* Branch emblem in search results */
.branch-cell{white-space:nowrap}
.ins-mini{height:20px;width:20px;object-fit:contain;vertical-align:middle;margin-right:7px}

/* ---- Branding: hero band + section backgrounds (generated art under scrims) ---- */
.hero-band{
  background:
    linear-gradient(rgba(10,35,66,.74), rgba(10,35,66,.60)),
    url('/static/branding/hero-monument.jpg') center/cover no-repeat;
  border-bottom:4px solid var(--red);
  margin:-28px -20px 28px;            /* bleed to the edges of .main padding */
  padding:8px 20px 28px;
}
.hero-band .hero h1{color:#fff}
.hero-band .hero .lead{color:#dbe4f0}
.hero-band .hero .lead strong{color:#fff}
.hero-band .hero-links a{color:#e7d3a8}
.hero-band .hero-links a:hover{color:#fff}

/* Subtle scrimmed top band usable behind any section heading */
.section-band{position:relative;background-size:cover;background-position:center;
  margin:-28px -20px 24px;padding:26px 20px 22px;border-bottom:1px solid var(--line)}
.section-band>*{position:relative;z-index:1}
.section-band::before{content:'';position:absolute;inset:0;background:rgba(246,247,249,.82);pointer-events:none}
.section-band.dark{border-bottom-color:var(--navy)}
.section-band.dark::before{background:rgba(10,35,66,.78)}
.section-band.dark h1,.section-band.dark p{color:#fff}
.bg-search{background-image:url('/static/branding/bg-search.png')}
.bg-honorees{background-image:url('/static/branding/bg-honorees.png')}
.bg-bricks{background-image:url('/static/branding/bg-bricks.png')}
.bg-contact{background-image:url('/static/branding/bg-contact.png')}
.bg-home{background-image:url('/static/branding/bg-home.png')}

/* Inline checkbox labels in the admin form */
label.check{display:inline-flex;align-items:center;gap:6px}
label.check input{width:auto;margin:0}

/* Service-date precision widget (views/_service-date.ejs) */
.sdate-label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:4px}
.sdate-modes{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 6px}
.sdate-modes label.check{font-size:13px;font-weight:400;margin:0}

/* ---- Inline SVG icons (inherit the surrounding text color) ---- */
.ic{display:inline-block;flex:none;vertical-align:-0.16em;width:1em;height:1em}
.site-nav a,.linkbtn{display:inline-flex;align-items:center;gap:6px}
.site-nav .ic,.linkbtn .ic{width:16px;height:16px;opacity:.92}
button,.btn-primary,.btn-secondary,.btn-tiny{display:inline-flex;align-items:center;justify-content:center;gap:7px}
button .ic,.btn-primary .ic,.btn-secondary .ic{width:16px;height:16px}
.btn-tiny .ic{width:13px;height:13px}
.card h3{display:flex;align-items:center;gap:11px}
.card h3 .ic{width:26px;height:26px;color:var(--gold);stroke-width:1.55}
.vet-actions .btn-secondary .ic{color:var(--navy-2)}
.hero-links a,.crumbs a,.pager a{display:inline-flex;align-items:center;gap:5px}

/* ---- Mobile: prevent horizontal overflow (header was falling off / white gap) ---- */
img{max-width:100%;height:auto}            /* never let an image push the page wide */
@media (max-width:760px){
  .header-inner{padding:12px 16px}
  .site-nav{gap:8px 14px;font-size:14px;width:100%}
  .hero-band,.section-band{margin-left:-16px;margin-right:-16px}
  .main{padding-left:16px;padding-right:16px}
  /* Wide data tables scroll inside their own box instead of widening the page */
  .results{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .results th,.results td{white-space:nowrap}
}

/* ============================================================
   Showpiece home + patriotic accents + kiosk contrast (v2)
   Appended last so these win by source order. Motion is gated
   on prefers-reduced-motion below.
   ============================================================ */

/* --- Full-height layered hero --- */
.hero-band{
  position:relative; overflow:hidden;
  min-height:80vh; display:flex; align-items:center; justify-content:center;
  background:var(--navy);
  border-bottom:4px solid var(--red);
  margin:-28px -20px 32px; padding:56px 20px;
}
.hero-band .hero-bg,
.hero-band .hero-veil,
.hero-band .hero-flag{position:absolute; inset:0; pointer-events:none}
.hero-band .hero-bg{
  background:url('/static/branding/hero-monument.jpg') center/cover no-repeat;
  transform:scale(1.03); animation:heroKenBurns 22s ease-out forwards;
}
.hero-band .hero-veil{
  background:linear-gradient(180deg, rgba(10,35,66,.50) 0%, rgba(10,35,66,.66) 55%, rgba(10,35,66,.85) 100%);
}
.hero-band .hero-flag{
  background:url('/static/branding/flag-hero.jpg') center/cover no-repeat;
  opacity:.18; mix-blend-mode:overlay;
}
@keyframes heroKenBurns{ from{transform:scale(1.03)} to{transform:scale(1.12)} }

.hero-band .hero{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 6px}
.hero-band .hero-star{
  display:block; font-size:52px; line-height:1; color:var(--gold);
  margin:0 0 8px; text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.hero-band .hero h1{
  font-size:clamp(34px, 5vw, 56px); color:#fff; margin:0 0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.hero-band .hero .lead{font-size:clamp(16px,2vw,20px); color:#e7eefa; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero-band .hero .lead strong{color:#fff}
.hero-band .hero-search{max-width:600px; margin:22px auto 0; box-shadow:0 14px 40px rgba(0,0,0,.3); border-radius:var(--radius)}
.hero-band .hero-search input{padding:16px 18px; font-size:17px; border:none}
.hero-band .hero-search button{padding:16px 28px; font-size:16px}
.hero-band .hero-links{margin-top:18px}
.hero-band .hero-links a{color:#e7d3a8; font-weight:600}
.hero-band .hero-links a:hover{color:#fff}
.hero-band .hero-links .ic{width:.8em; height:.8em; opacity:.85}

/* --- Animated stat band --- */
.homestats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  max-width:1040px; margin:0 auto 34px;
}
.homestats .sb{
  flex:1 1 150px; min-width:138px; max-width:200px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:var(--radius); padding:18px 14px; box-shadow:var(--shadow);
}
.homestats .sb-num{
  display:block; font-family:var(--display,"Source Serif 4",Georgia,serif);
  font-size:clamp(28px,3.4vw,38px); font-weight:700; color:var(--navy); line-height:1.05;
}
.homestats .sb-label{display:block; font-size:12.5px; color:var(--muted); margin-top:5px; letter-spacing:.2px}

/* --- Patriotic footer --- */
.site-footer{
  position:relative; overflow:hidden;
  background:#0a1a30; color:#aebed4; padding:32px 0 28px; text-align:center;
  border-top:3px solid var(--gold);
}
.site-footer::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('/static/branding/flag-field.jpg') center/cover no-repeat; opacity:.07;
}
.site-footer .wrap{position:relative; z-index:1}
.site-footer .footer-star{font-size:26px; color:var(--gold); line-height:1; margin-bottom:8px}
.site-footer .footer-org{font-size:15px; color:#e7eefa; font-weight:600; margin:0 0 4px; letter-spacing:.3px}
.site-footer .footer-tribute{
  font-family:var(--display,"Source Serif 4",Georgia,serif);
  font-style:italic; color:#cdb37e; font-size:15px; margin:12px 0 4px;
}
.site-footer .footer-credit{font-size:12px; opacity:.8}

/* --- Kiosk: fix low-contrast "blue on blue" text --- */
.kiosk-header h1{color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4)}  /* was dark navy on navy = invisible */
.kiosk-header p{color:#eaf1fb}
.kiosk-onscreen p{color:#d3e1f5}
.kiosk-clear{color:var(--gold)}
.kr-meta{color:#d3e1f5}
.kiosk-results a{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18)}

@media (prefers-reduced-motion: reduce){
  .hero-band .hero-bg{animation:none; transform:none}
}
@media (max-width:760px){
  .hero-band{min-height:72vh; margin-left:-16px; margin-right:-16px; padding:44px 16px}
}