/* ============================================================
   BEACHBREAK — BASIS-EXTRA'S (site-breed, ná bb-global.css)
   ------------------------------------------------------------
   De design-tokens, .bb-section-basis, knoppen, navigatie,
   nieuwsbrief en footer staan in bb-global.css (de redesign).
   Dit bestand bevat alléén wat de redesign niet dekt:
     - de pagina-banner op subpagina's (textuur + featured image)
     - de leesbare tekstkolom voor losse berichten/pagina's
   ============================================================ */

:root { --bb-header-h: 116px; } /* hoogte vaste nav (topbar + balk) — voor banner-offset */

.bb-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--bb-green-dark); color: #fff;
    border-radius: 0 0 var(--bb-radius-sm, 8px) 0;
}
.bb-skip-link:focus { left: 0; }

/* ============================================================
   PAGINA-BANNER — site-breed (behalve homepage)
   Volle breedte. Achtergrond = groene structuur-textuur (altijd),
   met daarop de uitgelichte afbeelding van de pagina. De vaste,
   transparante nav zweeft hieroverheen.
   ============================================================ */
.bb-pagebanner {
    position: relative;
    left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: 100vw; flex-shrink: 0;
    min-height: clamp(260px, 24vw, 380px);
    background-color: var(--bb-green-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex; align-items: flex-end;
    overflow: hidden;
}
.bb-pagebanner .bb-pagebanner__media { position: absolute; inset: 0; z-index: 0; }
.bb-pagebanner .bb-pagebanner__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.bb-pagebanner--has-image::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0) 75%);
    pointer-events: none;
}
.bb-pagebanner .bb-pagebanner__inner {
    position: relative; z-index: 1;
    width: 100%; max-width: var(--bb-container-max);
    margin-inline: auto; padding-inline: var(--bb-container-padding);
    padding-block-start: calc(var(--bb-header-h, 116px) + clamp(3rem, 7vw, 6rem));
    padding-block-end:   clamp(2.5rem, 5vw, 4.5rem);
}
.bb-pagebanner .bb-pagebanner__title {
    font-family: var(--bb-font-display);
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 900; line-height: 1.02; letter-spacing: -0.01em;
    color: var(--bb-text-light); margin: 0;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.bb-pagebanner .bb-pagebanner__wave {
    position: absolute; bottom: -1px; left: 0; width: 100%;
    height: clamp(40px, 5.7vw, 80px);
    pointer-events: none; z-index: 2; overflow: hidden;
}
.bb-pagebanner .bb-pagebanner__wave-track {
    position: absolute; bottom: 0; left: 0; width: 200%; height: 100%;
    will-change: transform; animation: bb-bnr-wave-slide 18s linear infinite;
}
.bb-pagebanner .bb-pagebanner__wave-track svg {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    fill: var(--bb-page-bg, #fff); transform-origin: center bottom;
    animation: bb-bnr-wave-breathe 4.5s ease-in-out infinite;
}
@keyframes bb-bnr-wave-slide   { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes bb-bnr-wave-breathe { 0%,100% { transform: scaleY(0.85); } 50% { transform: scaleY(1.25); } }
@media (prefers-reduced-motion: reduce) {
    .bb-pagebanner .bb-pagebanner__wave-track,
    .bb-pagebanner .bb-pagebanner__wave-track svg { animation: none; }
}

/* Contrast (WCAG): oranje "Lees meer"-CTA op witte kaart → donkerder amber
   zodat 'ie 4.5:1 haalt (fel oranje #e3a134 op wit haalt maar ~2:1). */
.bb-blogcard__cta { color: #9c6212; }

/* Contact/nieuwsbrief: lichte oranje achtergrond MET donkere tekst.
   Wit op licht oranje (#e3a134) haalt ~2,2:1; donkergroen (#2a3a32) erop ~5,4:1 → WCAG-OK.
   Zo houden we het lichte oranje én een geslaagde toegankelijkheid. */
.bb-newsletter { color: var(--bb-text); }
.bb-newsletter .bb-newsletter__heading,
.bb-contact__eyebrow,
.bb-contact__lead,
.bb-contact__details li,
.bb-contact__check,
.bb-contact__privacy,
.bb-contact__privacy a { color: var(--bb-text); }
.bb-contact__details a { border-bottom-color: rgba(42,58,50,0.4); }
.bb-contact__details a:hover { border-bottom-color: var(--bb-text); }
.bb-contact__ic { background: rgba(42,58,50,0.14); }
.bb-contact__ic svg { stroke: var(--bb-text); }

/* ============================================================
   BLOG-OVERZICHT (/blogs/) — intro + categoriefilter + kaart-grid
   ============================================================ */
.bb-blogindex { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.bb-blogindex .bb-blogindex__container {
    width: 100%; max-width: var(--bb-container-max);
    margin-inline: auto; padding-inline: var(--bb-container-padding);
}
.bb-blogindex .bb-blogindex__intro {
    max-width: 72ch; margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
    font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.65;
}
/* Filter-chips */
.bb-blogindex .bb-blogindex__filter {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.bb-blogindex .bb-blogindex__chip {
    border: 2px solid var(--bb-green-dark); background: #fff; color: var(--bb-green-dark);
    font-family: var(--bb-font-display); font-weight: 800; font-size: 0.95rem;
    padding: 0.5rem 1.15rem; border-radius: var(--bb-radius-pill, 999px);
    cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.bb-blogindex .bb-blogindex__chip:hover,
.bb-blogindex .bb-blogindex__chip:focus-visible { transform: translateY(-1px); }
.bb-blogindex .bb-blogindex__chip.is-active { background: var(--bb-green-dark); color: #fff; }
/* Grid: 4 naast elkaar → 2 → 1 */
.bb-blogindex .bb-blogindex__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.8vw, 1.6rem); align-items: stretch;
}
@media (max-width: 1024px) { .bb-blogindex .bb-blogindex__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bb-blogindex .bb-blogindex__grid { grid-template-columns: 1fr; } }
.bb-blogindex .bb-blogindex__item { display: flex; }
.bb-blogindex .bb-blogindex__item.is-hidden { display: none; }
/* Kaart in grid: vul de cel, geen slider-grijpcursor */
.bb-blogindex .bb-blogcard { width: 100%; max-width: none; cursor: pointer; }
.bb-blogindex .bb-blogindex__empty { grid-column: 1 / -1; margin: 0; color: var(--bb-text); opacity: 0.8; }

/* ============================================================
   SINGULAR / PROSE — losse berichten & pagina-inhoud (site-breed)
   ============================================================ */
.bb-singular { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.bb-singular .bb-singular__container {
    width: 100%; max-width: 760px;
    margin-inline: auto; padding-inline: var(--bb-container-padding);
}
.bb-singular .bb-singular__meta {
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bb-green-dark); margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.bb-singular .bb-singular__back { margin-top: clamp(2rem, 4vw, 3rem); }
.bb-singular .bb-singular__back a { color: var(--bb-green-dark); font-weight: 700; text-decoration: none; }
.bb-singular .bb-singular__back a:hover,
.bb-singular .bb-singular__back a:focus-visible { text-decoration: underline; }

.bb-prose {
    font-family: var(--bb-font-body);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.7; color: var(--bb-text);
}
.bb-prose > * + * { margin-top: 1.25em; }
.bb-prose h2, .bb-prose h3, .bb-prose h4 {
    font-family: var(--bb-font-display);
    color: var(--bb-green-dark); line-height: 1.15;
}
.bb-prose h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; margin-top: 1.6em; }
.bb-prose h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; margin-top: 1.4em; }
.bb-prose h4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem);  font-weight: 800; margin-top: 1.3em; }
.bb-prose a { color: var(--bb-blue); text-decoration: underline; }
.bb-prose a:hover, .bb-prose a:focus-visible { color: var(--bb-green-dark); }
.bb-prose img { border-radius: var(--bb-radius-md); height: auto; }
.bb-prose ul, .bb-prose ol { padding-left: 1.4em; margin-block: 1.25em; }
.bb-prose li + li { margin-top: 0.4em; }
.bb-prose blockquote {
    margin: 1.5em 0; padding: 0.25em 0 0.25em 1.1rem;
    border-left: 4px solid var(--bb-orange);
    font-style: italic; color: var(--bb-text);
}