img { max-width: 100%; height: auto; }
/* Aanvullingen op theme.json: dingen die theme.json niet kan uitdrukken. */
:root { --mkf-rand: 3px solid var(--wp--preset--color--inkt); --mkf-focus: #2C6ED5; }

/* Knoppen zakken in bij indrukken */
.wp-element-button, .wp-block-button__link { transition: transform 120ms ease, box-shadow 120ms ease; }
.wp-element-button:active, .wp-block-button__link:active { transform: translateY(4px); box-shadow: none !important; }
.wp-block-button.is-style-secundair .wp-block-button__link { background: var(--wp--preset--color--wit); }
.wp-block-button.is-style-secundair .wp-block-button__link:hover { background: var(--wp--preset--color--zand); }
.wp-block-button.is-style-donker .wp-block-button__link { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.wp-block-button.is-style-donker .wp-block-button__link:hover { background: #3E3970; }
@media (prefers-reduced-motion: reduce) { .wp-element-button, .wp-block-button__link { transition: none; } }

/* Zichtbare focus overal */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--mkf-focus); outline-offset: 2px; border-radius: 4px; }

/* Sticker: wit vlak met inktrand */
.is-style-sticker, .is-style-sticker-uitgelicht { background: var(--wp--preset--color--wit); border: var(--mkf-rand); border-radius: 28px; }
.is-style-sticker-uitgelicht { box-shadow: var(--wp--preset--shadow--kaart); }
.wp-block-image.is-style-sticker img { border: var(--mkf-rand); border-radius: 28px; }

/* Lijst met vinkjes */
.is-style-vinkjes { list-style: none; padding-left: 0; }
.is-style-vinkjes li { position: relative; padding-left: 40px; margin-bottom: 10px; }
.is-style-vinkjes li::before { content: ""; position: absolute; left: 0; top: 1px; width: 28px; height: 28px;
  background: url("../icons/ja.svg") center / contain no-repeat; }

/* Kop */
.mkf-kop { position: relative; z-index: 10; }
.mkf-kop .mkf-logo img { display: block; height: 46px; width: auto; }
@media (max-width: 600px) { .mkf-kop .mkf-logo img { height: 34px; } .mkf-kop .mkf-kop-knop { display: none; } }
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--koraal-tekst); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--creme); }

/* Voet */
.mkf-voet a { color: var(--wp--preset--color--creme); }
.mkf-voet .mkf-logo img { height: 40px; width: auto; }

/* Themaraster */
.mkf-themas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 24px); max-width: 780px; margin-inline: auto; }
.mkf-themas figure { margin: 0; }
.mkf-themas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 78%; height: auto; border: var(--mkf-rand); border-radius: 22px; display: block; background: var(--wp--preset--color--zand); }
.mkf-themas figcaption { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 18px; margin-top: 8px; text-align: center; }

/* Stappen */
.mkf-stap-icoon img { width: 56px; height: 56px; }
.mkf-stap-nummer { font-family: var(--wp--preset--font-family--fredoka); font-weight: 700; color: var(--wp--preset--color--koraal-tekst); font-size: 14px; letter-spacing: .5px; text-transform: uppercase; }

/* Kaarten van gidsen */
.mkf-gidskaart { height: 100%; box-sizing: border-box; }
.mkf-gidskaart .wp-block-post-featured-image img { border-radius: 18px; border: var(--mkf-rand); aspect-ratio: 16 / 10; object-fit: cover; }

/* Details / FAQ */
.wp-block-details summary { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 19px; cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: 8px; }

/* Afbeeldingen in gidsen */
.wp-block-post-content img { border-radius: 18px; }
@media (min-width: 600px) { .wp-block-navigation .mkf-alleen-mobiel { display: none; } }
.mkf-voet ul { list-style: none; padding-left: 0; }
.mkf-voet li { margin-bottom: 6px; }

/* Conceptblok: goed zichtbaar, weghalen voor publicatie */
.mkf-concept { border: 3px dashed var(--wp--preset--color--inkt); border-radius: 20px; padding: 14px 18px !important; font-size: 16px; }

/* Tabellen in gidsen */
.wp-block-table { margin-block: 28px; overflow-x: auto; }
.wp-block-table table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--wp--preset--color--wit); border: 3px solid var(--wp--preset--color--inkt); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 0 var(--wp--preset--color--inkt); }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 2px solid var(--wp--preset--color--zand); padding: 12px 16px; text-align: left; vertical-align: top; }
.wp-block-table thead th { background: var(--wp--preset--color--zand); font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; border-bottom: 3px solid var(--wp--preset--color--inkt); }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table td:first-child { font-weight: 700; }
@media (max-width: 600px) { .wp-block-table th, .wp-block-table td { padding: 10px; font-size: 15px; } }
h1, h2, h3, .wp-block-post-title { text-wrap: balance; }

/* Voet altijd onderaan, ook op korte pagina's */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.wp-site-blocks > footer { margin-top: auto; }