/* ==========================================================================
   Breadcrumbs block styling
   Toevoegen aan: web/themes/custom/wsv_engel/css/kennisbank.css
   ========================================================================== */

#block-wsv-engel-breadcrumbs ol li a {
  color: #08233f;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

#block-wsv-engel-breadcrumbs ol li a:hover {
  color: #d4a017;
  text-decoration: underline;
}

/* Huidige/actieve pagina (niet-klikbaar, laatste item) */
#block-wsv-engel-breadcrumbs ol li[aria-current="page"] {
  color: #6b7280;
  font-weight: 400;
}

/* Scheidingsteken tussen items (het li met aria-hidden="true") */
#block-wsv-engel-breadcrumbs ol li[aria-hidden="true"] {
  color: #d4a017;
}

#block-wsv-engel-breadcrumbs ol li[aria-hidden="true"] svg {
  fill: currentColor;
  color: #d4a017;
}


/* ============================================================
   SITE-BREED FONT: alles naar sans-serif (Geist) i.p.v. serif (Gelasio)
   Overschrijft de Tailwind "font-serif"-klasse die Canvas automatisch
   aan tekstblokken toekent, plus alle koppen (h1-h6).
   ============================================================ */
body,
.font-serif,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================================================
   ACCENT-KNOPPEN SITE-BREED IN HUISSTIJLGOUD
   Canvas' Button-stijl "Accent" gebruikt bg-accent (+ dark/light
   varianten). We trekken die naar het goud van de huisstijl
   (#f6bd45, hover #d4a017 — zelfde als .wsv-button--primary).
   ============================================================ */

.bg-accent {
  background-color: #f6bd45 !important;
}

.hover\:bg-accent-dark:hover,
.focus-visible\:bg-accent-dark:focus-visible {
  background-color: #d4a017 !important;
}

.active\:bg-accent-light:active {
  background-color: #ffd76e !important;
}

/* Accent-knoppen in een verticale stapel (zoals de knoppenkolom op
   Voor passanten): gelijke breedte, label links naast het pijltje,
   net als de contactknoppen op de contactpagina. */
div.flex.flex-col > a.bg-accent {
  width: 100%;
  max-width: 320px;
  justify-content: flex-start;
}

/* =========================================================
   CONTACTPAGINA — beide kaarten wit, naast elkaar + adres-tekst als kaart (v14)
   Vervangt het eerdere contact-kaart blok volledig

   ECHTE STRUCTUUR (geverifieerd uit HTML):
   section.@container
     .container
       div.@container.flex.flex-col.lg:max-w-full   <- KROMP MEE (fix hieronder)
         div.grid.md:grid-cols-2 (1 kind)
           div.flex.flex-row   = wrapper met 2 kolommen naast elkaar
             ├ div.flex.flex-col (bevat form)   = formulierkolom
             └ div.flex.flex-col (bevat a[tel])= contactkolom (knoppen + kaart)
   ========================================================= */

/* --- 0. DE ECHTE FIX: grid van 2 kolommen naar 1 kolom ---
   Geverifieerd: de grid is 976px breed maar heeft md:grid-cols-2,
   waardoor de flex-row in kolom 1 (~472px) valt en kolom 2 leeg blijft.
   Dit veroorzaakte alle 'links plakken + leegte rechts'.
   Terug naar 1 kolom -> flex-row vult de volle 976px, en de 60/40
   verdeling BINNEN de row (sectie 1) doet de rest. */
div.grid:has(div.flex.flex-row > div form.webform-submission-contact-form-form) {
  grid-template-columns: 1fr !important;
  width: 100% !important;
}
div.grid:has(div.flex.flex-row > div form.webform-submission-contact-form-form) > div.flex.flex-row {
  width: 100% !important;
  align-self: stretch !important;
}
section > .container > div.\@container.flex.flex-col:has(form.webform-submission-contact-form-form) {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

/* --- 1. De flex-row wrapper: verdeling formulier breed / contact smal ---
   KRITIEK: de row heeft 'self-start' (align-self:flex-start) van Canvas,
   waardoor hij naar inhoud krimpt en links plakt. We forceren stretch +
   volle breedte zodat hij de hele container vult (net als Bereikbaarheid). */
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) {
  align-self: stretch !important;   /* overrulet self-start */
  align-items: stretch;
  gap: 2rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Formulierkolom breder, contactkolom smaller.
   grow=1 zodat ze samen de volle rowbreedte opvullen (geen leegte rechts) */
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) > div:has(form.webform-submission-contact-form-form) {
  flex: 3 1 0 !important;   /* 3 delen */
  min-width: 0;
}
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) > div:has(a[href^="tel:"]) {
  flex: 2 1 0 !important;   /* 2 delen  -> verhouding 3:2 = 60/40 */
  min-width: 0;
}

/* --- 2. Beide kolommen als eigen witte kaart --- */
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) > div:has(form.webform-submission-contact-form-form),
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) > div:has(a[href^="tel:"]) {
  background: #ffffff !important;
  border-radius: 18px;
  border-top: 4px solid #f6bd45;
  box-shadow: 0 6px 24px rgba(8, 35, 63, 0.10);
  padding: 2rem 2.25rem 2.5rem !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* --- 3. Koppen kleiner en rustiger --- */
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) h1,
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) h2,
div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #08233f !important;
  font-size: 1.5rem !important;
  line-height: 1.25;
  font-weight: 700;
}

/* --- 4. Formulier netjes uitlijnen --- */
form.webform-submission-contact-form-form .form-item {
  margin: 0 0 1.4rem 0;
}

form.webform-submission-contact-form-form label {
  display: block;
  font-weight: 600;
  color: #08233f;             /* donkerblauwe labels op witte kaart */
  margin-bottom: 0.4rem;
}

form.webform-submission-contact-form-form input[type="text"],
form.webform-submission-contact-form-form input[type="email"],
form.webform-submission-contact-form-form input[type="tel"],
form.webform-submission-contact-form-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #c9d3dd;
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  background: #fff;
  font: inherit;
  color: #08233f;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form.webform-submission-contact-form-form input:focus,
form.webform-submission-contact-form-form textarea:focus {
  outline: none;
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}

form.webform-submission-contact-form-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Verstuur-knop */
form.webform-submission-contact-form-form .form-actions {
  margin-top: 0.5rem;
}

form.webform-submission-contact-form-form .webform-button--submit {
  background: #08233f;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 2.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

form.webform-submission-contact-form-form .webform-button--submit:hover {
  background: #d4a017;
  color: #08233f;
}

/* --- 5. Contact-buttons: vullen de kaart, tekst breekt netjes af --- */
div.flex.flex-col:has(> a[href^="tel:"]) > a {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-start;
  box-sizing: border-box;
  white-space: normal;
  text-align: left;
  word-break: break-word;
  margin-bottom: 0.75rem;
}

/* --- 5b. Haventeam-knop (tel:) opvallend blauw i.p.v. groen --- */
div.flex.flex-col:has(> a[href^="tel:"]) > a[href^="tel:"] {
  background: #185FA5 !important;
  color: #ffffff !important;
}
div.flex.flex-col:has(> a[href^="tel:"]) > a[href^="tel:"]:hover {
  background: #0C447C !important;
}

/* --- 6. Locatiekaart (canvas-island) binnen de kolom houden --- */
div.flex.flex-col:has(> a[href^="tel:"]) > canvas-island {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 1rem;
  box-sizing: border-box;
}
div.flex.flex-col:has(> a[href^="tel:"]) > canvas-island * {
  max-width: 100%;
  box-sizing: border-box;
}

/* --- 6b. Elke font-serif tekstkolom als eigen witte kaart ---
   Alleen echte 2-koloms tekstgrids ZONDER canvas-island.
   Sluit de contactpagina uit (die heeft eigen kaart-styling in contact.css). */
body:not(.path-contact) .region-content div.grid.md\:grid-cols-2:not(:has(> canvas-island)) > div.font-serif {
  background: #ffffff;
  border-radius: 18px;
  border-top: 4px solid #f6bd45;
  box-shadow: 0 6px 24px rgba(8, 35, 63, 0.10);
  padding: 2rem 2.25rem;
  box-sizing: border-box;
  margin-top: 1.5rem;
  color: #33475b;
}

/* --- 7. Mobiel: kolommen onder elkaar --- */
@media (max-width: 768px) {
  div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) {
    flex-direction: column;
    gap: 1.5rem !important;
  }
  div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) > div:has(form.webform-submission-contact-form-form),
  div.flex.flex-row:has(> div form.webform-submission-contact-form-form):has(> div a[href^="tel:"]) > div:has(a[href^="tel:"]) {
    flex: 1 1 auto !important;
  }
}

/* ============================================================
   Sub-pagina titelbalk — alle pagina's behalve home.
   ============================================================ */
.wsv-titleband { background: #08233f; }
.wsv-titleband__inner {
  padding-top: 2rem;
  padding-bottom: 0.9rem;   /* breadcrumb strak tegen de onderkant */
}

/* Titel + gouden accent */
.wsv-titleband__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.wsv-titleband__title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.9rem;
  background: #f6bd45;
  border-radius: 2px;
}

/* Breadcrumb — onder het streepje, gedempt wit, geen highlight */
.wsv-titleband__crumb {
  margin-top: 1.1rem;
  font-size: 0.9rem;
}
.wsv-titleband__crumb *,
.wsv-titleband__crumb .breadcrumb,
.wsv-titleband__crumb nav,
.wsv-titleband__crumb ol,
.wsv-titleband__crumb li,
.wsv-titleband__crumb a {
  background: transparent !important;
  padding: 0;
  margin: 0;
}
.wsv-titleband__crumb,
.wsv-titleband__crumb a,
.wsv-titleband__crumb span,
.wsv-titleband__crumb li { color: rgba(255, 255, 255, 0.65); }
.wsv-titleband__crumb a { text-decoration: none; }
.wsv-titleband__crumb a:hover { color: #fff; text-decoration: underline; }
.wsv-titleband__crumb svg { fill: currentColor; }
.wsv-titleband__crumb li:last-child,
.wsv-titleband__crumb li:last-child a { color: rgba(255, 255, 255, 0.9); }

/* Menu + dropdowns altijd bovenop; titelbalk eronder */
header[role="banner"] {
  position: relative;
  z-index: 1000;
}
.wsv-titleband {
  position: relative;
  z-index: 1;
}

/* Gaatje tussen menuknop en dropdown dichten (desktop) */
@media (min-width: 768px) {
  .wsv-main-menu__item > .wsv-dropdown {
    top: 100%;               /* geen 8px gat meer */
    padding-top: 8px;        /* de ruimte nu binnen de dropdown zelf */
  }
  /* Onzichtbare brug zodat de hover niet wegvalt onderweg */
  .wsv-main-menu__item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    display: none;
  }
  .wsv-main-menu__item:hover::after {
    display: block;
  }
}

/* Passantenpagina: ruimte rond de witte kaart (canvas-island) */

/* Witte kaart iets losser van de titelbalk/sectie erboven */
.region-content > canvas-island {
  display: block;
  margin-top: 1.5rem;
}

/* Ruimte tussen de witte kaart en de blauwe rij eronder */
.region-content > canvas-island + section {
  margin-top: 2.5rem;
}

/* ============================================================
   CONTACTPAGINA — formulier links (60%) naast contactblok (40%)
   Formulier staat buiten Canvas (Blokindeling), contactblok in Canvas.
   Alleen desktop; op mobiel vallen ze onder elkaar.
   ============================================================ */
@media (min-width: 900px) {
  /* De region als grid: 60/40, met de rest (Bereikbaarheid enz.) eronder */
  body.path-page .region-content:has(#block-wsv-engel-webform) {
    display: grid;
    grid-template-columns: 11fr 9fr;   /* 55/45 */
    grid-template-areas:
      "form contact";
    column-gap: 2rem;
    align-items: stretch;
  }

  /* Formulier = linkerkolom */
  .region-content:has(#block-wsv-engel-webform) > #block-wsv-engel-webform {
    grid-area: form;
  }

  /* Het contactblok (eerste Canvas-section) = rechterkolom */
  .region-content:has(#block-wsv-engel-webform) > section:first-of-type {
    grid-area: contact;
    margin: 0;
  }

  /* Alles ná die eerste section (Bereikbaarheid, adres) weer vollebreedte,
     onder de twee kolommen */
  .region-content:has(#block-wsv-engel-webform) > section:not(:first-of-type),
  .region-content:has(#block-wsv-engel-webform) > .region-content__rest {
    grid-column: 1 / -1;
  }
}
/* Contactformulier — kaart in huisstijl (Block Layout, buiten Canvas) */
.webform-submission-contact-form,
.contact-form-form,
.block-webform {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(8, 35, 63, 0.08);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(8, 35, 63, 0.08);
  padding: 28px 28px 24px;
  overflow: hidden;
}
.webform-submission-contact-form::before,
.contact-form-form::before,
.block-webform::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #d4a017;
}

/* ============================================================
   CONTACTPAGINA v15 — formulier & contactblok elk als eigen kaart
   Haakpunten geverifieerd uit HTML (2026-07):
     - Formulier:      #block-wsv-engel-webform
     - Canvas-contact: .region-content > section:first-of-type
   ============================================================ */

/* Beide blokken dezelfde kaart-look */
.region-content:has(#block-wsv-engel-webform) > #block-wsv-engel-webform,
.region-content:has(#block-wsv-engel-webform) > section:first-of-type {
  position: relative;
  margin-top: 2rem;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(8, 35, 63, 0.10);
  padding: 2rem 2.25rem 2.5rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Gouden accentlijn bovenaan beide kaarten */
.region-content:has(#block-wsv-engel-webform) > #block-wsv-engel-webform::before,
.region-content:has(#block-wsv-engel-webform) > section:first-of-type::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #f6bd45;
}

/* ============================================================
   CONTACTPAGINA v16 — kaarthoogte + knoppen fatsoeneren
   ============================================================ */

/* 1. Kaarten niet meer uitrekken: elk zijn eigen (natuurlijke) hoogte.
   Overrulet de align-items: stretch uit het 900px-grid. */
@media (min-width: 900px) {
  body.path-page .region-content:has(#block-wsv-engel-webform) {
    align-items: stretch !important;
  }
}

/* 2. Contactknoppen: platter, minder bol, tekst op één/twee regels.
   Overrulet de oude v14-knopregels. */
div.flex.flex-col:has(> a[href^="tel:"]) > a {
  min-height: 0 !important;
  padding: 0.7rem 1.1rem !important;
  border-radius: 10px !important;      /* nette hoek i.p.v. pil/bol */
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;      /* mag afbreken, maar netjes */
  word-break: normal !important;       /* geen woord-in-tweeën meer */
  overflow-wrap: anywhere;
  align-items: center !important;
}

/* ============================================================
   CONTACTPAGINA v17 — locatie-map (canvas-island) op volle
   kolombreedte i.p.v. self-start-krimp naar 440px
   ============================================================ */
.region-content:has(#block-wsv-engel-webform) > section:first-of-type canvas-island {
  align-self: stretch !important;   /* overrulet Tailwind self-start */
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* De iframe binnen de map mag dan ook de volle breedte pakken */
.region-content:has(#block-wsv-engel-webform) > section:first-of-type canvas-island iframe {
  width: 100% !important;
}

/* ============================================================
   CONTACTPAGINA v18 — route + map samen in één kaart (DONKER)
   Alleen het 2-koloms route+map-blok; Bereikbaarheid (grid-cols-1)
   blijft wit.
   ============================================================ */

.region-content:has(#block-wsv-engel-webform) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) {
  position: relative;
  background: #08233f;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(8, 35, 63, 0.18);
  padding: 2rem 2.25rem;
  box-sizing: border-box;
  margin-top: 1.5rem;
  align-items: start;
}

.region-content:has(#block-wsv-engel-webform) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #f6bd45;
  border-radius: 18px 18px 0 0;
}

.region-content div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) > canvas-island {
  display: block;
  width: 100%;
  align-self: stretch;
}

.region-content:has(#block-wsv-engel-webform) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) > div.font-serif,
.region-content:has(#block-wsv-engel-webform) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) > div.font-serif * {
  color: #e8eef4 !important;
}

.region-content:has(#block-wsv-engel-webform) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) > div.font-serif strong,
.region-content:has(#block-wsv-engel-webform) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) > div.font-serif b {
  color: #f6bd45 !important;
}

/* ============================================================
   CONTACTPAGINA — Contact-blok (knoppen) lichtgrijze achtergrond
   ============================================================ */
.region-content:has(#block-wsv-engel-webform) > section:first-of-type {
  background: #f4f6f8 !important;
}


/* ===== Canvas Code Components (homepage): breedte + gelijke hoogte ===== */

/* iframe binnen de waterstand-widget mag meekrimpen */
.waterstand-widget__iframe,
.waterstand-widget__frame-wrap iframe {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
}
.waterstand-widget__frame-wrap {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* <canvas-island> is een inline custom element.
   Forceer block-flex: niet breder dan de kolom, en even hoog
   als de kolom ernaast (grid trekt de islands al gelijk). */
canvas-island {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* De kaart in de island vult de volledige islandhoogte.
   min-height forceert dit — flex-grow alleen bleek niet genoeg. */
canvas-island > * {
  flex: 1 1 auto;
  min-height: 100%
}
/* ============================================================
   Vereniging-overzicht (donkere tegels): knop subtieler + strak onderaan
   ============================================================ */
.wsv-kaart--donker {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 1.4rem;
}

.wsv-kaart--donker .wsv-kaart__kolom {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.wsv-kaart--donker .wsv-kaart__acties {
  margin-top: auto;
  margin-bottom: 0;
}

.wsv-kaart--donker .wsv-kaart__knop {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-size: 0.9rem;
}