/*
Theme Name: VooKaal blokthema
Description: Blokthema voor VooKaal. Bevat alleen stijl en layout; alle teksten, afbeeldingen en gegevens voeg je als blokken toe in de pagina's en in de Site-editor (header en footer).
Author: VooKaal
Version: 2.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: vookaal
*/

html{scroll-behavior:smooth}
:focus-visible{outline:3px solid var(--wp--preset--color--paars);outline-offset:3px}

/* header */
.vk-header{padding-top:24px;padding-bottom:24px;gap:16px 32px}
.vk-header:has(.wp-block-site-logo img) .wp-block-site-title{display:none}
.vk-header .wp-block-site-title a{text-decoration:none}
.wp-block-navigation .wp-block-navigation-item__content{text-decoration:none;padding-top:10px;padding-bottom:10px}
/* Geef een menu-item de CSS-klasse "knop" om het als knop te tonen */
.wp-block-navigation .knop>.wp-block-navigation-item__content{background:var(--wp--preset--color--paars);color:#fff;padding:12px 28px;border-radius:999px;font-weight:500}

/* knoppen */
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--wp--preset--color--zwart);border:2px solid currentColor}

/* secties */
.vk-sectie{padding-top:96px;padding-bottom:96px}
.vk-sectie.has-geel-background-color{padding-top:80px;padding-bottom:80px}
.vk-hero{gap:56px;padding-top:48px;padding-bottom:48px}
.vk-sectie--midden{text-align:center}
.vk-sectie--midden .wp-block-buttons{justify-content:center}

/* stijlen voor blokken */
.is-style-label{display:inline-block;background:var(--wp--preset--color--geel);padding:8px 18px;border-radius:999px;font-weight:500;font-size:16px}
.wp-block-image.is-style-geel-kader{position:relative;padding:0 0 24px 24px;margin:0}
.wp-block-image.is-style-geel-kader::before{content:"";position:absolute;left:0;bottom:0;right:48px;top:48px;background:var(--wp--preset--color--geel);border-radius:28px}
.wp-block-image.is-style-geel-kader img{position:relative;display:block;width:100%;height:auto;border-radius:20px}
.vk-kop{font-weight:700;font-style:italic;font-size:24px;margin-bottom:8px}
.vk-tijd{font-size:40px;line-height:1.15;font-weight:500;margin-top:0}
.vk-oproep{font-style:italic;font-size:30px;line-height:1.3;max-width:520px}

/* formulieren (werkt met de meeste formulier-plugins) */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select{width:100%;padding:14px 16px;background:#fff;border:2px solid #8A8A8A;border-radius:12px;color:var(--wp--preset--color--zwart);font:inherit}
label{font-weight:500;font-size:16px}
button[type=submit],input[type=submit]{display:inline-block;padding:18px 44px;background:var(--wp--preset--color--paars);color:#fff;border:2px solid var(--wp--preset--color--paars);border-radius:999px;font:inherit;font-weight:500;cursor:pointer}

@media (max-width:700px){
.vk-sectie{padding-top:64px;padding-bottom:64px}
.vk-tijd{font-size:32px}
.vk-oproep{font-size:24px}
}