/* Blog: tekst uit WordPress (rich_html), woordkaarten, reacties en de quiz. */

.blog-tekst { font-size: 1.0625rem; line-height: 1.75; color: #262626; overflow-wrap: break-word; }
.blog-tekst > * + * { margin-top: 1.1em; }
.blog-tekst + .blog-tekst { margin-top: 1.1em; }
.blog-tekst h2 { margin-top: 2em; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: #171717; }
.blog-tekst h3 { margin-top: 1.75em; font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: #171717; }
.blog-tekst h4 { margin-top: 1.5em; font-size: 1.0625rem; font-weight: 700; color: #171717; }
.blog-tekst > :first-child { margin-top: 0; }
.blog-tekst a { color: #AA151B; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.blog-tekst a:hover { color: #7A0F15; }
.blog-tekst ul { list-style: disc; padding-left: 1.5rem; }
.blog-tekst ol { list-style: decimal; padding-left: 1.5rem; }
.blog-tekst li + li { margin-top: .35em; }
.blog-tekst blockquote { padding: .75rem 1rem; border-left: 4px solid #EFD9C6; border-radius: .5rem; background: #FBF7F2; font-style: italic; }
.blog-tekst img { max-width: 100%; height: auto; border-radius: .75rem; }
.blog-tekst figure { margin-top: 1.5em; margin-bottom: 1.5em; }
.blog-tekst figcaption { margin-top: .5rem; font-size: .875rem; color: #737373; }
.blog-tekst table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #e5e5e5; border-radius: .75rem; background: #fff; font-size: .95rem; }
.blog-tekst th, .blog-tekst td { padding: .55rem .9rem; border-bottom: 1px solid #f0f0f0; text-align: left; vertical-align: top; }
.blog-tekst tr:last-child td { border-bottom: 0; }
.blog-tekst tr:nth-child(even) td { background: #fafaf9; }
.blog-tekst th, .blog-tekst thead td { background: #FBF7F2; font-weight: 600; color: #7A0F15; }
@media (max-width: 640px) { .blog-tekst table { display: block; overflow-x: auto; } }

.blog-woorden.is-verborgen [data-vertaling] { visibility: hidden; }

/* Een woordkaart met een opname: een knop zoals op de lespagina's (het afspelen in
   v2/includes/content-audio.js). Anders dan daar staat het luidsprekertje er altijd, want op het blog
   is een kaart zonder opname gewone tekst: zo zie je welke kaarten geluid hebben. Focusring en
   afspelen in neutraal donker, zoals de focusring van de oefeningen hieronder: #1C1917 haalt
   16,0:1 op #faf4ef (de pagina), 16,8:1 op #fafafa en 17,5:1 op wit; het groen van eerst
   (#34d399) haalde 1,8:1, en 3:1 is de ondergrens. */
.blog-woordkaart { transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms ease, border-color 180ms ease; }
.blog-woordkaart:focus-visible { outline: 2px solid #1C1917; outline-offset: 2px; }
.blog-woordkaart:active { border-color: #e5e5e5; box-shadow: none; }
@media (hover: hover) { .blog-woordkaart:hover { transform: translateY(-2px) scale(1.02); } }
.blog-woordkaart .audio-indicator { background: #f5f5f5; transition: background-color 180ms ease, transform 180ms ease; }
.blog-woordkaart.audio-playing { border-color: transparent; box-shadow: 0 0 0 2px #1C1917; }
.blog-woordkaart.audio-playing .audio-indicator { background: #e5e5e5; transform: scale(1.1); }
.blog-woordkaart.audio-error { box-shadow: none; }
.blog-woordkaart.audio-error .audio-indicator { display: none; }
@media (prefers-reduced-motion: reduce) { .blog-woordkaart, .blog-woordkaart .audio-indicator { transition: none; } .blog-woordkaart:hover, .blog-woordkaart.audio-playing .audio-indicator { transform: none; } }

.blog-tekst hr { margin: 2em 0; border-color: #e5e5e5; }
.blog-tekst strong { font-weight: 700; color: #171717; }

.blog-reactie p + p { margin-top: .5em; }
.blog-reactie a { color: #AA151B; text-decoration: underline; }

.blog-keuze, .blog-tegel, .blog-chip, .blog-kolom { transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease; }
.blog-keuze:focus-visible, .blog-tegel:focus-visible, .blog-chip:focus-visible, .blog-kolom:focus-visible { outline: 2px solid #1C1917; outline-offset: 2px; }
/* Groen betekent hier "goed", rood "fout": die blijven zo, los van de huisstijl. */
.blog-keuze.is-goed, .blog-chip.is-goed { border-color: #34d399; background: #d1fae5; color: #065f46; }
.blog-keuze.is-fout, .blog-chip.is-fout { border-color: #fb7185; background: #ffe4e6; color: #9f1239; }
.blog-keuze:disabled { cursor: default; }
.blog-keuze.is-dicht:not(.is-goed):not(.is-fout) { opacity: .55; }
.blog-chip.is-gekozen { border-color: #1C1917; background: #FBF7F2; box-shadow: 0 0 0 2px #1C1917; }
.blog-chip.is-getoond, .blog-keuze.is-getoond { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.blog-kolom:hover { border-color: #D67474; background: #FBF7F2; }
.blog-tegel:hover { border-color: #D67474; }
.blog-tegel.is-goed { border-color: #10b981; }
.blog-tegel.is-fout { border-color: #fb7185; animation: blog-schud 300ms; }
.blog-tegel.is-getoond { border-color: #f59e0b; }
.blog-tegel.is-getoond [data-tegel-label] { background: rgba(180, 83, 9, .9); }
.blog-tegel[data-klaar] { cursor: default; }
.blog-rooster input.is-goed { border-color: #10b981; background: #d1fae5; color: #065f46; }
.blog-rooster input.is-fout { border-color: #fb7185; background: #ffe4e6; color: #9f1239; }
.blog-rooster input.is-getoond { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
/* Zolang er niets is nagekeken: grijs (groen betekent goed). */
.blog-rooster input.is-actief:not(.is-goed):not(.is-getoond):not(.is-fout) { background: #f5f5f5; border-color: #a3a3a3; }
.blog-rooster input:focus { outline: none; border-color: #404040; box-shadow: inset 0 0 0 2px #404040; }
/* Klaar (goed of getoond) en niet meer nodig voor een kruisend woord: niet meer aan te klikken. */
.blog-rooster input.is-vast { pointer-events: none; cursor: default; }
.blog-rooster input.is-vast:focus { box-shadow: none; }
.blog-rooster input.is-vast.is-goed:focus { border-color: #10b981; }
.blog-rooster input.is-vast.is-getoond:focus { border-color: #f59e0b; }
[data-hint].is-klaar { color: #737373; text-decoration: line-through; }
[data-invul].is-goed { border-color: #34d399; color: #065f46; }
[data-invul].is-fout { border-color: #f59e0b; color: #92400e; }
[data-invoer].is-goed { border-color: #34d399; background: #ecfdf5; color: #065f46; }
[data-invoer].is-fout { border-color: #fb7185; background: #fff1f2; color: #9f1239; }
[data-invoer].is-getoond { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.blog-einde:not(.hidden) { animation: blog-op 400ms ease-out; }
@keyframes blog-schud { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes blog-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .blog-tegel.is-fout, .blog-einde:not(.hidden) { animation: none; } }

/* Overzicht: bij twee en drie kolommen (vanaf sm, 640px) alle rijen even hoog. Zo heeft de
   promo-tegel dezelfde maat als de kaarten naast hem, en staat het raster rustig. Op mobiel (één
   kolom) heeft elke tegel zijn eigen hoogte; daar staat er niets naast (besluit Jeffry, 08-10-2026). */
@media (min-width: 640px) { .blog-raster { grid-auto-rows: 1fr; } }

/* De promo-tegel in het raster (blog_promo_tegel() in blog.php): de promo uit /admin/promos/,
   zo hoog als de rij, met de knop onderaan zoals de kaarten hun tekst onderaan hebben. */
.blog-promo-tegel { display: flex; min-width: 0; }
.blog-promo-tegel > a { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; }
.blog-promo-tegel > a > :only-child { flex: 1 1 auto; }
.blog-promo-tegel > a > :last-child:not(:first-child) { margin-top: auto; align-self: flex-start; }
.blog-promo-tegel > a > :nth-last-child(2) { margin-bottom: 1.25rem; }
.blog-promo-tegel > a:focus-visible { outline: 2px solid #1C1917; outline-offset: 2px; }