/* Shared stylesheet for all Virginia Record Seal pages.
   Design choices below follow British Dyslexia Association style-guide recommendations
   (sans-serif only, generous line spacing, soft background instead of stark white, left-aligned
   text, no justification, headings noticeably larger than body) and ADHD-friendly content-design
   guidance (short chunks, one idea per block, no motion/animation, clear visual separation between
   sections). */

:root{
  --navy:#1a2744;
  --navy-light:#2a3d5c;
  --gold:#c5a55a;
  --gold-light:#d4bc7e;
  --cream:#faf8f4;
  --card:#fffdf7;
  --gray:#6b7280;
  --light-gray:#e5e7eb;
  --red:#b91c1c;
  --green:#166534;
  --green-bg:#f0fdf4;
  --amber:#92400e;
  --amber-bg:#fffbeb;
  --sans:'Verdana','Segoe UI','Open Sans','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;background:var(--cream);color:#26303d;line-height:1.7;letter-spacing:.01em;min-height:100vh}

header{background:var(--navy);color:#fff;text-align:center;padding:2rem 1rem 1.75rem;border-bottom:4px solid var(--gold)}
header h1{font-family:var(--sans);font-size:1.7rem;letter-spacing:.02em;margin-bottom:.3rem;font-weight:700}
header p{font-family:var(--sans);font-size:1rem;color:var(--gold-light);letter-spacing:.01em}

nav.sitenav{background:var(--navy-light);padding:.7rem 1rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.15)}
nav.sitenav a{color:var(--gold-light);text-decoration:none;margin:0 .8rem;font-size:.92rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
nav.sitenav a:hover{text-decoration:underline}
nav.sitenav a.active{color:#fff;text-decoration:underline}
@media(max-width:600px){nav.sitenav a{display:inline-block;margin:.3rem .55rem}}

.container{max-width:680px;margin:0 auto;padding:2rem 1rem 3rem}

/* Full-bleed alternating bands — replaces a page that's just a stack of identical cards on a
   cream background with real visual rhythm: white, tinted, and navy bands in sequence. */
.band{padding:3rem 1.5rem}
.band-inner{max-width:680px;margin:0 auto}
.band-white{background:#fff}
.band-tint{background:#efe9db}
.band-navy{background:var(--navy);color:#fff}
.band-navy .band-title{color:#fff}
.band-navy p{color:#f1ede3}
.band-title{color:var(--navy);font-size:1.5rem;font-weight:800;margin-bottom:1.1rem;text-align:center;line-height:1.3}

/* Photo hero — real photography instead of another text-only box, dark overlay keeps the
   headline readable regardless of the underlying image. */
.hero{
  position:relative;
  background:linear-gradient(rgba(15,23,42,.68),rgba(15,23,42,.85)), url('/images/hero-mountains.jpg') center 55%/cover no-repeat;
  color:#fff;
  text-align:center;
  padding:4.5rem 1.5rem 4rem;
}
.hero h2{font-size:2rem;font-weight:800;margin-bottom:1rem;line-height:1.3;max-width:640px;margin-left:auto;margin-right:auto}
.hero p{font-size:1.15rem;color:#f1ede3;max-width:520px;margin:0 auto 1.75rem}
.hero .cta{background:var(--gold);color:var(--navy)}
.hero .cta:hover{background:var(--gold-light)}

/* Icon-bullet list — breaks up plain bullet-point monotony with a visual anchor per item. */
.icon-list{list-style:none;max-width:560px;margin:0 auto}
.icon-list li{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.1rem;font-size:1.05rem;text-align:left}
.icon-list li:last-child{margin-bottom:0}
.icon-list .icon{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;margin-top:.05rem}
.band-navy .icon-list .icon{background:#fff}
.icon-list .icon.icon-yes{background:#16a34a;color:#fff}
.icon-list .icon.icon-no{background:#dc2626;color:#fff}
.icon-list .icon.icon-neutral{background:var(--navy);color:#fff}
.icon-list .icon.icon-note{background:var(--amber);color:#fff}
.lede-plain{max-width:560px;margin:0 auto;text-align:center;font-size:1.08rem}
.lede-plain p{margin-bottom:.9rem}
.lede-plain p:last-child{margin-bottom:0}

.lede{background:var(--card);border:1px solid var(--light-gray);border-radius:8px;padding:1.4rem;margin-bottom:1.75rem;font-size:1.05rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.lede p{margin-bottom:.9rem}
.lede p:last-child{margin-bottom:0}

.intro{background:var(--card);border:1px solid var(--light-gray);border-radius:8px;padding:1.4rem;margin-bottom:1.75rem;font-size:1rem}
.intro strong{color:var(--navy)}
.intro p{margin-bottom:.75rem}
.intro p:last-child{margin-bottom:0}

.section{background:var(--card);border:1px solid var(--light-gray);border-radius:8px;margin-bottom:1.75rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.section-header{background:var(--navy);color:#fff;padding:.9rem 1.4rem;font-family:var(--sans);font-size:1.15rem;font-weight:700;letter-spacing:.01em}
.section-body{padding:1.4rem;font-size:1rem}
.section-body ul{margin-left:1.2rem}
.section-body li{margin-bottom:.6rem}
.section-body li:last-child{margin-bottom:0}
.section-body p{margin-bottom:.8rem}
.section-body p:last-child{margin-bottom:0}

.row{display:flex;gap:1rem;flex-wrap:wrap}
.field{flex:1;min-width:220px;margin-bottom:1.1rem}
.field.full{min-width:100%;flex-basis:100%}
label{display:block;font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:.35rem}
label .req{color:var(--red);margin-left:2px}
.hint{font-size:.88rem;color:var(--gray);margin-top:.3rem}

input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="number"],select,textarea{
  width:100%;padding:.65rem .75rem;border:1px solid #cbd5e1;border-radius:6px;font-size:1rem;
  font-family:var(--sans);background:#fff;
}
input:focus,select:focus,textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
textarea{resize:vertical;min-height:80px}

.radio-group{display:flex;gap:1.3rem;flex-wrap:wrap;margin-bottom:.5rem}
.radio-group label{display:flex;align-items:center;gap:.4rem;font-weight:400;cursor:pointer;margin-bottom:0}
.radio-group input[type="radio"],.radio-group input[type="checkbox"]{accent-color:var(--navy);width:18px;height:18px}

.conditional{margin-left:0;margin-bottom:1.1rem;display:none;border-left:4px solid var(--gold-light);padding-left:1rem}
.conditional.visible{display:block}

.submit-wrap{text-align:center;margin-top:1.75rem}
button{background:var(--navy);color:#fff;border:none;padding:.9rem 2.5rem;font-size:1.05rem;font-family:var(--sans);font-weight:700;border-radius:6px;cursor:pointer;letter-spacing:.01em}
button:hover{background:var(--navy-light)}
button.secondary{background:#fff;color:var(--navy);border:2px solid var(--navy)}
button.secondary:hover{background:#f3f4f6}

.cta-wrap{text-align:center;margin:2rem 0}
.cta{display:inline-block;background:var(--navy);color:#fff;border:none;padding:1.05rem 2.75rem;font-size:1.1rem;font-family:var(--sans);font-weight:700;border-radius:6px;text-decoration:none;letter-spacing:.01em}
.cta:hover{background:var(--navy-light)}
.cta-note{margin-top:.7rem;font-size:.9rem;color:var(--gray)}

.secondary-link{display:inline-block;margin-top:.5rem;color:var(--navy);font-weight:700;text-decoration:underline}
.secondary-link:hover{color:var(--navy-light)}

footer{background:var(--navy);color:var(--light-gray);text-align:center;padding:1.6rem 1rem;font-size:.88rem;line-height:1.8;border-top:3px solid var(--gold)}
footer a{color:var(--gold-light)}

#eligBanner{border-radius:8px;padding:1.1rem 1.4rem;margin-bottom:1.75rem;font-size:1rem;display:none}
#eligBanner.show{display:block}
#eligBanner.eligible{background:var(--green-bg);border:1px solid #86efac;color:var(--green)}
#eligBanner.automatic{background:#eff6ff;border:1px solid #93c5fd;color:#1d4ed8}
#eligBanner.ineligible{background:#fef2f2;border:1px solid #fca5a5;color:var(--red)}
#eligBanner.review{background:var(--amber-bg);border:1px solid #fcd34d;color:var(--amber)}
#eligBanner ul{margin:.6rem 0 0 1.2rem}
#eligBanner .fineprint{margin-top:.7rem;font-size:.85rem;opacity:.9}

.steps{list-style:none;counter-reset:step}
.steps li{background:#fff;border:1px solid var(--light-gray);border-radius:8px;padding:1.3rem 1.3rem 1.3rem 3.6rem;margin-bottom:1.1rem;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.steps li:nth-child(even){background:var(--card)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:1.1rem;top:1.25rem;background:var(--navy);color:#fff;width:1.9rem;height:1.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:1rem}
.steps h3{color:var(--navy);font-size:1.1rem;margin-bottom:.4rem;font-weight:700}
.steps p{font-size:1rem}

.faq-item{background:#fff;border:1px solid var(--light-gray);border-radius:8px;padding:1.3rem;margin-bottom:1.1rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.faq-item:nth-child(even){background:var(--card)}
.faq-item h3{color:var(--navy);font-size:1.08rem;margin-bottom:.5rem;font-weight:700}
.faq-item p{font-size:1rem}

@media(max-width:600px){
  header h1{font-size:1.35rem}
  .row{flex-direction:column}
  .field{min-width:100%}
  .container{padding:1rem .75rem}
  button{width:100%}
  .steps li{padding-left:3.1rem}
  .hero{padding:3rem 1.25rem 2.75rem}
  .hero h2{font-size:1.5rem}
  .hero p{font-size:1.02rem}
  .band{padding:2.25rem 1.25rem}
  .band-title{font-size:1.25rem}
}