/* De webscan. Leunt op de tokens van het thema; hier staat alleen wat
   specifiek is voor het formulier en het rapport. */
/* ── kleuren als rol ──────────────────────────────────────────────────────

   Deze plugin moet op elk thema werken, dus staan de kleuren hier met een
   eigen standaardwaarde in plaats van dat ze uit het thema komen. Een thema
   mag ze overschrijven.

   De waarden staan als rol en niet als vaste kleur, zodat een thema ze kan
   overschrijven zonder deze stijl te hoeven kennen.
   ───────────────────────────────────────────────────────────────────────── */
.wcag-webscan {
  --ws-tekst:       var(--wp--preset--color--inkt, #13191D);
  --ws-tekst-zacht: var(--wp--preset--color--gedempt, #5A6771);
  --ws-vlak:        var(--wp--preset--color--nevel, #F6F8F9);
  --ws-vlak-2:      var(--wp--preset--color--groen-100, #E2F8ED);
  --ws-lijn:        var(--wp--preset--color--lijn, #D6DCE1);
  --ws-lijn-sterk:  var(--wp--preset--color--rand, #7E8991);
  --ws-merk:        var(--wp--preset--color--groen-700, #0F6B4F);
  --ws-merk-sterk:  var(--wp--preset--color--groen-800, #0B4433);
  --ws-knop:        var(--wp--preset--color--groen-700, #0F6B4F);
  --ws-knop-tekst:  #FFFFFF;
}


.wcag-webscan { margin-block: var(--wp--preset--spacing--40, 2rem); }

/* ---- formulier ---- */
.wcag-webscan__form label {
  display: block; font-weight: 600; font-size: 1.15rem;
  font-family: var(--wp--preset--font-family--lexend);
}
.wcag-webscan__uitleg { margin: 6px 0 14px; color: var(--ws-tekst-zacht); font-size: 0.95rem; }
.wcag-webscan__rij { display: flex; gap: 12px; flex-wrap: wrap; max-inline-size: 40rem; }
.wcag-webscan__rij input {
  flex: 1 1 18rem; min-inline-size: 0;
  padding: 13px 16px; border-radius: 8px; font: inherit; font-size: 1rem;
  border: 1px solid var(--ws-lijn-sterk);
  background: var(--ws-knop-tekst); color: var(--ws-tekst);
}
.wcag-webscan__rij button {
  padding: 13px 26px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--ws-merk); color: var(--ws-knop-tekst);
  font: inherit; font-weight: 600; font-size: 1rem;
}
.wcag-webscan__rij button:hover { background: var(--ws-merk-sterk); }

/* ---- bezig ---- */
.wcag-webscan__stand {
  display: flex; align-items: center; gap: 16px;
  background: var(--ws-vlak);
  border: 1px solid var(--ws-lijn);
  border-radius: 12px; padding: 22px 24px;
}
.wcag-webscan__stand p { margin: 0; }
.wcag-webscan__spin {
  flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%;
  border: 3px solid var(--wp--preset--color--groen-200);
  border-block-start-color: var(--ws-merk);
  animation: wcag-webscan-draai 900ms linear infinite;
}
@keyframes wcag-webscan-draai { to { transform: rotate(360deg); } }

/* Een eindeloos draaiend rondje is voor wie er gevoelig voor is niet
   onschuldig. Zonder beweging blijft het een duidelijke stip. */
@media (prefers-reduced-motion: reduce) {
  .wcag-webscan__spin {
    animation: none;
    border-color: var(--ws-merk);
    border-style: dotted;
  }
}
.wcag-webscan__ververs { margin-block-start: 18px; }

/* ---- kop van het rapport ---- */
.wcag-webscan__kop { margin-block-end: var(--wp--preset--spacing--50, 2.5rem); }
.wcag-webscan__adres { margin: 0; font-weight: 600; }
.wcag-webscan__tijd { margin: 4px 0 0; color: var(--ws-tekst-zacht); font-size: 0.9rem; }

.wcag-webscan__cijfers {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.wcag-webscan__cijfer {
  border-radius: 12px; padding: 20px 22px; border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 4px;
}
.wcag-webscan__getal {
  font-family: var(--wp--preset--font-family--rubik, inherit);
  font-size: 2.4rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
}
.wcag-webscan__label { font-size: 0.95rem; font-weight: 600; }

/* De kleur bevestigt, het getal en het woord ernaast dragen de betekenis.
   Haal alle kleur weg en er staat nog steeds "2 punten die misgaan"; dat is
   wat 1.4.1 vraagt.

   De rand haalt geen 3:1 met de pagina (2,00 / 1,61 / 1,59). Dat hoeft ook
   niet: 1.4.11 gaat over randen die nodig zijn om een BEDIENINGSELEMENT te
   herkennen, en dit zijn informatievakken waar je niets mee doet. De tekst
   erin haalt 7,69:1 of beter. Wel bewust een rand én een vulling, want in de
   hoogcontrastmodus verdwijnt de vulling en blijft de rand over. */
.wcag-webscan__cijfer--fout     { background: var(--wcag-rood-100);  color: var(--wcag-rood-800);  border-color: var(--wcag-rood-300); }
.wcag-webscan__cijfer--letop    { background: var(--wcag-amber-100); color: var(--wcag-amber-800); border-color: var(--wcag-amber-300); }
.wcag-webscan__cijfer--geslaagd { background: var(--wcag-succes-100, #E2F8ED); color: var(--wcag-succes-800, #0B4433); border-color: var(--wcag-succes-300, #8EE3B4); }

.wcag-webscan__criteria { margin-block-start: 18px; font-weight: 600; }

/* ---- groepen ---- */
.wcag-webscan__groep { margin-block-end: var(--wp--preset--spacing--50, 2.5rem); }
.wcag-webscan__groep h2 { margin-block-end: 4px; }
.wcag-webscan__aantal { color: var(--ws-tekst-zacht); font-weight: 400; }
.wcag-webscan__groepuitleg { margin: 0 0 18px; color: var(--ws-tekst-zacht); max-inline-size: 60ch; }

.wcag-webscan__lijst { list-style: none; margin: 0; padding: 0; }
.wcag-webscan__item { border-block-end: 1px solid var(--ws-lijn); }
.wcag-webscan__item:first-child { border-block-start: 1px solid var(--ws-lijn); }

.wcag-webscan__samenvatting {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 4px; cursor: pointer; list-style: none;
}
.wcag-webscan__samenvatting::-webkit-details-marker { display: none; }
.wcag-webscan__samenvatting::before {
  content: ""; flex: none; inline-size: 13px; block-size: 13px; margin-block-start: 7px;
  background: currentColor; color: var(--ws-merk);
  clip-path: polygon(20% 0%, 20% 100%, 85% 50%);
  transition: transform 150ms ease;
}
.wcag-webscan__vouw[open] > .wcag-webscan__samenvatting::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .wcag-webscan__samenvatting::before { transition: none; } }

.wcag-webscan__titel {
  margin: 0; flex: 1 1 auto; font-size: 1.05rem; line-height: 1.45;
  font-family: var(--wp--preset--font-family--lexend); font-weight: 600;
  color: var(--ws-tekst);
}
.wcag-webscan__samenvatting:hover { background: var(--ws-vlak); }
.wcag-webscan__samenvatting:hover .wcag-webscan__titel { text-decoration: underline; }
.wcag-webscan__samenvatting:focus-visible {
  outline: 3px solid var(--ws-merk-sterk); outline-offset: -3px; border-radius: 6px;
}
.wcag-webscan__vouw[open] > .wcag-webscan__samenvatting { background: var(--ws-vlak-2); }

.wcag-webscan__inhoud { padding: 4px 4px 28px 31px; max-inline-size: 68ch; }
.wcag-webscan__criterium { font-weight: 600; }
.wcag-webscan__voorbeeldkop { margin-block-end: 6px; font-weight: 600; font-size: 0.95rem; }
.wcag-webscan__inhoud pre { overflow-x: auto; }
.wcag-webscan__regelnaam { font-size: 0.85rem; color: var(--ws-tekst-zacht); margin-block-end: 0; }

/* ---- naschrift ---- */
.wcag-webscan__naschrift {
  background: var(--ws-vlak);
  border-radius: 14px; padding: 30px 32px;
  margin-block-start: var(--wp--preset--spacing--50, 2.5rem);
}
.wcag-webscan__naschrift h2 { margin-block-start: 0; }

@media (forced-colors: active) {
  .wcag-webscan__cijfer, .wcag-webscan__item, .wcag-webscan__stand { border: 1px solid CanvasText; }
  .wcag-webscan__samenvatting::before { background: CanvasText; }
  .wcag-webscan__spin { border-color: CanvasText; border-block-start-color: Highlight; }
}

@media (max-width: 600px) {
  .wcag-webscan__inhoud { padding-inline-start: 4px; }
  .wcag-webscan__rij button { inline-size: 100%; }
}

/* ---- het formulier op het donkere blok van de voorpagina ----

   Daar erft de tekst de lichte kleur van dat blok. De grijze uitleg en het
   label zijn dan niet meer te lezen (rond 2:1), dus die krijgen hier hun
   eigen waarde. De knop wordt licht op donker in plaats van andersom. */
.wcag-scan .wcag-webscan { margin-block: 0; }
.wcag-scan .wcag-webscan__form label { color: var(--ws-knop-tekst); }
.wcag-scan .wcag-webscan__uitleg { color: #FFFFFF; }          /* 9,86:1 op diep */
.wcag-scan .wcag-webscan__rij button {
  background: var(--wp--preset--color--groen-300);
  color: var(--wp--preset--color--diep);                       /* 6,48:1 */
}
.wcag-scan .wcag-webscan__rij button:hover { background: var(--ws-knop-tekst); }
.wcag-scan .wcag-webscan__rij input { border-color: var(--ws-knop-tekst); }

/* ---- de plekken waar een bevinding zit ----

   Code brak uit beeld: een <pre> houdt regels standaard heel, en een fragment
   HTML is zo een paar honderd tekens. Horizontaal schuiven werkt hier niet —
   je moet twee kanten op lezen om één regel te zien, en met een schermvergroter
   is dat helemaal onwerkbaar. Dus afbreken, ook middenin een woord als het
   niet anders kan; bij een class-naam van 40 tekens is dat de enige uitweg. */
.wcag-webscan__plekken {
  margin: 0; padding-inline-start: 1.6em;
  display: flex; flex-direction: column; gap: 12px;
}
.wcag-webscan__plekken li { padding-inline-start: 4px; }
.wcag-webscan__plekken li::marker {
  color: var(--wcag-tekst-zacht, #5A6771); font-size: 0.85rem;
}
.wcag-webscan__plekken pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.85rem; line-height: 1.6;
}
.wcag-webscan__voorbeeldkop { margin-block: 18px 10px; }