/* AI2GO — gedeeld FAQ-blok (details/summary-accordeon)
   Gebruik: <link rel="stylesheet" href="faq.css?v=1">
   Markup:
   <section class="faq-section" id="faq">
     <div class="faq-inner">
       <span class="faq-kicker">Veelgestelde vragen</span>
       <h2 class="faq-title">…</h2>
       <div class="faq-list">
         <details class="faq-item">
           <summary>Vraag?</summary>
           <div class="faq-antwoord"><p>Antwoord…</p></div>
         </details>
       </div>
     </div>
   </section>
*/
.faq-section { padding: 4.5rem 2rem; background: #fff; }
.faq-inner { max-width: 860px; margin: 0 auto; }
.faq-kicker { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: #4fb06d; margin-bottom: .4rem; text-align: center; font-weight: 700; }
.faq-title { font-family: 'Space Grotesk', 'Outfit', sans-serif; font-size: 2rem; color: #1e5a7d; text-align: center; margin: 0 0 .6rem; }
.faq-intro { text-align: center; color: #6b7a8c; margin: 0 auto 2rem; max-width: 640px; font-size: 1.02rem; }
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { background: #f7f9fb; border: 1px solid #e6edf3; border-radius: 12px; overflow: hidden; }
.faq-item[open] { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.25rem; font-weight: 600; color: #1e5a7d; font-size: 1.05rem; position: relative; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e8f4f8; color: #1e5a7d; font-weight: 700; font-size: 1.1rem; transition: transform .2s ease, background .2s ease; }
.faq-item[open] summary::after { content: '–'; background: #4fb06d; color: #fff; }
.faq-item summary:hover { color: #164a68; }
.faq-item summary:focus-visible { outline: 2px solid #4fb06d; outline-offset: -2px; }
.faq-antwoord { padding: 0 1.25rem 1.2rem; color: #2c3e50; line-height: 1.65; }
.faq-antwoord p { margin: 0 0 .7rem; }
.faq-antwoord p:last-child { margin-bottom: 0; }
.faq-antwoord ul { margin: .3rem 0 .7rem 1.2rem; }
.faq-antwoord a { color: #1e5a7d; font-weight: 600; }
.faq-cta { text-align: center; margin-top: 1.8rem; color: #6b7a8c; }
.faq-cta a { color: #1e5a7d; font-weight: 600; }
@media (max-width: 640px) {
  .faq-section { padding: 3rem 1.2rem; }
  .faq-title { font-size: 1.6rem; }
  .faq-item summary { font-size: 1rem; padding-right: 2.6rem; }
}