/* ==================================================================
 * WebwinkelKeur: het reviewblok.
 *
 * Staat op twee plekken met dezelfde opbouw en volgorde, alleen in een
 * andere kleur:
 *   - de zwarte topbalk, beeldmerk in wit naast de andere witte icoontjes
 *   - onder de bestelknop op /afrekenen/, beeldmerk in de eigen roze
 *
 * Zie inc/webwinkelkeur.php voor het waarom. Laadt op elke pagina, want
 * de topbalk staat overal.
 * ================================================================== */

.taw-wwk {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}

.taw-wwk b {
	font-weight: 700;
}

/* ---- Beeldmerk ------------------------------------------------- */
/*
 * `vorm` is de gevulde druppel, `diep` de ring met het vinkje erin.
 *
 * NIET in het roze van WebwinkelKeur zelf (#ee0088). Dat vloekt met de oranje
 * huisstijl, zeker op het perzikvlak van de homepage. Het staat nu in het zwart
 * van de topbalk en de footer, zodat het meegaat met de site in plaats van
 * ertegenin. Alleen op de donkere balk draait het om, zie onderaan dit bestand.
 *
 * De ring met het vinkje is een echt gat, uitgesneden met een masker, zodat de
 * ondergrond erdoorheen schijnt. Een harde witte uitsnede werkte niet op het
 * perzikvlak van de homepage. Transparant maken van die tweede laag kan niet:
 * die ligt over de gevulde druppel heen, dus dan zie je de druppel en niet de
 * achtergrond. Vandaar het masker.
 *
 * De kleur staat als variabele, zodat een plek hem met een eigen regel kan
 * overschrijven in plaats van de fill zelf te herhalen.
 */
:root {
	--taw-wwk-merk: #000;
}

.taw-wwk .taw-wwkmerk {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	display: block;
}

.taw-wwkmerk__vorm {
	fill: var(--taw-wwk-merk);
}

/* ---- Sterren --------------------------------------------------- */
/* Twee lagen. De bovenste is afgeknipt op het percentage van het cijfer,
   zodat 4,9 van 5 een vrijwel volle vijfde ster geeft en een 4,2 dat ook
   eerlijk laat zien. De onderste laag houdt de breedte vast. */
.taw-wwk__sterren {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	line-height: 0;
}

.taw-wwk__sterren-leeg,
.taw-wwk__sterren-vol {
	display: flex;
	gap: 1px;
}

.taw-wwk__sterren-leeg {
	color: var(--taw-line, #e5e7eb);
}

.taw-wwk__sterren-vol {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--taw-star, #F6BB06);
}

.taw-wwk__sterren svg {
	width: .85rem;
	height: .85rem;
	flex-shrink: 0;
	fill: currentColor;
	stroke: currentColor;
}

/* ==================================================================
 * Variant: de zwarte topbalk
 *
 * Het beeldmerk wordt wit, zodat het past bij de truck en de portemonnee
 * ernaast. De ring en het vinkje krijgen de kleur van de balk, dan lijken
 * ze uitgesneden. Daarom staat hier een harde #000 en geen transparant:
 * het vinkje ligt over de gevulde druppel heen, dus doorzichtig maken
 * laat de druppel zien en niet de balk.
 * ================================================================== */
.taw-wwk--donker {
	--taw-wwk-merk: #fff;
}

/* Op zwart is het lichtgrijs van de lege sterlaag te fel. */
.taw-wwk--donker .taw-wwk__sterren-leeg {
	color: #4b5563;
}

.taw-wwk--donker:hover {
	color: var(--taw-brand, #FF6610);
}

/* ==================================================================
 * Variant: onder de bestelknop op /afrekenen/
 * ================================================================== */
.taw-wwk-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.taw-wwk-wrap .taw-wwk {
	font-size: .9rem;
	color: var(--taw-ink, #1f2937);
}

.taw-wwk-wrap .taw-wwk:hover .taw-wwk__tekst,
.taw-wwk-wrap .taw-wwk:focus-visible .taw-wwk__tekst {
	text-decoration: underline;
}

/* Smal scherm: net genoeg krimpen om op een telefoon van 375px op een
   regel te passen. Past het toch niet, dan breekt het gecentreerd af. */
@media (max-width: 420px) {
	.taw-wwk-wrap .taw-wwk {
		font-size: .85rem;
		gap: .35rem;
	}
}

/* ==================================================================
 * Variant: de beoordelingensectie op de homepage
 *
 * Drie beoordelingen naast elkaar, met daaronder een regel die het
 * geheel samenvat. Hier stond een Trustindex-script dat niets laadde.
 * ================================================================== */

/* Smal scherm: schuifrij, zodat je ze allemaal langs kunt. */
.taw-home__reviews-rij {
	/*
	 * min-width: 0 is hier geen franje maar noodzaak. Een grid- of flex-item
	 * krijgt standaard min-width: auto en krimpt dus niet onder de breedte van
	 * zijn inhoud. Zonder deze regel duwen de kaarten de hele pagina breed.
	 */
	min-width: 0;
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: nowrap;
	gap: .75rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .5rem;

	/*
	 * contain: paint houdt de kaarten die rechts buiten beeld staan ook echt
	 * buiten de berekening van de paginabreedte. Zonder deze regel telde de
	 * browser ze mee: op een iPhone van 393px kwam de pagina op 1211px uit en
	 * kon je de hele homepage naar rechts wegschuiven, met een witte strook
	 * ernaast. overflow-x op auto, hidden of clip loste dat niet op, en op een
	 * ouder klippen ook niet; alleen containment doet het.
	 *
	 * overscroll-behavior-x houdt het doorschuiven binnen de rij, zodat je aan
	 * het einde van de kaarten niet ongewild de pagina meeneemt.
	 */
	contain: paint;
}

/* De band eromheen centreert zijn inhoud; een beoordeling leest
   linksuitgelijnd een stuk prettiger. */
.taw-home__review {
	flex: 0 0 78%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	padding: 1.25rem;
	text-align: left;
	background: #fff;
	border: 1px solid var(--taw-line, #e5e7eb);
	border-radius: var(--taw-radius, 12px);
}

/* Past naam en datum niet naast elkaar, dan zakt de datum eronder. Zonder
   flex-wrap brak de naam zelf over twee regels terwijl de datum rechtsboven
   bleef staan, en dat oogt rommelig op een smalle kaart. */
.taw-home__review-kop {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 .75rem;
}

.taw-home__review-naam {
	margin: 0;
	font-weight: 600;
	color: var(--taw-ink-strong, #111827);
}

.taw-home__review-datum {
	margin: 0;
	flex-shrink: 0;
	font-size: .8125rem;
	color: var(--taw-muted, #6b7280);
}

.taw-home__review-tekst {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--taw-ink, #1f2937);
}

/* ---- De samenvatting eronder ----------------------------------- */
/* Een doorlopende tekstregel, geen flex-rij: op een telefoon brak die op de
   verkeerde plekken en kwam het beeldmerk alleen te staan. Het beeldmerk en de
   sterren lopen nu mee met de tekst. */
.taw-home__reviews-samenvatting {
	margin: 1.25rem 0 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--taw-ink, #1f2937);
}

.taw-home__reviews-samenvatting .taw-wwkmerk {
	display: inline-block;
	width: 1.15rem;
	height: 1.15rem;
	margin-right: .15rem;
	vertical-align: -.22rem;
}

/*
 * Een ster is een compacte vorm en zakt naast tekst optisch weg. Rekenkundig op
 * het midden van het cijfer staat hij nog steeds te laag; op het oog loopt de rij
 * pas mee met de tekst als hij daar iets bovenuit komt. Vandaar een positieve
 * waarde en niet het berekende midden. Op het oog afgeregeld: ruim 2px boven het
 * midden van het cijfer.
 */
.taw-home__reviews-samenvatting .taw-wwk__sterren {
	margin-left: .4rem;
	vertical-align: .05rem;
}

.taw-home__reviews-link {
	margin: .4rem 0 0;
}

.taw-home__reviews-samenvatting strong {
	font-weight: 700;
	color: var(--taw-ink-strong, #111827);
}

/* De naam van het keurmerk is de link. Vet en onderstreept zodat hij opvalt als
   link, maar in de tekstkleur: midden in een zin wordt oranje te luid. */
.taw-home__reviews-alle {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .18em;
}

.taw-home__reviews-alle:hover,
.taw-home__reviews-alle:focus-visible {
	color: var(--taw-brand, #FF6610);
}

.taw-home__reviews-link {
	display: none;
}

@media (min-width: 1024px) {
	/*
	 * Breed scherm: vier naast elkaar in plaats van een schuifrij. De rest
	 * blijft in de markup staan maar wordt niet getoond: vier of vijf kaarten
	 * Onder 1024px blijft het een schuifrij: bij vier kolommen op 768px zou elke
	 * kaart nog maar 171px breed zijn, en dan past er geen zin meer op een regel.
	 * Hetzelfde breekpunt als de header, de footer en de productpagina.
	 */
	.taw-home__reviews-rij {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
	}

	.taw-home__review:nth-child(n + 5) {
		display: none;
	}
}

/* ==================================================================
 * Variant: onder de USP-lijst op de homepage
 *
 * Het beeldmerk moet op dezelfde lijn staan als de vinkjes erboven, dus
 * linksuitgelijnd en niet gecentreerd. Zonder deze regel centreerde het
 * blok zijn inhoud binnen de kolom en stond het beeldmerk 17px naar
 * rechts, net uit de lijn.
 *
 * Het beeldmerk is hier 1rem, precies de maat van die vinkjes.
 * ================================================================== */

.taw-home .taw-wwk--home {
	display: flex;
	width: 100%;
	justify-content: flex-start;
}

.taw-home .taw-wwk--home .taw-wwkmerk {
	width: 1rem;
	height: 1rem;
}