/* site.css — noorderlichtjes.nl-specifieke overrides op framework-CSS.
 *
 * Geen hard-coded kleuren: alles via tokens uit /css/variables/website.css
 * (brand + on-image) of de framework-base /modules/variables.css (fg/bg/border).
 * Zie [[feedback_no_important_css]]: bij conflict via specificity oplossen,
 * niet via !important. */

/* Alle titels in het sierfont (theme-font-3, Cormorant Garamond) */
:is(
    .layer__header-title, .layer__text-title, .layer__cards-title,
    .layer__usps-title, .usp__title, .layer__faq-title,
    .layer__inspiration-title, .inspiration-tile__title,
    .postcards__title, .postcard__title,
    .reviews__banner-title, .card__title,
    .general__title
) {
    font-family: var(--theme-font-3);
}

/* [woord]-markup → <mark>-element. Accent-kleur komt uit het token,
   themable per light/dark. */
mark {
    color: var(--color-accent);
    background: none;
    font-style: italic;
}

/* Header titel/subtitel renderen bovenop een dark cover-overlay → altijd
   licht ongeacht het site-thema. Vandaar --on-image-fg (geen --color-fg). */
.layer__header-title {
    color: var(--on-image-fg);
    font-size: clamp(3rem, calc(1rem + 4vw), 5.125rem);
}

/* Home: payoff-h1 in de header-laag kleiner dan op andere pagina's.
   TEST-waarde — fors kleiner om het verschil zichtbaar te maken; daarna fijn-afstellen.
   Alleen de h1 (niet h2-overlaytitels), alleen op de site-roots. */
body[data-route="/"]   h1.layer__header-title,
body[data-route="/en"] h1.layer__header-title,
body[data-route="/de"] h1.layer__header-title {
    font-size: clamp(2.25rem, calc(0.75rem + 3vw), 3.5rem);
}

/* Mobiel: gemeten zó dat "Handgemaakte (led) kaarsen." op één regel breekt
   (Cormorant-mark meet breder dan body-font; 7.6vw schaalt lineair mee met
   de regelbreedte). Zelfde specificity als de home-regel hierboven. */
@media (max-width: 600px) {
    .layer__header-title,
    body[data-route="/"]   h1.layer__header-title,
    body[data-route="/en"] h1.layer__header-title,
    body[data-route="/de"] h1.layer__header-title {
        font-size: 7.6vw;
    }
}

.layer__header-subtitle {
    color: var(--on-image-fg);
    font-size: 1rem;
}

/* USP typografie */
.usp__tagline { font-size: .7rem; }
.usp__title   { font-size: 1.4rem; font-weight: 600; }
.usp__text    { font-size: .75rem; }

/* USP-lijst: zoveel mogelijk op één rij, wrappen als het niet past.
   Carousel-view uitgezonderd — die heeft eigen layout via JS/carousel.css. */
.layer__usps:not([data-view="carousel"]) .layer__usps-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    row-gap: var(--space-4);
}

/* Mobiel: 2 naast elkaar (2×2 voor de vier home-USP's), gecentreerd per cel,
   met bescheiden iconen (feedback Ronny 2026-06-06). */
@media (max-width: 600px) {
    .layer__usps:not([data-view="carousel"]) .layer__usps-list {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Geen justify-self: center — ongelijke tekstbreedtes lieten de onderste
       rij dan inspringen; links uitgelijnd staan de kolommen strak. */
    .layer__usps .usp__icon { width: 1.75rem; height: 1.75rem; }
}

/* Secondary button in header: subtiele lichte vulling op de dark image-overlay
   (heel licht, glas-achtig) + iets sterkere hover. */
.layer__header .button--secondary {
    color: var(--on-image-fg);
    border: 1px solid var(--on-image-border);
    background: rgba(255, 255, 255, .12);
}
.layer__header .button--secondary:hover {
    background: rgba(255, 255, 255, .22);
    border-color: var(--on-image-fg);
}

/* Donkere overlay over headerfoto voor betere leesbaarheid van tekst. */
.layer__header-body:has(.layer__header-media-wrap)::before {
    background: var(--on-image-overlay);
}

/* Mobiel: de payoff staat óp het drukste deel van de foto — egaal donkerder
   over het hele beeld leest fijner dan een gradient of los highlight-vlakje. */
@media (max-width: 600px) {
    .layer__header-body:has(.layer__header-media-wrap)::before {
        background: color-mix(in srgb, black 60%, transparent);
    }
}

.layer__text-media {
    box-shadow: none;
}

.general__title {
    font-weight: 300;
}
.enumeration__title {
    font-weight: 300;
}

/* FAQ-vragen: lichter en in het heading-font voor een chiquere uitstraling */
.faq__question {
    font-family: var(--theme-font-2);
    font-weight: 400;
    font-size: 1.2rem;
}

/* Thema-header: op mobiel vierkant (1:1 i.p.v. de brede desktop-ratio).
   De renderer zet `aspect-ratio` via inline-style; op smalle viewports
   overschrijven we dat via CSS (hogere specificity via media-query). */
@media (max-width: 48rem) {
    html[data-theme] .layer__header-body {
        aspect-ratio: 1 / 1;
    }
}

/* Themed pages krijgen body-achtergrond op de lichte thema-variant.
   ThemeCss mapt theme_color2 → --color-bg-soft (zachte tint); door body's
   bg-color daarop te zetten, kleurt de hele pagina mee per thema (Terracotta
   → room, Olijfgroen → zachtgroen, etc.). Selector op <html data-theme>: alleen
   actief op pages met een thema-koppeling. */
html[data-theme] body {
    background-color: var(--color-bg-soft);
}

/* ── Roze header-balk (hoofdkleur) + attentie-CTA's ──────────────────────
   Kleurschema: hoofdkleur #e8a0c0 (header/nav), attentie #c97aab (CTA's),
   vlakken #fdf6f9. Witte menu-tekst geldt ALLEEN voor de top-level links op
   de desktop-balk; dropdown-submenu's en de mobiele drawer staan op een witte
   achtergrond en houden donkere tekst. */
/* Menu-achtergrond #e8a0c0. Hogere specificiteit (`body .site-header`) zodat
   dit wint van de CMS-navigatie-design-stijl die ná dit bestand op `.site-header`
   wordt ingespoten (anders zou die de achtergrond overschrijven). */
body .site-header {
    background: #e8a0c0;
    border-bottom-color: rgba(255, 255, 255, .25);
}
.site-logo > .media {
    display: inline-block;
    height: 2.5rem;
    flex-shrink: 0;
}
.site-logo > .media > .media__viewport {
    position: relative;
    inset: auto;
    display: block;
    height: 100%;
    width: auto;
}
.site-logo > .media > .media__viewport > img,
.site-logo > .media > .media__viewport > svg {
    position: relative;
    inset: auto;
    width: auto;
    height: 100%;
}
.site-header__menu-toggle { color: #fff; }
.site-header__menu-toggle:hover { background: rgba(255, 255, 255, .15); }

@media (min-width: 48.0625rem) {
    .site-header .site-nav__list--depth-0 > .site-nav__item > .site-nav__link {
        color: #fff;
    }
    .site-header .site-nav__list--depth-0 > .site-nav__item > .site-nav__link:hover {
        color: #fff;
        opacity: .75;
    }
    .site-header .site-nav__list--depth-0 > .site-nav__item--active > .site-nav__link {
        text-decoration: underline;
        text-underline-offset: .3em;
    }
}

/* CTA-/primary-knoppen (o.a. 'Word klant') in de hoofdkleur #e8a0c0. */
.button--primary {
    background: var(--color-primary);
    color: #fff;
}
.button--primary:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
}
/* Mobiele drawer-CTA's; de desktop --main iconen blijven transparant/wit. */
.site-nav__ctas--mobile .site-nav__cta {
    background: var(--color-primary);
}

/* Verticale witruimte rond de store-locator-sectie op de home (geen eigen
   design_layer-spacing), in lijn met de collecties-sectie erboven. */
.layer__store-locator {
    margin-block: var(--space-6);
}


/* ──────────────────────────────────────────────────────────────────────────
   Contactkaart: laag `layer_map`, rendert via de gedeelde framework-module
   location-map.js/.css — marker komt live uit settings.marker (issue #8:
   renderer emit rauw /media-pad → 403, marker laadt daardoor nog niet).
   Op verzoek: kaart full-bleed (rand tot rand, zoals ecohus.nl/contact) en
   de "Routebeschrijving"-link verborgen. Scoped op laag 1030.
   ────────────────────────────────────────────────────────────────────────── */
.layer__map-canvas {
    min-height: 320px;
    margin-block-end: var(--space-3);
}
[data-layer-id="1030"] .layer__map-canvas {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    margin-block-end: 0;
}
[data-layer-id="1030"] .layer__map-route { display: none; }
.layer__map-route {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.layer__map-route svg { width: 1.2em; height: 1.2em; }


/* ──────────────────────────────────────────────────────────────────────────
   Contactformulier: inputs hoger, rondere hoeken, zachte roze vulkleur
   (#fdf5f9 — ≈ token --color-bg-soft #fdf6f9). Op verzoek. Properties direct op
   de control (specificity > de base var-regel), niet via de --form-*-vars omdat
   die op <form> zelf staan en via de wrapper-cascade zouden verliezen. Geldt
   voor zowel inputs als de textarea (beide hebben .form-field__control).
   ────────────────────────────────────────────────────────────────────────── */
.layer__text-form .form-field .form-field__control {
    background: #fdf5f9;
    border-radius: 14px;
    padding: 1rem 1.1rem;
}


/* Contactformulier: zachte roze border (ref. screenshot01) + placeholder-tekst
   in body-tekststijl (--color-fg-muted, ref. screenshot02). Focus houdt de
   accent-kleur als affordance (hogere specificity dan base-focus). */
.layer__text-form .form-field .form-field__control {
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, #fff);
}
.layer__text-form .form-field .form-field__control:focus {
    border-color: var(--color-accent);
}
.layer__text-form .form-field .form-field__control::placeholder {
    color: var(--color-fg-muted);
    opacity: 1;
}


/* ──────────────────────────────────────────────────────────────────────────
   Landingspagina — CTA-laag 1094 staat op menuroze (--color-primary).
   `.button--primary` heeft background:var(--color-primary) = exact diezelfde
   kleur → de knop valt volledig weg. Daarom hier omgekeerd: witte knop met
   roze tekst. De secondary krijgt witte tekst; z'n rand volgt currentColor en
   wordt daarmee vanzelf wit.
   Het CMS-slot `design_button_text` bewaart de waarde wél maar genereert GEEN
   CSS (geverifieerd) → vandaar deze override.
   ────────────────────────────────────────────────────────────────────────── */
[data-layer-id="1094"] .button--primary {
    background: var(--color-primary-fg);
    color: var(--color-primary);
}
[data-layer-id="1094"] .button--secondary {
    background: var(--color-accent);
    color: var(--color-primary-fg);
    box-shadow: none;
}


/* Gecentreerde tekstlaag (`type=text_centered` → [data-align="center"]): ook de
   knoppen centreren. `.layer__text-buttons` is een flex-container zonder
   justify-content → knoppen blijven links staan, terwijl de centreer-regel
   alleen `text-align:center` zet (dat centreert geen flex-items).
   Geen CMS-slot beschikbaar: `design_link` weigert `justify-content`. */
.layer__text-layout[data-align="center"] .layer__text-buttons {
    justify-content: center;
}


/* Knoppen in een tekstlaag mogen geen link-underline krijgen.
   motion.css heeft `.layer__text-text a, .layer__text-content a
   { text-decoration: underline }` ("link underline grow on hover") — bedoeld
   voor tekstlinks, maar de knoppen staan óók in .layer__text-content en worden
   dus mee-onderstreept. `.button{text-decoration:none}` (0,1,0) verliest van
   die regel (0,1,1). Hier expliciet terugzetten; echte tekstlinks (tel/mail)
   houden hun underline. */
.layer__text-content a.button,
.layer__text-text a.button {
    text-decoration: none;
}


/* Hover-kleur van tekstlinks = accentroze. Hoort in Website opmaak → Tekst →
   "Hyperlink binnen tekst (hover)" (slot design_text__anchor_hover) en die
   waarde STAAT daar ook ingevuld — maar dat slot genereert geen CSS
   (geverifieerd: PUT 200, rejected:[], geen regel). Zodra dat in het framework
   werkt, kan deze regel weg. De rustkleur (#954e7a) komt wél uit het CMS. */
.layer__text-text a:hover {
    color: var(--color-accent);
}


/* CTA-laag 1094: achtergrondfoto (bg-kaars-effect-03.webp, media 264).
   De keuze STAAT in het CMS (Opmaak → Laag → achtergrond afbeelding; opgeslagen
   als {file_id:264}) en `background-size/-repeat/-position` compileren daar wél
   uit — maar de StyleCompiler emit GEEN `background-image` (geverifieerd: op
   geen enkele pagina van deze site komt er een background-image uit het
   layer-design blok). `background-image-css` weigert url()/pad.
   Raw /media is 403 op de site-host → beeld via de assets-host, zoals bij
   binaire assets gebruikelijk. Deze regel kan weg zodra het veld compileert. */
[data-layer-id="1094"] > .layer__bg {
    background-image: url("https://assets.easyhandling.nl/media/460/website-settings/bg-kaars-effect-03.webp");
}


/* ============================================================
   KERSTPAGINA (/landingspagina-kerst) — alleen deze route
   ============================================================ */

/* Sneeuw komt nu uit de laag-instelling "Sfeer-effect" (Effect: Sneeuw) op de
   hero-laag — een canvas-effect via /js/hero-fx.js, instelbaar in het CMS
   (intensiteit/snelheid/wind). Geen route-CSS meer nodig. */

/* Hero-foto donkerder + zachte donkere overlay */
body[data-route="/landingspagina-kerst"] [data-layer-id="1129"] .media__viewport img{ filter: brightness(1.05); }
body[data-route="/landingspagina-kerst"] [data-layer-id="1129"] .media__viewport::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(180deg, rgba(28,9,20,.06), rgba(28,9,20,.20));
}

/* CTA-knoppen + tekstlinks leesbaar op de donkere #411631 achtergrond */
body[data-route="/landingspagina-kerst"] [data-layer-id="1148"] .button--primary{
    background:#e8a0c0; color:#411631;
}
body[data-route="/landingspagina-kerst"] [data-layer-id="1148"] .button--secondary{
    background:transparent; color:#ffffff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
}
body[data-route="/landingspagina-kerst"] .layer__text-text a{ color:#ffd0e6; }

/* USP-teksten wit op de donkere kerst-achtergrond */
body[data-route="/landingspagina-kerst"] .usp__title,
body[data-route="/landingspagina-kerst"] .usp__text{ color:#ffffff; }
body[data-route="/landingspagina-kerst"] .usp__tagline{ color:rgba(255,255,255,.72); }

/* Geen witte flits tijdens de scroll-reveal: donkere onderlaag op de hele kerstpagina
   (de laag-achtergronden faden mee met de reveal; zonder dit zie je even het witte body) */
body[data-route="/landingspagina-kerst"],
body[data-route="/landingspagina-kerst"] #main-content{ background-color:#411631; }

/* CTA-subtitel warm goudgeel (kerst) */
body[data-route="/landingspagina-kerst"] [data-layer-id="1148"] .layer__text-subtitle{ color:#f5c97a; }

/* Kerst: lopende tekst iets donkerder dan de titel (test op 1137, evt. later uitrollen) */
body[data-route="/landingspagina-kerst"] .layer__text-text{ color:#b3859a; }

/* Productfoto in z'n geheel tonen (niet bijsnijden) */
.product-detail__gallery-main .product-detail__gallery-image{ object-fit: contain; border:1.5px solid rgba(232,160,192,.65); border-radius:6px; }

/* Productfoto-achtergrond wit (i.p.v. thema-lichtgrijs) */
.product-detail__gallery .product-detail__gallery-main{ background-color:#ffffff; }

/* Overzichts-kaartjes: productfoto volledig tonen (niet bijsnijden) op wit */
img.product-card__image{ object-fit: contain; background-color:#ffffff; }

/* Kerst hero: meer lucht op mobiel (~150% hoger), matcht thema-breakpoint 600px */
@media (max-width: 600px){
    body[data-route="/landingspagina-kerst"] [data-layer-id="1129"] .layer__header-body{
        padding-top: 5.5em; padding-bottom: 5.5em;
    }
}

/* Originele landingspagina hero: zelfde mobiele lucht (~150%) als kerst */
@media (max-width: 600px){
    body[data-route="/landingspagina"] [data-layer-id="1076"] .layer__header-body{
        padding-top: 5.5em; padding-bottom: 5.5em;
    }
}

/* Kerst USP-balk: icoon + tekst bovenaan uitlijnen (strakker dan center) */
body[data-route="/landingspagina-kerst"] .usp,
body[data-route="/landingspagina"] .usp{ align-items: start; }

/* Header-scrim op mobiel gelijk aan desktop (thema zet 'm mobiel op 60% zwart, desktop 35%) */
@media (max-width: 600px){
    body[data-route="/landingspagina-kerst"] .layer__header .layer__header-body::before,
    body[data-route="/landingspagina"] .layer__header .layer__header-body::before{
        background: rgba(0, 0, 0, .35);
    }
}