/* Eigen CSS-aanvullingen wattedoenvandaag.nl
   Enqueued vanuit functions.php (wtd_header_scripts) met filemtime als versie. */

/* Breedtebegrenzing platte-HTML-berichten (Strategic Content Engine) — 10 aug 2026
   Body layout 59368 zet de post-content in een fullwidth-sectie zonder Divi-row.
   Berichten die uit Divi-secties bestaan brengen hun eigen row mee; SCE-berichten
   zijn platte HTML en kregen daardoor geen enkele breedtebegrenzing (rand tot rand).
   Alleen directe children begrenzen: bij Divi-builder-berichten is de enige directe
   child .et-l, die hier wordt uitgesloten. Maten gelijk aan een standaard Divi-row. */
.et_pb_fullwidth_post_content > *:not(.et-l) {
    width: 80%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* FAQ-accordeon op AI-artikelen (Strategic Content Engine) — 11 aug 2026.
   SCE zet alle antwoorden tegelijk open onderaan het artikel, wat erg druk oogt.
   De markup wordt server-side omgezet in inc/wtd-faq-accordion.php: vraag in
   <summary>, antwoord in .wtd-faq__a. De <ol class="sce-faq-list"> en de <li>
   blijven staan, zodat de kaartopmaak uit sce-frontend.css blijft werken. */
.sce-faq-section .sce-faq-list {
    list-style: none;
    padding-left: 0;
    counter-reset: wtd-faq;
}
.sce-faq-section .sce-faq-list > li {
    margin-bottom: 0;
    counter-increment: wtd-faq;
    border-bottom: 1px solid #e2e8f0;
}
.sce-faq-section .sce-faq-list > li:last-child {
    border-bottom: 0;
}

.wtd-faq > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    padding: 0.85em 2em 0.85em 0;
    position: relative;
}
.wtd-faq > summary::-webkit-details-marker {
    display: none;
}
.wtd-faq > summary::before {
    content: counter(wtd-faq) ".";
    flex: 0 0 auto;
    color: #3b82f6;
    font-weight: 700;
}
/* Divi geeft elke <p> een padding-bottom van 1em; binnen de summary moet die weg.
   !important omdat de SCE-regel op li p:first-child een hogere specificiteit heeft. */
.sce-faq-section .wtd-faq__q p {
    margin: 0 !important;
    padding-bottom: 0 !important;
}
.wtd-faq > summary:hover p {
    color: #3b82f6;
}

/* Chevron rechts; draait een kwartslag als het item openstaat. */
.wtd-faq > summary::after {
    content: "";
    position: absolute;
    right: 0.4em;
    top: 1.3em;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid #3b82f6;
    border-bottom: 2px solid #3b82f6;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.wtd-faq[open] > summary::after {
    transform: rotate(-135deg);
}

.wtd-faq__a {
    padding: 0 2em 1.1em 1.4em;
}
.wtd-faq__a > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Gecentreerde afbeeldingen in AI-artikelen echt centreren — 11 aug 2026.
   sce-frontend.css zet de <img> op display:block en regelt de centrering met
   text-align:center op de <figure>. Die twee werken niet samen: een block-element
   trekt zich niets aan van text-align, dus de afbeelding plakte tegen de linkerrand
   terwijl het bijschrift wél midden onder de kolom stond. Buiten .entry-content is
   de img inline en helpt auto-marge niet, vandaar display:block ook hier. */
.wp-block-image.aligncenter img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}