/* ============================================================
   Header met lint-logo — dezelfde kop als de brief.
   Witte balk (80px), het oranje lint hangt links aan de bovenrand
   het beeld in; bij scrollen schuift het omhoog en valt het precies
   in de balk (icoon + naam blijven onderin zichtbaar).
   Gedeeld door alle publieke pagina's; gedrag in header-lint.js.
   ============================================================ */
.nwf-hdr {
    background: #fff;
    box-shadow: 0 1px 0 rgba(51, 36, 28, .08);
    transition: box-shadow .35s ease;
}
.nwf-hdr.is-scrolled { box-shadow: 0 6px 24px -14px rgba(51, 36, 28, .45), 0 1px 0 rgba(51, 36, 28, .08); }
.nwf-hdr > div { position: relative; }
.nwf-hdr .nwf-hdr-row { justify-content: flex-end; min-height: 80px; }

/* Het lint: absoluut gepositioneerd, in de marge van de container */
.nwf-lint {
    position: absolute; top: 0; left: 1rem;
    display: block; line-height: 0; overflow: hidden;
    height: 150px; transition: height .35s ease;
}
.nwf-lint img {
    display: block; height: 150px; width: auto;
    transition: transform .35s ease, filter .35s ease;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .16));
}
@media (min-width: 640px)  { .nwf-lint { left: 1.5rem; } }
@media (min-width: 1024px) { .nwf-lint { left: 2rem; } }

/* Gescrold of compacte pagina's: lint valt precies in de balk van 80px */
.nwf-hdr.is-scrolled .nwf-lint,
.nwf-hdr--compact .nwf-lint { height: 80px; }
.nwf-hdr.is-scrolled .nwf-lint img,
.nwf-hdr--compact .nwf-lint img { transform: translateY(-70px); filter: none; }

/* Telefoon: het lint staat altijd in de witte balk. Hangend over de foto
   viel de oranje naam op een drukke achtergrond en oogde het los. */
@media (max-width: 639px) {
    .nwf-lint,
    .nwf-hdr.is-scrolled .nwf-lint,
    .nwf-hdr--compact .nwf-lint { height: 80px; }
    .nwf-lint img,
    .nwf-hdr.is-scrolled .nwf-lint img,
    .nwf-hdr--compact .nwf-lint img { height: 112px; transform: translateY(-32px); filter: none; }
}

/* Knoppen op wit: donker in plaats van wit, geen tekstschaduw */
.nwf-hdr .over-beeld { text-shadow: none; }
.nwf-hdr #menuToggle > span { color: #33241C; }
.nwf-hdr #menuToggle .block { background: #33241C; }
.nwf-hdr #menuToggle:hover > span { color: #B0512C; }
.nwf-hdr #menuToggle:hover .block { background: #B0512C; }
.nwf-hdr .nwf-hdr-link { color: #5E4A3C; }
.nwf-hdr .nwf-hdr-link:hover { color: #B0512C; background: transparent; }
.nwf-hdr .nwf-hdr-link.is-icon:hover { background: rgba(51, 36, 28, .06); }

/* Overlay-menu open: de balk komt bóven de donkere laag (z-index 100) te liggen,
   wordt doorzichtig, en de knoppen worden wit zodat "Sluiten" bereikbaar blijft */
body.menu-open .nwf-hdr { z-index: 120; background: transparent; box-shadow: none; }
body.menu-open .nwf-hdr #menuToggle > span { color: #fff; }
body.menu-open .nwf-hdr #menuToggle .block { background: #fff; }
body.menu-open .nwf-hdr .nwf-hdr-link { color: rgba(255, 255, 255, .85); }
body.menu-open .nwf-hdr .nwf-lint img { filter: none; }

/* Kaarten (Leaflet) onder de header houden. Leaflet geeft kaartlagen en knoppen
   z-index 400-1000; zonder eigen stapellaag schoven die bij scrollen over de
   vaste header (z-50) heen. Zo blijft alles van de kaart binnen de kaart. Geldt
   voor elke pagina die dit bestand laadt, dus ook voor toekomstige kaarten. */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; }