/* LuxeFashion basistypografie */

body,
input,
textarea,
select,
button {
	font-family: var(--lf-font-body);
	color: var(--lf-ink);
	background-color: var(--lf-bg);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ct-headline,
.page-title {
	font-family: var(--lf-font-heading);
	font-weight: 600;
	line-height: 1.25;
	color: var(--lf-ink);
}

/*
 * Een oude Elementor-kit (.elementor-kit-18 op <body>, bewust bewaard voor de
 * nog-actieve Cart/Checkout-templates) zet via een class+element-selector
 * (specificiteit 0,1,1) eigen sans-serif koppen en gewichten overal op de
 * site, en wint daarmee van de kale regel hierboven (0,0,1). De regel
 * hieronder heeft met twee :not()-klassen een hogere specificiteit (0,2,2)
 * dan de kit-regel en wint dus altijd — behalve op Cart/Checkout, waar de
 * kit-typografie voor nu blijft staan (Fase 6, nog niet herontworpen).
 */
body:not(.woocommerce-cart):not(.woocommerce-checkout) h1,
body:not(.woocommerce-cart):not(.woocommerce-checkout) h2 {
	font-family: var(--lf-font-heading);
	font-weight: 400;
	color: var(--lf-ink);
}

/*
 * Structurele oplossing voor koppen op donkere vlakken: de regel hierboven
 * zet color:var(--lf-ink) rechtstreeks op ELKE h1/h2 op de site (met
 * specificiteit 0,2,2) — dat overschrijft ook een bedoelde, lossere
 * donkere-tekstkleur-regel op een donkere sectie (bv. ".lf-editorial__content
 * h2 { color: var(--lf-on-dark) }", specificiteit 0,1,1), want een niet-
 * overgeërfde, rechtstreekse toewijzing wint altijd van een lagere
 * specificiteit, ongeacht cascade-volgorde. Vandaar dat koppen in donkere
 * secties (".lf-editorial" op de homepage, ".lf-page-hero" op Over ons/
 * Contact, de site-brede footer-nieuwsbrief) in de donkere inktkleur
 * verschenen en vrijwel onleesbaar waren.
 *
 * Oplossing: elke donkere sectie krijgt de marker-class ".lf-on-dark" op zijn
 * buitenste element. Onderstaande regel target elke kop (h1–h6) daarbinnen
 * met dezelfde specificiteitstruc (body + 2x :not() + de marker-class + het
 * kop-element = 0,3,2) — hoger dan de 0,2,2 hierboven, dus wint altijd, zonder
 * !important. Nieuwe donkere secties hoeven alleen ".lf-on-dark" op hun
 * buitenste element te zetten om automatisch mee te doen; er hoeft niets aan
 * deze regel te veranderen.
 */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .lf-on-dark h1,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .lf-on-dark h2,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .lf-on-dark h3,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .lf-on-dark h4,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .lf-on-dark h5,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .lf-on-dark h6 {
	color: var(--lf-on-dark);
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
	line-height: 1.7;
	margin-bottom: 1.25em;
}

/* Minimaal 16px op mobiel, ruime regelafstand behouden */
@media (max-width: 767px) {
	body,
	p,
	li,
	input,
	textarea,
	select,
	button {
		font-size: 16px;
		line-height: 1.65;
	}

	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.25rem; }
}

/*
 * Expliciete width/height op alle afbeeldingen (via functions.php)
 * voorkomen layout shift; deze regel houdt de intrinsieke ratio aan
 * terwijl de afbeelding toch responsief blijft.
 */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}