/* ============================================================
THREE RESPONSIVE LEVELS, FIVE MAIN DIV SECTIONS
============================================================ */
/* ── 0–599px (mobile) ───────────────────────────── */
@media screen and (max-width: 599px) {
#capitalcity { display: none; }
#mobilecity { display: block; margin-left: 5%; margin-right: 5%; background-color: #ffffff; }
#mi5 { font-size: 80%; font-weight: bold; padding-bottom: 5px; margin-left: 3%; }
#springfield2 { padding: 5px; border: 0px solid lightgray; margin-left: 3%; margin-right: 3%; background-color: #ffffff; }
#ogdenville { background: #333366; text-align: center; margin-left: 5%; margin-right: 5%; background-color: #ffffff; clear: both; }
}
/* ── 600–720px (mid) ────────────────────────────── */
@media screen and (min-width: 600px) and (max-width: 720px) {
#capitalcity { display: block; margin-left: 5%; margin-right: 5%; background-color: #ffffff; }
#mobilecity { display: none; }
#mi5 { font-size: 80%; font-weight: bold; padding-bottom: 5px; margin-left: 3%; }
#springfield2 { padding: 5px; border: 0px solid lightgray; margin-left: 3%; margin-right: 3%; background-color: #ffffff; }
#ogdenville { }
}
/* ── 721px+ (desktop) ───────────────────────────── */
@media screen and (min-width: 721px) {
#capitalcity { display: block; margin-left: 5%; margin-right: 5%; background-color: #ffffff; }
#mobilecity { display: none; }
#mi5 { font-size: 80%; font-weight: bold; padding-bottom: 5px; margin-left: 17%; }
#springfield2 { padding: 5px; border: 0px solid lightgray; margin-left: 15%; margin-right: 15%; background-color: #ffffff; }
#ogdenville { }
}
/* ============================================================
ACCESSIBILITY
============================================================ */
/* Visually hidden: readable by screen readers, invisible on screen.
Use on: descriptive text
e.g. icon-only buttons, decorative images with context labels */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Skip link: hidden until focused, lets keyboard users jump past nav.
Place as the very FIRST element inside :
Skip to main content
Then add id="main-content" (and tabindex="-1") to your tag. */
.skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: #fff; color: #000; font-weight: bold; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.2s; }
.skip-link:focus { top: 0; }
/* Focus indicator: highlights the active element for keyboard navigation.
Applies to: all interactive elements (,