/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html:focus-within { scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, ol { padding-left: 1.25rem; }
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.stack-0 { --stack-gap: 0; } .stack-1 { --stack-gap: .5rem; } .stack-2 { --stack-gap: 1rem; }
.stack-3 { --stack-gap: 1.5rem; } .stack-4 { --stack-gap: 2rem; }
hr { border: none; border-top: 1px solid #ccc; margin: 1rem 0; }
header, footer { border: 1px solid #ccc; }
main { padding: 1rem 0; }
h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); line-height: 1.2; }
h2 { font-size: clamp(1.3rem, 1.5vw + .8rem, 1.6rem); line-height: 1.3; margin-top: .5rem; }
h3 { font-size: 1.1rem; margin-top: .5rem; }
p, li { max-width: 75ch; }
.box { border: 1px dashed #bbb; padding: 1rem; }

/* ===== CSS-only Accessible Nav with Nested Dropdown ===== */
.nav-wrap { border-bottom: 1px solid #ccc; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-weight: 600; }

/* mobile toggle */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: inline-block; padding: .5rem 1rem; border: 1px solid #ccc; cursor: pointer; }
.site-nav { display: none; }
.site-nav ul { list-style: none; padding: 0; margin: 0; }
.site-nav li { padding: .5rem 0; position: relative; }

/* dropdown controls */
.has-submenu > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.has-submenu > label { display: inline-block; cursor: pointer; border: 1px solid #ccc; padding: .25rem .5rem; margin-top: .25rem; }

.submenu { display: none; padding-left: 1rem; }
.has-submenu > input[type="checkbox"]:checked ~ .submenu { display: block; }

/* show menu when checked */
.nav-toggle:checked ~ .site-nav { display: block; }

/* larger screens */
@media (min-width: 768px) {
  .nav-toggle-label { display: none; }
  .site-nav { display: block; }
  .site-nav > ul { display: flex; gap: 1rem; align-items: center; }
  .site-nav li { padding: 0; }
  .has-submenu > label { display: none; }
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { display: block; position: absolute; top: 100%; left: 0; border: 1px solid #ccc; background: #fff; padding: .5rem 1rem; }
  .submenu li { padding: .35rem 0; white-space: nowrap; }
}