/* FAQ-pagina BLS Sports. Haarlijnrijen in plaats van kaarten, zoals de
   prijzen- en methodepagina: rustig, scanbaar, een vraag per regel.
   Bouwt op de tokens van stijl-2026.css. */

.faq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.faq-raster{display:grid;gap:var(--s-7)}
@media (min-width:960px){
  .faq-raster{grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:var(--s-8);align-items:start}
  .faq-zij{position:sticky;top:calc(var(--kop-h) + var(--s-5))}
}

/* zoekveld */
.faq-zoek{
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--wit);border:1px solid var(--rand-sterk);border-radius:var(--r-pill);
  padding:0 var(--s-4);min-height:var(--raak);
  transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease);
}
.faq-zoek:focus-within{border-color:var(--blauw);box-shadow:0 0 0 3px rgba(25,118,210,.16)}
.faq-zoek svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.faq-zoek input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:var(--t-md);color:var(--inkt);padding:var(--s-3) 0;
}
.faq-zoek input::placeholder{color:var(--muted)}

/* inhoudsopgave */
.faq-inhoud{margin-top:var(--s-6)}
.faq-inhoud-kop{
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s-3);
}
.faq-inhoud ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.faq-inhoud a{
  display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-4);
  border:1px solid var(--rand);border-radius:var(--r-pill);background:var(--wit);
  color:var(--inkt-3);font-size:var(--t-sm);font-weight:var(--w-nadruk);text-decoration:none;
  transition:border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.faq-inhoud a:hover{border-color:var(--blauw);color:var(--blauw-d)}
@media (min-width:960px){
  .faq-inhoud ul{display:block}
  .faq-inhoud li+li{margin-top:2px}
  .faq-inhoud a{
    display:flex;min-height:40px;border:0;border-radius:var(--r-sm);background:transparent;
    padding:0 var(--s-3);margin-left:calc(var(--s-3) * -1);font-size:var(--t-md);
  }
  .faq-inhoud a:hover{background:var(--wit)}
}

/* groepen en vragen */
.faq-groep{scroll-margin-top:calc(var(--kop-h) + var(--s-5))}
.faq-groep+.faq-groep{margin-top:var(--s-8)}
.faq-groep h2{font-size:var(--t-2xl);margin-bottom:var(--s-4)}
.faq-item{border-top:1px solid var(--rand-sterk);scroll-margin-top:calc(var(--kop-h) + var(--s-5))}
.faq-groep .faq-item:last-child{border-bottom:1px solid var(--rand-sterk)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-5) 0;min-height:var(--raak);
  font-size:var(--t-lg);font-weight:var(--w-titel);line-height:1.4;color:var(--inkt);
  transition:color var(--t-hover) var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--blauw-vlak) no-repeat center/14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%231257A0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:transform var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--blauw-d)}
.faq-item summary:focus-visible{outline:2px solid var(--blauw);outline-offset:4px;border-radius:var(--r-xs)}
.faq-antwoord{padding:0 var(--s-8) var(--s-5) 0}
.faq-antwoord p{max-width:68ch;color:var(--inkt-3);font-size:var(--t-md);line-height:1.7}
.faq-antwoord a,.faq-geen a{color:var(--blauw-d);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.faq-item[open] .faq-antwoord{animation:faqIn .22s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq-item[open] .faq-antwoord{animation:none}}
@media (max-width:600px){
  .faq-item summary{font-size:var(--t-md)}
  .faq-antwoord{padding-right:0}
}
.faq-geen{padding:var(--s-5) 0;color:var(--muted);font-size:var(--t-md)}