/* ==== Bronblad (pedagogische bronnen) — v1, 25 okt 2026 ====
   Plakken in Weergave › Customizer › Extra CSS (onderaan),
   of later opnemen in de plugin. Gebruikt de kleurvariabelen van JJH-2. */

/* Ritme tussen de blokken */
.jjh-bb-kop, .jjh-bb-citaat, .jjh-bb-tussen, .jjh-bb-tekst,
.jjh-bb-vragen, .jjh-bb-gerelateerd, .jjh-bb-gegevens { margin-top: clamp(40px, 6vw, 64px); margin-bottom: 0; }
.jjh-bb-kop { margin-top: 0; }

/* Kopjes binnen een bronblad */
.jjh-bb-kopje { font-family: var(--jjh-serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 0 0 0.5em; color: var(--jjh-inkt); }

/* Blok 1 · Kop */
.jjh-bb-kop .jjh-cols { align-items: flex-start; }
.jjh-bb-kop .jjh-omslag img { max-width: 300px; }
.jjh-bb-kop .jjh-h2 { margin: 0.1em 0 0.15em; }
.jjh-bb-kop .jjh-ondertitel { margin: 0 0 0.3em; font-size: 20px; }
.jjh-bb-maker { font-size: 15px; color: var(--jjh-label); margin: 0 0 1.6em; }
.jjh-bb-kop .jjh-bb-kopje { font-size: 22px; margin-top: 0; padding-top: 1.2em; border-top: 1px solid var(--jjh-lijn); }

/* Blok 2 · Citaat (lichte band, gecentreerd) */
.jjh-bb-citaat { background: var(--jjh-alt); border-radius: 4px; padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px); text-align: center; }
.jjh-bb-citaat .jjh-citaat { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.35; margin: 0 auto 0.6em; max-width: 30em; }
.jjh-bb-wie { font-size: 14px; color: var(--jjh-label); margin: 0; }

/* Tussencitaat (okerstreep links) */
.jjh-bb-tussen { border-left: 3px solid var(--jjh-oker); padding-left: 24px; max-width: 34em; }
.jjh-bb-tussen .jjh-citaat { font-style: italic; font-size: 22px; margin: 0 0 0.4em; }

/* Blok 4 · Vragen (kader, genummerd in oker) */
.jjh-bb-vragen { border: 1px solid var(--jjh-lijn); border-radius: 4px; padding: clamp(24px, 4vw, 40px); background: var(--jjh-grond); }
.jjh-bb-vragen ol { counter-reset: bbvraag; list-style: none; padding-left: 0; margin: 0.8em 0 0; }
.jjh-bb-vragen li { counter-increment: bbvraag; position: relative; padding-left: 2.4em; margin-bottom: 0.9em; font-family: var(--jjh-serif); font-size: 20px; line-height: 1.4; color: var(--jjh-inkt); }
.jjh-bb-vragen li::before { content: counter(bbvraag); position: absolute; left: 0; top: 0.05em; font-family: var(--jjh-sans); font-size: 14px; font-weight: 600; color: var(--jjh-oker); border: 1px solid var(--jjh-oker); border-radius: 50%; width: 1.7em; height: 1.7em; display: flex; align-items: center; justify-content: center; }
.jjh-bb-vragen li:last-child { margin-bottom: 0; }
.jjh-bb-vragen .jjh-meta { margin: 0; }

/* Blok 5 · Gerelateerd */
.jjh-bb-kaarten { gap: 20px; }
.jjh-bb-gerelateerd .jjh-card { background: var(--jjh-alt); padding: 24px; }
.jjh-bb-gerelateerd .jjh-card .jjh-eyebrow { font-size: 12px; margin-bottom: 0.4em; }
.jjh-bb-gerelateerd .jjh-card h3 { font-size: 22px; line-height: 1.25; margin: 0 0 0.4em; }
.jjh-bb-gerelateerd .jjh-card p:last-child { font-size: 16px; margin: 0; }
.jjh-bb-speler { margin-top: 20px; }

/* Blok 6 · Gegevens */
.jjh-bb-gegevens .jjh-bb-kopje { font-size: 22px; }
.jjh-bb-tabel table { border-collapse: collapse; width: 100%; font-size: 15px; }
.jjh-bb-tabel td { border: 0; border-top: 1px solid var(--jjh-lijn); padding: 10px 0; vertical-align: top; }
.jjh-bb-tabel tr:last-child td { border-bottom: 1px solid var(--jjh-lijn); }
.jjh-bb-tabel td:first-child { width: 34%; padding-right: 16px; color: var(--jjh-label); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 781px) {
	.jjh-bb-kop .jjh-omslag img { max-width: 220px; }
	.jjh-bb-tabel td:first-child { width: 40%; }
}

/* Beeld binnen een bronblad (optioneel blok) */
.jjh-bb-beeld { margin-top: clamp(40px, 6vw, 64px); }
.jjh-bb-beeld img { width: 100%; border-radius: 4px; display: block; }
.jjh-bb-beeld .wp-element-caption { margin-top: 10px; font-size: 15px; color: var(--jjh-label); text-align: left; }

/* ==== Thema's ==== */
.jjht-binnen { max-width: 1200px; margin: 0 auto; }
.jjht-chips { margin-top: 16px; }
.jjht-chips .jjht-aantal { color: var(--jjh-label); font-weight: 400; margin-left: 4px; }
.jjht-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 24px; margin-top: 28px; }
.jjht-kaart { background: var(--jjh-alt); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.jjh-alt .jjht-kaart { background: var(--jjh-grond); }
.jjht-beeld { display: block; aspect-ratio: 16 / 10; background: #E6E3D8; overflow: hidden; }
.jjht-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.jjht-lees .jjht-beeld img { object-fit: contain; padding: 14px 0; }
.jjht-beeld:hover img { opacity: .9; }
.jjht-tekst { padding: 18px 20px 22px; }
.jjht-tekst .jjh-eyebrow { font-size: 12px; margin: 0 0 6px; }
.jjht-luister .jjh-eyebrow { color: var(--jjh-groen); }
.jjht-lees .jjh-eyebrow { color: #9A6618; }
.jjht-kaart h3 { font-family: var(--jjh-serif); font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0; }
.jjht-kaart h3 a { color: var(--jjh-inkt); text-decoration: none; }
.jjht-kaart h3 a:hover { color: var(--jjh-groen); text-decoration: underline; text-underline-offset: 4px; }

/* Band onder een bericht */
.jjht-band { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--jjh-lijn); }
.entry-content .jjht-band.alignfull { padding-left: 24px; padding-right: 24px; }
.jjht-band .jjh-h2 { margin: 0; }
.jjht-band + .jjh-onderbalk { margin-top: 0; }

/* Themapagina */
.jjht-pagina { background: var(--jjh-grond); }
.jjht-kop .jjh-eyebrow a { color: inherit; text-decoration: none; }
.jjht-kop .jjh-eyebrow a:hover { color: var(--jjh-groen); }
.jjht-kop .jjh-display { margin-bottom: 0.2em; }
.jjht-kop .jjh-lead p { margin: 0 0 .6em; }
.jjht-rij + .jjht-rij { padding-top: 0; }
.jjht-rij .jjh-h2 { margin: 0; }
.jjht-meer { margin: 24px 0 0; font-weight: 600; }
.jjht-meer a { color: var(--jjh-groen); text-decoration: none; }
.jjht-alle .jjht-chips { margin-top: 8px; }

/* Kleuren vastzetten tegen de linkkleur van de leesopmaak */
.jjht-pagina h1, .jjht-pagina h2, .jjht-band h2 { color: var(--jjh-inkt); }
.jjht-kaart h3 a, .single-post .entry-content .jjht-kaart h3 a { color: var(--jjh-inkt); text-decoration: none; }
.jjht-kaart h3 a:hover, .single-post .entry-content .jjht-kaart h3 a:hover { color: var(--jjh-groen); text-decoration: underline; }
.single-post .entry-content .jjht-chips a { color: var(--jjh-inkt); text-decoration: none; }
.single-post .entry-content .jjht-chips a:hover { color: var(--jjh-groen); border-color: var(--jjh-groen); }