/*
 * DG Mestonderzoek: componenten uit het design system (claude.ai/artifact/FPZ2vZq49KvAkYy1VcidVH)
 * Wordt alleen geladen op pagina's die een van de classes hieronder gebruiken (zie functions.php).
 *
 * 1. PriceTable (prijslijst), opbouw in de editor:
 *   Groep (indeling Raster)  class "dgm-price-grid"   om de panelen heen; naast elkaar zodra er plek is
 *     Groep                  class "dgm-price"        wit paneel
 *       Kop (h3)             class "dgm-price__title" titel van het paneel
 *       Tabel                class "dgm-price__table" met kopregel (Header section aan)
 *       Alinea (optioneel)   class "dgm-price__foot"  voorwaarden binnen het paneel
 *   Alinea                   class "dgm-price-note"   voorwaarden onder alle panelen
 *
 *   In de tabelcellen:
 *     <strong>Extra voordelig</strong>  wordt de aqua tag achter de naam
 *     <em>Vanaf 10 dieren</em>          wordt de notitieregel onder de naam
 *
 * 2. CtaBand (afsluitende band), opbouw in de editor:
 *   Groep                    class "dgm-cta"          teal-200 paneel
 *     Kop (h2)               class "dgm-cta__title"
 *     Alinea                 class "dgm-cta__text"
 *     Knoppen                class "dgm-cta__actions" met per knop class "dgm-btn--solid" of "dgm-btn--light"
 *
 * 3. Uitlegpagina's (bijvoorbeeld "Mest opsturen"), opbouw in de editor:
 *   Alinea                   class "dgm-lead"         inleiding
 *   Groep (indeling Raster)  class "dgm-grid"         panelen of kaarten naast elkaar zodra er plek is
 *     Groep                  class "dgm-panel"        wit paneel
 *       Kop (h2)             class "dgm-panel__title"
 *       Lijst (genummerd)    class "dgm-steps"        stappen met nummer
 *       Kop (h3)             class "dgm-panel__sub"   tussenkop
 *       Lijst                class "dgm-checklist"    opsomming met bolletjes
 *       Alinea               class "dgm-callout"      lichte uitlegbox; "dgm-callout dgm-callout--address" voor een adres
 *   Kop (h2)                 class "dgm-section-title" kop boven een nieuw onderdeel
 *   Groep (indeling Raster)  class "dgm-grid"
 *     Groep                  class "dgm-card"         kaart: kop "dgm-card__title", alinea "dgm-card__body", knoppen "dgm-card__action"
 */

:root {
	--dgm-teal-900: #244848;
	--dgm-teal-800: #275557;
	--dgm-teal-600: #127a7a;
	--dgm-teal-400: #4bc8c8;
	--dgm-teal-200: #acdedd;
	--dgm-teal-50: #eff9f9;
	--dgm-ink: #333333;
	--dgm-ink-strong: #0a0915;
	--dgm-grey-600: #5c5b5b;
	--dgm-divider: #dadbdd;
	--dgm-radius-md: 15px;
	--dgm-radius-field: 7px;
	--dgm-radius-pill: 9999px;
	--dgm-font: var(--wp--preset--font-family--manrope, Manrope), system-ui, sans-serif;
}

/* ---------- Raster en paneel (PriceTable en uitlegpagina's) ---------- */

/* Rasterblok: panelen naast elkaar zodra er plek is, anders onder elkaar */
.dgm-price-grid,
.dgm-grid {
	align-items: start;
	margin-top: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--40);
}

/* Onder elkaar blijft een paneel leesbaar smal in plaats van over de hele pagina */
:is(.dgm-price-grid, .dgm-grid) > * {
	width: 100%;
	max-width: 860px;
}

/* Paneel */
.dgm-price,
.dgm-panel {
	/* Het thema zet body op het systeemlettertype; tabellen erven dat, dus Manrope hier expliciet */
	font-family: var(--dgm-font);
	letter-spacing: -0.1px;
	background: #fff;
	color: var(--dgm-ink);
	border-radius: var(--dgm-radius-md);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	box-sizing: border-box;
}

.dgm-price > * + *,
.dgm-panel > * + * {
	margin-block-start: 0;
}

/* ---------- PriceTable ---------- */

.dgm-price .dgm-price__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--dgm-teal-900);
}

/* Tabel */
.dgm-price .dgm-price__table {
	margin: 0;
}

.dgm-price .dgm-price__table table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.5;
	color: var(--dgm-ink);
}

.dgm-price .dgm-price__table thead {
	border: 0;
}

.dgm-price .dgm-price__table th {
	padding: 10px 0;
	border: 0;
	border-bottom: 2px solid var(--dgm-teal-200);
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dgm-teal-600);
}

.dgm-price .dgm-price__table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--dgm-divider);
	vertical-align: top;
}

.dgm-price .dgm-price__table tbody tr:last-child td {
	border-bottom: 0;
}

.dgm-price .dgm-price__table td:first-child,
.dgm-price .dgm-price__table th:first-child {
	padding-right: var(--wp--preset--spacing--30);
}

/* Prijs: rechts uitgelijnd, cijfers onder elkaar */
.dgm-price .dgm-price__table th:last-child,
.dgm-price .dgm-price__table td:last-child {
	text-align: right;
	white-space: nowrap;
}

.dgm-price .dgm-price__table td:last-child {
	font-weight: 600;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* Naam als link (bijvoorbeeld naar de combi-pakketten) */
.dgm-price .dgm-price__table td a {
	color: var(--dgm-teal-900);
	font-weight: 600;
	text-decoration-color: var(--dgm-teal-600);
	text-underline-offset: 3px;
}

.dgm-price .dgm-price__table td a:hover {
	color: var(--dgm-teal-600);
}

/* Tag "Extra voordelig" */
.dgm-price .dgm-price__table td strong {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: var(--dgm-radius-pill);
	background: var(--dgm-teal-400);
	color: var(--dgm-ink-strong);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	vertical-align: 2px;
	white-space: nowrap;
}

/* Notitieregel onder de naam */
.dgm-price .dgm-price__table td em {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-style: normal;
	color: var(--dgm-ink);
}

/* Voetnoot */
.dgm-price .dgm-price__foot {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dgm-ink);
}

.dgm-price .dgm-price__foot a {
	color: var(--dgm-teal-900);
	font-weight: 500;
}

/* Voorwaarden onder beide panelen */
.dgm-price-note {
	margin-top: var(--wp--preset--spacing--30);
	font-size: 14px;
	line-height: 1.5;
	color: var(--dgm-ink);
}

.dgm-price-note a {
	color: var(--dgm-teal-900);
	font-weight: 500;
}

/* ---------- Uitlegpagina's ---------- */

/* Inleiding: niet over de hele paginabreedte, anders wordt de regel te lang om prettig te lezen */
.dgm-lead {
	max-width: 760px;
	/* De paginalay-out centreert smalle blokken met !important; de inleiding hoort links uit te lijnen met de titel */
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Panelen en kaarten naast elkaar even hoog (bij prijstabellen blijft de hoogte per tabel) */
.dgm-grid {
	align-items: stretch;
	margin-bottom: var(--wp--preset--spacing--40);
}

.dgm-panel .dgm-panel__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--dgm-teal-900);
}

.dgm-panel .dgm-panel__sub {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-size: 17px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--dgm-teal-900);
}

.dgm-panel p {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 17px;
	line-height: 1.6;
	color: var(--dgm-ink);
}

.dgm-panel.dgm-panel > :last-child {
	margin-bottom: 0;
}

/* Genummerde stappen: nummer in een teal-800 rondje */
.dgm-panel .dgm-steps {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dgm-step;
}

.dgm-panel .dgm-steps li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--dgm-ink);
	counter-increment: dgm-step;
}

.dgm-panel .dgm-steps li::before {
	content: counter(dgm-step);
	flex: 0 0 32px;
	height: 32px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--dgm-teal-800);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}

/* Opsomming met bolletjes (teal-600, contrastrijk op wit) */
.dgm-panel .dgm-checklist {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgm-panel .dgm-checklist li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--dgm-ink);
}

.dgm-panel .dgm-checklist li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.6em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--dgm-teal-600);
}

/* Lichte uitlegbox, ook voor het adres */
.dgm-panel .dgm-callout {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--dgm-radius-field);
	background: var(--dgm-teal-50);
	font-size: 17px;
	line-height: 1.6;
	color: var(--dgm-ink);
}

.dgm-panel .dgm-callout strong {
	display: block;
	margin-bottom: 4px;
	color: var(--dgm-teal-900);
}

.dgm-panel .dgm-callout--address {
	font-weight: 600;
	line-height: 1.5;
	color: var(--dgm-teal-900);
}

.dgm-panel .dgm-callout--address strong {
	margin-bottom: 0;
}

/* Kop boven een nieuw onderdeel */
.dgm-section-title {
	margin: var(--wp--preset--spacing--60) 0 0;
	font-family: var(--dgm-font);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.1px;
	color: var(--dgm-teal-900);
}

.dgm-section-title + .dgm-grid {
	margin-top: var(--wp--preset--spacing--40);
}

/* Kaart */
.dgm-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--dgm-radius-md);
	background: #fff;
	color: var(--dgm-ink);
	font-family: var(--dgm-font);
	letter-spacing: -0.1px;
	box-sizing: border-box;
}

.dgm-card .dgm-card__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--dgm-teal-900);
}

.dgm-card .dgm-card__body {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--dgm-ink);
}

.dgm-card .dgm-card__action {
	margin: auto 0 0;
}

/* ---------- CtaBand ---------- */

.dgm-cta {
	margin-top: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-radius: var(--dgm-radius-md);
	background: var(--dgm-teal-200);
	color: var(--dgm-ink);
	font-family: var(--dgm-font);
	letter-spacing: -0.1px;
	text-align: center;
	box-sizing: border-box;
}

.dgm-cta > * + * {
	margin-block-start: 0;
}

.dgm-cta .dgm-cta__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 35px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--dgm-teal-900);
}

.dgm-cta .dgm-cta__text {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 17px;
	line-height: 1.6;
	color: var(--dgm-ink);
}

.dgm-cta .dgm-cta__actions {
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
}

/* Knoppen (in de band, in kaarten en elders): ruim, afgerond (radius-md), 15px/500 met hoofdletter per woord */
.dgm-btn--solid .wp-block-button__link,
.dgm-btn--light .wp-block-button__link {
	padding: 16px 36px;
	border: 2px solid transparent;
	border-radius: var(--dgm-radius-md);
	font-family: inherit;
	font-size: 15px;
	line-height: 23px;
	font-weight: 500;
	letter-spacing: -0.1px;
	text-transform: capitalize;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.dgm-btn--solid .wp-block-button__link:hover,
.dgm-btn--light .wp-block-button__link:hover {
	filter: brightness(1.06);
	opacity: 1;
}

.dgm-btn--solid .wp-block-button__link:focus-visible,
.dgm-btn--light .wp-block-button__link:focus-visible {
	outline: 2px solid var(--dgm-teal-900) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff;
}

.dgm-btn--solid .wp-block-button__link {
	background: var(--dgm-teal-800);
	color: #fff;
}

.dgm-btn--light .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--dgm-grey-600);
}

/* ---------- Smalle schermen ---------- */
@media (max-width: 600px) {
	.dgm-price,
	.dgm-panel,
	.dgm-card {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.dgm-panel .dgm-panel__title,
	.dgm-card .dgm-card__title {
		font-size: 22px;
	}

	.dgm-section-title {
		font-size: 26px;
	}

	.dgm-price .dgm-price__title {
		font-size: 22px;
	}

	.dgm-price .dgm-price__table table {
		font-size: 16px;
	}

	/* "op aanvraag" mag afbreken, anders rekt het de prijskolom ten koste van de namen */
	.dgm-price .dgm-price__table th:last-child,
	.dgm-price .dgm-price__table td:last-child {
		white-space: normal;
	}

	.dgm-price .dgm-price__table td:first-child,
	.dgm-price .dgm-price__table th:first-child {
		padding-right: 12px;
	}

	.dgm-cta .dgm-cta__title {
		font-size: 28px;
	}

	/* Knoppen onder elkaar over de volle breedte */
	.dgm-cta .dgm-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dgm-cta .wp-block-button,
	.dgm-cta .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
	}

	.dgm-cta .wp-block-button__link {
		padding-inline: 16px;
	}
}