/* "Blijf op de hoogte van The Lidget": de sectie op de homepage, de losse pagina
   /blijf-op-de-hoogte.html en de afmeldpagina. Eigen klassen, omdat styles.css
   een vaste (gecompileerde) set Tailwind-klassen bevat. */
:root {
  --am-navy: #1A2E6C;
  --am-navy-donker: #13234f;
  --am-tekst: #4b5563;
  --am-zacht: #5b6474;
  --am-veldrand: #8a93a6;
  --am-vlak: #f4f7fb;
  --am-fout: #b42318;
}

/* ── Sectie op de homepage ───────────────────────────────────────────────── */
.aanmelden-sectie { background: #fff; padding: 6rem 1rem; scroll-margin-top: 4rem; }
@media (min-width: 1024px) { .aanmelden-sectie { padding: 8rem 2rem; } }
.aanmelden-binnen { max-width: 44rem; margin: 0 auto; }
.aanmelden-kop { color: var(--am-navy); font-size: 2.25rem; line-height: 1.1; font-weight: 900; letter-spacing: -.015em; margin: 0 0 1.25rem; }
@media (min-width: 1024px) { .aanmelden-kop { font-size: 3rem; } }
.aanmelden-intro { color: var(--am-tekst); font-size: 1.125rem; line-height: 1.7; margin: 0 0 2.5rem; }

/* ── Formulier ───────────────────────────────────────────────────────────── */
.aanmeld-formulier { margin: 0; }
.aanmeld-velden { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .aanmeld-velden { grid-template-columns: 1fr 1fr; } .aanmeld-veld-breed { grid-column: 1 / -1; } }
.aanmeld-veld { display: flex; flex-direction: column; min-width: 0; }
.aanmeld-formulier label, .aanmeld-keuzes legend { color: var(--am-navy); font-weight: 600; font-size: .95rem; }
.aanmeld-veld label { margin-bottom: .4rem; }
.aanmeld-optioneel { font-weight: 400; color: var(--am-zacht); }
.aanmeld-formulier input[type="text"], .aanmeld-formulier input[type="email"] {
  font: inherit; font-size: 1rem; color: #111827; background: #fff;
  border: 1px solid var(--am-veldrand); border-radius: 12px; padding: .8rem 1rem; min-height: 50px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.aanmeld-formulier input[type="text"]:hover, .aanmeld-formulier input[type="email"]:hover { border-color: var(--am-navy); }
.aanmeld-formulier input:focus-visible, .aanmeld-formulier button:focus-visible, .aanmeld-formulier a:focus-visible, .aanmeld-bedankt:focus-visible {
  outline: 2px solid var(--am-navy); outline-offset: 2px;
}
.aanmeld-formulier input[aria-invalid="true"] { border-color: var(--am-fout); box-shadow: 0 0 0 1px var(--am-fout); }
.aanmeld-fout { color: var(--am-fout); font-size: .9rem; font-weight: 500; margin: .4rem 0 0; }
.aanmeld-fout[hidden], .aanmeld-status[hidden], .aanmeld-bedankt[hidden], .aanmeld-anders[hidden] { display: none; }

.aanmeld-keuzes { border: 0; padding: 0; margin: 2rem 0 0; min-width: 0; }
.aanmeld-keuzes legend { padding: 0; margin-bottom: .25rem; }
.aanmeld-hint { color: var(--am-zacht); font-size: .95rem; margin: 0 0 .75rem; }
.aanmeld-keuzelijst { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 640px) { .aanmeld-keuzelijst { grid-template-columns: 1fr 1fr; } }
.aanmeld-keuze { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem 0; min-height: 44px; cursor: pointer; }
.aanmeld-formulier .aanmeld-keuze { font-weight: 500; color: #1f2937; font-size: 1rem; }
.aanmeld-keuze input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--am-navy); cursor: pointer; }
.aanmeld-anders { margin: .5rem 0 0; display: flex; flex-direction: column; max-width: 26rem; }
.aanmeld-anders label { margin-bottom: .4rem; }

.aanmeld-toestemming { margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #e5e7eb; }
.aanmeld-formulier .aanmeld-toestemming .aanmeld-keuze { font-weight: 400; color: var(--am-tekst); font-size: .98rem; line-height: 1.55; }
.aanmeld-formulier a { color: var(--am-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.aanmeld-formulier a:hover { color: var(--am-navy-donker); }

.aanmeld-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.aanmeld-knop {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  margin-top: 1.75rem; padding: 1rem 2rem; min-height: 52px;
  font: inherit; font-size: 1rem; font-weight: 600; color: #fff; background: var(--am-navy);
  border: 0; border-radius: 9999px; cursor: pointer; transition: background-color .2s ease;
}
.aanmeld-knop:hover { background: var(--am-navy-donker); }
.aanmeld-knop[disabled] { opacity: .75; cursor: progress; }
@media (min-width: 640px) { .aanmeld-knop { width: auto; } }

.aanmeld-status { margin: 1rem 0 0; padding: .85rem 1rem; border-radius: 10px; background: #fdeceb; color: var(--am-fout); border-left: 4px solid var(--am-fout); font-size: .95rem; }
.aanmeld-klein { color: var(--am-zacht); font-size: .9rem; line-height: 1.6; margin: 1.25rem 0 0; }

.aanmeld-bedankt { background: var(--am-vlak); border-radius: 16px; padding: 2rem 1.5rem; }
@media (min-width: 640px) { .aanmeld-bedankt { padding: 2.5rem; } }
.aanmeld-bedankt-kop { color: var(--am-navy); font-size: 1.5rem; line-height: 1.25; font-weight: 800; margin: 0 0 .5rem; }
.aanmeld-bedankt p:last-child { color: var(--am-tekst); font-size: 1.05rem; line-height: 1.65; margin: 0; }

/* ── Losse pagina's (zelfde opbouw als privacy.html) ─────────────────────── */
.lp-acties { display: flex; align-items: center; gap: 1rem; }
.lp-taal { display: flex; align-items: center; gap: .15rem; font-size: .875rem; }
.lp-taal button { font: inherit; font-weight: 600; color: #6b7280; background: none; border: 0; padding: .35rem .45rem; border-radius: 6px; cursor: pointer; min-height: 36px; }
.lp-taal button:hover { color: #1f2937; }
.lp-taal button.active { color: var(--am-navy); text-decoration: underline; text-underline-offset: 4px; }
.lp-taal span { color: #d1d5db; }
@media (max-width: 420px) { .lp-back-lang { display: none; } }
.aanmeld-pagina { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
.aanmeld-pagina .aanmelden-intro { margin-bottom: 2.25rem; }
.overslaan { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--am-navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.overslaan:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .aanmeld-formulier input, .aanmeld-knop { transition: none; }
}