/* Layout — page-level structure and responsive grid primitives.
   Component styles live alongside their JS files in src/components/.
   No hardcoded values — design tokens only. */

/* ── Container ─────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ── Page grid ─────────────────────────────────────── */
/* header / main / footer with main filling remaining viewport height */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* ── Skip navigation link (accessibility) ──────────── */
/* Visually hidden until focused — required for WCAG 2.1 AA keyboard nav. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-accent);
  color: var(--color-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  z-index: 100;
  transition: top 0.15s;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ── Responsive breakpoints ────────────────────────── */
/* Mobile-first.
   sm:  480px  — large phones
   md:  768px  — tablets / landscape phones
   lg: 1024px  — laptops and up              */

@media (max-width: 767px) {
  .container {
    padding-inline: var(--space-4);
  }
}