/* ============================================================
 * Energielabel — het EU-pictogram bij een prijs
 *
 * Eigen bestand omdat het op twee plekken staat: in het koopblok op de productpagina en op de
 * productkaart, en die twee laden elk hun eigen stylesheet. De CSS-bundelaar plakt alles alsnog
 * tot één bestand, dus een los bestand kost geen extra verzoek.
 * ============================================================ */

/* ── Het pictogram ────────────────────────────────────────────────────
 * De geneste weergave uit de labelverordeningen: één pijl met links het schaalbereik in een wit
 * blokje en rechts de klasse in de kleur van haar positie, met daarnaast het productinformatieblad.
 * Opbouw en databronnen staan in inc/energielabel.php.
 *
 * De pijlvorm is clip-path en niet een border-driehoek, want dan is de punt onderdeel van hetzelfde
 * vlak en loopt de achtergrondkleur er zonder naad in door. Een border-driehoek krijgt op een
 * schuine rand altijd een lichte trapvorm te zien, en de kleur zou op twee plekken gezet moeten
 * worden.
 *
 * De rand is geen `border` maar de padding van het buitenste vlak, want clip-path knipt een border
 * gewoon weg. Normaal heeft die rand de klassekleur, zodat het geheel oogt zoals de rest van de
 * markt het toont; bij de drie lichte posities wordt hij donker. Een gele pijl (#FFF200, klasse D
 * op een schaal A-G) heeft op het witte koopblok anders geen zichtbare punt. Dezelfde omslag geldt
 * voor de letterkleur, en hij wordt op één plek bepaald: WT_ENERGIE_LICHTE_POSITIES in de helper.
 * ------------------------------------------------------------------ */
.wt-energie {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 16px 0 0;
}

.wt-energie__pijl {
	flex: none;
	display: flex; align-items: stretch;
	padding: 2px;
	background: var(--wt-energie-rand);
	text-decoration: none;
	/* De punt is 12px breed; die maat staat twee keer, hier en op het binnenvlak. */
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.wt-energie__pijl:hover,
.wt-energie__pijl:focus-visible { opacity: .85; }

/* Het schaalbereik. Wit vlak, zodat het leesbaar blijft ongeacht de klassekleur ernaast.
 * `min-width` en niet een vaste breedte: op een schaal die bij A+++ begint moet er meer in. */
.wt-energie__schaal {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 19px; padding: 3px 2px; gap: 1px;
	background: #fff;
}
.wt-energie__schaal-klasse { font-size: 8px; font-weight: 800; line-height: 1; color: #231F20; letter-spacing: -.2px; }
/* Pijltje omlaag tussen de bovenste en de onderste klasse: dit is een schaal die van goed naar
 * slecht loopt, en zonder dat teken staan er twee losse letters onder elkaar. */
.wt-energie__schaal-punt {
	width: 0; height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 4px solid #231F20;
}

.wt-energie__vlak {
	display: flex; align-items: center;
	min-width: 34px; height: 30px;
	/* Rechts meer ruimte dan links: de punt eet 12px van de rechterkant op, dus zonder die extra
	   padding zou de letter uit het midden van het zichtbare vlak lopen. */
	padding: 0 18px 0 9px;
	background: var(--wt-energie-kleur);
	clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}

.wt-energie__letter {
	color: var(--wt-energie-inkt);
	font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.2px;
}
/* De plussen staan op het label hoog en klein naast de letter, niet als exponent halverwege.
   `top: -.45em` zet ze op de hoogte van de bovenkant van de hoofdletter. */
.wt-energie__letter sup { font-size: .55em; font-weight: 800; top: -.45em; letter-spacing: -.5px; }

.wt-energie__fiche {
	font-size: 13px; line-height: 1.35; font-weight: 600;
	color: var(--wt-blue); text-decoration: underline; text-underline-offset: 2px;
}
.wt-energie__fiche:hover { text-decoration: none; }

/* ── Op de productkaart — .wt-energie--kaart ───────────────────────────
 * Kleiner, en zonder de link naar het productinformatieblad: daar is op een kaart van 276px geen
 * ruimte voor, en de bezoeker die het wil zien klikt door naar het product.
 *
 * Staat in de prijsregel en niet eronder. Dat is geen cosmetiek: de kaarten in een rij worden even
 * hoog, dus een extra regel bij 447 van de 4.368 producten zou alle andere kaarten meetrekken en de
 * prijzen uit lijn duwen. In de prijsregel verandert er niets: die is 26px hoog en het pictogram is
 * 22px, dus het past binnen de bestaande regelhoogte.
 *
 * `flex:none` en `margin-left:auto`: het pictogram houdt zijn maat en wordt naar rechts geduwd, los
 * van hoe lang de prijs is.
 * ------------------------------------------------------------------ */
/* `align-self: center` is hier niet optioneel. De prijsregel lijnt zijn items op tekstbaseline uit,
 * en de baseline van een gevuld vlak met padding ligt onderin. Zonder deze regel hangt het pictogram
 * dus onder de cijfers en rekt het de regel op van 26px naar 32,5px; gemeten op de categoriepagina
 * groeiden de rijen mét een label daardoor van 549px naar 555px, terwijl de rijen zonder label op
 * 549 bleven. Precies de ongelijkheid die we hier wilden vermijden. Dezelfde valkuil als bij
 * .wt-pdp__korting in pdp.css. */
.wt-card__price .wt-energie--kaart { flex: none; align-self: center; margin: 0 0 0 auto; }

.wt-energie--kaart .wt-energie__pijl { padding: 1.5px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.wt-energie--kaart .wt-energie__vlak {
	min-width: 22px; height: 19px; padding: 0 12px 0 6px;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}
.wt-energie--kaart .wt-energie__schaal { min-width: 13px; padding: 2px 1px; gap: 0; }
.wt-energie--kaart .wt-energie__schaal-klasse { font-size: 5.5px; }
.wt-energie--kaart .wt-energie__schaal-punt { border-left-width: 2px; border-right-width: 2px; border-top-width: 3px; }
.wt-energie--kaart .wt-energie__letter { font-size: 12.5px; }