/**
 * Yinga Blogger — content-rendering baseline
 *
 * Doel: professionele blog-layout op sites zonder Elementor.
 * Scoped in twee lagen:
 *   Laag A  .yinga-blogger-content  — post_content wrapper (the_content-filter)
 *   Laag B  .yinga-blogger-single   — body-class, voor featured image buiten de wrapper
 *
 * Strategie: theme-vars erven met fallbacks.
 *   Modern block-thema → --wp--preset--color--* + --wp--preset--font-family--* pakken het.
 *   Classic thema zonder presets → plain-color/font fallbacks garanderen leesbaarheid.
 * Geen agressieve reset, geen globale selectors, blast radius = alleen blog-singles.
 */

/* ─── Laag A: content-wrapper ─────────────────────────────────────────────── */

.yinga-blogger-content {
    max-width: 72ch;
    margin-inline: auto;
    line-height: 1.7;
    /* Thema-kleur erven; currentColor als safe fallback */
    color: var(--wp--preset--color--foreground, currentColor);
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Koppen ------------------------------------------------------------------ */

.yinga-blogger-content h2,
.yinga-blogger-content h3,
.yinga-blogger-content h4 {
    font-family: inherit;
    color: var(--wp--preset--color--foreground, currentColor);
    line-height: 1.25;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.yinga-blogger-content h2 { font-size: 1.5rem; }
.yinga-blogger-content h3 { font-size: 1.2rem; }
.yinga-blogger-content h4 { font-size: 1rem; }

/* Alinea's ---------------------------------------------------------------- */

.yinga-blogger-content p {
    margin-top: 0;
    margin-bottom: 1.25em;
}

/* Lijsten ----------------------------------------------------------------- */

.yinga-blogger-content ul,
.yinga-blogger-content ol {
    padding-inline-start: 1.75em;
    margin-bottom: 1.25em;
}

.yinga-blogger-content li {
    margin-bottom: 0.4em;
}

.yinga-blogger-content ul { list-style-type: disc; }
.yinga-blogger-content ol { list-style-type: decimal; }

/* Links ------------------------------------------------------------------- */

.yinga-blogger-content a {
    color: var(
        --wp--preset--color--primary,
        var(--wp--preset--color--link, #1a73e8)
    );
    text-decoration: underline;
    text-underline-offset: 2px;
}

.yinga-blogger-content a:hover {
    opacity: 0.8;
}

/* Blockquote -------------------------------------------------------------- */

.yinga-blogger-content blockquote {
    margin-inline: 0;
    margin-block: 1.5em;
    padding: 0.75em 1.25em;
    border-inline-start: 4px solid var(
        --wp--preset--color--primary,
        #1a73e8
    );
    font-style: italic;
    color: var(--wp--preset--color--foreground, inherit);
    background: transparent;
}

/* Tabellen ---------------------------------------------------------------- */

.yinga-blogger-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 0.95rem;
}

.yinga-blogger-content th,
.yinga-blogger-content td {
    padding: 0.6em 0.85em;
    border: 1px solid var(--wp--preset--color--contrast-3, #d0d0d0);
    text-align: left;
    vertical-align: top;
}

.yinga-blogger-content th {
    background: var(--wp--preset--color--base-2, #f5f5f5);
    font-weight: 600;
}

/* Afbeeldingen + figures -------------------------------------------------- */

.yinga-blogger-content figure {
    margin-inline: 0;
    margin-block: 1.5em;
}

.yinga-blogger-content figure img,
.yinga-blogger-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Sterk / em -------------------------------------------------------------- */

.yinga-blogger-content strong { font-weight: 700; }
.yinga-blogger-content em     { font-style: italic; }

/* ─── FAQ-blok (.blog-faq / .faq-item) ───────────────────────────────────── */
/*
 * renderStructuredBlocks() in wpPublishService.ts genereert:
 *   <section class="blog-faq">
 *     <h2>Veelgestelde vragen</h2>
 *     <div class="faq-item">
 *       <h3>Vraag</h3>
 *       <p>Antwoord</p>
 *     </div>
 *   </section>
 */

.yinga-blogger-content .blog-faq {
    margin-top: 2.5em;
    padding: 1.5em 1.75em;
    background: var(--wp--preset--color--base-2, #f9f9f9);
    border-radius: 12px;
    border: 1px solid var(--wp--preset--color--contrast-3, #e0e0e0);
}

.yinga-blogger-content .blog-faq > h2 {
    margin-top: 0;
    font-size: 1.35rem;
    color: var(--wp--preset--color--foreground, currentColor);
}

.yinga-blogger-content .faq-item {
    padding: 1em 0;
    border-top: 1px solid var(--wp--preset--color--contrast-3, #e0e0e0);
}

.yinga-blogger-content .faq-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.yinga-blogger-content .faq-item h3 {
    margin-top: 0;
    margin-bottom: 0.35em;
    font-size: 1rem;
    font-weight: 600;
}

.yinga-blogger-content .faq-item p {
    margin-bottom: 0;
    color: var(--wp--preset--color--foreground, inherit);
    opacity: 0.85;
}

/* ─── CTA-blok (.blog-cta) ────────────────────────────────────────────────── */
/*
 * renderStructuredBlocks() genereert:
 *   <div class="blog-cta" data-cta-type="...">
 *     <p>CTA-tekst</p>
 *   </div>
 */

.yinga-blogger-content .blog-cta {
    margin-top: 2.5em;
    padding: 1.5em 1.75em;
    background: var(--wp--preset--color--primary, #1a73e8);
    color: var(--wp--preset--color--base, #ffffff);
    border-radius: 12px;
    text-align: center;
}

.yinga-blogger-content .blog-cta p {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.05rem;
    color: inherit;
}

.yinga-blogger-content .blog-cta a {
    color: inherit;
    text-decoration: underline;
}

/* ─── Laag B: featured image (buiten wrapper, op body.yinga-blogger-single) ─ */
/*
 * De plugin koppelt de afbeelding als _thumbnail_id; het thema rendert de hero.
 * Gangbare markup: post_thumbnail() → <figure class="post-thumbnail"><img ...></figure>
 * of bare <img class="wp-post-image">.
 * Doel: gecentreerd, begrensde breedte, afgeronde hoeken — niet meer groot/links uitgelijnd.
 */

.yinga-blogger-single .post-thumbnail .wp-post-image,
.yinga-blogger-single .entry-thumbnail .wp-post-image,
.yinga-blogger-single .featured-image .wp-post-image,
.yinga-blogger-single .post-thumbnail img,
.yinga-blogger-single .entry-thumbnail img,
.yinga-blogger-single .featured-image img {
    display: block;
    width: 100%;
    max-width: min(100%, 900px);
    height: auto;
    margin: 2rem auto;
    border-radius: 14px;
}

/* figure-wrapper die sommige thema's om de thumbnail renderen */
.yinga-blogger-single .post-thumbnail,
.yinga-blogger-single .entry-thumbnail {
    margin: 0;
    text-align: center;
}

/* Inline featured-image die via composeWordPressContent als
   <figure class="wp-block-image size-large featured-image"> wordt ingevoegd
   (embedFeaturedInline = true). Valt binnen .yinga-blogger-content (Laag A),
   maar het expliciete img-patroon hieronder is redundant-safe. */
.yinga-blogger-content .featured-image {
    text-align: center;
    margin-block: 1.5em;
}

.yinga-blogger-content .featured-image img {
    max-width: min(100%, 900px);
    margin-inline: auto;
    border-radius: 14px;
}

/* ─── Responsive correcties ─────────────────────────────────────────────── */

@media (max-width: 640px) {
    .yinga-blogger-content {
        max-width: 100%;
    }

    .yinga-blogger-content h2 { font-size: 1.3rem; }
    .yinga-blogger-content h3 { font-size: 1.1rem; }

    .yinga-blogger-content .blog-faq,
    .yinga-blogger-content .blog-cta {
        padding: 1em 1.1em;
    }
}