/**
 * NJGT Design System — site-breed.
 * Geïnspireerd op het Starbucks-designsysteem (warme crème-canvas, volledig-ronde
 * pill-knoppen, zachte gelaagde schaduwen, donkergroene full-width banden, strakke
 * typografie, ruime witruimte), maar volledig gemapt op de NJGT-huisstijl:
 * groen #1B5E20 + rood accent #E2231A, géén goud.
 */

:root {
	/* Groen — vier tinten, elk met een eigen rol */
	--njgt-green:        #1B5E20; /* merk / koppen / primaire knop */
	--njgt-green-accent: #207A2A; /* iets lichter accent voor hover/aandacht */
	--njgt-green-house:  #14331B; /* diepe band / footer */
	--njgt-green-uplift: #2E5E43; /* decoratief */
	--njgt-green-light:  #DCEBDD; /* pale wash / tints */

	/* Rood accent (vervangt de 'goud'-rol uit het bronsysteem) */
	--njgt-red:      #E2231A;
	--njgt-red-dark: #B81B12;

	/* Canvas — warm-neutraal i.p.v. koud wit */
	--njgt-cream:   #F5F3EC; /* primaire pagina-canvas */
	--njgt-ceramic: #ECEAE2; /* zone-scheiding / zachte band */
	--njgt-white:   #FFFFFF; /* kaart-/modaloppervlak */

	/* Tekst */
	--njgt-ink:          rgba(0, 0, 0, 0.87); /* koppen + body op licht */
	--njgt-ink-soft:     rgba(0, 0, 0, 0.58); /* secundair op licht */
	--njgt-on-dark:      #FFFFFF;             /* op donkergroen */
	--njgt-on-dark-soft: rgba(255, 255, 255, 0.72);

	/* Vorm */
	--njgt-radius-card: 12px;
	--njgt-radius-pill: 999px;
	--njgt-radius-input: 10px;

	/* Schaduwen — altijd 2–3 zachte lagen i.p.v. één harde */
	--njgt-shadow-card: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px rgba(20,40,25,0.06);
	--njgt-shadow-lift: 0 10px 28px rgba(20,40,25,0.12);
	--njgt-shadow-nav:  0 1px 3px rgba(0,0,0,0.10), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07);

	/* Typografie */
	--njgt-track: -0.01em;

	/* Ruimte-schaal (rem) */
	--njgt-space-3: 1.6rem;
	--njgt-space-4: 2.4rem;
	--njgt-space-5: 3.2rem;
	--njgt-space-6: 4rem;
	--njgt-space-7: 4.8rem;
	--njgt-space-9: 6.4rem;
}

/* ---------- Canvas ---------- */
/* !important + html-prefix om de wit-canvas uit de Global Styles te overrulen. */
html body,
html body.wp-site-blocks,
html .wp-site-blocks {
	background-color: var(--njgt-cream) !important;
}
body {
	color: var(--njgt-ink);
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4, h5, h6 {
	letter-spacing: var(--njgt-track);
	color: var(--njgt-ink);
}
body, p, li {
	letter-spacing: var(--njgt-track);
}
a {
	color: var(--njgt-green);
}
a:hover {
	color: var(--njgt-green-house);
}

/* ---------- Knoppen (Gutenberg-blokken) ---------- */
.wp-block-button__link,
.wp-element-button {
	border-radius: var(--njgt-radius-pill) !important;
	font-weight: 700;
	letter-spacing: var(--njgt-track);
	transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Standaard gevulde knop (zonder eigen kleurklasse) = NJGT-groen */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
	background-color: var(--njgt-green);
	color: #fff;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--njgt-green-house);
	color: #fff;
}
/* Outline-variant */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1.5px;
}
/* Signatuur: indrukken = krimpen */
.wp-block-button__link:active,
.wp-element-button:active,
.njgt-knop:active,
.njgt-cta .wp-block-button__link:active {
	transform: scale(0.95);
}

/* ---------- Kaarten ---------- */
.wp-block-group.has-background,
.njgt-card {
	border-radius: var(--njgt-radius-card);
}

/* ---------- Hulp-utility ---------- */
.njgt-band-cream   { background-color: var(--njgt-cream) !important; }
.njgt-band-ceramic { background-color: var(--njgt-ceramic) !important; }
.njgt-band-house   { background-color: var(--njgt-green-house) !important; color: var(--njgt-on-dark); }