/*
 * De onderdelen die de plugin uitschrijft.
 *
 * De kleuren komen uit theme.json en staan hier als variabele, met achter elke
 * variabele een terugvalwaarde: de plugin moet ook leesbaar zijn in een ander
 * thema.
 *
 * Het uitgangspunt van de opmaak: energieleveranciers werken allemaal met een
 * diep blauw plus een felle accentkleur op wit. Dat patroon volgen wij, want de
 * bezoeker komt hier met een brief van zo'n bedrijf in zijn hand en de site moet
 * bij dat onderwerp horen. Maar wij zijn geen leverancier, dus het blauw is een
 * ander blauw en het accent is de zon en niet het huisroze van een merk.
 *
 * Breekpunten: 46rem voor het wisselen van een tabel naar kaarten, 40rem voor
 * het naast elkaar zetten van de twee deuren. Alles daaronder is de telefoon, en
 * dat is waar de meeste bezoekers zitten.
 */

.sg-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   De keuze waar de site mee begint
   -------------------------------------------------------------------------- */

.sg-keuze {
	margin-block: 1.5rem;
}

/* De teller is een pil en geen zin. Hij moet opvallen zonder te schreeuwen, en
   hij is het enige op de pagina dat vanzelf verandert. */
.sg-teller {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(245, 165, 36, 0.16);
	color: var(--wp--preset--color--zon, #f5a524);
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.sg-teller::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

.sg-keuze-vraag {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--leidend, 1.375rem);
}

.sg-keuze-deuren {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.sg-keuze-deuren {
		gap: 1.25rem;
		grid-template-columns: 1fr 1fr;
	}
}

/* De deuren zijn groot en het hele vlak is klikbaar. Wie op een telefoon met
   een brief in de hand op de bank zit, moet niet op een klein linkje mikken. */
.sg-deur {
	display: block;
	position: relative;
	padding: 1.35rem 3rem 1.35rem 1.35rem;
	border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	border-radius: 0.75rem;
	background: var(--wp--preset--color--papier, #fff);
	color: var(--wp--preset--color--nacht, #0f2540);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 37, 64, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Het pijltje rechts vertelt dat er iets achter zit. Zonder pijl leest een kaart
   als een mededeling en niet als een knop. */
.sg-deur::after {
	content: "";
	position: absolute;
	top: 1.7rem;
	right: 1.35rem;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2.5px solid var(--wp--preset--color--zee, #12559e);
	border-bottom: 2.5px solid var(--wp--preset--color--zee, #12559e);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.sg-deur:hover,
.sg-deur:focus-visible {
	border-color: var(--wp--preset--color--zee, #12559e);
	box-shadow: 0 6px 18px rgba(15, 37, 64, 0.12);
	transform: translateY(-2px);
	color: var(--wp--preset--color--nacht, #0f2540);
}

.sg-deur:hover::after,
.sg-deur:focus-visible::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

.sg-deur-kop {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--groot, 1.1875rem);
	font-weight: 700;
	color: var(--wp--preset--color--zee, #12559e);
	line-height: 1.3;
}

.sg-deur-tekst {
	display: block;
	color: var(--wp--preset--color--gedempt, #55637a);
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
}

/* Op de donkere hero worden de deuren wit en verdwijnt de rand. */
.sg-hero .sg-teller {
	background: rgba(245, 165, 36, 0.2);
}

.sg-hero .sg-keuze-vraag {
	color: var(--wp--preset--color--papier, #fff);
}

.sg-hero .sg-deur {
	border-color: transparent;
	box-shadow: 0 10px 30px rgba(8, 26, 46, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.sg-deur,
	.sg-deur::after {
		transition: none;
	}

	.sg-deur:hover,
	.sg-deur:focus-visible {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   De rekenhulp
   -------------------------------------------------------------------------- */

.sg-formulier fieldset {
	border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin: 0 0 1rem;
	background: var(--wp--preset--color--papier, #fff);
}

.sg-formulier legend {
	padding: 0.2rem 0.7rem;
	margin-left: -0.2rem;
	border-radius: 999px;
	background: var(--wp--preset--color--zee-licht, #e7f0fa);
	color: var(--wp--preset--color--zee-diep, #0c3f78);
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sg-veld {
	margin-bottom: 1.25rem;
}

.sg-veld:last-child {
	margin-bottom: 0;
}

.sg-veld label {
	display: block;
	font-weight: 700;
	line-height: 1.4;
}

.sg-hulp {
	margin: 0.25rem 0 0.6rem;
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--gedempt, #55637a);
}

.sg-invoer {
	display: flex;
	align-items: stretch;
	max-width: 17rem;
}

.sg-eenheid {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.25rem;
	padding: 0 0.75rem;
	border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	border-right: 0;
	border-radius: 0.4rem 0 0 0.4rem;
	background: var(--wp--preset--color--licht, #f4f7fb);
	color: var(--wp--preset--color--gedempt, #55637a);
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	font-weight: 700;
	white-space: nowrap;
}

.sg-invoer input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65rem 0.75rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	border-radius: 0 0.4rem 0.4rem 0;
	background: var(--wp--preset--color--papier, #fff);
	color: inherit;
}

.sg-invoer input:hover {
	border-color: var(--wp--preset--color--gedempt, #55637a);
}

.sg-invoer input:focus-visible {
	outline: 3px solid var(--wp--preset--color--zee, #12559e);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--zee, #12559e);
}

.sg-knoprij {
	margin-block: 1.25rem;
}

.sg-knop {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: 0.4rem;
	background: var(--wp--preset--color--zee, #12559e);
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(15, 37, 64, 0.15);
}

.sg-knop:hover,
.sg-knop:focus-visible {
	background: var(--wp--preset--color--zee-diep, #0c3f78);
	color: #fff;
}

/* --------------------------------------------------------------------------
   De uitkomst
   -------------------------------------------------------------------------- */

/* De ruimte in dit vlak komt van opvulling en niet van marges op de kinderen.
   Dat was de eerste opzet en het ging mis: een tabel met breedte 100 procent
   plus een marge van 1,5rem is samen breder dan het vlak, en dan schuift de hele
   pagina op een telefoon opzij. Opvulling verkleint de beschikbare breedte wel,
   dus dan klopt de 100 procent weer. */
.sg-uitkomst {
	margin-top: 2rem;
	padding: 0 1.5rem 1.5rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--papier, #fff);
	border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	box-shadow: 0 2px 10px rgba(15, 37, 64, 0.06);
	overflow: hidden;
}

@media (max-width: 46rem) {
	.sg-uitkomst {
		padding: 0 1rem 1rem;
	}
}

/* De kop van het uitkomstvlak is donker. Dat is de plek waar de bezoeker naar
   toe scrolt, en een gekleurde balk maakt zichtbaar waar het antwoord begint. */
.sg-uitkomst > h2:first-child {
	margin: 0 -1.5rem;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--nacht, #0f2540);
	color: var(--wp--preset--color--papier, #fff);
	font-size: var(--wp--preset--font-size--groot, 1.1875rem);
}

@media (max-width: 46rem) {
	.sg-uitkomst > h2:first-child {
		margin: 0 -1rem;
		padding: 0.9rem 1rem;
	}
}

.sg-uitkomst > *:last-child {
	margin-bottom: 0;
}

.sg-uitkomst .sg-groot {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--zon-licht, #fff6e6);
	border-left: 4px solid var(--wp--preset--color--zon, #f5a524);
}

.sg-groot {
	font-size: var(--wp--preset--font-size--leidend, 1.375rem);
	line-height: 1.35;
}

.sg-groot strong {
	white-space: nowrap;
}

.sg-groot-klein {
	font-size: var(--wp--preset--font-size--groot, 1.1875rem);
	line-height: 1.4;
}

.sg-uitleg {
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--gedempt, #55637a);
}

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */

.sg-tabel {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1rem;
	font-variant-numeric: tabular-nums;
}

.sg-tabel caption {
	text-align: left;
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--gedempt, #55637a);
	margin-bottom: 0.6rem;
}

.sg-tabel th,
.sg-tabel td {
	text-align: left;
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	vertical-align: top;
}

.sg-tabel td {
	text-align: right;
	white-space: nowrap;
}

.sg-tabel thead th {
	border-bottom: 2px solid var(--wp--preset--color--nacht, #0f2540);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gedempt, #55637a);
}

.sg-tabel-breed td {
	text-align: left;
	white-space: normal;
}

.sg-totaal th,
.sg-totaal td {
	border-top: 2px solid var(--wp--preset--color--nacht, #0f2540);
	border-bottom: 0;
	font-weight: 700;
}

/* Een strook die opzij mag schuiven als hij echt niet past. Hij heeft een rol en
   een naam, zodat iemand met een toetsenbord erin kan en hoort waar hij is. */
.sg-schuif {
	overflow-x: auto;
}

.sg-schuif:focus-visible {
	outline: 3px solid var(--wp--preset--color--zee, #12559e);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   De jaarvergelijking: 2026, 2027 en het verschil naast elkaar
   -------------------------------------------------------------------------- */

.sg-jaren th[scope="row"] {
	font-weight: 400;
	width: 38%;
}

.sg-jaren thead th {
	text-align: right;
}

.sg-jaren thead th:first-child {
	text-align: left;
}

.sg-rij-uitleg {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--gedempt, #55637a);
	font-weight: 400;
}

/* De twee regels met kilowatturen zijn geen geld. Ze staan bovenaan en krijgen
   een eigen achtergrond, zodat niemand ze per ongeluk als euro's leest. */
.sg-rij-kwh {
	background: var(--wp--preset--color--zee-licht, #e7f0fa);
}

.sg-rij-kwh th[scope="row"] {
	font-weight: 700;
}

.sg-tussenstand th,
.sg-tussenstand td {
	border-top: 1px solid var(--wp--preset--color--nacht, #0f2540);
	font-weight: 700;
}

/* De verschilkolom is de reden dat deze tabel bestaat, dus die krijgt kleur. */
.sg-jaren tbody td:last-child {
	font-weight: 700;
	color: var(--wp--preset--color--zon-diep, #9a5b00);
}

.sg-gelijk {
	color: var(--wp--preset--color--gedempt, #55637a);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Tabellen op een smal scherm
   --------------------------------------------------------------------------
   Onder de 46rem worden de rijen kaarten. Opzij schuiven kan ook, maar dan mist
   iemand die niet schuift de helft van de bedragen zonder dat hij het merkt, en
   dat is bij een tabel die over geld gaat het slechtste van twee kwaden.
   De kolomkop komt terug uit data-kop, zodat elk bedrag zijn eigen label houdt.
   -------------------------------------------------------------------------- */

@media (max-width: 46rem) {
	/* Een bijschrift houdt zijn eigen display-waarde als de tabel een blok wordt,
	   en dan krijgt hij de breedte van de smalste kolom: een woord per regel.
	   Hij moet dus mee omgezet worden. */
	.sg-jaren caption:not(.sg-verborgen),
	.sg-tabel-breed caption:not(.sg-verborgen) {
		display: block;
		width: auto;
	}

	.sg-jaren,
	.sg-jaren tbody,
	.sg-jaren tr,
	.sg-jaren th,
	.sg-jaren td {
		display: block;
		width: auto;
	}

	.sg-jaren thead {
		display: none;
	}

	.sg-jaren tr {
		margin-bottom: 0.75rem;
		padding: 0.85rem 1rem;
		border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
		border-radius: 0.5rem;
		background: var(--wp--preset--color--papier, #fff);
	}

	/* De breedte moet hier expliciet terug naar auto. De regel hierboven zet
	   width op auto voor th, maar .sg-jaren th[scope="row"] buiten deze media
	   query is specifieker en houdt anders zijn 38% vast. Dan wringt de kop
	   zich in een derde van het scherm en breekt hij op elk woord af. */
	.sg-jaren th[scope="row"] {
		width: auto;
		padding: 0 0 0.5rem;
		border-bottom: 1px solid var(--wp--preset--color--rand, #d7dfe9);
		font-weight: 700;
	}

	/* Kaarten hoeven niet te schuiven. */
	.sg-schuif {
		overflow: visible;
	}

	.sg-jaren td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.35rem 0;
		border: 0;
		text-align: right;
	}

	.sg-jaren td::before {
		content: attr(data-kop);
		font-weight: 400;
		color: var(--wp--preset--color--gedempt, #55637a);
		text-align: left;
	}

	/* De kilowattuurkaarten houden hun eigen kleur, anders is op een telefoon
	   niet meer te zien welke kaarten over stroom gaan en welke over geld. */
	.sg-jaren tr.sg-rij-kwh {
		background: var(--wp--preset--color--zee-licht, #e7f0fa);
		border-color: transparent;
	}

	.sg-jaren .sg-tussenstand,
	.sg-jaren .sg-totaal {
		border-width: 2px;
		border-color: var(--wp--preset--color--nacht, #0f2540);
	}

	.sg-jaren .sg-totaal {
		background: var(--wp--preset--color--zon-licht, #fff6e6);
	}
}

/* --------------------------------------------------------------------------
   De vergelijking van de leveranciers
   -------------------------------------------------------------------------- */

.sg-samenvatting {
	padding: 1.1rem 1.35rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--zee-licht, #e7f0fa);
	border-left: 4px solid var(--wp--preset--color--zee, #12559e);
	font-size: var(--wp--preset--font-size--groot, 1.1875rem);
	line-height: 1.5;
}

.sg-leverancier-naam {
	font-size: var(--wp--preset--font-size--groot, 1.1875rem);
	font-weight: 700;
}

/* Ja of nee wordt een label. Een gekleurd woord in een tabel leest als een
   toevallige opmaakfout; een label leest als een uitkomst. */
.sg-label {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	font-weight: 700;
	white-space: nowrap;
}

.sg-label-nee {
	background: rgba(14, 124, 85, 0.12);
	color: var(--wp--preset--color--groen, #0e7c55);
}

.sg-label-ja {
	background: rgba(154, 91, 0, 0.12);
	color: var(--wp--preset--color--zon-diep, #9a5b00);
}

.sg-label-onbekend {
	background: var(--wp--preset--color--licht, #f4f7fb);
	color: var(--wp--preset--color--gedempt, #55637a);
}

@media (max-width: 46rem) {
	.sg-tabel-breed,
	.sg-tabel-breed tbody,
	.sg-tabel-breed tr,
	.sg-tabel-breed th,
	.sg-tabel-breed td {
		display: block;
		width: auto;
	}

	.sg-tabel-breed thead {
		display: none;
	}

	.sg-tabel-breed tr {
		margin-bottom: 0.75rem;
		padding: 1rem 1.15rem;
		border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
		border-radius: 0.5rem;
		background: var(--wp--preset--color--papier, #fff);
	}

	.sg-tabel-breed th[scope="row"] {
		padding: 0 0 0.6rem;
		border: 0;
	}

	.sg-tabel-breed td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		padding: 0.3rem 0;
		border: 0;
		text-align: right;
	}

	.sg-tabel-breed td::before {
		content: attr(data-kop);
		color: var(--wp--preset--color--gedempt, #55637a);
		text-align: left;
		flex: 0 0 auto;
	}
}

/* --------------------------------------------------------------------------
   Citaten en bronnen
   -------------------------------------------------------------------------- */

.sg-citaat {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--zon, #f5a524);
	border-radius: 0 0.5rem 0.5rem 0;
	background: var(--wp--preset--color--zon-licht, #fff6e6);
}

.sg-citaat p {
	margin: 0;
	font-size: var(--wp--preset--font-size--groot, 1.1875rem);
	line-height: 1.5;
}

.sg-citaat p::before {
	content: "\201C";
}

.sg-citaat p::after {
	content: "\201D";
}

.sg-citaat footer {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--zon-diep, #9a5b00);
}

.sg-citaat footer a {
	color: inherit;
}

.sg-bron,
.sg-bijgewerkt {
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--gedempt, #55637a);
}

/* --------------------------------------------------------------------------
   Waarschuwingen
   -------------------------------------------------------------------------- */

.sg-let-op {
	margin-top: 1.5rem;
	padding: 1.1rem 1.35rem;
	border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	border-left: 4px solid var(--wp--preset--color--zon, #f5a524);
	border-radius: 0 0.5rem 0.5rem 0;
	background: var(--wp--preset--color--papier, #fff);
}

.sg-let-op > :first-child {
	margin-top: 0;
}

.sg-let-op ul {
	margin-bottom: 0;
	padding-left: 1.2rem;
}

.sg-let-op li + li {
	margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Uitleg, stappen en vragen
   -------------------------------------------------------------------------- */

.sg-uitleg-blok > h2:first-child {
	margin-top: 0;
}

.sg-stappen {
	padding-left: 1.3rem;
}

.sg-stappen li {
	margin-bottom: 0.9rem;
}

.sg-tips ol.sg-stappen {
	counter-reset: stap;
	list-style: none;
	padding-left: 0;
}

.sg-tips ol.sg-stappen > li {
	position: relative;
	padding: 0 0 0 3rem;
	margin-bottom: 1.25rem;
	counter-increment: stap;
}

/* Genummerde rondjes. De volgorde is inhoudelijk: eerst wat niets kost, daarna
   pas wat geld kost. Een nummer maakt die volgorde zichtbaar. */
.sg-tips ol.sg-stappen > li::before {
	content: counter( stap );
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--zee, #12559e);
	color: #fff;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
}

.sg-vragen {
	border-top: 1px solid var(--wp--preset--color--rand, #d7dfe9);
}

.sg-vraag {
	border-bottom: 1px solid var(--wp--preset--color--rand, #d7dfe9);
}

.sg-vraag > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	padding: 0.9rem 0;
	font-weight: 700;
	list-style: none;
}

.sg-vraag > summary::-webkit-details-marker {
	display: none;
}

.sg-vraag > summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--wp--preset--color--zee, #12559e);
	font-size: 1.4rem;
	line-height: 1;
}

.sg-vraag[open] > summary::after {
	content: "\2212";
}

.sg-vraag > p {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--gedempt, #55637a);
	max-width: 40rem;
}

/* --------------------------------------------------------------------------
   De verdienplekken
   -------------------------------------------------------------------------- */

.sg-aanbod {
	margin-block: 2rem;
	padding: 1.35rem 1.5rem;
	border: 1px solid var(--wp--preset--color--rand, #d7dfe9);
	border-radius: 0.75rem;
	background: var(--wp--preset--color--licht, #f4f7fb);
}

.sg-aanbod-kop {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--groot, 1.1875rem);
}

/* De melding dat het een betaalde link is, staat er klein bij maar met genoeg
   contrast om te lezen. Wegmoffelen mag niet en helpt ook niet. */
.sg-aanbod-melding {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--gedempt, #55637a);
}

/* Alleen zichtbaar voor een beheerder. */
.sg-aanbod-leeg {
	border-style: dashed;
	background: var(--wp--preset--color--papier, #fff);
	font-size: var(--wp--preset--font-size--klein, 0.95rem);
	color: var(--wp--preset--color--gedempt, #55637a);
}