/* Public pages (src/site.js). Colours, buttons, cards and form fields come
   from app.css, so the site and the app look like one thing. */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface); padding: 8px 12px; border-radius: 10px; }

.site-header, .site-main, .site-footer { max-width: 60rem; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.brand img { border-radius: 8px; }
.langs { display: flex; gap: 2px; }
.langs a { padding: 6px 8px; border-radius: 8px; color: var(--muted); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.langs a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }

.site-main { display: grid; gap: 40px; padding-top: 8px; padding-bottom: 48px; }
.site-main h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.site-main h2 { font-size: 1.35rem; margin: 0 0 14px; }
.site-main h3 { font-size: 1.05rem; margin: 0; }
.lead { font-size: 1.1rem; max-width: 40rem; }

.hero { display: grid; gap: 14px; padding-top: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.steps, .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps .card, .rules .card { align-content: start; }
.step {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

.faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin-top: 8px; color: var(--muted); }

.closing { display: grid; gap: 12px; justify-items: start; }

.form-page { display: grid; gap: 16px; max-width: 36rem; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--primary); }
.field-error { color: var(--neg); font-size: 0.9rem; }
[aria-invalid="true"] { border-color: var(--neg); }
.done h2 { margin: 0; }

.prose { display: grid; gap: 12px; max-width: 42rem; }
.prose h2 { margin: 16px 0 0; }
.prose h3 { margin: 8px 0 0; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }

.site-footer { display: grid; gap: 6px; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .rules { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-top: 40px; }
}