:root{
  --brand:#00274C; --accent:#FFCB05; --ink:#0f172a; --muted:#475569;
  --gap:1rem; --radius:14px; --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#fff;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
img,video{max-width:100%; height:auto; display:block}


main p a, footer p a, main li a, footer li a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 2px;
  font-weight: 600;
}


main p a:hover, footer p a:hover, main li a:hover, footer li a:hover,
main p a:focus-visible, footer p a:focus-visible, main li a:focus-visible, footer li a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


.skip-link{position:absolute; left:-9999px}
.skip-link:focus,.skip-link:focus-visible{
  left:1rem; top:1rem; position:absolute; background:#000; color:#fff;
  padding:.5rem .75rem; z-index:1000;
}


header, main, footer, section{padding:1rem; margin-inline:auto; max-width:var(--max)}

header{
  background:var(--brand); color:#fff; border-bottom:1px solid rgba(255,255,255,.1);
  display:grid; gap:.75rem var(--gap);
  grid-template-columns:auto 1fr; 
  align-items:center;
}
header img{height:3.5rem}
header h1{
  margin:0; color:var(--accent); line-height:1.2;
  font-weight:800; font-size:clamp(1.25rem,5vw,1.75rem);
}
header nav{grid-column:1 / -1}


/* nav[aria-label="Primary"] ul{
  display:flex; flex-wrap:nowrap; justify-content: space-between;
  align-items:center; gap: clamp(.25rem, 2vw, .75rem); list-style:none; margin:0; padding:0;
} */
 nav[aria-label="Primary"] ul{
    display:grid; grid-template-columns:repeat(4, minmax(100px, 1fr));
    gap:clamp(.25rem, 2vw, .75rem); list-style:none; margin:0; padding:0;}
nav[aria-label="Primary"] a{
  display:block;
  text-decoration:none; text-align:center; font-weight:700;
  color:var(--accent);
  font-size:clamp(.85rem, 2.8vw, 1.1rem);         
  padding:.5rem clamp(.3rem, 2vw, .7rem);         
  border-radius:10px;
  line-height:1.2; border-radius: 10px;
  min-height: 44px;
}
nav[aria-label="Primary"] a:hover,
nav[aria-label="Primary"] a:focus-visible{
  background:rgba(255,203,5,.15);
  outline:3px solid rgba(255,203,5,.35); outline-offset:2px;
}


h2{font-size:clamp(1.125rem,4.5vw,1.5rem); margin:.5rem 0}
h3{font-size:clamp(1rem,4vw,1.25rem); margin:.5rem 0}
p, li{font-size:1rem}
a{color:#0b64d8}
a, button{min-height:44px}


iframe{width:100%; aspect-ratio:16/9; border:0}


section > div:first-of-type{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  align-items:start;
  
}
section > div:first-of-type ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.5rem;
}

/* section > div:first-of-type li a{
  display:block; padding:.6rem .75rem;
  border:1px solid #e5e7eb; border-radius:10px; color:var(--ink); text-decoration:none;
}
section > div:first-of-type li a:hover,
section > div:first-of-type li a:focus-visible{
  border-color:#cbd5e1; background:#f8fafc; color:#0b64d8;
} */

section > div:first-of-type li a {
  display:block;
  padding: .6rem .75rem;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f8fafc;
  text-align:center;
  color:#00274C;
  font-weight:600;
  text-decoration:none;
}

section > div:first-of-type li a:hover,
section > div:first-of-type li a:focus-visible {
  background:#eef6ff;
  border-color:#a8c9ff;
}


section h3 + ul{
  list-style:none; margin:.5rem 0 0; padding:0;
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
section h3 + ul a{
  display:block; padding:.6rem .75rem;
  border:1px solid #e5e7eb; border-radius:10px;
  text-decoration:none; color:#00274C; word-break:break-word;
}

section h3 + ul:first-of-type li a:hover,
section h3:first-of-type li a:focus-visible {
    background:#eef6ff;
    border-color:#a8c9ff;

}

footer{
  border-top:1px solid #e5e7eb; color:var(--muted); text-align:center;
  font-size:.95rem;
}
footer a{text-decoration:none}
footer a:hover, footer a:focus-visible{text-decoration:underline}
