/* AI-geletterdheid check (/ai-geletterdheid). Bovenop style.css. Mobiel eerst. */

/* ---------- Hero ---------- */
.ag-hero { padding-bottom: 3rem; }
.ag-hero h1 { max-width: 15ch; }
.ag-hero .lead { max-width: 58ch; }
.ag-hero__vraag { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.3; color: var(--c-roze); max-width: 34ch; }
.ag-hero .btn { white-space: normal; }

/* ---------- Tekstblok verplicht ---------- */
.ag-tekst { max-width: 680px; }
.ag-tekst p { color: var(--text-soft); margin-bottom: 1.2rem; }
.ag-tekst strong { color: var(--text); font-weight: 500; }
.ag-bron { font-size: 0.9rem; background: var(--c-ivoor-diep); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.ag-bron a { color: var(--c-roze); border-bottom: 1px solid currentColor; }

/* ---------- Check ---------- */
.ag-check { max-width: 820px; }
.ag-check__balk {
  position: sticky; top: 88px; z-index: 5; /* onder de vaste menubalk (scroll-padding-top in style.css is 80px) */ display: flex; align-items: center; gap: 1rem;
  background: var(--c-card); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem; box-shadow: var(--shadow-md); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-goud);
}
.ag-check__balk > span:first-child { white-space: nowrap; }
.ag-check__track { flex: 1; height: 6px; border-radius: 999px; background: var(--c-ivoor-diep); overflow: hidden; }
.ag-check__fill { display: block; height: 100%; width: 0; background: var(--c-goud); border-radius: inherit; transition: width var(--t-fast); }

.ag-schakel {
  margin-top: 1.5rem; background: var(--c-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.ag-schakel__kop { display: flex; align-items: center; gap: 0.75rem; font-family: var(--ff-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 600; line-height: 1.15; }
.ag-schakel__kop span {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--c-donker); color: var(--c-ivoor);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.ag-schakel__intro { margin-top: 0.6rem; color: var(--text-soft); max-width: 60ch; }

.ag-vraag { border: 0; padding: 0; margin: 1.6rem 0 0; min-width: 0; }
.ag-vraag legend { font-weight: 500; font-size: 1.02rem; line-height: 1.45; margin-bottom: 0.8rem; padding: 0; }
.ag-vraag--leeg legend { color: #9b3d2e; }
.ag-optie {
  display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.55rem; padding: 0.85rem 1.1rem;
  background: var(--c-ivoor); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.ag-optie:hover { border-color: var(--c-goud); }
.ag-optie input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--c-goud); }
.ag-optie:has(input:focus-visible) { outline: 2px solid var(--c-goud); outline-offset: 3px; }
.ag-optie:has(input:checked) { background: #fbf3e4; border-color: var(--c-goud); box-shadow: inset 0 0 0 1px var(--c-goud); }

.ag-check__fout { margin-top: 1.2rem; font-size: 0.95rem; color: #9b3d2e; }
.ag-check__fout[hidden] { display: none; }
.ag-check__knop { margin-top: 1.6rem; width: 100%; justify-content: center; white-space: normal; }
@media (min-width: 640px) { .ag-check__knop { width: auto; } }
.ag-check__noot { margin-top: 1rem; font-size: 0.9rem; color: var(--text-mute); }

/* ---------- Uitslag ---------- */
.ag-uitslag {
  max-width: 820px; margin-top: 2rem; background: var(--c-card); border: 1px solid var(--c-goud); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--shadow-lg); scroll-margin-top: 1.5rem;
}
.ag-uitslag[hidden] { display: none; }
.ag-uitslag__score { display: grid; gap: 1.5rem; margin-top: 1rem; align-items: start; }
@media (min-width: 720px) { .ag-uitslag__score { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.ag-uitslag__getal { font-family: var(--ff-display); font-size: 4.2rem; font-weight: 600; line-height: 1; display: flex; flex-direction: column; }
.ag-uitslag__getal small { font-family: var(--ff-body); font-size: 0.85rem; font-weight: 400; color: var(--text-mute); margin-top: 0.4rem; }
.ag-uitslag .card { box-shadow: none; }
.ag-uitslag__sub { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 600; margin-top: 2rem; }
.ag-balken { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.1rem; }
.ag-balk__kop { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.ag-balk__kop strong { font-weight: 500; }
.ag-balk__track { height: 8px; border-radius: 999px; background: var(--c-ivoor-diep); overflow: hidden; margin-top: 0.35rem; }
.ag-balk__fill { display: block; height: 100%; border-radius: inherit; background: var(--c-goud); }
.ag-balk__fill--laag { background: var(--c-roze); }
.ag-balk p { font-size: 0.9rem; color: var(--text-soft); margin-top: 0.4rem; }
.ag-uitslag__opnieuw { font: inherit; font-size: 0.9rem; color: var(--text-soft); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; margin-top: 1.8rem; cursor: pointer; }

/* ---------- Niveaus ---------- */
.ag-niveau { display: flex; flex-direction: column; }
.ag-niveau__stap { margin-top: 1rem; font-size: 0.95rem; }
.ag-niveau__ctas { margin-top: auto; padding-top: 1.2rem; display: grid; gap: 0.8rem; justify-items: start; }
.ag-niveau__ctas .btn { white-space: normal; }
.ag-niveau__link { font-size: 0.9rem; border-bottom: 1px solid currentColor; color: var(--c-roze); }
.card--dark .ag-niveau__link { color: var(--c-goud); }
.ag-niveau--actief { border-color: var(--c-goud); box-shadow: inset 0 0 0 2px var(--c-goud); }

#over .about__visual { max-width: 420px; }
#over .about__text a { color: var(--c-roze); border-bottom: 1px solid currentColor; }