/* ==========================================================================
   Adviesscan
   --------------------------------------------------------------------------
   Bouwt voort op style.css van het thema: kleuren, lettertype, knoppen
   (.btn-cta, .btn-outline), formuliervelden (.form-veld, .form-raster),
   .zij-blok, .contact-portrait, .pill en .tag-row komen daar vandaan. Hier
   staat alleen wat de scan extra nodig heeft, met dezelfde variabelen.

   Huisstijl:
   - oranje alleen op de knop die de aanvraag verstuurt (Call To Action)
   - navy voor tekst en keuzes, groen voor bevestiging en voortgang
   - lopende tekst nooit in groen: dat leest te licht op wit
   - beelden met afgeronde hoeken, zoals de fotoblokken op de site
   ========================================================================== */

.as-sectie{padding-bottom:var(--gap);}

/* De vragen links, de voortgang rechts. Zelfde opzet als een nieuwsbericht:
   het blok rechts loopt mee bij het scrollen. */
.as-raster{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.as-hoofd{min-width:0;}
.as-zijkant{position:sticky;top:105px;}

.as-kaart{
  background:var(--white);
  border:1px solid var(--navy-20);
  border-radius:var(--radius-m);
  padding:clamp(1.5rem,3.5vw,2.75rem);
  /* bij het wisselen van vraag scrolt de kaart onder de kopbalk uit */
  scroll-margin-top:105px;
}

/* Alleen voor schermlezers */
.as-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- Vraag ---------- */
.as-nummer{
  font-size:.86rem;
  font-weight:600;
  color:var(--navy-60);
  margin-bottom:.6rem;
}
.as-kaart fieldset{border:0;margin:0;padding:0;min-width:0;}
.as-kaart legend{padding:0;width:100%;}
.as-vraag{
  font-weight:800;
  font-size:clamp(1.45rem,2.3vw,1.85rem);
  line-height:1.22;
  letter-spacing:-0.01em;
}
.as-vraag:focus,.as-uitkomst-titel:focus{outline:none;}
.as-uitleg{margin-top:.6rem;color:var(--navy-80);max-width:62ch;}

/* ---------- Antwoordtegels ----------
   Echte radio's en vinkjes, alleen anders getekend: toetsenbord en
   schermlezer werken zoals ze gewend zijn. */
.as-opties{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  margin-top:1.6rem;
}
.as-optie{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:1rem 1.1rem;
  border:1.5px solid var(--navy-20);
  border-radius:var(--radius-s);
  background:var(--white);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.as-optie:hover{border-color:var(--navy-60);}
.as-optie input,
.as-akkoord input{
  position:absolute;
  top:0;left:0;
  width:1px;height:1px;
  opacity:0;
  margin:0;
}
.as-optie:has(input:checked){
  border-color:var(--navy-100);
  background:var(--green-20);
}
.as-optie:has(input:focus-visible),
.as-akkoord:has(input:focus-visible){
  outline:2px solid var(--green-100);
  outline-offset:3px;
}

/* Het rondje (één antwoord) of vierkantje (meer antwoorden) */
.as-teken{
  flex:none;
  position:relative;
  width:20px;height:20px;
  margin-top:.15rem;
  border:1.5px solid var(--navy-40);
  border-radius:50%;
  background:var(--white);
  transition:background .15s ease, border-color .15s ease;
}
.is-meer .as-teken,
.as-akkoord .as-teken{border-radius:5px;}
input:checked + .as-teken{
  background:var(--green-100);
  border-color:var(--green-100);
}
input:checked + .as-teken::after{
  content:"";
  position:absolute;
  left:5.5px;top:2.5px;
  width:5px;height:9px;
  border:solid var(--white);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.as-optie-tekst{min-width:0;}
.as-optie-label{display:block;font-weight:600;line-height:1.35;}
.as-optie-toelichting{
  display:block;
  margin-top:.2rem;
  font-size:.88rem;
  line-height:1.45;
  color:var(--navy-60);
}

/* ---------- Meldingen ----------
   Er is geen signaalrood in de huisstijl. Een melding valt op door een
   dikke navy rand en vette tekst. */
.as-melding{
  margin-top:1.2rem;
  padding:.8rem 1rem;
  border-left:3px solid var(--navy-100);
  background:var(--off-white);
  font-weight:600;
  font-size:.94rem;
}
.as-veldfout{
  font-size:.84rem;
  font-weight:600;
  color:var(--navy-100);
}
.as-kaart [aria-invalid="true"]{
  border-color:var(--navy-100);
  border-width:2px;
}
.as-optioneel{font-weight:400;color:var(--navy-60);}

/* ---------- Knoppen onder een vraag ---------- */
.as-navigatie{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--navy-20);
}
.as-terug{
  -webkit-appearance:none;
  appearance:none;
  background:none;
  border:0;
  padding:.6rem 0;
  font-family:inherit;
  font-weight:600;
  font-size:.95rem;
  color:var(--navy-80);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.as-terug:hover{color:var(--navy-100);}
.as-terug:focus-visible{outline:2px solid var(--green-100);outline-offset:3px;}
.as-navigatie .btn[disabled]{opacity:.65;cursor:wait;transform:none;}

/* ---------- Voortgang (rechts) ---------- */
.as-voortgang-kop{font-weight:700;margin-bottom:1rem;}
.as-teller{display:none;}
.as-balk{
  height:4px;
  border-radius:999px;
  background:var(--navy-20);
  overflow:hidden;
  margin-bottom:1.3rem;
}
.as-balk span{
  display:block;
  height:100%;
  width:0;
  background:var(--green-100);
  transition:width .35s ease;
}
.as-stappenlijst{display:grid;gap:.1rem;}
.as-stappenlijst li{
  position:relative;
  padding-left:1.7rem;
}
/* het bolletje voor elke stap: open, huidig of klaar */
.as-stappenlijst li::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:12px;height:12px;
  margin-top:-6px;
  border-radius:50%;
  border:2px solid var(--navy-20);
  background:var(--white);
}
.as-stappenlijst li.is-actief::before{border-color:var(--navy-100);}
.as-stappenlijst li.is-klaar::before{border-color:var(--green-100);background:var(--green-100);}
.as-stappenlijst span,
.as-stappenlijst button{
  display:block;
  width:100%;
  padding:.45rem 0;
  font-family:inherit;
  font-size:.95rem;
  text-align:left;
  color:var(--navy-60);
}
.as-stappenlijst li.is-actief span{color:var(--navy-100);font-weight:700;}
.as-stappenlijst button{
  -webkit-appearance:none;
  appearance:none;
  background:none;
  border:0;
  color:var(--navy-100);
  cursor:pointer;
}
.as-stappenlijst button:hover{text-decoration:underline;text-underline-offset:3px;}
.as-stappenlijst button:focus-visible{outline:2px solid var(--green-100);outline-offset:2px;}

.as-zekerheden{display:grid;gap:.65rem;margin-top:1.5rem;padding-left:.2rem;}
.as-zekerheden li{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.94rem;
  font-weight:500;
  color:var(--navy-80);
}
.as-zekerheden li::before{
  content:"";
  flex:none;
  width:11px;height:6px;
  margin-top:-3px;
  border:solid var(--green-100);
  border-width:0 0 2px 2px;
  transform:rotate(-45deg);
}

/* ---------- Uitkomst ---------- */
.as-uitkomst-kop{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
}
/* zelfde beeld als het fotoblok van dit gebied op de homepage */
.as-uitkomst-beeld{
  position:relative;
  margin:0;
  aspect-ratio:4/5;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--navy-100);
}
.as-uitkomst-beeld img{width:100%;height:100%;object-fit:cover;}
.as-uitkomst-beeld::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,32,46,0) 40%, rgba(9,32,46,.92) 100%);
}
.as-uitkomst-beeld figcaption{
  position:absolute;
  left:20px;right:20px;bottom:18px;
  z-index:1;
  color:var(--white);
  font-weight:800;
  font-size:clamp(1.2rem,1.8vw,1.45rem);
  line-height:1.15;
}

.as-uitkomst-titel{
  font-weight:800;
  font-size:clamp(1.65rem,2.9vw,2.35rem);
  line-height:1.14;
  letter-spacing:-0.01em;
}
.as-uitkomst-titel .brand-logo{vertical-align:-0.06em;}
.as-uitkomst-tekst > p{margin-top:1rem;color:var(--navy-80);line-height:1.7;}
.as-uitkomst-tekst > .as-aanpak{
  padding-left:1rem;
  border-left:3px solid var(--green-100);
  color:var(--navy-100);
  font-weight:500;
}
.as-link{
  display:inline-block;
  margin-top:1.1rem;
  padding:.3rem 0;
  font-weight:700;
  color:var(--navy-100);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.as-link:hover{color:var(--green-100);}

.as-ook{
  margin-top:2rem;
  padding:1.2rem 1.4rem;
  border-radius:var(--radius-s);
  background:rgba(9,32,46,.05);
}
.as-ook p{font-size:.94rem;font-weight:600;}
.as-ook .tag-row{margin-top:.7rem;}
.as-ook .pill{display:inline-block;padding:7px 14px;transition:background .15s ease, color .15s ease;}
.as-ook .pill:hover{background:var(--navy-100);color:var(--white);}
.as-ook .as-ook-noot{margin-top:.7rem;font-weight:400;color:var(--navy-80);}

/* Aanspreekpunt naast het formulier */
.as-contactblok{
  display:grid;
  grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:2.5rem;
  padding-top:2.5rem;
  border-top:1px solid var(--navy-20);
}
.as-aanspreekpunt .contact-portrait{width:100%;max-width:180px;}
.as-klein{margin-top:1rem;font-size:.86rem;font-weight:600;color:var(--navy-60);}
.as-naam{font-weight:700;font-size:1.05rem;line-height:1.3;}
.as-rol{font-size:.9rem;color:var(--navy-60);}

.as-contact h3{font-size:clamp(1.25rem,1.9vw,1.5rem);}
.as-contact .form-raster{max-width:none;margin-top:1.4rem;}

/* Honeypot: buiten beeld, niet bereikbaar met tab */
.as-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.as-akkoord{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin-top:1.4rem;
  font-size:.92rem;
  line-height:1.5;
  color:var(--navy-80);
  cursor:pointer;
}
.as-akkoord a{color:var(--navy-100);text-decoration:underline;text-underline-offset:3px;}
.as-akkoord + .as-veldfout{margin-top:.4rem;padding-left:2.1rem;}

/* ---------- Bedankt ---------- */
.as-bedankt{padding:clamp(.5rem,2vw,1.5rem) 0;}
.as-vinkje{
  position:relative;
  display:block;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--green-100);
}
.as-vinkje::after{
  content:"";
  position:absolute;
  left:21px;top:14px;
  width:11px;height:21px;
  border:solid var(--white);
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
.as-bedankt .as-vraag{margin-top:1.3rem;}
.as-bedankt p{margin-top:.8rem;max-width:58ch;color:var(--navy-80);}
.as-bedankt .as-navigatie{justify-content:flex-start;}

/* ==========================================================================
   Kleinere schermen
   ========================================================================== */

/* Geen ruimte meer voor een kolom ernaast: de voortgang wordt een smalle
   balk die onder de kopbalk blijft staan (84px + 1px rand). */
@media (max-width:1080px){
  .as-raster{grid-template-columns:minmax(0,1fr);gap:1.25rem;}
  .as-zijkant{
    position:sticky;
    top:85px;
    z-index:20;
    order:-1;
    margin-inline:calc(-1 * var(--zijmarge));
    padding:.7rem var(--zijmarge) .8rem;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--navy-20);
  }
  .as-voortgang.zij-blok{border:0;border-radius:0;padding:0;background:none;}
  .as-voortgang-kop,
  .as-stappenlijst,
  .as-zekerheden{display:none;}
  .as-teller{display:block;font-size:.86rem;font-weight:600;margin-bottom:.45rem;}
  /* de teller staat al in de balk; in de kaart alleen voor schermlezers */
  .as-nummer{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;
  }
  .as-balk{margin:0;}
  .as-kaart{scroll-margin-top:150px;}
}

@media (max-width:760px){
  .as-uitkomst-kop{grid-template-columns:minmax(0,1fr);}
  .as-uitkomst-beeld{aspect-ratio:21/9;}
  .as-contactblok{grid-template-columns:minmax(0,1fr);gap:1.5rem;}
  .as-aanspreekpunt{display:flex;align-items:center;gap:1.1rem;}
  .as-aanspreekpunt .contact-portrait{width:96px;}
  .as-klein{margin-top:0;}
}

@media (max-width:620px){
  .as-opties{grid-template-columns:minmax(0,1fr);}
  .as-kaart{border:0;padding:0;border-radius:0;}
}

/* Op een telefoon staat de hoofdknop bovenaan en over de volle breedte */
@media (max-width:480px){
  .as-navigatie{flex-direction:column-reverse;align-items:stretch;}
  .as-navigatie .btn{width:100%;justify-content:center;white-space:normal;text-align:center;}
  .as-navigatie .as-terug{align-self:center;}
}

@media (prefers-reduced-motion:reduce){
  .as-optie,.as-teken,.as-balk span{transition:none;}
}