/* ==========================================================================
   GreenHygiene — basis: typografie, knoppen, layout-hulpklassen
   ========================================================================== */

body {
	font-family: var(--gh-font-body);
	font-size: var(--gh-text-base);
	line-height: var(--gh-leading-normal);
	color: var(--gh-ink);
	background-color: var(--gh-page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.gh-h1,
.gh-h2,
.gh-h3 {
	font-family: var(--gh-font-heading);
	font-weight: 800;
	line-height: var(--gh-leading-tight);
	letter-spacing: -0.02em;
	color: var(--gh-text-strong);
	text-wrap: balance;
	/* Bricks zet kopmarges op 0; hier zetten we onze eigen ritmiek terug. */
	margin: 0 0 var(--gh-space-4);
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
	margin-bottom: 0;
}

h1,
.gh-h1 {
	font-size: var(--gh-text-4xl);
}

h2,
.gh-h2 {
	font-size: var(--gh-text-3xl);
}

h3,
.gh-h3 {
	font-size: var(--gh-text-2xl);
}

h4 {
	font-size: var(--gh-text-xl);
	font-weight: 700;
}

/* Accentwoord in een kop: zet <em> om het woord in het Bricks-veld.
   Voorbeeld: Nooit meer <em>omkijken</em>. */
h1 em,
h2 em,
h3 em,
.gh-h1 em,
.gh-h2 em,
.gh-h3 em {
	font-family: var(--gh-font-accent);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--gh-lime);
}

/* Op lichte vlakken is limoen te bleek; daar gebruiken we het bladgroen. */
.gh-bg--white h1 em,
.gh-bg--white h2 em,
.gh-bg--cream h1 em,
.gh-bg--cream h2 em,
.gh-bg--mint h1 em,
.gh-bg--mint h2 em {
	color: var(--gh-leaf);
}

/* Klein cursief sectielabel, zoals de referentie. */
.gh-label {
	display: block;
	font-family: var(--gh-font-accent);
	font-style: italic;
	font-size: var(--gh-text-lg);
	color: var(--gh-text-muted);
	margin-bottom: var(--gh-space-3);
}

p {
	margin: 0 0 var(--gh-space-4);
	max-width: 68ch;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--gh-forest-light);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--gh-transition);
}

a:hover {
	color: var(--gh-text-strong);
}

strong,
b {
	font-weight: 600;
	color: var(--gh-text-strong);
}

::selection {
	background: var(--gh-mint);
	color: var(--gh-forest-dark);
}

:focus-visible {
	outline: 3px solid var(--gh-leaf);
	outline-offset: 2px;
	border-radius: 4px;
}

.gh-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

/* Het hidden-attribuut moet altijd winnen van layout-regels (flex/grid). */
[hidden] {
	display: none !important;
}

/* --- Sectie & container ------------------------------------------------- */

.gh-section {
	padding-block: var(--gh-section-y);
	position: relative;
}

.gh-container {
	width: 100%;
	max-width: var(--gh-container);
	margin-inline: auto;
	padding-inline: var(--gh-gutter);
}

.gh-container--narrow {
	max-width: var(--gh-container-narrow);
}

/* Achtergrondvarianten, te kiezen per element in de builder */
.gh-bg--white {
	background: var(--gh-white);
}

.gh-bg--cream {
	background: var(--gh-cream);
}

.gh-bg--mint {
	background: var(--gh-mint-soft);
}

.gh-bg--lime {
	background: var(--gh-lime);
	color: var(--gh-ink-btn);
}

.gh-bg--lime h1,
.gh-bg--lime h2,
.gh-bg--lime h3,
.gh-bg--lime h4 {
	color: var(--gh-forest-dark);
}

.gh-bg--lime .gh-lead,
.gh-bg--lime p {
	color: #2c4a35;
}

.gh-bg--forest,
.gh-bg--gradient {
	background: var(--gh-forest);
	color: var(--gh-on-dark);
}

.gh-bg--gradient {
	background: radial-gradient(120% 120% at 12% 0%, var(--gh-forest-light) 0%, var(--gh-forest) 45%, var(--gh-forest-dark) 100%);
}

/* Losse links op donkere vlakken; knoppen houden hun eigen kleur. */
.gh-bg--forest a:not(.gh-btn),
.gh-bg--gradient a:not(.gh-btn) {
	color: var(--gh-mint);
}

/* --- Koppen-blok -------------------------------------------------------- */

.gh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--gh-space-2);
	padding: 0.5rem 1.4rem 0.5rem 1rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gh-text-strong);
	margin-bottom: var(--gh-space-4);
}

/* Het stipje voor de tekst. */
.gh-eyebrow::before {
	content: '';
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--gh-lime);
	flex: none;
}

.gh-bg--forest .gh-eyebrow,
.gh-bg--gradient .gh-eyebrow {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
	color: var(--gh-white);
}

.gh-lead {
	font-size: var(--gh-text-lg);
	color: var(--gh-text-muted);
	max-width: 62ch;
}

.gh-header {
	margin-bottom: var(--gh-space-7);
}

.gh-header--center {
	text-align: center;
	margin-inline: auto;
	max-width: 73.6rem;
}

.gh-header--center .gh-lead,
.gh-header--center p {
	margin-inline: auto;
}

/* --- Knoppen ------------------------------------------------------------ */

.gh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gh-space-2);

	/* Eén vaste maat voor elke call-to-action op de site. */
	min-height: var(--gh-btn-height, 4.8rem);
	padding: 0.4rem 2.4rem;
	border: 1px solid transparent;
	border-radius: var(--gh-radius-pill);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--gh-transition), color var(--gh-transition),
		border-color var(--gh-transition), transform var(--gh-transition), box-shadow var(--gh-transition);
}

.gh-btn:hover {
	transform: translateY(-1px);
}

.gh-btn:active {
	transform: translateY(0);
}

.gh-btn--primary {
	background: var(--gh-lime);
	color: var(--gh-ink-btn);
	box-shadow: var(--gh-shadow-sm);
	padding-inline-end: 0.8rem;
}

.gh-btn--primary:hover {
	background: var(--gh-lime-dark);
	color: var(--gh-ink-btn);
	box-shadow: var(--gh-shadow);
}

/* Alleen knoppen mét pijl-rondje krijgen rechts minder ruimte. */
.gh-btn:has(.gh-btn__arrow) {
	padding-inline-end: 0.7rem;
}

/* Rond pijltje in de knop, zoals in de referentie. */
.gh-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	margin-inline-start: 0.4rem;
	border-radius: 50%;
	background: var(--gh-ink-btn);
	color: var(--gh-white);
	flex: none;
	transition: transform var(--gh-transition);
}

.gh-btn__arrow .gh-icon {
	width: 1.6rem;
	height: 1.6rem;
}

.gh-btn:hover .gh-btn__arrow {
	transform: translateX(2px);
}

/* --- Knoppen over de volle breedte -------------------------------------
   Daar zweeft de pijl midden in de knop mee met de tekst. Tegen de rechterrand
   staat hij rustiger en blijft het opschrift netjes in het midden. */
.gh-btn--block,
.gh-mobile-cta {
	position: relative;

	/* Aan beide kanten evenveel ruimte: het opschrift staat daardoor echt in
	   het midden en kan nooit onder de pijl doorlopen. */
	padding-inline: 4.8rem;
}

.gh-btn--block .gh-btn__arrow,
.gh-mobile-cta::after {
	position: absolute;
	inset-inline-end: 0.7rem;
	top: 50%;
	margin-inline-start: 0;
	transform: translateY(-50%);
}

/* De verschuiving bij hover mag de verticale centrering niet ongedaan maken. */
.gh-btn--block:hover .gh-btn__arrow,
.gh-mobile-cta:hover::after {
	transform: translate(2px, -50%);
}

.gh-btn--outline .gh-btn__arrow,
.gh-btn--dark .gh-btn__arrow {
	background: var(--gh-lime);
	color: var(--gh-ink-btn);
}

/* Wordt de knop zelf limoen, dan valt een limoen rondje weg. Bij hover keert
   het pijltje daarom om naar donkergroen. */
.gh-btn--outline:hover .gh-btn__arrow,
.gh-btn--dark:hover .gh-btn__arrow {
	background: var(--gh-forest);
	color: var(--gh-white);
}

.gh-btn--dark {
	background: var(--gh-forest);
	color: var(--gh-white);
}

.gh-btn--dark:hover {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-btn--outline {
	background: transparent;
	border-color: var(--gh-text-strong);
	color: var(--gh-text-strong);
}

.gh-btn--outline:hover {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-bg--forest .gh-btn--outline,
.gh-bg--gradient .gh-btn--outline {
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--gh-white);
}

.gh-bg--forest .gh-btn--outline:hover,
.gh-bg--gradient .gh-btn--outline:hover {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-btn--ghost {
	background: transparent;
	color: var(--gh-text-strong);
	padding-inline: 0.8rem;
}

.gh-btn--ghost:hover {
	color: var(--gh-leaf);
}

.gh-btn--block {
	width: 100%;
	position: relative;
}

/* Bij een knop over de volle breedte zweefde het pijltje midden in de knop mee
   met de tekst, met een gat van ruim honderd pixels erachter. Het staat nu
   tegen de rechterrand; de tekst blijft gewoon in het midden. */
.gh-btn--block .gh-btn__arrow {
	position: absolute;
	top: 50%;
	inset-inline-end: 0.7rem;
	margin-inline-start: 0;
	transform: translateY(-50%);
}

/* De tekst mag niet onder het pijltje doorlopen: aan beide kanten evenveel
   ruimte vrijhouden, zodat hij ook echt gecentreerd blijft staan. */
.gh-btn--block:has(.gh-btn__arrow) {
	padding-inline: 4.5rem;
}

.gh-btn--block:hover .gh-btn__arrow {
	transform: translate(2px, -50%);
}

.gh-btn .gh-icon {
	width: 1.1em;
	height: 1.1em;
}

.gh-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gh-space-3);
	align-items: center;
	margin-top: var(--gh-space-6);
}

/* --- Vinkjeslijst ------------------------------------------------------- */

.gh-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gh-space-3);
}

.gh-checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--gh-space-3);
	font-weight: 500;
}

.gh-checklist .gh-icon {
	color: var(--gh-leaf);
	margin-top: 0.2em;
}

.gh-bg--forest .gh-checklist .gh-icon,
.gh-bg--gradient .gh-checklist .gh-icon {
	color: var(--gh-mint);
}

.gh-checklist--cols {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--gh-space-3) var(--gh-space-5);
}

/* --- Kaarten ------------------------------------------------------------ */

.gh-card {
	background: var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-lg);
	padding: var(--gh-space-6);
	box-shadow: var(--gh-shadow-sm);
}

.gh-bg--forest .gh-card,
.gh-bg--gradient .gh-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--gh-line-dark);
	box-shadow: none;
	color: var(--gh-on-dark);
}

.gh-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--gh-space-2);
	padding: 0.56rem 1.36rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-mint);
	color: var(--gh-text-strong);
	font-size: var(--gh-text-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* --- Toegankelijkheid --------------------------------------------------- */

.gh-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}