/* 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; margin-bottom: .25em; }
.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-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);
}