/*
Theme Name: Kiemkracht
Theme URI: https://www.kiemkracht.be
Description: Kindthema van Twenty Twenty-Five in de huisstijl van Kiemkracht: kleuren van de layouter, lettertypes van het bestelformulier.
Template: twentytwentyfive
Version: 0.1.2
Requires at least: 6.7
Text Domain: kiemkracht
*/

/* Wat theme.json niet kan uitdrukken. Kleuren en lettertypes staan in theme.json. */

/* kop, inhoud en voet en de secties daarbinnen sluiten op elkaar aan, zonder witruimte ertussen */
.wp-site-blocks > * + * { margin-block-start: 0; }
.kk-hoofd > .alignfull { margin-block: 0; }

/* ---------- kop ---------- */
.kk-kop { border-bottom: 1px solid #e4dccf; padding-inline: 24px; }
.kk-voet { padding-inline: 24px; }
.kk-merk { gap: 10px !important; }
.kk-merk a { display: block; line-height: 0; }
.kk-kop .wp-block-navigation a { padding: 8px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.kk-kop .wp-block-navigation a:hover { color: var(--wp--preset--color--olijf); border-bottom-color: var(--wp--preset--color--beige); }
.kk-kop .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--olijf); border-bottom-color: var(--wp--preset--color--groen); }

/* ---------- held (cover bovenaan) ---------- */
.kk-held-tekst > * { max-width: 620px; }
.kk-held-tekst .wp-block-buttons { margin-top: 1.6em; }
.kk-held h1 { text-shadow: 0 1px 18px rgba(0,0,0,0.25); }
.kk-held .wp-block-cover__background { background: linear-gradient(180deg, rgba(38,38,38,0) 25%, rgba(38,38,38,0.75) 100%), linear-gradient(90deg, rgba(38,38,38,0.45) 0%, rgba(38,38,38,0) 65%) !important; opacity: 1 !important; }

/* ---------- labels en knoppen ---------- */
.is-style-bovenlabel {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; transition: background 0.15s, color 0.15s; }
.wp-block-button.is-style-licht .wp-block-button__link {
  background: rgba(255,255,255,0.12); color: #fff; border: 2px solid rgba(255,255,255,0.75);
}
.wp-block-button.is-style-licht .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--zwart); }
.kk-held .wp-block-button:not(.is-style-licht) .wp-block-button__link { background: var(--wp--preset--color--groen); color: var(--wp--preset--color--zwart); }
.kk-held .wp-block-button:not(.is-style-licht) .wp-block-button__link:hover { background: #a3c46d; }

/* ---------- media en tekst ---------- */
.wp-block-media-text__media img { border-radius: 6px; }
.kk-affiche .wp-block-media-text__media img { max-width: 420px; margin: 0 auto; box-shadow: 0 14px 40px rgba(82,77,68,0.18); }

/* ---------- kaarten ---------- */
.is-style-kaart {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid #e4dccf; border-radius: 6px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.is-style-kaart:hover { box-shadow: 0 10px 30px rgba(82,77,68,0.14); transform: translateY(-2px); }
.is-style-kaart > .wp-block-image { margin: 0; }
.is-style-kaart > .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 0; }
.is-style-kaart > :not(.wp-block-image) { padding-inline: 22px; }
.is-style-kaart > :last-child { padding-bottom: 24px; }
.is-style-kaart p { color: #5d574d; font-size: 0.98rem; line-height: 1.6; }
.is-style-kaart h3 a { color: var(--wp--preset--color--zwart); text-decoration: none; }
.is-style-kaart h3 a::after { content: ' →'; color: var(--wp--preset--color--groen); }
.is-style-kaart h3 a::before { content: ''; position: absolute; inset: 0; } /* hele kaart klikbaar */
.is-style-kaart:hover h3 a { color: var(--wp--preset--color--olijf); }

/* ---------- voet ---------- */
.kk-voet a { color: #ece7de; }
.kk-voet .wp-block-navigation a { padding: 8px 0; text-decoration: none; }
.kk-voet .wp-block-navigation a:hover { color: var(--wp--preset--color--groen); }
.kk-voet-merk img { background: var(--wp--preset--color--creme); border-radius: 50%; padding: 6px 4px; }
.kk-voet-klein a { white-space: nowrap; }

/* ---------- telefoon ---------- */
@media (max-width: 720px) {
  .kk-kop { justify-content: center !important; padding-inline: 16px; }
  .kk-voet { padding-inline: 16px; }
  .kk-held .wp-block-cover__inner-container { padding-inline: 16px; }
  .kk-kop .wp-block-navigation { justify-content: center; font-size: 0.68rem !important; }
  .kk-kop .wp-block-navigation__container { justify-content: center; column-gap: 16px !important; row-gap: 0 !important; }
  .kk-held { min-height: 0 !important; padding-top: 160px !important; }
  .wp-block-buttons .wp-block-button { width: 100%; }
  .wp-block-buttons .wp-block-button__link { width: 100%; justify-content: center; }
  .is-style-kaart > .wp-block-image img { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }