/*
 * Merk MeiDy: warm, huiselijk, crème en terracotta.
 * Bron: huisstijlsysteem MeiDy x adRem (colors_and_type.css). De waarden zijn een startpunt;
 * lettertypes zijn nog vervangers (Fraunces en Mulish) totdat de echte merkfonts er zijn.
 *
 * Activeren: gebeurt automatisch als het domein "meidy" bevat. Anders in wp-config.php:
 *     define( 'ZGB_MERK', 'meidy' );
 * Dit bestand laadt na het basispakket. De selector is body (niet :root), zodat deze kleuren
 * altijd winnen van de standaardkleuren.
 *
 * Contrast (WCAG AA, gemeten): primair op tint 5,4:1, op wit 7,0:1, op kader 5,9:1.
 */
body {
	/* Rollen van het bouwpakket */
	--zgb-kader: #f5ecd6;        /* crème 200: kader rond de hero, pill-achtergrond */
	--zgb-rand: #efe3be;         /* crème 300: haarlijnen */
	--zgb-tekst-zacht: #6b5d52;  /* bruin 500: ondersteunende tekst */
	--zgb-primair: #8f4423;      /* terracotta 800: links, pill- en tag-tekst */
	--zgb-tint: #f3e0d3;         /* terracotta 100: tags */
	--zgb-wit: #ffffff;          /* verhoogde kaarten blijven wit */
	--zgb-accent: #c2683f;       /* terracotta: bolletje in de pill */
}

/*
 * Header op tablet (783-1100 px): menu en knop op één regel, zodat de header niet 190 px hoog wordt.
 * Op mobiel (tot 782 px) verbergt de header de topbalk en de knop via blokzichtbaarheid.
 */
@media (min-width: 783px) and (max-width: 1100px) {
	header .wp-block-navigation,
	header .wp-block-navigation .wp-block-navigation__container { gap: 1rem; }
	header .wp-block-buttons .wp-block-button__link { padding: 0.6rem 1rem; font-size: 0.9rem; white-space: nowrap; }
	header .wp-block-site-logo img { max-width: 110px; height: auto; }
	header div:has(> .wp-block-navigation),
	header div:has(> .wp-block-navigation) + .wp-block-buttons { flex-wrap: nowrap; }
	header .wp-block-group:has(> .wp-block-site-logo) { flex-wrap: nowrap; gap: 1rem; }
}
@media (min-width: 783px) and (max-width: 900px) {
	header .wp-block-navigation { font-size: 0.8rem; gap: 0.6rem; }
	header .wp-block-navigation .wp-block-navigation__container { gap: 0.6rem; }
	header .wp-block-site-logo img { max-width: 90px; }
	header .wp-block-buttons .wp-block-button__link { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
}