/*
 * Design tokens - pas kleuren, spacing en typografie HIER aan.
 * Alle andere CSS verwijst naar deze variabelen, zodat je nooit op
 * meerdere plekken hetzelfde hoeft te wijzigen.
 * De merkkleuren zijn ook te overschrijven via
 * Thema-opties > Visuele identiteit > Kleuren.
 */

:root {
	/* --- Merkkleuren (huisstijl De Muggezifters) --- */
	--kleur-primair:        #005ca9; /* Muggezifters-blauw */
	--kleur-primair-donker: #00457f;
	--kleur-primair-licht:  #2f83cf;
	--kleur-secundair:      #fbe100; /* Carnavalsgeel */
	--kleur-accent:         #e30613; /* Rood, voor knoppen op beeld */

	/* --- Neutraal --- */
	--kleur-zwart:   #111318;
	--kleur-donker:  #2a2e35;
	--kleur-grijs:   #4b5158;
	--kleur-lijn:    #e4e6eb;
	--kleur-licht:   #f6f7f9;
	--kleur-wit:     #ffffff;

	/* --- Functioneel --- */
	--kleur-tekst:        var(--kleur-zwart);
	--kleur-tekst-zacht:  #333941; /* donker, bewust geen grijs */
	--kleur-achtergrond:  var(--kleur-wit);
	--kleur-link:         var(--kleur-primair);
	--kleur-link-hover:   var(--kleur-primair-donker);

	/* --- Onderdelen --- */
	--kleur-topbar-bg:    var(--kleur-primair);
	--kleur-topbar-tekst: var(--kleur-wit);
	--kleur-header-bg:    var(--kleur-secundair);
	--kleur-header-tekst: var(--kleur-zwart);
	--kleur-footer-bg:    var(--kleur-primair);
	--kleur-footer-tekst: var(--kleur-wit);

	/*
	 * --- Kopjes in de voettekst (Organisatie, Producten, ...) ---
	 * Eén plek voor de vier kolomtitels onderaan de site.
	 * Wil je ze niet in hoofdletters? Zet --footer-kop-transform op none.
	 */
	--footer-kop-maat:      1.2rem;
	--footer-kop-gewicht:   800;
	--footer-kop-kleur:     var(--kleur-wit);
	--footer-kop-transform: uppercase;
	--footer-kop-spatie:    0.03em;

	/*
	 * --- Plus- en minteken in accordeons en op de artikelkaarten ---
	 * Gele cirkel met twee zwarte streepjes; bij [open] draait er één weg.
	 * Gebruikt door assets/css/artikel.css en assets/css/shop.css en
	 * gelijk aan de waarden van de contactpagina (assets/css/contact.css).
	 */
	--teken-maat:       32px;  /* doorsnee van de gele cirkel */
	--teken-maat-klein: 28px;  /* op een telefoon */
	--teken-kaart:      2.6rem; /* de cirkel op een artikelkaart */
	--teken-bg:         var(--kleur-secundair);
	--teken-streep:     var(--kleur-zwart);
	--teken-dikte:      2px;
	--teken-inset:      25%;   /* hoe ver de streepjes doorlopen */

	/* --- Knoppen (1 plek voor alle buttons) --- */
	--btn-bg:            var(--kleur-primair);
	--btn-bg-hover:      var(--kleur-primair-donker);
	--btn-tekst:         var(--kleur-wit);
	--btn-radius:        4px;
	--btn-padding:       0.85rem 1.75rem;
	--btn-font-weight:   600;

	/* --- Typografie --- */
	--font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-kop:     "Baloo 2", "Poppins", system-ui, sans-serif;
	--font-size:    1rem;
	--regelhoogte:  1.65;

	/*
	 * Koppen: per niveau een maximale grootte. De rest schaalt mee met het
	 * scherm. Aan te passen via Thema-opties > Visuele identiteit > Koppen.
	 */
	--h1-max: 3.25rem;
	--h2-max: 2.1rem;
	--h3-max: 1.65rem;
	--h4-max: 1.35rem;
	--h5-max: 1.15rem;
	--h6-max: 1rem;

	--h1: clamp(calc(var(--h1-max) * 0.62), calc(var(--h1-max) * 0.42 + 1.7vw), var(--h1-max));
	--h2: clamp(calc(var(--h2-max) * 0.7), calc(var(--h2-max) * 0.55 + 1.1vw), var(--h2-max));
	--h3: clamp(calc(var(--h3-max) * 0.78), calc(var(--h3-max) * 0.66 + 0.7vw), var(--h3-max));
	--h4: clamp(calc(var(--h4-max) * 0.85), calc(var(--h4-max) * 0.75 + 0.5vw), var(--h4-max));
	--h5: var(--h5-max);
	--h6: var(--h6-max);

	/* --- Ruimte --- */
	--ruimte-xs: 0.5rem;
	--ruimte-s:  1rem;
	--ruimte-m:  2rem;
	--ruimte-l:  4rem;
	--ruimte-xl: 6rem;

	/* --- Layout --- */
	--container:         1240px;
	--container-smal:    820px;
	--container-padding: 1.25rem;
	--radius:            6px;
	--schaduw:           0 2px 14px rgba(0, 0, 0, 0.09);

	/* --- Chatwolk (assets/css/chatwolk*.css leest deze) --- */
	--kwdv-geel:         var(--kleur-secundair);
	--kwdv-geel-donker:  #e0ca00;
	--kwdv-geel-licht:   #fff6a8;
	--kwdv-creme:        #fffbe3;
	--kwdv-rood:         var(--kleur-accent);
	--kwdv-zwart:        var(--kleur-zwart);
	--kwdv-groen:        #3a9d3a;
	--kwdv-grijs:        var(--kleur-grijs);
	--kwdv-grijs-licht:  var(--kleur-licht);
	--kwdv-grijs-border: var(--kleur-lijn);
	--kwdv-radius:       14px;
	--kwdv-radius-groot: 26px;
	--kwdv-font:         var(--font-body);
	--kwdv-overgang:     0.25s ease;
	/* Iets extra rand, zodat de gele wolk ook op geel zichtbaar blijft. */
	--kwdv-schaduw:      0 10px 30px rgba(17, 19, 24, 0.18), 0 0 0 1px rgba(17, 19, 24, 0.10);

	/* --- Vaste hoogtes (voorkomt layout shift / CLS) --- */
	--topbar-hoogte: 36px;
	--header-hoogte: 84px;

	/* --- Webshopknoppen (Toevoegen aan winkelwagen, Afrekenen) --- */
	--shop-knop-bg:       var(--kleur-accent);
	--shop-knop-bg-hover: #b60510;
	--shop-knop-tekst:    var(--kleur-wit);
	--shop-kolommen-mobiel: 2;
	--shop-gat-mobiel:    0.75rem;

	/* WooCommerce eigen kleuren (standaard paars) naar de huisstijl. */
	--woocommerce:        var(--kleur-accent);
	--wc-primary:         var(--kleur-accent);
	--wc-primary-text:    var(--kleur-wit);

	/* --- Kruimelpad --- */
	--kruimelpad-chevron:      currentColor;   /* zelfde kleur als de tekst van het kruimelpad */
	--kruimelpad-chevron-maat: 1.35em;
	--kruimelpad-home-icoon: 16px;
}

@media (max-width: 560px) {

	:root {
		--teken-maat: var(--teken-maat-klein);
	}
}

/* -------------------------------------------------------------------------
 * Beveiliging (melding contentbescherming)
 * Pas hier de melding aan, niet in beveiliging.css.
 * ---------------------------------------------------------------------- */
:root {
	--bev-bg: var(--kleur-donker, #2a2e35);
	--bev-tekst: #fff;
	--bev-radius: 999px;
	--bev-pad-y: 0.7rem;
	--bev-pad-x: 1.4rem;
	--bev-offset: 20px;
	--bev-fs: 0.9rem;
	--bev-max-breedte: min(30rem, calc(100vw - 2rem));
	--bev-shadow: 0 10px 30px rgba(33, 26, 16, 0.18);
	--bev-duur: 0.25s;
	--bev-ease: ease;
	--bev-z: 9999;
}