:root{
  --blue:#002147; /* index.php blue */
  --green:#2ECC71;
  --amber:#F39C12;
  --red:#E74C3C;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e6ebf2;
  --bg:#f9f9f9;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1080px;margin:0 auto;padding:0 16px}

/* =========================================================
   Header (dark blue like your FAQ screenshot)
   Works for:
   - <header> ... <nav> ...</nav> ... </header>  (index-style)
   - <header class="site-header"> ... (partials header suggestion)
   ========================================================= */

/* Generic <header> used in index.php */
header{
  background:var(--blue);
  padding:1rem 0;
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
}

/* Brand row in index.php */
header .brand{
  display:flex;
  align-items:center;
  gap:10px;
}
header .brand b{
  font-weight:800;
  color:#fff;
}

/* Nav row in index.php */
header nav{
  margin-top:.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
header nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  margin:0; /* override any legacy */
}
header nav a:hover{text-decoration:underline}
header nav a[aria-current="page"]{text-decoration:underline}

/* If you use /partials/header.php with these classes */
.site-header{background:var(--blue);padding:1rem 0;color:#fff;position:sticky;top:0;z-index:50}
.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.site-logo{height:42px;width:auto;display:block}
.site-title{color:#fff;font-weight:800}
.site-nav{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:14px}
.site-nav a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
.site-nav a:hover{text-decoration:underline}

/* =========================================================
   OLD header support (keep temporarily while migrating pages)
   NOTE: your old .nav header was white — this makes it blue
   so it matches the screenshot too.
   ========================================================= */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--blue);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}
.brand b{color:#fff}
.menu{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.menu a{
  font-weight:600;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.menu a:hover{text-decoration:underline}

/* =========================================================
   Layout / Cards / Sections
   ========================================================= */
main{max-width:1080px;margin:2rem auto}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 26px rgba(0,0,0,.05);
}

.section{padding:24px 0}
.section h1,.section h2,.section h3{color:var(--blue);margin:0 0 12px}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}

/* =========================================================
   Forms (useful across pages)
   ========================================================= */
label{display:block;font-weight:700;font-size:.95rem;margin:2px 0 6px}

input,select,button{
  width:100%;
  padding:11px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-size:1rem;
  background:#fff;
}
input:focus,select:focus,button:focus{
  outline:3px solid rgba(0,33,71,.2);
  border-color:var(--blue);
}

.btn{
  background:var(--blue);
  color:#fff;
  border:none;
  font-weight:800;
  cursor:pointer;
  transition:transform .06s ease, filter .06s ease;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}

/* =========================================================
   Footer (index style)
   ========================================================= */
footer{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:1rem;
  margin-top:3rem;
}
footer a{color:#fff}

/* =========================================================
   Page helpers you already had
   ========================================================= */
.hero{padding:28px 0 8px}
.hero h1{margin:.2rem 0;color:var(--blue);font-size:2rem}
.hero p{margin:0 0 14px;color:var(--muted)}

.tip-box{
  background:#fff;
  border-left:5px solid var(--blue);
  padding:15px;
  margin:15px 0;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.cta{
  background:var(--blue);
  color:#fff;
  padding:12px 18px;
  display:inline-block;
  margin-top:20px;
  text-decoration:none;
  border-radius:8px;
  font-weight:700;
}
.cta:hover{filter:brightness(.95)}