/*
 * Digital Dependency Scan -- styles.
 *
 * Bron: shift-ctrl-digital-dependency-scan-visueel-ontwerp-2026-07-13.md
 * (bindende CSS/HTML-spec). Alle CSS-blokken uit §1-7 van dat document zijn
 * hieronder 1-op-1 gekopieerd (aangegeven per sectie) -- niet opnieuw
 * verzonnen. Waar iets ontbrak in de spec (met name: de "Volgende"-knop uit
 * §4 en enkele lay-outregels om de wizard/outcome te tonen/verbergen) is dat
 * expliciet als AANVULLING VAN THE CODER gemarkeerd, opgebouwd uit dezelfde
 * tokens -- geen nieuwe kleuren.
 *
 * Astra-compatibiliteit (§2, bindend): alles genest onder .dds-scan/.dds-context,
 * geen bare-element-selectors, geen !important behalve gedocumenteerd,
 * geen wijzigingen op body/html/:root.
 */

/* ===================================================================== */
/* §1 -- kleur- en typografie-tokens                                      */
/* ===================================================================== */

.dds-scan {
  --dds-primary: #2C3E50;      /* headers, belangrijke tekst -- vastgesteld */
  --dds-secondary: #E67E22;    /* CTA's, voortgangsbalk, accenten -- vastgesteld */
  --dds-accent: #27AE60;       /* positief/al-zelfstandig -- vastgesteld */
  --dds-bg: #ECF0F1;           /* pagina-achtergrond, kaarten -- vastgesteld */
  --dds-text: #2C3E50;         /* body copy -- vastgesteld */

  /* afgeleid, niet in tech-context §5 gespecificeerd -- toegelicht in het ontwerpdoc */
  --dds-text-muted: #5A6B7B;   /* gedimd t.o.v. --dds-primary, voor micro-inzicht-tekst */
  --dds-track: #DCE1E3;        /* neutrale progress-track, tint tussen bg en primary */
  --dds-card-bg: #FFFFFF;      /* vraagkaart tegen de gekleurde pagina-achtergrond */
  --dds-accent-tint: rgba(39, 174, 96, 0.08);  /* micro-inzicht-achtergrond, uit accent afgeleid */

  font-family: 'Open Sans', 'Lato', 'Source Sans Pro', sans-serif;
  color: var(--dds-text);
  background: var(--dds-bg);
}

.dds-scan h1, .dds-scan h2, .dds-scan h3, .dds-scan .dds-question__title {
  font-family: 'Montserrat', 'Inter', 'Roboto', sans-serif;
  font-weight: 600;
  color: var(--dds-primary);
}

/* ===================================================================== */
/* §2 -- Astra-compatibiliteit                                            */
/* ===================================================================== */

.dds-scan, .dds-scan * { box-sizing: border-box; }
.dds-scan { max-width: 640px; margin: 0 auto; padding: 24px 16px; }

/* ===================================================================== */
/* §3 -- voortgangsindicator                                              */
/* ===================================================================== */

.dds-progress { display: flex; gap: 6px; margin-bottom: 20px; }
.dds-progress__segment {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--dds-track); overflow: hidden;
}
.dds-progress__fill {
  height: 100%; background: var(--dds-secondary);
  border-radius: 3px; transition: width 400ms ease;
}
.dds-progress__label {
  /* Leesbaarheids-aanpassing (Jeroen, directe eigenaar-feedback op de echte
     testomgeving, 2026-07-14): verhoogd van 13px naar 15px. Overige styling
     (kleur, gewicht, marge) ongewijzigd -- geen herontwerp. */
  font-size: 15px; color: var(--dds-text-muted); margin-bottom: 8px;
}

/* AANVULLING THE CODER: §3 beschrijft de segmenten zelf, niet de
   flex-container die label+track samen bovenaan de widget plaatst. */
.dds-progress__track { display: flex; gap: 6px; }

/* ===================================================================== */
/* §4 -- vraagkaart-ontwerp                                               */
/* ===================================================================== */

.dds-question {
  background: var(--dds-card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(44, 62, 80, 0.12);
  padding: 24px;
}
.dds-question__title {
  font-size: 19px; margin-bottom: 16px;
}
.dds-option {
  display: block; width: 100%; text-align: left;
  min-height: 48px; padding: 12px 16px; margin-bottom: 10px;
  border: 2px solid var(--dds-track); border-radius: 8px;
  background: var(--dds-card-bg); color: var(--dds-text);
  font-family: 'Open Sans', 'Lato', sans-serif; font-size: 15px;
  /* AANVULLING THE CODER (QA-bevinding §9.2, testplan-resultaten-2026-07-13):
     Astra's globale button-regel zet text-transform:uppercase/letter-spacing
     op elke <button>. dds.css declareerde deze twee eigenschappen nergens,
     dus was er geen namespace-regel om die te verslaan -- expliciet op
     "none"/"normal" zetten wint de cascade nu wél, voor alle drie de
     rust-status-regels hieronder (.dds-option/.dds-next/.dds-prev). */
  text-transform: none; letter-spacing: normal;
  cursor: pointer; transition: border-color 150ms ease, background 150ms ease;
}
/* AANVULLING THE CODER (QA-bevinding §9.2, hover/focus niet genamespaced):
   de oorspronkelijke regel zette alleen border-color -- background/color
   vielen daardoor terug op Astra's button:hover/button:focus (solide
   Astra-oranje + witte tekst), ononderscheidbaar van (en dominanter dan)
   .dds-option--selected. Expliciete background/color-override lost dat op:
   een niet-geselecteerde optie blijft bij hover/focus wit met donkere tekst
   (alleen de rand kleurt), duidelijk anders dan de lichte perzik-tint van
   --selected hieronder. :focus (niet alleen :focus-visible) toegevoegd omdat
   QA een echte Tab-toetsaanslag testte, niet alleen de -visible-variant. */
.dds-option:hover, .dds-option:focus, .dds-option:focus-visible {
  border-color: var(--dds-secondary);
  background: var(--dds-card-bg);
  color: var(--dds-text);
}
.dds-option--selected {
  border-color: var(--dds-secondary);
  background: rgba(230, 126, 34, 0.06);
}
/* Zonder deze regel zou hoveren/focussen van een AL geselecteerde optie de
   peach-tint terugzetten naar wit, omdat .dds-option:hover hierboven exact
   dezelfde specificiteit heeft als .dds-option--selected en verderop in het
   bestand staat -- deze regel staat weer ná .dds-option:hover en wint zo op
   brontekst-volgorde, zodat een geselecteerde optie geselecteerd oogt/blijft
   ogen, ook onder de muis of met toetsenbordfocus. */
.dds-option--selected:hover, .dds-option--selected:focus, .dds-option--selected:focus-visible {
  border-color: var(--dds-secondary);
  background: rgba(230, 126, 34, 0.06);
  color: var(--dds-text);
}
.dds-insight {
  margin-top: 20px; padding: 14px 16px;
  background: var(--dds-accent-tint);
  border-left: 3px solid var(--dds-accent);
  border-radius: 4px;
  font-size: 14px; color: var(--dds-text-muted);
  animation: dds-fade-in 200ms ease;
}
@keyframes dds-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* AANVULLING THE CODER: het ontwerpdoc specificeert de vraagkaart en de
   micro-inzicht-box (§4), en noemt de "Volgende"-knop functioneel
   ("Volgende-knop pas na antwoord, geen auto-advance"), maar geeft er geen
   eigen CSS-blok voor. Onderstaande knop hergebruikt bewust dezelfde
   opbouw als de primaire CTA-knop (§6) i.p.v. een nieuwe stijl te
   verzinnen -- zelfde tokens, geen nieuwe kleur. Ter bevestiging aan The
   Visual Designer bij een volgende designronde. */
.dds-question__nav {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
}
.dds-next {
  display: inline-block;
  background: var(--dds-secondary); color: #fff;
  border: none; border-radius: 8px;
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 600;
  font-size: 15px; padding: 12px 24px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(44, 62, 80, 0.15);
  text-transform: none; letter-spacing: normal; /* QA-bevinding §9.2, zie .dds-option hierboven */
  transition: background 150ms ease;
}
/* :focus/:focus-visible expliciet toegevoegd (QA §9.2, niet apart getest op
   .dds-next maar aannemelijk dezelfde namespace-lacune) -- zonder deze regel
   zou toetsenbordfocus terugvallen op Astra's button:focus-kleur i.p.v. de
   eigen, iets donkerdere hover-tint. */
.dds-next:hover, .dds-next:focus, .dds-next:focus-visible {
  background: #cf6e18; color: #fff;
}
.dds-next:disabled { opacity: 0.6; cursor: not-allowed; }
.dds-next[hidden] { display: none; }

/* AANVULLING THE CODER (WP6-vervolgtaak, QA + Change Guide): minimale
   "vorige"-knop, secundair van gewicht t.o.v. "Volgende" -- outline i.p.v.
   gevuld, gedimde tekstkleur i.p.v. de primaire CTA-kleur, zodat de
   volgorde van visuele nadruk (Volgende = primaire actie, Vorige =
   secundair) behouden blijft. Zelfde tokens als de rest van de kaart, geen
   nieuwe kleur. */
.dds-prev {
  display: inline-block;
  background: transparent; color: var(--dds-text-muted);
  border: 2px solid var(--dds-track); border-radius: 8px;
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 600;
  font-size: 15px; padding: 10px 20px; cursor: pointer;
  text-transform: none; letter-spacing: normal; /* QA-bevinding §9.2, zie .dds-option hierboven */
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
/* Expliciete background hier is het belangrijkste verschil met vóór de fix:
   .dds-prev is een outline-knop (transparant), en Astra's button:hover/
   button:focus zet een solide achtergrondkleur -- zonder deze regel zou
   "Vorige" bij hover/focus ineens een gevulde knop worden i.p.v. outline. */
.dds-prev:hover, .dds-prev:focus, .dds-prev:focus-visible {
  border-color: var(--dds-secondary); color: var(--dds-secondary); background: transparent;
}

/* ===================================================================== */
/* §5 -- uitkomstscherm                                                   */
/* ===================================================================== */

.dds-outcome { background: var(--dds-card-bg); border-radius: 12px; padding: 28px 24px; }
/* SC-44: framing-label boven de tredenaam-badge. Bewust "Uw uitkomst"
   (band-taal), niet "Uw trede" en geen nummer -- zie UX Writer §3-flag. Klein
   en gedempt zodat de bandnaam zelf leidend blijft. */
.dds-outcome__label {
  display: block; margin-bottom: 6px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--dds-text-muted);
}
.dds-outcome__badge {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: var(--dds-primary); color: #fff;
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 600;
  /* Leesbaarheids-aanpassing (Jeroen, directe eigenaar-feedback op de echte
     testomgeving, 2026-07-14): verhoogd van 16px naar 18px. Padding, kleur en
     gewicht ongewijzigd -- geen herontwerp. */
  font-size: 18px;
}
.dds-track { display: flex; align-items: center; gap: 4px; margin: 20px 0; }
.dds-track__node {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--dds-track); background: transparent;
}
.dds-track__node--current {
  background: var(--dds-primary); border-color: var(--dds-primary);
  width: 14px; height: 14px;
}
.dds-track__line { flex: 1; height: 2px; background: var(--dds-track); }

/* AANVULLING THE CODER: basale leesbaarheids-/spacing-regels voor de
   overige uitkomstschermtekst (boodschap, afhankelijkheidsprofiel,
   regulering-alinea) -- geen nieuwe kleuren, alleen ruimte/leesbaarheid. */
.dds-outcome__icon { color: var(--dds-primary); margin-bottom: 12px; }
.dds-outcome__message { font-size: 16px; line-height: 1.5; margin: 16px 0; }
.dds-outcome__profiel { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.dds-outcome__regulering {
  font-size: 14px; line-height: 1.5; color: var(--dds-text-muted);
  margin-bottom: 20px; padding: 14px 16px;
  background: var(--dds-accent-tint); border-left: 3px solid var(--dds-accent);
  border-radius: 4px;
}

/* ===================================================================== */
/* §6 -- CTA-knop-styling per band                                        */
/* ===================================================================== */

.dds-cta {
  display: inline-block; text-decoration: none;
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 600;
  border-radius: 8px; text-align: center; cursor: pointer;
}
.dds-cta--soft {
  background: transparent; color: var(--dds-secondary);
  border: 2px solid var(--dds-secondary);
  padding: 10px 20px; font-size: 15px;
}
.dds-cta--soft:hover { background: rgba(230, 126, 34, 0.08); }

.dds-cta--primary {
  color: #fff; border: none;
  padding: 14px 28px; font-size: 16px;
  box-shadow: 0 2px 6px rgba(44, 62, 80, 0.15);
}
.dds-cta--primary.dds-cta--guided { background: var(--dds-secondary); }
.dds-cta--primary.dds-cta--guided:hover { background: #cf6e18; }
/* .dds-cta--diy (prominente groene DIY-knop) verwijderd met SC-45 a:
   Band C "Onderweg — op eigen kracht" gebruikt sindsdien de zachte mailto
   (.dds-cta--soft), geen productpagina-knop. */

/* ===================================================================== */
/* §7 -- contextbehoud-banner (leeft op de downstream contact-/          */
/* boekingspagina, niet op de scan-widget zelf -- bewust zelfstandig,     */
/* zie ontwerpdoc §7). Hier meegeleverd zodat de downstream-pagina         */
/* (SC-15/16/17) 'm zonder extra werk kan hergebruiken.                   */
/* ===================================================================== */

.dds-context {
  --dds-primary: #2C3E50;
  --dds-bg: #ECF0F1;
  --dds-card-bg: #FFFFFF;
  --dds-text: #2C3E50;
  box-sizing: border-box;
  font-family: 'Open Sans', 'Lato', 'Source Sans Pro', sans-serif;
  color: var(--dds-text);
}
.dds-context * { box-sizing: border-box; }

.dds-context__card {
  background: var(--dds-card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(44, 62, 80, 0.12);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.dds-context__lead {
  font-size: 15px; margin-bottom: 8px;
}
.dds-context__badge {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: var(--dds-primary); color: #fff;
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 600; font-size: 16px;
}
.dds-context__body {
  font-size: 15px; line-height: 1.5; margin-top: 12px;
}

/* ===================================================================== */
/* Wizard-lay-out-hulpklassen (AANVULLING THE CODER, geen designspec-item) */
/* ===================================================================== */

.dds-scan [hidden] { display: none !important; } /* !important gedocumenteerd:
  hidden-attribuut moet Astra's eigen display-overrides op elementen binnen
  de widget kunnen verslaan; scope blijft strikt .dds-scan, dus geen bredere
  botsing (§2-regel: !important alleen specifiek en gedocumenteerd). */
.dds-opening { font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.dds-error { color: #B03A2E; font-size: 14px; margin-top: 12px; }