/* site.css — noorderlichtjes.nl-specifieke overrides op framework-CSS */

/* Alle titels in het heading-font (theme-font-2) */
: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-2);
}

/* [woord]-markup → <mark>-element */
mark {
    color: #d4893e;
    background: none;
    font-style: italic;
}

/* Header titel/subtitel */
.layer__header-title {
    color: #fff;
    font-size: clamp(3rem, calc(1rem + 4vw), 5.125rem);
}

.layer__header-subtitle {
    color: #fff;
    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));
}

/* Secondary button in header: wit omlijnd op donkere foto */
.layer__header .button--secondary {
    color: #fff;
    border-color: rgba(255 255 255 / .6);
}
.layer__header .button--secondary:hover {
    background: rgba(255 255 255 / .12);
    border-color: #fff;
}

/* Donkere overlay over headerfoto voor betere leesbaarheid van tekst */
.layer__header-body:has(.layer__header-media-wrap)::before {
    background: rgba(0, 0, 0, .35);
}

.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.5rem;
}