/*
Theme Name: Hezelpoort
Theme URI: https://www.hezelpoort.nl
Author: Hezelpoort
Description: Blokthema voor Hezelpoort – IT & informatiebeveiliging in Nijmegen. Stadskleuren rood en zwart, lettertype Poppins (lokaal gehost, geen verbinding met Google).
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hezelpoort
*/

/* ---------- Kleine bouwstenen die de blokken gebruiken ---------- */

.hz-eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--rood);
	margin-bottom: 0;
}
.has-zwart-background-color .hz-eyebrow { color: var(--wp--preset--color--lichtgrijs); }

.hz-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--grijs); }
.has-zwart-background-color .hz-lead { color: #D9D9D9; }

/* Rode streep onder hero en boven footer */
.hz-rode-rand { border-bottom: 10px solid var(--wp--preset--color--rood); }
.hz-rode-rand-boven { border-top: 10px solid var(--wp--preset--color--rood); }

/* Kaarten */
.hz-kaart {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--zwart);
	border-radius: 16px;
	padding: 32px;
}
.hz-kaart-rand {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 16px;
	padding: 32px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.hz-kaart-rand.has-zwart-background-color { border-color: var(--wp--preset--color--zwart); }
.hz-kaart-rand .wp-block-buttons { margin-top: auto; }
.hz-kaart p, .hz-kaart-rand p { font-size: 16px; }
.hz-kaart-rand h3, .hz-kaart h3 { margin-top: 0; }

/* Prijsregel in een dienstkaart */
.hz-prijs {
	border-top: 1px solid var(--wp--preset--color--rand);
	padding-top: 16px;
	font-size: 15px;
	color: var(--wp--preset--color--grijs);
}
.hz-prijs strong { font-size: 30px; color: var(--wp--preset--color--zwart); font-weight: 700; }
.has-zwart-background-color .hz-prijs { border-color: #333333; color: var(--wp--preset--color--lichtgrijs); }
.has-zwart-background-color .hz-prijs strong { color: var(--wp--preset--color--wit); }

/* Kernpunten */
.hz-kerngetal { font-size: 32px; font-weight: 700; color: var(--wp--preset--color--rood); line-height: 1.2; margin-bottom: 4px; }
.hz-kerntekst { color: var(--wp--preset--color--grijs); margin-top: 0; }

/* Stappen in de werkwijze */
.hz-stapnummer {
	width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--zwart); color: var(--wp--preset--color--wit);
	font-weight: 700; margin-bottom: 0;
}
.hz-stapnummer.hz-rood { background: var(--wp--preset--color--rood); }

/* Foto Patrick */
.hz-foto img {
	width: 280px; height: 280px; object-fit: cover;
	border-radius: 50%; border: 8px solid var(--wp--preset--color--zand);
}
.hz-foto { margin-left: auto; margin-right: auto; }

/* Labels (certificeringen) */
.hz-labels p {
	background: var(--wp--preset--color--zand);
	border-radius: 999px; padding: 6px 14px; font-size: 14px; margin: 0;
}

/* Logo in header en footer */
.hz-logo img { height: 40px; width: auto; display: block; }
.hz-logo { margin: 0; }

/* Header plakt bovenaan */
.hz-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--wp--preset--color--rand); }
.admin-bar .hz-header { top: 32px; }

/* Veelgestelde vragen */
.hz-faq .wp-block-details { border-top: 1px solid #DDD8D1; padding: 20px 0; }
.hz-faq .wp-block-details:last-child { border-bottom: 1px solid #DDD8D1; }
.hz-faq summary { font-weight: 600; font-size: 18px; cursor: pointer; }
.hz-faq .wp-block-details p { color: var(--wp--preset--color--grijs); }

/* Footer */
.hz-footer a { color: var(--wp--preset--color--lichtgrijs); }
.hz-footer a:hover { color: var(--wp--preset--color--wit); }

/* Geen witruimte tussen header, secties en footer */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }
main.wp-block-group > .alignfull { margin-block-start: 0; margin-block-end: 0; }

/* Aanvullende kaartvarianten */
.hz-kaart .hz-eyebrow { color: var(--wp--preset--color--rood); }
.hz-kaart h3 { font-size: 22px; }
.hz-kaart ul { padding-left: 20px; font-size: 16px; color: #333333; }
.hz-kaart-rand h3 { font-size: 26px; }
.hz-kaart-rand .hz-prijs { margin-top: auto; }
.hz-kaart-rand .wp-block-buttons { margin-top: 16px; }
.hz-kaart-rand .wp-block-button, .hz-kaart-rand .wp-block-button__link { width: 100%; text-align: center; }
.hz-kaart-zand { background: var(--wp--preset--color--zand); border-radius: 16px; padding: 32px; }
.hz-kaart-donker { border: 1px solid #333333; border-radius: 16px; padding: 32px; }
.hz-gemeenten, .hz-klein { font-size: 15px; color: var(--wp--preset--color--lichtgrijs); }
.hz-groot { font-size: 18px; line-height: 1.5; }
.hz-contactgegevens { font-size: 20px; }
.has-zwart-background-color.hz-kaart-rand .hz-eyebrow { color: var(--wp--preset--color--rood-licht); }
.hz-kernpunten { border-bottom: 1px solid var(--wp--preset--color--rand); }

/* Mobiel */
@media (max-width: 781px) {
	.hz-hero h1 { font-size: 38px !important; }
	.hz-header .wp-block-buttons { display: none; }
}