/* LoveMakeup – merklaag bovenop de gedeelde CSS van het hoofdthema (lovenails/dist, Tailwind 4).
   Tailwind 4 zet de tokens als CSS-variabelen (--color-primary …) en alle utilities gebruiken var(): de waarden hier
   overschrijven ze voor de hele site zonder eigen build. Palet "roest-rozé verfijnd" (docs/decisions.md 14/10/2026).
   Neutrale kleuren (ivoor, inkt, tekst, muted, border, grijsschaal) zijn identiek aan LoveNails en staan hier dus niet.
   Regel: weinig roze vlakken, primary enkel voor acties; eucalyptus (--color-vertrouwen) enkel voor hygiëne-/vertrouwensinfo. */

:root {
	--color-primary: #93434f;               /* wit erop 6,65:1 · op ivoor 6,27:1 */
	--color-primary-hover: #7c3541;         /* wit erop 8,60:1 */
	--color-accent: #be6b75;                /* decoratief (3,57:1 op ivoor): nooit voor tekst */
	--color-primary-bg-subtle: #f7eceb;     /* blush – primary erop 5,75:1 */
	--color-primary-border-subtle: #efd2d3;
	--color-nude: #efe3dd;                  /* primary erop 5,29:1 · muted 5,70:1 */
	/* Tweede accent, spaarzaam: hygiëne en vertrouwen. Nooit voor knoppen of kaartpins. */
	--color-vertrouwen: #456e65;            /* op --color-vertrouwen-bg 4,93:1 · wit erop 5,72:1 */
	--color-vertrouwen-bg: #e8f0ec;
	/* Lichte pin voor gratis vermeldingen op de kaart (LoveNails: #cf7f9c, hard in app.css). */
	--lm-pin-gratis: #c9959b;
}

/* ---------------------------------------------------------------------------------------------------------------
   Vaste LoveNails-kleuren in de gedeelde CSS (geen token) en in de cookiebanner (inline <style> in inc/consent.php,
   daarom met hogere specificiteit). */
.ln-cluster span { box-shadow: 0 0 0 6px rgb(147 67 79 / .18); }
.ln-pin__stip.is-gratis, .ln-leg.is-gratis { background: var(--lm-pin-gratis); }
/* Zoekstraal op de kaart: kleur staat hard in zoeker.js (L.circle color '#b0245a'); Leaflet zet die als SVG-attribuut,
   CSS gaat daarboven. Zo blijft de gedeelde JS ongewijzigd. */
.leaflet-overlay-pane path[stroke="#b0245a"] { stroke: var(--color-primary); }
.leaflet-overlay-pane path[fill="#b0245a"] { fill: var(--color-primary); }
body .ln-cookiebanner a { color: var(--color-primary); }
body .ln-cookiebanner .ln-cookiebanner__knoppen button { border-color: var(--color-primary); background: var(--color-primary); }
body .ln-cookiebanner .ln-cookiebanner__knoppen button[data-ln-cookie="nee"],
body .ln-cookiebanner .ln-cookiebanner__knoppen button[data-ln-cookie="stat"] { background: #fff; color: var(--color-primary); }

/* ---------------------------------------------------------------------------------------------------------------
   Homepage (template-parts/home/ van dit kindthema). Eigen lm-klassen: de gedeelde Tailwind-build kent ze niet, zodat
   de LoveNails-CSS niet verandert door de opmaak van LoveMakeup. */

/* Hero: rustig, ivoor, geen roze verloop. Rechts een boog (nude) voor de foto of de lijncompositie. */
.lm-hero { padding: 1.25rem 0 2.5rem; }
.lm-hero__grid { display: grid; gap: 2rem; align-items: center; }
.lm-hero__tekst { text-align: center; }
.lm-hero__tekst h1 { margin-bottom: .75rem; font-size: 2.25rem; }
.lm-hero__tekst h1 em { font-style: italic; color: var(--color-primary); }
.lm-hero__intro { margin: 0 auto 1.5rem; max-width: 36rem; font-size: 1rem; }
.lm-hero__bewijs { margin-top: 1rem; font-size: .875rem; color: var(--color-muted); }
.lm-hero__beeld { display: none; position: relative; }
.lm-hero__boog { position: relative; overflow: hidden; aspect-ratio: 6 / 7; border-radius: 999px 999px 2rem 2rem; background: var(--color-nude); }
.lm-hero__boog img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lm-hero__boog img.is-compositie { object-fit: contain; padding: 8% 6% 4%; }
.lm-hero__label { position: absolute; left: -1.5rem; bottom: 2.25rem; display: flex; max-width: 18rem; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; border-radius: 1rem; background: var(--color-surface); box-shadow: 0 .5rem 2rem -.25rem hsla(330, 15%, 30%, .12); font-size: .875rem; line-height: 1.4; color: var(--color-default-900); }
.lm-hero__label .lm-rond { flex: none; }
.lm-hero__teller { position: absolute; right: -1rem; top: 2.5rem; padding: .625rem 1rem; border-radius: 999px; background: var(--color-surface); box-shadow: 0 .5rem 2rem -.25rem hsla(330, 15%, 30%, .12); font-size: .875rem; font-weight: 600; color: var(--color-default-900); }
.lm-hero__teller .iconify { color: var(--color-primary); vertical-align: -.2em; margin-inline-end: .25rem; }
@media (min-width: 768px) {
	.lm-hero__tekst h1 { font-size: 3rem; }
	.lm-hero__intro { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
	.lm-hero { padding: 4rem 0 3rem; }
	.lm-hero__grid { grid-template-columns: 1.15fr 1fr; gap: 4.5rem; }
	.lm-hero__tekst { text-align: start; }
	.lm-hero__tekst h1 { font-size: 3.5rem; }
	.lm-hero__intro { margin-inline: 0; }
	.lm-hero__tekst form { margin-inline: 0; }
	.lm-hero__beeld { display: block; max-width: 30rem; justify-self: end; width: 100%; }
}

/* Rond icoon (behandelingen, kiezen). Vertrouwen = eucalyptus. */
.lm-rond { flex: none; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-primary-bg-subtle); color: var(--color-primary); }
.lm-rond.is-vertrouwen { background: var(--color-vertrouwen-bg); color: var(--color-vertrouwen); }

/* "Hoe kies je een PMU-artiest?": twee kolommen (kop + punten), lijnen i.p.v. kaders. */
.lm-kiezen { padding: 3rem 0; border-block: 1px solid var(--color-border); background: var(--color-surface); }
.lm-kiezen__grid { display: grid; gap: 2rem; }
.lm-kiezen__lijst { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.lm-kiezen__punt { display: flex; gap: 1rem; }
.lm-kiezen__punt h3 { margin-bottom: .25rem; font-size: 1.0625rem; }
.lm-kiezen__punt p { font-size: .9375rem; }
.lm-kiezen__slot { margin-top: 1.5rem; font-size: .875rem; color: var(--color-muted); }
@media (min-width: 768px) { .lm-kiezen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
@media (min-width: 1024px) {
	.lm-kiezen { padding: 4.5rem 0; }
	.lm-kiezen__grid { grid-template-columns: 1fr 2fr; gap: 4rem; }
}

/* Prijzen: neutraal vlak (geen volle primary zoals bij LoveNails), bedragen in inkt. */
.lm-prijzen { padding: 3rem 0; }
.lm-prijs { display: flex; height: 100%; flex-direction: column; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-surface); color: var(--color-body-color); transition: border-color .2s; }
.lm-prijs:hover { border-color: var(--color-primary); }
.lm-prijs__naam { font-weight: 600; color: var(--color-default-900); }
.lm-prijs__bedrag { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; white-space: nowrap; color: var(--color-default-900); }
.lm-prijs__klein { font-size: .8125rem; color: var(--color-muted); }
.lm-raster-4 { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .lm-prijzen { padding: 4rem 0; } .lm-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Portaal-home (17/10/2026): hero zonder foto gecentreerd, daaronder de hoofdcategorieën als tegels met foto. */
.lm-hero.is-zonder-beeld .lm-hero__grid { grid-template-columns: 1fr; }
.lm-hero.is-zonder-beeld .lm-hero__tekst { text-align: center; max-width: 48rem; margin-inline: auto; }
.lm-hero.is-zonder-beeld .lm-hero__intro, .lm-hero.is-zonder-beeld .lm-hero__tekst form { margin-inline: auto; }
.lm-cats { padding: 1rem 0 3rem; }
.lm-cats__raster { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.lm-cat { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: 1.25rem; background: var(--color-surface); transition: border-color .2s, box-shadow .2s; }
.lm-cat:hover { border-color: var(--color-primary-border-subtle); box-shadow: 0 .5rem 2rem -.25rem hsla(330, 15%, 30%, .12); }
.lm-cat__beeld { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-nude); }
.lm-cat__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lm-cat:hover .lm-cat__beeld img { transform: scale(1.03); }
.lm-cat__icoon { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--color-primary); }
.lm-cat__tekst { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; }
.lm-cat__tekst h3 { font-size: 1.5rem; }
.lm-cat__tekst h3 a { color: var(--color-default-900); }
.lm-cat__tekst h3 a:hover { color: var(--color-primary); }
.lm-cat__teller { font-size: .875rem; font-weight: 600; color: var(--color-primary); }
.lm-cat__uitleg { font-size: .9375rem; }
.lm-cat__steden { font-size: .875rem; color: var(--color-muted); }
.lm-cat__steden a { color: var(--color-default-900); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 3px; }
.lm-cat__steden a:hover { color: var(--color-primary); }
.lm-cat__meer { margin-top: auto; padding-top: .5rem; }
@media (min-width: 768px) {
	/* 6 kolommen: drie tegels per rij; bij vijf categorieën de eerste twee breder (geen leeg vak) */
	.lm-cats__raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.lm-cats__raster > .lm-cat { grid-column: span 2; }
	.lm-cats__raster:has(> .lm-cat:nth-child(5):last-child) > .lm-cat:nth-child(-n+2) { grid-column: span 3; }
	.lm-cats__raster:has(> .lm-cat:nth-child(5):last-child) > .lm-cat:nth-child(-n+2) .lm-cat__beeld { aspect-ratio: 2 / 1; }
}
/* Hoofdmenu op één regel (zes items sinds 17/10/2026) */
.ln-navbar .ln-nav a { white-space: nowrap; }
@media (min-width: 1024px) { .lm-cats { padding: 1rem 0 4.5rem; } }

/* Portaal-home: wie zit erachter (foto Marina, vrijstaand) */
.lm-over { padding: 1rem 0 3.5rem; }
.lm-over__kaart { display: grid; gap: 1.5rem; align-items: end; overflow: hidden; border-radius: 1.5rem; background: var(--color-nude); padding: 2rem 1.5rem 0; }
.lm-over__foto { order: 2; width: min(60vw, 300px); height: auto; margin: 0 auto; }
.lm-over__tekst { order: 1; }
.lm-over__tekst p { color: var(--color-default-700); }
.lm-over__tekst p + p { margin-top: .75rem; }
.lm-over__label { font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary) !important; margin-bottom: .5rem; }
@media (min-width: 768px) {
	.lm-over__kaart { grid-template-columns: 300px minmax(0, 1fr); gap: 3rem; padding: 2.5rem 3rem 0; }
	.lm-over__foto { order: 1; width: 300px; margin: 0; }
	.lm-over__tekst { order: 2; padding-bottom: 2.5rem; align-self: center; }
}