/* Tap With Care: plain CSS, no build step. Colors from the approved brand kit. */
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-hyperlegible-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-hyperlegible-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--navy:#17324D;--orange:#B84A0F;--orange-text:#89370B;--cream:#FFFBF2;--mist:#E8F1F5;--teal:#1B6151;--sun:#F4C95D;--charcoal:#2B2B2B;--white:#fff;--radius:14px;--max:46rem}
*,*::before,*::after{box-sizing:border-box}
html{font-size:125%;-webkit-text-size-adjust:100%;text-size-adjust:100%}/* 20px base */
body{margin:0;font-family:"Atkinson Hyperlegible","Open Sans",Arial,sans-serif;font-size:1rem;line-height:1.6;color:var(--navy);background:var(--cream)}
img,svg{max-width:100%;height:auto}
a{color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
a:hover{color:var(--orange-text)}
:focus-visible{outline:4px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:1rem;top:-10rem;background:var(--navy);color:var(--white);padding:.8rem 1.2rem;border-radius:var(--radius);font-weight:700;z-index:10}
.skip:focus{top:1rem;color:var(--white)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.1rem}
.wide{max-width:64rem}
/* Header */
.site-header{background:var(--white);border-bottom:4px solid var(--orange)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;padding-top:.8rem;padding-bottom:.8rem;max-width:64rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy);min-height:48px}
.brand img{width:40px;height:52px}
.brand-name{font-weight:700;font-size:1.35rem;line-height:1.1}
.brand-name .tap{color:var(--orange-text)}
.brand-tag{display:block;font-weight:400;font-size:.9rem;color:var(--charcoal)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.site-nav a{display:inline-flex;align-items:center;min-height:48px;padding:.3rem .85rem;border-radius:var(--radius);font-weight:700;text-decoration:none;border:2px solid transparent}
.site-nav a:hover{border-color:var(--navy);color:var(--navy)}
.site-nav a[aria-current="page"]{background:var(--navy);color:var(--white)}
@media (max-width:40rem){.site-nav{width:100%}.site-nav ul{display:grid;grid-template-columns:1fr 1fr}.site-nav a{justify-content:center;border-color:var(--mist);background:var(--cream);width:100%}.site-nav li:last-child:nth-child(odd){grid-column:1/-1}}
/* Main */
main{padding:2rem 0 3rem}
h1,h2,h3{line-height:1.2;margin:1.6em 0 .5em}
h1{font-size:2.1rem;margin-top:.3em}
h2{font-size:1.55rem}
h3{font-size:1.2rem}
p,ul,ol{margin:0 0 1em}
li{margin-bottom:.45em}
.lead{font-size:1.2rem;color:var(--charcoal)}
.crumbs{font-size:.9rem;margin-bottom:.5rem}
.crumbs a{display:inline-block;padding:.5rem 0}
/* Hero */
.hero{background:var(--navy);color:var(--white);padding:2.5rem 0}
.hero h1{color:var(--white);font-size:2.4rem;margin:0 0 .4em}
.hero p{font-size:1.2rem;max-width:36rem}
.hero .btn{margin-top:.5rem}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.7rem 1.4rem;border-radius:var(--radius);background:var(--orange-text);color:var(--white);font-weight:700;font-size:1.1rem;text-decoration:none;border:3px solid var(--orange-text)}
.btn:hover{background:var(--white);color:var(--orange-text)}
.btn-light{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-light:hover{background:var(--cream);color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
/* Cards */
.cards{list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:48rem){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--white);border:2px solid var(--mist);border-radius:var(--radius);padding:1.2rem 1.3rem;margin:0}
.card h2,.card h3{margin:0 0 .4em;font-size:1.25rem}
.card a.card-link{display:block;text-decoration:none;min-height:48px}
.card a.card-link:hover h2,.card a.card-link:hover h3{text-decoration:underline}
.card p{margin:0;color:var(--charcoal)}
.card .meta{margin-top:.6rem;font-size:.9rem;color:var(--teal);font-weight:700}
/* Boxes */
.box{border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.5rem 0}
.box h2,.box h3{margin-top:0}
.box p:last-child,.box ul:last-child,.box ol:last-child{margin-bottom:0}
.box-mist{background:var(--mist)}
.box-teal{background:var(--teal);color:var(--white)}
.box-teal a{color:var(--white)}
.box-sun{background:var(--sun);color:var(--navy)}
.box-white{background:var(--white);border:2px solid var(--mist)}
/* Steps */
ol.steps{list-style:none;counter-reset:s;padding:0}
ol.steps>li{counter-increment:s;position:relative;padding:.9rem 1rem .9rem 4rem;margin-bottom:.8rem;background:var(--white);border:2px solid var(--mist);border-radius:var(--radius);min-height:3.6rem}
ol.steps>li::before{content:counter(s);position:absolute;left:.9rem;top:.8rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--orange-text);color:var(--white);font-weight:700;display:flex;align-items:center;justify-content:center}
.signs{list-style:none;padding:0}
.signs>li{position:relative;padding:.9rem 1rem .9rem 4rem;margin-bottom:.8rem;background:var(--white);border:2px solid var(--mist);border-radius:var(--radius)}
.signs>li::before{content:"!";position:absolute;left:.9rem;top:.8rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--navy);color:var(--white);font-weight:700;display:flex;align-items:center;justify-content:center}
.checks{list-style:none;padding:0}
.checks>li{position:relative;padding-left:2.2rem}
.checks>li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700}
.btnlabel{font-weight:700;background:var(--mist);padding:.05em .35em;border-radius:6px;white-space:nowrap}
.box-teal .btnlabel{background:var(--white);color:var(--navy)}
.note{font-size:.95rem;color:var(--charcoal)}
.updated{font-size:.95rem;color:var(--charcoal);border-top:2px solid var(--mist);padding-top:1rem;margin-top:2rem}
.sources li{word-break:break-word}
.ext::after{content:" (official site)";font-size:.9em;color:var(--charcoal)}
.box-teal .ext::after{color:var(--white)}
/* Footer */
.site-footer{background:var(--navy);color:var(--white);padding:2rem 0 2.5rem;font-size:.95rem}
.site-footer a{color:var(--white)}
.site-footer ul{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.site-footer li a{display:inline-flex;align-items:center;min-height:48px}
.site-footer p{margin:0 0 .6rem;max-width:44rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.site-header,.site-footer,.skip{display:none}body{background:#fff}.ext::after{content:" (" attr(href) ")"}}
.box-teal ol.steps>li{color:var(--navy)}
.box-teal ol.steps>li a{color:var(--navy)}
/* ---- Added Nov 2026: search, topics, related guides ---- */
[hidden]{display:none!important}
.search{background:var(--white);border:3px solid var(--navy);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:0 0 1.5rem}
.search-label{display:block;font-weight:700;font-size:1.45rem;margin:0 0 .2rem}
.search-hint{margin:0 0 .7rem;color:var(--charcoal)}
.search-row{display:flex;flex-wrap:wrap;gap:.6rem}
.search-input{flex:1 1 14rem;min-height:60px;font:inherit;font-size:1.25rem;padding:.5rem .9rem;border:3px solid var(--navy);border-radius:var(--radius);background:var(--cream);color:var(--navy);-webkit-appearance:none;appearance:none}
.search-input:focus{outline:4px solid var(--orange);outline-offset:2px}
.search-clear{min-height:60px;font-family:inherit;cursor:pointer}
.search-status{margin:.7rem 0 0;font-weight:700;font-size:1.05rem}
.search-status:empty{display:none}
.search-results{margin-bottom:1.5rem}
.jump{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.jump a{display:inline-flex;align-items:center;min-height:48px;padding:.3rem 1rem;border:2px solid var(--navy);border-radius:var(--radius);background:var(--white);font-weight:700;text-decoration:none}
.jump a:hover{background:var(--mist);color:var(--navy)}
.guide-section{margin-top:1rem}
.guide-section h2{margin-bottom:.2em}
.guide-section .count{font-weight:400;font-size:1rem;color:var(--charcoal)}
.section-blurb{color:var(--charcoal)}
.topics{list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:48rem){.topics{grid-template-columns:1fr 1fr}}
.topics li{margin:0}
.topic-link{display:block;min-height:48px;padding:1rem 1.2rem;background:var(--white);border:2px solid var(--mist);border-left:8px solid var(--orange);border-radius:var(--radius);text-decoration:none}
.topic-link strong{display:block;font-size:1.25rem}
.topic-link span{display:block;color:var(--charcoal)}
.topic-link:hover strong{text-decoration:underline}
.related{border-top:2px solid var(--mist);margin-top:2rem;padding-top:.5rem}
.related ul{padding-left:1.2rem}
.related li a{display:inline-block;padding:.35rem 0;min-height:44px}
.passphrase{font-size:1.25rem}
.email-big{font-size:1.3rem}
.box-sun h3{margin-top:0}
/* Focus ring on dark backgrounds: orange is only 2.5:1 on navy, so use sun/white there (WCAG 1.4.11 needs 3:1) */
.hero :focus-visible,.site-footer :focus-visible{outline-color:var(--sun)}
.box-teal :focus-visible{outline-color:var(--white)}
.box-teal ol.steps>li :focus-visible{outline-color:var(--orange-text)}