/* Sticky (Esther, 2026-09-11): logo, menu en mandje blijven op elke pagina in beeld.
   De mededelingenbalk erboven scrolt wel weg. */
.hn-header{background:var(--surface-card);border-bottom:var(--hn-border);position:sticky;top:0;z-index:20}
.hn-header__utility{background:var(--hn-brand-deep);color:#DCEAEF;font-size:var(--hn-text)}
.hn-header__utility strong{color:var(--hn-white)}
.hn-header__utility .hn-container{display:flex;align-items:center;justify-content:center;gap:var(--hn-s4);min-height:36px;text-align:center}
/* Op een telefoon past de zin alleen op één regel in de kleine maat; twee regels
   balk boven de kop maakt het eerste scherm onrustig (Ruud, 2026-09-17). */
@media (width < 560px){.hn-header__utility{font-size:var(--hn-label)}}
/* 80px met een logo van 68px (Ruud, 2026-09-03): het merk mag de balk dragen. */
.hn-header__bar{display:flex;align-items:center;gap:var(--hn-s5);min-height:80px}
.hn-brandmark{display:flex;align-items:center;gap:var(--hn-s3);text-decoration:none;flex:none}
/* Het logo krimpt vloeiend mee op een smal scherm (52 px op 320, 68 px vanaf
   425): zo houdt de naam op 320 px nog twee regels. Geen extra schermgrens. */
.hn-brandmark img{width:clamp(52px, 16vw, 68px);height:auto}
/* In de balk: het logo groot en alleen "Hills Nutrition" ernaast, in Spectral
   regular op inkt (Ruud, 2026-09-03). De tweeregelige lockup met het groene
   NUTRITION leeft alleen nog in de voet. */
/* De naam op h3-maat: 20 px op een telefoon, 24 px op desktop — hij schaalt
   mee met het scherm en met het logo (Ruud, 2026-09-11). */
.hn-brandmark__name{font-family:var(--font-heading);font-size:var(--hn-h3);font-weight:var(--hn-weight-regular);letter-spacing:var(--hn-tracking-heading);color:var(--text-heading);line-height:1.1}
.hn-brandmark__tag{display:block;font-family:var(--font-body);font-size:var(--hn-label);letter-spacing:0.12em;text-transform:uppercase;color:var(--hn-leaf);font-weight:var(--hn-weight-medium);margin-top:2px}
.hn-nav{display:flex;align-items:center;gap:var(--hn-s2);margin-left:auto}
.hn-nav__link{display:inline-flex;align-items:center;min-height:var(--hn-tap);padding:0 var(--hn-s3);border-radius:var(--hn-radius);color:var(--text-body);text-decoration:none;font-weight:var(--hn-weight-medium);font-size:var(--hn-text)}
/* Alleen de kleur verspringt (v0-ronde): een vlak achter de link maakte de balk
   onrustig. */
.hn-nav__link:hover{color:var(--hn-brand)}
.hn-nav__link[aria-current]{color:var(--hn-brand);font-weight:var(--hn-weight-bold);box-shadow:inset 0 -2px 0 var(--hn-brand);border-radius:0}
.hn-header__actions{display:flex;align-items:center;gap:var(--hn-s1)}
/* De teksten in de balk staan een stap boven de ui-maat (Ruud, 2026-09-10): de
   mededeling, de menulinks, de afspraakknop en het mobiele menu op de leesmaat.
   De merknaam blijft op h3. De afspraakknop is de gewone knop (44px) in het
   merkblauw, dezelfde als de hero-knop — niet meer de kleine groene. */
.hn-header .hn-header__afspraak{font-size:var(--hn-text)}
.hn-header__actions .hn-iconbtn{position:relative}
/* Het uitgeklapte zoekveld onder de balk: één regel, het veld in het midden op
   leesbreedte, het kruisje ernaast. [hidden] houdt het dicht. */
.hn-header__search{display:flex;align-items:center;justify-content:center;gap:var(--hn-s3);padding:0 0 var(--hn-s4)}
.hn-header__search[hidden]{display:none}
.hn-header__search .hn-search{flex:1 1 auto;max-width:560px}

/* Op een smal scherm staan hamburger, logo, naam, zoeken en mandje samen in
   312px. De naam had flex:none en verdrong dan de knoppen: die werden tot 14px
   geknepen en de balk liep 21px buiten het scherm. Nu krimpt de naam als eerste
   en breekt hij over twee regels; de tikvlakken van 44px blijven heel. */
.hn-iconbtn{flex:none}
@media (width < 560px){
	.hn-brandmark{flex:0 1 auto;min-width:0;gap:var(--hn-s2)}
	/* Het zoekicoon weg: het zoekveld staat in het menupaneel, en de naam
	   heeft de 44 px nodig. */
	.hn-header__zoek{display:none}
	/* De naam valt hier over twee regels naast het logo. Tot 2026-09-11 zette
	   wordpress.css hem onder 900px op --hn-ui — daar kwam het "miniem" van
	   (Ruud). Op h2 (30 px) worden het drie regels. */
}
.hn-menupanel{position:fixed;inset:0;background:var(--surface-card);z-index:60;display:flex;flex-direction:column;overflow-y:auto}
.hn-menupanel__head{display:flex;align-items:center;justify-content:space-between;padding:var(--hn-s3) var(--hn-s4);border-bottom:var(--hn-border)}
.hn-menupanel__link{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 var(--hn-s5);border-bottom:var(--hn-border);color:var(--text-heading);text-decoration:none;font-weight:var(--hn-weight-medium);font-size:var(--hn-text)}
.hn-drawer{position:fixed;inset:0 0 0 auto;width:min(360px,90vw);background:var(--surface-card);z-index:60;display:flex;flex-direction:column;box-shadow:-8px 0 40px -20px rgba(18,36,43,.5)}
.hn-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-s3);padding:var(--hn-s3) var(--hn-s4);border-bottom:var(--hn-border)}
.hn-drawer__body{flex:1;overflow-y:auto;padding:var(--hn-s4)}
.hn-drawer__foot{border-top:var(--hn-border);padding:var(--hn-s4)}
.hn-scrim{position:fixed;inset:0;background:rgba(18,36,43,.45);z-index:50}

.hn-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hn-s2);font-size:var(--hn-ui);color:var(--text-muted);padding:var(--hn-s4) 0;margin:0;list-style:none;max-width:none}
.hn-breadcrumbs li{margin:0;display:flex;align-items:center;gap:var(--hn-s2)}
.hn-breadcrumbs li+li::before{content:'/';color:var(--hn-line)}
.hn-breadcrumbs a{color:var(--text-muted);text-decoration:none}
.hn-breadcrumbs a:hover{color:var(--hn-brand);text-decoration:underline}
.hn-breadcrumbs [aria-current]{color:var(--text-heading)}

/* Wrappen, niet uitpuilen: de winkel telt zeven pagina's en zeven knoppen van
   44px passen op een telefoon van 320px niet naast elkaar (gemeten 1 sep 2026 —
   356px nodig, 288px beschikbaar). Zonder wrap schuift de hele pagina opzij. */
.hn-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--hn-s2);padding:var(--hn-s6) 0;list-style:none;margin:0;max-width:none}
.hn-pagination li{margin:0}
.hn-pagination a,.hn-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hn-tap);height:var(--hn-tap);padding:0 var(--hn-s3);border:1px solid var(--hn-line);border-radius:var(--hn-radius);background:var(--hn-white);color:var(--text-body);text-decoration:none;font-variant-numeric:tabular-nums}
.hn-pagination a:hover{border-color:var(--hn-brand);color:var(--hn-brand)}
.hn-pagination [aria-current]{background:var(--hn-brand);border-color:var(--hn-brand);color:#fff;font-weight:var(--hn-weight-bold)}
.hn-pagination .is-gap{border:0;background:none;color:var(--text-muted)}

/* De voet (herzien 31 aug 2026). Wat hier stond: drie kolommen met twintig links,
   waarvan drie er twee keer in stonden (Home, Contact, Privacy Policy), in een raster
   van vier kolommen — dus de vierde bleef leeg en alles hing tegen de linkerkant.
   De kolom "Shop" bevatte geen enkele winkellink, en de acht conditiepagina's stonden
   er los onder "Learn". Die acht haalden in juni–augustus 2026 samen nul kliks uit
   Google en staan alle acht op /conditions-we-treat/, dus daar staat nu één link
   naar toe: niets raakt onbereikbaar en de voet wordt half zo lang.

   Nu: een merkblok plus drie kolommen van drie links, samen negen. Het raster vult de
   volle breedte en het merkblok is de bredere (1.5 : 1 : 1 : 1).

   De drie kolommen zijn de drie delen van het bedrijf en niets anders: Shop is wat je
   koopt, Consults is wat Esther met je doet, About is wie ze is en hoe je haar bereikt.
   Eerder heetten ze Shop, "Work with Esther" en About — een plek, een handeling en een
   onderwerp door elkaar, met een kolom About waarin "About Esther" stond.

   De kolomkoppen blijven wit en worden niet groen. Ze lijken op .hn-eyebrow, maar dat
   is het label van een sectie; dit is een opschrift boven een kolom — zelfde afweging
   als bij de labels in het resultatenpaneel. */

.hn-footer{
	background:var(--hn-brand-deep);
	color:#C6DEE7; /* 6.76:1 */
}
.hn-footer a{color:#DCEAEF;text-decoration:none} /* 7.68:1 */
.hn-footer a:hover{color:#fff;text-decoration:underline}
.hn-footer h3{margin:0}
.hn-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
/* display:flex hierboven wint van de display:none die [hidden] uit de reset meebrengt,
   dus die moet hier terug — anders klapt er niets in. */
.hn-footer ul[hidden]{display:none}
/* Dezelfde ruimte als elke sectie erboven; op --hn-s7 was de voet het krapste blok. */
.hn-footer > .hn-container{padding-block:var(--hn-section-y)}

.hn-footer__top{display:grid;gap:var(--hn-s6);grid-template-columns:minmax(0,1fr)}
/* Tussen 600 en 900px staat het merkblok over de volle breedte met de drie kolommen
   eronder. Met twee kolommen komt het merkblok naast "Shop" te staan, en omdat het
   drie regels hoger is valt er een gat onder die kolom. */
@media (width >= 560px){
	.hn-footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}
	.hn-footer__brand{grid-column:1 / -1}
}
@media (width >= 900px){
	.hn-footer__top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--hn-s7)}
	.hn-footer__brand{grid-column:auto}
}

/* Het merk staat onderaan de pagina zoals bovenaan: dezelfde .hn-brandmark, hetzelfde
   formaat, logo en naam naast elkaar. Eerder stond hier een ander logobestand in een
   ander formaat, gestapeld boven een naam in een andere maat — twee merklockups op één
   pagina. Alleen de kleur verschilt, want dit is een donkere grond. */
/* In de voet een maat groter dan in de kopbalk (Ruud, 2026-09-03): daar is ruimte
   en het merkblok is er het anker van de kolommen. */
.hn-footer .hn-brandmark img{width:64px;height:64px}
.hn-footer .hn-brandmark__name{color:var(--hn-white);font-size:var(--hn-title)}
.hn-footer .hn-brandmark__tag{color:var(--hn-leaf-bright);font-size:var(--hn-ui)}
.hn-footer__brand p{margin:var(--hn-s4) 0 0;max-width:34ch}

/* ── De kolomkop, tevens de knop van het uitklapmenu ──────────────────────────
   Dezelfde maat als .hn-eyebrow (13px), want dat is het andere kleine kapitaal op
   deze pagina en twee bijna-gelijke maten leest als een fout. Wit en niet groen:
   .hn-eyebrow is het label van een sectie, dit is een opschrift boven een kolom. */
.hn-footer__toggle{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--hn-s3);
	width:100%;
	margin:0 0 var(--hn-s3);
	padding:0;
	border:0;
	background:none;
	text-align:left;
	color:var(--hn-white);
	font-family:var(--font-body);
	font-size:var(--hn-ui);
	font-weight:var(--hn-weight-bold);
	letter-spacing:var(--hn-tracking);
	text-transform:uppercase;
}
/* Boven de knikpunt is de kop alleen een kop: geen pijl, niet aanklikbaar, niet in de
   tabvolgorde (dat laatste zet nav.js). */
.hn-footer__chevron{flex:none;transition:transform .15s ease}
.hn-footer:not(.hn-footer--uitklap) .hn-footer__toggle{pointer-events:none;cursor:default}
.hn-footer:not(.hn-footer--uitklap) .hn-footer__chevron{display:none}
/* Ingeklapt zijn de drie kolommen één lijst: geen tussenruimte, elke rij begint met een
   haarlijn. Met de gewone rasterruimte ertussen zweeft elke lijn los en leest het niet
   als één menu. */
.hn-footer--uitklap .hn-footer__top{gap:0}
.hn-footer--uitklap .hn-footer__brand{margin-bottom:var(--hn-s5)}
.hn-footer--uitklap .hn-footer__toggle{
	/* Het hele opschrift is hier een aanraakvlak, dus het mag de volle 44px hoog zijn. */
	min-height:var(--hn-tap);
	margin-bottom:0;
	border-top:1px solid var(--hn-hairline-inverse);
}
.hn-footer--uitklap .hn-footer__toggle[aria-expanded="true"] .hn-footer__chevron{transform:rotate(180deg)}
.hn-footer--uitklap .hn-footer__col ul{padding-block:0 var(--hn-s4)}

/* Acht pixels tussen twee links met de muis; op een aanraakscherm zit die ruimte in de
   link zelf, zodat het vlak 44px hoog wordt — de maat van --hn-tap. Een muis heeft die
   maat niet nodig en de voet oogt er alleen maar luchtig van. */
.hn-footer__col ul{gap:var(--hn-s2)}
@media (pointer:coarse){
	.hn-footer__col ul{gap:0}
	.hn-footer__col a{display:inline-block;padding-block:var(--hn-s2)}
}

/* ── De juridische regels ─────────────────────────────────────────────────────
   De TGA-zin is de langste en de minst belangrijke tekst van de pagina. Hij stond over
   de volle 1200px als laatste regel en bleef zo aan het oog hangen. Nu staat hij direct
   onder de haarlijn op leesbreedte, gedempt, en sluit de voet af met de nette regel
   eronder: copyright links, de twee beleidslinks rechts. */
.hn-footer__legal{
	border-top:1px solid var(--hn-hairline-inverse);
	margin-top:var(--hn-s7);
	padding-top:var(--hn-s5);
	font-size:var(--hn-ui);
}
/* Over de volle voetbreedte (Ruud, 2026-09-03): kleine lettertjes mogen lang lopen —
   dit is juridische tekst om te kunnen vinden, geen leestekst. */
.hn-footer__disclaimer{margin:0 0 var(--hn-s5);max-width:none;color:#9DC3D1} /* 5.03:1 */
.hn-footer__bottom{display:grid;gap:var(--hn-s3)}
@media (width >= 560px){
	.hn-footer__bottom{grid-template-columns:auto auto;justify-content:space-between;align-items:baseline}
}
.hn-footer__copy{margin:0;color:#9DC3D1}
.hn-footer .hn-footer__policies{flex-direction:row;flex-wrap:wrap;gap:var(--hn-s5)}