/* Blog: tekst uit WordPress (rich_html), 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: #047857; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.blog-tekst a:hover { color: #065f46; }
.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 #a7f3d0; border-radius: .5rem; background: #f0fdf4; 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: #ecfdf5; font-weight: 600; color: #065f46; }
@media (max-width: 640px) { .blog-tekst table { display: block; overflow-x: auto; } }

.blog-woorden.is-verborgen [data-vertaling] { visibility: hidden; }
.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: #047857; 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 #34d399; outline-offset: 2px; }
.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: #059669; background: #ecfdf5; box-shadow: 0 0 0 2px #6ee7b7; }
.blog-chip.is-getoond, .blog-keuze.is-getoond { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.blog-kolom:hover { border-color: #6ee7b7; background: #f0fdf4; }
.blog-tegel:hover { border-color: #6ee7b7; }
.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; } }