/* =============================================================================
   Hinke. Trendstore — info- en contentpagina's.

   Uit de analyse van de 11 pagina's (FAQ, Betaalmogelijkheden, Bezorgen,
   Ruilen, Algemene voorwaarden, Privacyverklaring, Over ons, Ons team,
   Onze winkel, Openingstijden, Contact) blijkt één gedeelde opbouw:

     150…292   full-bleed titelbalk 1920×142 #efc2bd, H1 gecentreerd
     292…      inhoud in blokken (paginabouwer)
               "Stay up to date"-rij (10 van de 11)
               nieuwsbrief-banner (alle 11)

   Container 1320px; drie pagina's (Betaalmogelijkheden, Bezorgen, Ruilen)
   gebruiken een smallere tekstmaat van 1098px.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Titelbalk
   -------------------------------------------------------------------------- */

.hinke-page__head {
	/* Het ontwerp tekent 1920×142, maar een VASTE hoogte breekt op smal scherm:
	   met een tweeregelige titel plus een ingevulde `pagina_intro` liep de inhoud
	   op 390px tot y=245 terwijl de balk op 238 eindigde — 7px tekst buiten het
	   roze vlak. Daarom min-height + verticale ruimte: zolang de inhoud past blijft
	   de balk exact 142 (resp. 110 op mobiel) en verandert er niets aan het
	   ontwerp; past hij niet, dan groeit de balk mee in plaats van te overlopen. */
	min-height: 142px;
	padding-block: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--hinke-pink);
}

.hinke-page__title {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: normal;
	color: var(--hinke-white);
	text-align: center;
}

.hinke-page__intro {
	margin-top: 6px;
	max-width: 900px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--hinke-white);
	text-align: center;
}

/* -----------------------------------------------------------------------------
   Blok-basis
   -------------------------------------------------------------------------- */

/* Eerste blok begint 48px onder de balk (in het ontwerp 43…110, genormaliseerd). */
.hinke-page__body,
.hinke-block {
	padding-top: 48px;
}

.hinke-block + .hinke-block {
	padding-top: 56px;
}

/* Tekstmaat: standaard 1320, smal 1098. */
.hinke-measure {
	width: min(100% - (2 * var(--hinke-gutter)), 1320px);
	margin-inline: auto;
}

.hinke-block--w1098 .hinke-measure {
	max-width: 1098px;
}

.hinke-block__kop {
	margin: 0 0 24px;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 56px;
	color: var(--hinke-pink);
}

/* -----------------------------------------------------------------------------
   Rijke tekst
   -------------------------------------------------------------------------- */

.hinke-rte {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: var(--hinke-body);
	/* De inhoud komt uit de editor, dus er kan een kale URL of een samenstelling
	   in staan die breder is dan de kolom. Gemeten op 390px: de tekst
	   "https://…?utm_source=nieuwsbrief&utm_campaign=zomer2026" duwde het
	   layout-venster van 390 naar 394 (documentElement.scrollWidth 394) — de
	   pagina werd horizontaal versleepbaar. `break-word` breekt alleen wat écht
	   niet past en laat de min-content-breedte ongemoeid, dus de tekstkolom zelf
	   blijft precies zo breed als hij was. */
	overflow-wrap: break-word;
}

.hinke-rte > *:first-child {
	margin-top: 0;
}

.hinke-rte p {
	margin: 0 0 24px;
}

.hinke-rte p:last-child {
	margin-bottom: 0;
}

.hinke-rte h2 {
	margin: 40px 0 12px;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 25px;
	line-height: 34px;
	color: var(--hinke-pink);
}

/* GEEN text-transform: uppercase. In het ontwerp staan de tussenkopjes in
   normale schrijfwijze — "Thuisbezorging" en "Gratis afhalen in de winkel"
   (2199:6592), "Retourneren" / "Ruilen" / "Uitgesloten artikelen" (2199:6873).
   Kapitalen die het ontwerp wél toont, horen in de inhoud zelf te staan. */
.hinke-rte h3 {
	margin: 32px 0 8px;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--hinke-body);
}

.hinke-rte ul,
.hinke-rte ol {
	margin: 0 0 24px;
	padding-left: 20px;
}

.hinke-rte li {
	margin-bottom: 6px;
}

.hinke-rte a {
	color: var(--hinke-gold);
	text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Telefoon- en e-mailadressen in de lopende tekst.

   Dit zijn op mobiel de meest aangetikte links van deze pagina's, en met
   14px/26 zijn ze maar 18px hoog — gemeten op Betaalmogelijkheden @360:
   tel: 106×18, mailto: 189×18. Te klein om betrouwbaar te raken (WCAG 2.5.8).

   De truc: padding-block vergroot het aanraakvlak naar 18 + 2×13 = 44px, de even
   grote negatieve marge houdt de alinea exact even hoog. Bij een inline-block
   bepaalt namelijk de MARGE-box de regelhoogte (18 + 26 − 26 = 18) terwijl de
   rand-box het aanraakvlak is. Er verandert dus niets zichtbaar aan het ritme
   van de tekst. Let op bij nieuwe inhoud: het vlak steekt 13px in de regels
   erboven en eronder, dus zet niet twee losse links pal onder elkaar in één
   alinea — dan overlappen de aanraakvlakken.

   nowrap alleen op tel:, want een telefoonnummer dat middenin afbreekt is
   onleesbaar: op 360px viel "+31 6 44 43 66 62" over twee regels uiteen.
   Een e-mailadres krijgt die beperking niet — dat is één woord en kan bij een
   lang adres beter afbreken (zie overflow-wrap hierboven) dan overlopen.
   -------------------------------------------------------------------------- */

.hinke-rte a[href^="tel:"],
.hinke-rte a[href^="mailto:"] {
	display: inline-block;
	padding-block: 13px;
	margin-block: -13px;
}

.hinke-rte a[href^="tel:"] {
	white-space: nowrap;
}

.hinke-rte strong {
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Lopende tekst ín het tekst-blok
   Opgemeten per tekstvak in Figma (canvas 1920):
     2199:6527 Betaalmogelijkheden   Outfit 14 / 24  #4e4e4e  gecentreerd
     2199:6592 Bezorgen & Afhalen    Outfit 14 / 26           gecentreerd
     2199:6873 Ruilen & Retourneren  Outfit 14 / 26           gecentreerd
     2199:7109 Algemene voorwaarden  Outfit 14 / 26           links
     2199:7179 Privacyverklaring     Outfit 14 / 26           links
     2217:7127 Over ons (2e blok)    Outfit 16 / 26  #4e4e4e  gecentreerd
     2199:9002 Ons team              Outfit 16 / 26  #4e4e4e  gecentreerd
     2330:4730 Onze winkel           Outfit 16 / 26  #4e4e4e  gecentreerd
   Daarom hier 26px regelhoogte in plaats van de 24 van de gedeelde .hinke-rte;
   Betaalmogelijkheden is met zijn 24 de enige uitzondering in het ontwerp en
   loopt mee met de rest, zodat alle informatiepagina's hetzelfde ritme houden.
   De 24/26 van .hinke-rte zelf blijft staan voor tekst_media, faq en de
   product-accordeon — die hebben hun eigen opgemeten maten.
   -------------------------------------------------------------------------- */

.hinke-block--tekst .hinke-rte {
	line-height: 26px;
}

/* Eén lege regel tussen alinea's, precies zoals het ontwerp: de lege alinea's
   in Figma zijn 26px hoog, dus is de alinea-afstand ook 26px. */
.hinke-block--tekst .hinke-rte p,
.hinke-block--tekst .hinke-rte ul,
.hinke-block--tekst .hinke-rte ol {
	margin: 0 0 26px;
}

.hinke-block--tekst .hinke-rte p:last-child,
.hinke-block--tekst .hinke-rte ul:last-child,
.hinke-block--tekst .hinke-rte ol:last-child {
	margin-bottom: 0;
}

/* Een aankondigende regel plakt in het ontwerp tegen zijn lijst aan: "In deze
   voorwaarden wordt verstaan onder:" staat één regel (26px) boven punt 1, niet
   twee. Ná de lijst komt de lege regel wél terug. Browsers zonder :has()
   houden gewoon de 26px — dan staat er één lege regel te veel, niets stuk. */
.hinke-block--tekst .hinke-rte p:has(+ ol),
.hinke-block--tekst .hinke-rte p:has(+ ul) {
	margin-bottom: 0;
}

/* De verhalende blokken (Over ons, Ons team, Onze winkel) staan op 16px. */
.hinke-block--tekst.hinke-block--mintro .hinke-rte {
	font-size: 16px;
}

/* -----------------------------------------------------------------------------
   Tekstkleur (ACF-veld `tekstkleur`)

   Het ontwerp is hierin niet consequent, en dat is met het oog te zien:
     #4e4e4e  Betaalmogelijkheden (2199:6527), Over ons (2217:7122),
              Ons team (2199:9002), Onze winkel (2330:4730)
     #000000  Bezorgen & Afhalen (2199:6592), Ruilen & Retourneren (2199:6873),
              Algemene voorwaarden (2199:7109), Privacyverklaring (2199:7179)
   Nagemeten door in de Figma-renders de kern van de letters te bemonsteren, dus
   niet geschat. Vandaar een keuze per blok in plaats van één vaste waarde.

   De koppen ín de tekst lopen mee: die hebben in het ontwerp dezelfde kleur als
   de bodytekst, alleen een ander gewicht.
   -------------------------------------------------------------------------- */

.hinke-block--tekst.hinke-block--kzwart .hinke-rte,
.hinke-block--tekst.hinke-block--kzwart .hinke-rte h2,
.hinke-block--tekst.hinke-block--kzwart .hinke-rte h3,
.hinke-block--tekst.hinke-block--kzwart .hinke-rte h4 {
	color: var(--hinke-ink);
}

/* -----------------------------------------------------------------------------
   Koppen ín de lopende tekst
   In het ontwerp zijn dit GEEN aparte kopstijlen: ze staan in dezelfde Outfit
   en dezelfde grootte als de bodytekst, op dezelfde regelhoogte, met precies
   één lege regel erboven en niets eronder. Alleen het gewicht verschilt — de
   tussenkopjes van Bezorgen/Ruilen zijn bold (Outfit Bold), de artikeltitels
   van de algemene voorwaarden ("Artikel 2 - Identiteit van de ondernemer",
   2199:7109) zijn gewoon regular. De grote roze serif-kop is de losse
   ACF-kop (.hinke-block__kop), niet een kop uit de tekst.
   -------------------------------------------------------------------------- */

.hinke-block--tekst .hinke-rte h2,
.hinke-block--tekst .hinke-rte h3,
.hinke-block--tekst .hinke-rte h4 {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-size: inherit;
	line-height: inherit;
	color: var(--hinke-body);
	text-transform: none;
}

.hinke-block--tekst .hinke-rte h2 {
	font-weight: 400;
}

.hinke-block--tekst .hinke-rte h3,
.hinke-block--tekst .hinke-rte h4 {
	font-weight: 700;
}

/* Genummerde lijst: in het ontwerp staan de cijfers rechts uitgelijnd tegen een
   kantlijn op x=27 en begint de tekst op x=29 (t.o.v. de tekstkolom), zonder
   extra ruimte tussen de items — de regels lopen door op 26px. */
.hinke-block--tekst .hinke-rte ol {
	padding-left: 29px;
}

.hinke-block--tekst .hinke-rte li {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Gecentreerde variant (ACF-veld `uitlijning` = midden)
   -------------------------------------------------------------------------- */

.hinke-block--tekst.hinke-block--midden .hinke-measure {
	text-align: center;
}

/* Bullets en nummers in de linkerkantlijn breken een gecentreerde kolom: de
   marker hoort dan mee te lopen in de tekst. Het ontwerp gebruikt in de
   gecentreerde blokken overigens helemaal geen lijsten; dit is de vangrail
   voor als de eigenaar er later toch een toevoegt. */
.hinke-block--tekst.hinke-block--midden .hinke-rte ul,
.hinke-block--tekst.hinke-block--midden .hinke-rte ol {
	padding-left: 0;
	list-style-position: inside;
}

/* -----------------------------------------------------------------------------
   Inhoudsopgave (algemene voorwaarden — 17 onderwerpen in het ontwerp)
   Ontwerp 2199:7109: het label "Inhoudsopgave:" in gewone bodytekst, daaronder
   de titels als GOUDEN onderstreepte links (#d3bb6c = --hinke-gold), zonder
   opsommingstekens, op dezelfde 26px regelhoogte, en één lege regel eronder.
   -------------------------------------------------------------------------- */

.hinke-toc {
	margin: 0 0 26px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 26px;
	color: var(--hinke-body);
}

.hinke-toc__label {
	margin: 0;
}

.hinke-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hinke-toc__list a {
	color: var(--hinke-gold);
	text-decoration: underline;
}

.hinke-toc__list a:hover,
.hinke-toc__list a:focus-visible {
	text-decoration: none;
}

/* Het cijfer krijgt een eigen, rechts uitgelijnd vakje zodat "Artikel 1" en
   "Artikel 17" onder elkaar uitkomen — in Figma met extra spaties gedaan. */
.hinke-toc__nr {
	display: inline-block;
	min-width: 2ch;
	text-align: right;
}

/* -----------------------------------------------------------------------------
   Soepel scrollen van de inhoudsopgave naar het artikel.
   scroll-behavior werkt alleen op het scrollende element, vandaar html; dit
   bestand wordt uitsluitend op paginatemplates ingeladen (zie
   hinke_enqueue_page_css), dus het blijft daar beperkt.
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* De header staat inmiddels wél vast bovenaan (layout.css: `position: sticky`) en
   zijn hoogte zit in `scroll-padding-top` op <html> — dat geldt voor élke sprong
   naar een anker, dus hier is een kleine extra marge genoeg om de kop niet tegen
   de balk te plakken. */
.hinke-rte h2[id],
.hinke-rte h3[id] {
	scroll-margin-top: 24px;
}

/* De stijl van het FAQ-accordeon staat in assets/css/blocks/faq.css en die van de
   linkrij in assets/css/blocks/linkrij.css — die bestanden laadt de blok-CSS-lader
   alleen in op pagina's waar het blok echt staat. */

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.hinke-page__head {
		/* Zelfde reden als de min-height hierboven: een titel van twee regels of een
		   gevulde intro mag de balk laten meegroeien in plaats van eruit te lopen.
		   Gemeten @360: titel 26px → 36px hoog, dus de balk blijft 110. */
		min-height: 110px;
		padding-block: 12px;
	}
	.hinke-page__title {
		font-size: clamp(26px, 4vw, 40px);
	}
	.hinke-block__kop {
		font-size: clamp(24px, 3vw, 40px);
		line-height: 1.3;
	}
}

/* -----------------------------------------------------------------------------
   Inhoudsopgave: op desktop een compacte lijst van 26px-regels, maar dat is een
   aanraakdoel van 312×18 (gemeten @360: 17 titels met een pitch van 26). Op touch
   te klein en te dicht op elkaar, dus krijgt elke titel hier de volle
   kolombreedte en 9px lucht boven en onder: 26 + 18 = 44px hoog met een pitch van
   44, zodat de doelen 44px halen zonder elkaar te overlappen (WCAG 2.5.8). De
   26px-regelhoogte van het ontwerp blijft binnen de link staan, dus de tekst zelf
   staat er nog precies zo als op desktop; de lijst wordt wel langer (op 390:
   852px in plaats van 442). Dat is de prijs van aantikbare regels en op een
   telefoon de betere ruil — je scrolt toch al.

   Twee voorwaarden met een komma (= OF): smalle schermen, én elk apparaat zonder
   hover. Zo krijgt een tablet van 1024px met aanraakscherm ook de grote doelen,
   terwijl een laptop van 1024px de compacte lijst uit het ontwerp houdt.
   -------------------------------------------------------------------------- */

@media (max-width: 900px), (hover: none) {
	.hinke-toc__list a {
		display: block;
		padding-block: 9px;
	}
}

/* De gecentreerde tekstblokken (Betaalmogelijkheden, Bezorgen, Ruilen, Over ons,
   Ons team, Onze winkel) zijn op 1098/1320px een paar regels breed en lezen dan
   prima gecentreerd. Op een telefoon wordt hetzelfde blok 312…366px breed en
   loopt het over 15 tot 30 regels: dan is een gecentreerde tekst slecht te
   lezen, want het oog moet elke regel opnieuw de linkerkant zoeken. Vandaar
   links uitgelijnde lopende tekst onder 600px. De losse blokkop blijft wél
   gecentreerd (die staat buiten .hinke-rte): één korte regel centreren leest
   nog steeds als een titel en houdt de opbouw van het ontwerp vast. */
@media (max-width: 600px) {
	.hinke-block--tekst.hinke-block--midden .hinke-rte {
		text-align: left;
	}
}