/* =============================================================================
   licht.css — de lichte laag over de bestaande WSV De Engel-stijl
   -----------------------------------------------------------------------------
   Samengesteld op 30 juli 2026. Dit is het complete bestand: alle blokken die
   we los hebben opgebouwd, in volgorde en met de correcties erin verwerkt.

   INHOUD
     1  Tokens
     2  Paginafond
     3  Kaarten wit
     4  Kennisbank-kaarten
     5  Gouden vinkjes
     6  Lees meer als tekstlink (oude aanpak, zie 9b)
     7  Knoppen
     8  Toegankelijkheid
     9  Correcties op de echte markup (fond, kaartknoppen, linkrijen)
    10  Foto-hero in de titelband
    11  Transparante header over de foto (alleen >= 981px)
    12  Icoon-badges
    13  Rechterkolom uitlijnen
    14  Tekst-met-beeldblok buiten de contactpagina
    15  Regelafstand en regellengte in tekstblokken
    16  Adverteerderspagina (/adverteerders)
    17  Mijn gegevens (userprofiel /user/<uid>)
    18  Bewerkformulier Mijn gegevens (/user/<uid>/edit)
    19  Inlogscherm 
    20  Tekstgrootte Canvas-tekstcomponent
    21  Royale padding terugschroeven op mobiel
    22  Footernavigatie verbergen op mobiel
    23  Footer disclaimerregel (kleiner)
    24  "Meer info" niet afgekapt op homepage-kaarten (mobiel)
    25  Logo groter in de header (2026-08-14)

   INSTALLATIE
     Opslaan als web/themes/custom/wsv_engel/css/licht.css en als LAATSTE regel
     opnemen onder global > css > theme in wsv_engel.libraries.yml:

       global:
         css:
           theme:
             css/style.css: {}
             css/contact.css: {}
             css/licht.css: {}
         js:
           js/dropdown.js: {}

     Daarna ddev drush cr en een harde refresh.

   TERUGDRAAIEN
     Haal die ene regel uit wsv_engel.libraries.yml en draai cr. De site is dan
     weer precies zoals hij zonder dit bestand was; er is niets in style.css of
     kennisbank.css gewijzigd.

   BENODIGDE AFBEELDING
     web/themes/custom/wsv_engel/images/hero-default.jpg
     Ontbreekt die, dan blijft de titelband egaal navy.
   ========================================================================== */


/* =============================================================================
   licht.css — lichte laag over de bestaande WSV De Engel-stijl
   -----------------------------------------------------------------------------
   Fase 1: paginafond, witte kaarten, gouden vinkjes, rustiger links/knoppen.
   Fase 2 (foto-hero) en fase 3 (icoon-badges) komen hier later bij.

   BELANGRIJK — dit bestand is een OVERLAY.
   Het wijzigt niets in style.css of kennisbank.css. Uitzetten doe je door in
   wsv_engel.libraries.yml de regel "css/licht.css: {}" weg te halen en
   `ddev drush cr` te draaien. Daarna is de site weer precies zoals hij was.

   Laad dit bestand als LAATSTE in de global-library, anders winnen de oude
   regels. Zie de instructies onderaan dit bestand.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. TOKENS
   De navy en het goud zijn ongewijzigd — alleen de fondkleuren zijn nieuw.
   Deze blok mag later verhuizen naar een eigen tokens.css.
   -------------------------------------------------------------------------- */
:root {
  --wsv-navy:        #08233f;
  --wsv-navy-mid:    #0e3559;
  --wsv-goud:        #f6bd45;
  --wsv-goud-dp:     #d4a017;

  --wsv-vlak-top:    #f8fbfd;   /* paginafond boven */
  --wsv-vlak-bot:    #e8f0f7;   /* paginafond onder */
  --wsv-kaart:       #ffffff;
  --wsv-lijn:        rgba(8, 35, 63, .10);

  --wsv-tekst:       #16293f;
  --wsv-tekst-zacht: #4d5f73;

  --wsv-radius:      16px;
  --wsv-radius-lg:   22px;
  --wsv-schaduw:     0 10px 28px rgba(8, 35, 63, .08);
  --wsv-schaduw-h:   0 18px 40px rgba(8, 35, 63, .14);

  /* De twee verlooplagen over elke titelband-foto. Eén plek om aan te draaien
     als het contrast met de witte titel ergens tegenvalt. Zie blok 10a en 10d. */
  --wsv-hero-verloop:
    linear-gradient(180deg,
      rgba(8, 35, 63, .88)     0%,
      rgba(8, 35, 63, .38)    30%,
      rgba(8, 35, 63, 0)      62%),
    linear-gradient(100deg,
      var(--wsv-navy)          0%,
      rgba(8, 35, 63, .94)    26%,
      rgba(8, 35, 63, .62)    48%,
      rgba(8, 35, 63, .18)    74%,
      rgba(8, 35, 63, .05)   100%);
}


/* -----------------------------------------------------------------------------
   2. PAGINAFOND
   Van vlak grijs naar een heel licht blauw verloop.

   CONTROLEER: als het grijs bij jou niet op <body> staat maar op een wrapper,
   pak die wrapper er dan bij in de tweede regel hieronder (DevTools: klik op
   het grijze vlak en kijk welk element de background-color heeft).
   -------------------------------------------------------------------------- */
body {
  background: linear-gradient(180deg, var(--wsv-vlak-top) 0%, var(--wsv-vlak-bot) 100%);
  background-attachment: fixed;
  color: var(--wsv-tekst);
}

main,
.region-content,
.layout-content,
.page-content {
  background: transparent !important;
}


/* -----------------------------------------------------------------------------
   3. KAARTEN — van donkerblauw naar wit
   Dit is de grootste stap. De !important is nodig omdat Canvas de CSS van het
   WsvKaart-component ná de thema-CSS inlaadt.

   WERKT DIT NIET? Dan wint het component alsnog. Knip dit hele blok (3 t/m 3d)
   dan uit dit bestand en plak het in de CSS-tab van het WsvKaart-component in
   de live-editor — daar wint het gegarandeerd. De rest van dit bestand kan
   gewoon in het thema blijven staan.
   -------------------------------------------------------------------------- */

/* 3a. de kaart zelf */
body .wsv-kaart,
body .wsv-kaart--donker {
  background: var(--wsv-kaart) !important;
  border: 1px solid var(--wsv-lijn) !important;
  border-radius: var(--wsv-radius-lg);
  box-shadow: var(--wsv-schaduw);
  color: var(--wsv-tekst) !important;
  transition: box-shadow .18s ease, transform .18s ease;
}

body .wsv-kaart:hover {
  box-shadow: var(--wsv-schaduw-h);
  transform: translateY(-2px);
}

/* 3b. alle witte tekst uit de donkere variant terugzetten */
body .wsv-kaart--donker *:not(.wsv-button):not(.wsv-button *) {
  color: inherit;
}

/* 3c. koppen en tekst binnen de kaart */
body .wsv-kaart h2,
body .wsv-kaart h3,
body .wsv-kaart h4,
body .wsv-kaart .wsv-kaart__titel {
  color: var(--wsv-navy) !important;
}

/* de kleine subkop ("Waarom kiezen voor...", "Ontdek de omgeving") */
body .wsv-kaart h3,
body .wsv-kaart h4 {
  color: var(--wsv-goud-dp) !important;
  font-size: .98rem;
}

body .wsv-kaart p,
body .wsv-kaart li {
  color: var(--wsv-tekst-zacht) !important;
  line-height: 1.62;
}

/* 3d. links binnen een kaart die géén knop zijn */
body .wsv-kaart a:not(.wsv-button):not(.button) {
  color: var(--wsv-navy) !important;
  text-decoration-color: var(--wsv-goud);
}
/* -----------------------------------------------------------------------------
   3e. KAARTOPMAAK OOK BIJ ÉÉN KOLOM
   De kaartregel in kennisbank.css (regel ~253) eist `md:grid-cols-2`. Die
   klasse staat alleen op een tweekoloms grid, dus bij één kolom verdwijnt de
   kaart. Hieronder dezelfde opmaak voor de pagina's waar we juist één kolom
   willen. Komt er een pagina bij, dan voeg je hier een body-klasse toe.
   -------------------------------------------------------------------------- */
body.pagina-contact-disclaimer .region-content div.grid > div.font-serif,
body.pagina-vereniging-plattegrond .region-content div.grid > div.cq-full {
  background: #ffffff;
  border-radius: 18px;
  border-top: 4px solid var(--wsv-goud);
  box-shadow: 0 6px 24px rgba(8, 35, 63, .10);
  padding: 2rem 2.25rem;
  box-sizing: border-box;
  margin-top: 1.5rem;
  color: #33475b;
}
/* -----------------------------------------------------------------------------
   4. KENNISBANK-KAARTEN
   Deze waren al wit, maar hebben nog de 4px gouden balk bovenaan. Die halen we
   weg zodat ze bij de nieuwe kaarten passen.

   LET OP: kennisbank.css laadt in een eigen library en kan ná dit bestand
   komen. Vandaar de body-prefix voor extra gewicht. Werkt het niet, laat het
   me weten — dan zetten we licht.css ook als dependency van die library.
   -------------------------------------------------------------------------- */
body .card {
  border: 1px solid var(--wsv-lijn);
  border-top: 1px solid var(--wsv-lijn);   /* vervangt de gouden balk */
  border-radius: var(--wsv-radius);
  box-shadow: var(--wsv-schaduw);
}


/* -----------------------------------------------------------------------------
   5. GOUDEN VINKJES IN PLAATS VAN BULLETS
   Alleen binnen kaarten, zodat gewone tekstpagina's hun normale opsommingen
   houden. Wil je ergens tóch bullets: geef die <ul> de klasse wsv-bullets.
   -------------------------------------------------------------------------- */
body .wsv-kaart ul:not(.wsv-bullets) {
  list-style: none;
  margin: 0;
  padding: 0;
}

body .wsv-kaart ul:not(.wsv-bullets) li {
  --vink-ruimte: .15rem;            /* draaiknop voor de regelafstand */
  position: relative;
  padding: var(--vink-ruimte) 0 var(--vink-ruimte) 1.8rem;
  line-height: 1.45;
}

body .wsv-kaart ul:not(.wsv-bullets) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--vink-ruimte) + .16rem);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wsv-goud) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308233f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}


/* -----------------------------------------------------------------------------
   6. "LEES MEER" ALS TEKSTLINK
   In het nieuwe ontwerp is dit geen gouden pil meer maar een platte navy link.

   Twee routes, allebei staan hieronder:
   6a. werkt als "Lees meer" een gewone link in een Text-component is.
   6b. de klasse wsv-tekstlink, voor als je 'm ergens zelf kunt toekennen.

   Is "Lees meer" bij jou een losse Button-component? Dan pakt 6a het niet.
   Stuur me in dat geval de HTML uit DevTools, dan maak ik er een selector bij.
   -------------------------------------------------------------------------- */

/* 6a. laatste losse link onderin een kaart */
body .wsv-kaart p > a:only-child,
body .wsv-tekstlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--wsv-navy) !important;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}

body .wsv-kaart p > a:only-child::after,
body .wsv-tekstlink::after {
  content: "→";
  transition: transform .15s ease;
}

body .wsv-kaart p > a:only-child:hover::after,
body .wsv-tekstlink:hover::after {
  transform: translateX(4px);
}


/* -----------------------------------------------------------------------------
   7. KNOPPEN IETS RUSTIGER
   Het goud blijft — alleen minder pil, minder schaduw. Op een wit vlak is een
   volle ronde pil nogal luid.
   -------------------------------------------------------------------------- */
body .wsv-button,
body .wsv-button--primary {
  border-radius: 10px;
  box-shadow: none;
  padding: .62rem 1.15rem;
  font-size: .95rem;
}

body .wsv-button:hover,
body .wsv-button--primary:hover {
  transform: translateY(-1px);
}


/* -----------------------------------------------------------------------------
   8. TOEGANKELIJKHEID
   Zichtbare focus op het lichte fond, en bewegingsvoorkeur respecteren.
   -------------------------------------------------------------------------- */
body a:focus-visible,
body button:focus-visible {
  outline: 3px solid var(--wsv-goud-dp);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body .wsv-kaart,
  body .wsv-button,
  body .wsv-tekstlink::after {
    transition: none !important;
    transform: none !important;
  }
}


/* =============================================================================
   9. CORRECTIES OP BASIS VAN DE ECHTE MARKUP
   Plak dit blok ONDERAAN css/licht.css, onder alles wat er al staat.
   Daarna: ddev drush cr + Ctrl+Shift+R.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   9a. PAGINAFOND
   Het witte vlak komt van .layout-container.bg-background (een Canvas-klasse),
   niet van de body. Daar zetten we het verloop nu op.
   -------------------------------------------------------------------------- */
body .layout-container,
body .layout-container.bg-background {
  background: linear-gradient(180deg, var(--wsv-vlak-top) 0%, var(--wsv-vlak-bot) 100%) !important;
}


/* -----------------------------------------------------------------------------
   9b. "LEES MEER" WORDT EEN TEKSTLINK
   De knoppen in de kaarten heten .wsv-kaart__knop en bevatten al een
   <span aria-hidden="true">→</span>. Die span animeren we; we voegen dus GEEN
   extra pijl toe met ::after.
   -------------------------------------------------------------------------- */
body a.wsv-kaart__knop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--wsv-navy) !important;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}

body a.wsv-kaart__knop span[aria-hidden="true"] {
  display: inline-block;
  transition: transform .15s ease;
}

body a.wsv-kaart__knop:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}


/* -----------------------------------------------------------------------------
   9c. UITZONDERING: DE HOOFD-CTA BLIJFT EEN GOUDEN KNOP
   "Camper? klik hier" gebruikt dezelfde klasse als "Lees meer", dus ik heb een
   onderscheid nodig. Voorlopig haak ik op de href.

   LET OP — dit is een tijdelijke oplossing. Ze is fragiel: verandert het pad
   van die pagina, dan wordt de knop stilletjes een tekstlink. In fase 3 zetten
   we hier een echte prop op het WsvKaart-component ("knopStijl": knop | link),
   dan kun je het per kaart kiezen en vervalt deze regel.

   Heb je op andere pagina's óók een kaart met een echte CTA-knop? Voeg dat pad
   dan toe aan de selector, gescheiden door een komma:
     body a.wsv-kaart__knop[href*="/campers"],
     body a.wsv-kaart__knop[href*="/lid-worden"] { ... }
   -------------------------------------------------------------------------- */
body a.wsv-kaart__knop[href*="/campers"] {
  background: var(--wsv-goud) !important;
  color: var(--wsv-navy) !important;
  padding: .62rem 1.15rem !important;
  border-radius: 10px !important;
  border: 1px solid rgba(8, 35, 63, .08) !important;
  transition: background .15s ease, transform .15s ease;
}

body a.wsv-kaart__knop[href*="/campers"]:hover {
  background: var(--wsv-goud-dp) !important;
  transform: translateY(-1px);
}


/* -----------------------------------------------------------------------------
   9d. DE VIER GOUDEN PILLEN WORDEN WITTE LINKRIJEN
   Dit zijn Canvas-standaard Buttons met Tailwind-klassen. We haken op
   .rounded-full binnen de contentregio. De pijl staat in deze markup vóór het
   label; die laten we staan en kleuren we goud — dat leest prima als marker.

   OPTIONEEL BLOK. Vind je de gouden knoppen mooier, haal 9d dan gewoon weg;
   de rest van het bestand werkt zelfstandig.

   CONTROLEER: staan er elders op de site nog Canvas-knoppen met ronde vorm die
   je wél goud wilt houden? Dan raakt deze regel die ook. Meld het even, dan
   maak ik de selector specifieker (bijvoorbeeld op body.page-node-4).
   -------------------------------------------------------------------------- */
body .region-content a.rounded-full {
  justify-content: flex-start !important;
  gap: .75rem;
  background: var(--wsv-kaart) !important;
  color: var(--wsv-navy) !important;
  border: 1px solid var(--wsv-lijn) !important;
  border-radius: 12px !important;
  box-shadow: var(--wsv-schaduw);
  padding: .85rem 1.1rem !important;
  font-weight: 600 !important;
  font-size: 1rem;
  text-align: left;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

body .region-content a.rounded-full:hover {
  background: #f6fafd !important;
  box-shadow: var(--wsv-schaduw-h);
  transform: translateY(-1px);
}

/* de pijl in die knoppen goud maken */
body .region-content a.rounded-full span[aria-hidden="true"],
body .region-content a.rounded-full svg {
  color: var(--wsv-goud-dp) !important;
  flex: 0 0 auto;
}


/* -----------------------------------------------------------------------------
   9e. GOLF BOVEN DE FOOTER
   De golf is getekend met wit als bovenkleur. Op het nieuwe lichtblauwe fond
   kan daar een witte rand zichtbaar worden.

   Zie je die rand niet? Laat dit blok dan staan, het doet geen kwaad.
   Zie je 'm wel, en werkt dit niet, dan zit de kleur in de SVG zelf — stuur me
   dan de markup van het footer-element, dan pas ik het daar aan.
   -------------------------------------------------------------------------- */
body .voet svg path[fill="#ffffff"],
body .voet svg path[fill="#fff"],
body footer svg path[fill="#ffffff"],
body footer svg path[fill="#fff"] {
  fill: var(--wsv-vlak-bot) !important;
}


/* =============================================================================
   10. FASE 2 — FOTO-HERO IN DE TITELBAND
   Plak dit blok ONDERAAN css/licht.css, onder blok 9.
   Daarna: ddev drush cr + Ctrl+Shift+R.

   Vereist één bestand: web/themes/custom/wsv_engel/images/hero-default.jpg
   Ontbreekt die foto, dan blijft de titelband gewoon egaal navy — de site
   gaat er niet van stuk.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   10a. FOTO MET NAVY-VERLOOP
   Drie achtergrondlagen: twee verlopen over de foto heen. Zie de opmerkingen
   bij de lagen hieronder.

   Het pad is relatief aan dít CSS-bestand: vanuit css/ ga je met ../ terug
   naar de themamap en dan naar images/.
   -------------------------------------------------------------------------- */
body .wsv-titleband {
  position: relative;
  background-color: var(--wsv-navy);            /* terugval als de foto mist */
  background-image:
    /* 1 en 2. de twee verlopen, als token in blok 1 */
    var(--wsv-hero-verloop),
    /* 3. de foto zelf */
    url('../images/hero-default.jpg');
  background-size: cover, cover, cover;
  /* bottom-verankering: bij een lage titelband verdwijnt de lucht en niet de haven */
  background-position: center bottom, center bottom, center bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* extra ruimte onderin, anders loopt de golf over de kruimelpad heen */
  padding-bottom: 4.5rem;
}


/* -----------------------------------------------------------------------------
   10b. DE GOLF ALS AFSLUITING
   Als ::after op de titelband, met de golf als inline-SVG. De vulkleur moet
   gelijk zijn aan de bovenkant van je paginafond (--wsv-vlak-top, #f8fbfd).

   Pas je --wsv-vlak-top ooit aan? Verander dan ook de %23f8fbfd hieronder;
   een CSS-variabele werkt niet binnen een data-URI.
   -------------------------------------------------------------------------- */
body .wsv-titleband::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 52px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 52' preserveAspectRatio='none'%3E%3Cpath d='M0,52 L0,26 C240,0 480,44 720,30 C960,16 1200,0 1440,18 L1440,52 Z' fill='%23f8fbfd'/%3E%3C/svg%3E") bottom center / 100% 52px no-repeat;
}

/* op smalle schermen een lagere golf, anders eet hij de titel op */
@media (max-width: 700px) {
  body .wsv-titleband {
    padding-bottom: 3.2rem;
  }
  body .wsv-titleband::after {
    height: 32px;
    background-size: 100% 32px;
  }
}


/* -----------------------------------------------------------------------------
   10c. ACTIEF MENU-ITEM MET GOUDEN ONDERSTREPING
   Drupal zet zelf .is-active op de link en .menu-item--active-trail op het
   <li>. Ik dek beide af, want welke van de twee bij jou aanslaat hangt van de
   menu-Twig af.

   Werkt het niet, dan gebruikt je menu andere klassen — laat het me weten.
   -------------------------------------------------------------------------- */
body .wsv-dropdown__link.is-active,
body .menu-item--active-trail > a,
body nav a.is-active {
  border-bottom: 3px solid var(--wsv-goud);
  padding-bottom: .35rem;
}

/* -----------------------------------------------------------------------------
   10d. EIGEN FOTO PER HOOFDRUBRIEK
   wsv_engel_preprocess_html zet twee klassen op de body: pagina-<hele-alias>
   en rubriek-<eerste-segment>. Hieronder haken we op de rubriek, zodat alle
   pagina's onder /passanten, /vereniging, /leden en /contact hun eigen hero
   krijgen. Pagina's daarbuiten houden hero-default.jpg uit blok 10a.

   Zet de foto's (1920x375) naast hero-default.jpg in images/. Ontbreekt een
   bestand, dan valt die pagina terug op een egale navy band — niet op
   hero-default.jpg. Haal een regel dus pas uit commentaar als de foto er is.

   background-size, -position en -repeat erven van blok 10a; alleen de foto
   wordt hier overschreven. Wijkt de uitsnede af, dan zet je er een eigen
   background-position onder, zoals bij vereniging hieronder.
   -------------------------------------------------------------------------- */

/* Vereniging — de Engelenbak */
body.rubriek-vereniging .wsv-titleband {
  background-image:
    var(--wsv-hero-verloop),
    url('../images/hero-engelenbak.jpg');
  background-position: center 35%, center 35%, center 35%;
}

body.rubriek-leden .wsv-titleband {
  background-image:
    var(--wsv-hero-verloop),
    url('../images/hero-leden.webp');
  background-position: center top, center top, center top;
}

/*
body.rubriek-passanten .wsv-titleband {
  background-image:
    var(--wsv-hero-verloop),
    url('../images/hero-passanten.webp');
}
*/

body.rubriek-contact .wsv-titleband {
  background-image:
    var(--wsv-hero-verloop),
    url('../images/hero-contact.webp');
  background-position: center center, center center, center center;
}

/*
body.rubriek-passanten .wsv-titleband {
  background-image:
    var(--wsv-hero-verloop),
    url('../images/hero-passanten.webp');
}



body.rubriek-contact .wsv-titleband {
  background-image:
    var(--wsv-hero-verloop),
    url('../images/hero-contact.webp');
}
*/


/* -----------------------------------------------------------------------------
   10e. UITZONDERINGEN PER PAGINA
   Moet ná 10d staan: body.pagina-x en body.rubriek-y hebben dezelfde
   specificiteit, dus de volgorde in dit bestand bepaalt wie wint.
   -------------------------------------------------------------------------- */

/* Historie — de haven in de jaren zestig */
body.pagina-vereniging-historie .wsv-titleband {
  background-image:
    linear-gradient(180deg, rgba(8,35,63,.88) 0%, rgba(8,35,63,.38) 30%, rgba(8,35,63,0) 62%),
    linear-gradient(100deg, var(--wsv-navy) 0%, rgba(8,35,63,.90) 26%, rgba(8,35,63,.45) 48%, rgba(8,35,63,.08) 74%, rgba(8,35,63,0) 100%),
    url('../images/hero-historie.webp');
}

/* Jeugd — optimisten op het water */
body.pagina-vereniging-jeugd .wsv-titleband {
  background-image:
    var(--wsv-hero-verloop),
    url('../images/hero-jeugd.webp');
  background-position: center center, center center, center center;
}


/* =============================================================================
   11. TRANSPARANTE HEADER OVER DE FOTO
   Plak dit blok ONDERAAN css/licht.css, onder blok 12.
   Daarna: ddev drush cr + Ctrl+Shift+R.

   De titelband wordt met een negatieve marge onder de header getrokken en
   krijgt evenveel padding terug, zodat de titel op dezelfde plek blijft staan.
   De header zelf wordt doorzichtig.

   ALLEEN OP BREDE SCHERMEN. Op mobiel blijft de balk navy: daar is de hero
   laag, de menuknop zit precies in het drukste stuk van de foto, en de
   headerhoogte verspringt zodra het logo afbreekt.
   -------------------------------------------------------------------------- */

:root {
  /* Gemeten met DevTools: header.offsetHeight = 69px.
     Verandert het logo of de menuhoogte, pas dan alleen deze waarde aan. */
  --wsv-headerhoogte: 69px;
}

@media (min-width: 981px) {

  /* Je <header> heeft geen enkele klasse, dus we haken op het element zelf.
     Heeft je site elders nog een <header> (in een artikel bijvoorbeeld) die
     hierdoor doorzichtig wordt, meld het dan — dan maken we dit specifieker. */
  body header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    position: relative;
    z-index: 100;                    /* houdt de dropdowns boven de foto */
  }

  body .wsv-titleband {
    margin-top: calc(-1 * var(--wsv-headerhoogte));
    padding-top: calc(var(--wsv-headerhoogte) + 1.5rem);
  }
}


/* =============================================================================
   12. FASE 3 — ICOON-BADGES
   Plak dit blok ONDERAAN css/licht.css, onder blok 10.
   Daarna: ddev drush cr + Ctrl+Shift+R.

   OPZET
   Elke badge is één SVG die de navy cirkel én het gouden icoon bevat, als
   achtergrond op ::before. Eén regel per kaart, geen extra elementen.

   Badges zijn OPT-IN: standaard staat ::before uit. Een kaart krijgt pas een
   icoon als je hem hieronder noemt. Kaarten die je niet noemt veranderen niet.

   HOE EEN KAART WORDT HERKEND
   Via de link die erin staat: .wsv-kaart:has(a[href*="/campers"]). Dat werkt
   zonder prop en zonder body-klasse, maar het is dezelfde broze haak als in
   blok 9c: verandert de URL, dan verdwijnt het icoon stil. Zet daarom bij elke
   regel in commentaar om welke kaart het gaat, zodat je het terugvindt.

   :has() werkt in alle huidige browsers. Een oudere browser negeert de regel
   en toont gewoon geen badge — de kaart blijft verder heel.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   12a. BASIS — vorm en plaatsing, nog zonder icoon
   De badge hangt aan de kaarttitel (h3.wsv-kaart__titel) en staat er links
   naast. De titel wordt daarvoor een flexregel; de gap bepaalt de tussenruimte.
   -------------------------------------------------------------------------- */
body .wsv-kaart__titel {
  display: flex;
  align-items: center;
  gap: .85rem;
}

body .wsv-kaart__titel::before {
  content: "";
  display: none;                    /* uit, tenzij hieronder aangezet */
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* -----------------------------------------------------------------------------
   12b. DE ICONEN
   Alle kaarten van /passanten en /vereniging zijn ingevuld. Voor een nieuwe
   kaart: open de pagina, rechtsklik op de knop in de kaart, Inspecteren, en
   neem het href over in een kopie van een van de regels hieronder.

   Wil je twee kaarten hetzelfde icoon geven, voeg de selector dan toe met een
   komma ervoor.
   -------------------------------------------------------------------------- */



/* Passanten — "Over de haven" (anker) */
body .wsv-kaart:has(a[href*="/page/12"]) .wsv-kaart__titel::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v14M5 13a7 7 0 0 0 14 0M4 13h3M17 13h3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Passanten — "Over de buurt" (heuvel en water) */
body .wsv-kaart:has(a[href*="/page/15"]) .wsv-kaart__titel::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17c1.6 0 1.6 1.2 3.2 1.2S8.8 17 10.4 17s1.6 1.2 3.2 1.2S15.2 17 16.8 17s1.6 1.2 3.2 1.2'/%3E%3Cpath d='M8 14 12 5l4 9'/%3E%3C/g%3E%3C/svg%3E");
}

/* Vereniging — "Organisatie" (mensen) */
body .wsv-kaart:has(a[href*="/vereniging/organisatie"]) .wsv-kaart__titel::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='2.6'/%3E%3Ccircle cx='17' cy='9.5' r='2'/%3E%3Cpath d='M3.5 18c0-2.8 2.4-4.4 5.5-4.4s5.5 1.6 5.5 4.4M15.5 18c0-2 1-3.2 2.8-3.2S21 16 21 18'/%3E%3C/g%3E%3C/svg%3E");
}

/* Vereniging — "Plattegrond" (kaart) */
body .wsv-kaart:has(a[href*="/vereniging/plattegrond"]) .wsv-kaart__titel::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5z'/%3E%3Cpath d='M9 4v13M15 6.5v13'/%3E%3C/g%3E%3C/svg%3E");
}

/* Vereniging — "Historie" (klok) */
body .wsv-kaart:has(a[href*="/vereniging/historie"]) .wsv-kaart__titel::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Vereniging — "Steigernieuws" (krant) */
body .wsv-kaart:has(a[href*="/vereniging/steigernieuws"]) .wsv-kaart__titel::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6z'/%3E%3Cpath d='M9 9h6M9 13h6M9 17h4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Vereniging — "Kennisbank" (boek) */
body .wsv-kaart:has(a[href*="/vereniging/kennisbank"]) .wsv-kaart__titel::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C6.5 4 9.5 4 12 5.5c2.5-1.5 5.5-1.5 8 0v13c-2.5-1.5-5.5-1.5-8 0-2.5-1.5-5.5-1.5-8 0z'/%3E%3Cpath d='M12 5.5v13'/%3E%3C/g%3E%3C/svg%3E");
}


/* -----------------------------------------------------------------------------
   12c. LINKRIJEN — badge links, pijl naar rechts
   De vier rijen uit blok 9d. De pijl staat nu vóór het label; die verhuizen we
   naar rechts en de badge komt op zijn plek. Dat is de opbouw uit je ontwerp.

   Werkt de pijlverplaatsing niet, dan zit de pijl niet in een eigen element.
   Haal dan alleen dat stukje weg; de badges werken zelfstandig.
   -------------------------------------------------------------------------- */
body .region-content a.rounded-full::before {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  order: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body .region-content a.rounded-full > span:has(svg) {
  order: 3;
  margin-left: auto;
}

/* Ligplaatsen (anker) */
body .region-content a.rounded-full[href*="/ligplaatsen"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v14M5 13a7 7 0 0 0 14 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* Staplaatsen campers (camper) */
body .region-content a.rounded-full[href*="/staplaatsen"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h11v8H3z'/%3E%3Cpath d='M14 11h4l3 3v2h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.5'/%3E%3Ccircle cx='17.5' cy='18' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Tarieven (euro) */
body .region-content a.rounded-full[href*="/tarieven"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 7.5A6 6 0 1 0 16.5 16.5'/%3E%3Cpath d='M4 11h8M4 14h8'/%3E%3C/g%3E%3C/svg%3E");
}

/* Brochure passanten (document) — elke PDF-knop krijgt dit icoon */
body .region-content a.rounded-full[href$=".pdf"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2308233f'/%3E%3Cg transform='translate(12,12)' fill='none' stroke='%23f6bd45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/g%3E%3C/svg%3E");
}


/* -----------------------------------------------------------------------------
   12d. ZELF EEN ICOON TOEVOEGEN
   Kopieer een van de regels hierboven en vervang twee dingen: het href in de
   selector, en de <path>-gegevens tussen de %3Cg%3E ... %3C/g%3E.

   De iconen komen uit de Lucide-set (lucide.dev), 24 × 24, alleen lijnen. Pak
   daar een icoon, kopieer de paden uit de SVG en vervang in de data-URI:
       <   wordt   %3C
       >   wordt   %3E
       #   wordt   %23
   Gebruik enkele aanhalingstekens binnen de URI, dubbele eromheen.

   De kleuren zitten vast in de SVG (%2308233f navy, %23f6bd45 goud). Een
   CSS-variabele werkt niet binnen een data-URI. Wijzig je ooit de huisstijl-
   kleuren, dan moeten deze hexcodes mee — zoek op %2308233f om ze te vinden.
   -------------------------------------------------------------------------- */


/* =============================================================================
   13. RECHTERKOLOM UITLIJNEN MET DE KAARTEN
   De vier linkrijen zitten in een wrapper met de Tailwind-klassen
   justify-center en self-center, waardoor het blok verticaal in het midden van
   de rasterrij hangt. In het ontwerp begint "Ligplaatsen" op dezelfde hoogte
   als "Over de haven".

   We haken op de wrapper via de knoppen die erin zitten, zodat andere kolommen
   op de site ongemoeid blijven.
   -------------------------------------------------------------------------- */
body .region-content div:has(> a.rounded-full) {
  justify-content: flex-start !important;
  align-self: stretch !important;
  padding-top: 0 !important;
}


/* =============================================================================
   14. TEKST-MET-BEELDBLOK BUITEN DE CONTACTPAGINA
   Deze vorm (tweekoloms-grid met een font-serif-kolom en een canvas-island)
   is op /contact het navy routeblok, opgemaakt in kennisbank.css. Diezelfde
   vorm komt ook elders voor, onder andere op /vereniging/historie, en kreeg
   die navy opmaak dus ten onrechte mee.

   In kennisbank.css zijn die zeven regels afgeschermd met
   .region-content:has(#block-wsv-engel-webform), zodat ze alleen nog op de
   contactpagina gelden. Hier geven we dezelfde vorm buiten die pagina de
   nieuwe lichte opmaak.

   Waarom die webform-haak en geen body-klasse: Canvas-pagina's krijgen
   allemaal dezelfde body-klassen (canvas-page path-page), dus daar valt niets
   op te onderscheiden. Het webform-blok bestaat alleen op de contactpagina.
   -------------------------------------------------------------------------- */
.region-content:not(:has(#block-wsv-engel-webform)) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) {
  background: var(--wsv-kaart);
  border: 1px solid var(--wsv-lijn);
  border-radius: var(--wsv-radius-lg);
  box-shadow: var(--wsv-schaduw);
  padding: 2rem 2.25rem;
  box-sizing: border-box;
  margin-top: 1.5rem;
  align-items: start;
}

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

/* de vetgedrukte tussenkoppen navy in plaats van goud; op wit is #f6bd45 te bleek */
.region-content:not(:has(#block-wsv-engel-webform)) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) > div.font-serif strong,
.region-content:not(:has(#block-wsv-engel-webform)) div.grid.md\:grid-cols-2:has(> div.font-serif):has(> canvas-island) > div.font-serif b {
  color: var(--wsv-navy);
}


/* =============================================================================
   15. REGELAFSTAND EN REGELLENGTE IN TEKSTBLOKKEN
   De alinea's in het grid-blok stonden op 24px regelafstand, die in de
   gewone kaarten op 25,92px (1,62 x 16). Dit trekt ze gelijk.

   De max-width is je draaiknop voor de leesbaarheid: rond de 70 a 80 tekens
   per regel leest het prettigst. Op smalle kolommen verandert er niets, want
   die halen die breedte toch niet.
   -------------------------------------------------------------------------- */
.region-content:not(:has(#block-wsv-engel-webform)) div.font-serif p {
  line-height: 1.62;
  max-width: 78ch;
}


/* ==========================================================================
   BLOK 16 — Adverteerderspagina (/adverteerders)
   Views: view-adverteerders, velden logo/title/beschrijving/website
   ========================================================================== */
.view-adverteerders {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.view-adverteerders .views-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  column-gap: 1.75rem;
  row-gap: 0.35rem;
  align-items: start;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(8, 35, 63, 0.08);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.view-adverteerders .views-field-field-logo {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.view-adverteerders .views-field-field-logo img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.view-adverteerders .views-field-title,
.view-adverteerders .views-field-field-description,
.view-adverteerders .views-field-field-url-website {
  grid-column: 2;
}
.view-adverteerders .views-field-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #08233f;
}
.view-adverteerders .views-field-field-description {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(8, 35, 63, 0.75);
}
.view-adverteerders .views-field-field-url-website {
  margin-top: 0.5rem;
  font-size: 0.88rem;
}
.view-adverteerders .views-field-field-url-website a {
  color: #08233f;
  font-weight: 600;
  text-decoration: none;
}
.view-adverteerders .views-field-field-url-website a::after {
  content: " \203A";
  color: #d4a017;
  font-weight: 700;
}
.view-adverteerders .views-field-field-url-website a:hover {
  color: #d4a017;
}
@media (max-width: 640px) {
  .view-adverteerders .views-row {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
  .view-adverteerders .views-field-field-logo {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
  }
  /* Zonder deze reset blijven de tekstvelden in kolom 2 hangen; de grid maakt
     dan een impliciete tweede kolom aan en knijpt het logo in kolom 1 dicht. */
  .view-adverteerders .views-field-title,
  .view-adverteerders .views-field-field-description,
  .view-adverteerders .views-field-field-url-website {
    grid-column: 1;
  }
}

/* ==========================================================================
   BLOK 17 — Mijn gegevens (userprofiel /user/<uid>)
   Field groups: .wsv-profiel > .wsv-profiel__blok, koppen .wsv-profiel__kop
   ========================================================================== */
.wsv-profiel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  max-width: 72rem;
  margin: 2rem auto 3rem;
}
.wsv-profiel__blok {
  background: #fff;
  border-radius: 18px;
  border-top: 4px solid var(--wsv-goud);
  box-shadow: 0 6px 18px rgba(8, 35, 63, .08);
  padding: 1.5rem 1.75rem;
}
.wsv-profiel__kop {
  font-size: 1.25rem;
  margin: 0 0 1rem;
  color: #08233f;
}
/* Haven's veldtemplate strippt alle klassen: binnen een blok staat alleen de
   h2 plus per veld een klasseloze div met twee kinderen (label, waarde).
   Vandaar dat we op de structuur haken en niet op .field__label. */
.wsv-profiel__blok > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .5rem;
  margin: 0 0 .4rem;
  font-size: .95rem;
  color: #08233f;
}
.wsv-profiel__blok > div > *:first-child {
  font-weight: 600;
  color: #33475b;
}

@media (max-width: 900px) {
  .wsv-profiel { grid-template-columns: 1fr; }
}
/* ==========================================================================
   BLOK 18 — Bewerkformulier Mijn gegevens (/user/<uid>/edit)
   Melding boven de tabs; container komt uit ledenlijst_form_user_form_alter
   ========================================================================== */
.wsv-profiel-melding {
  max-width: 60rem;
  margin: 2rem auto;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: 18px;
  border-left: 4px solid var(--wsv-goud);
  box-shadow: 0 6px 18px rgba(8, 35, 63, .08);
  font-size: .95rem;
  line-height: 1.55;
  color: #33475b;
}
.wsv-profiel-formulier input:disabled,
.wsv-profiel-formulier select:disabled,
.wsv-profiel-formulier textarea:disabled {
  background: #f3f5f7;
  color: #5b6b7c;
  cursor: not-allowed;
  opacity: 1;
}
.wsv-profiel-formulier input:disabled + label,
.wsv-profiel-formulier .form-item:has(:disabled) label {
  color: #5b6b7c;
}
.wsv-profiel-formulier .horizontal-tabs-list {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(8, 35, 63, .12);
}
.wsv-profiel-formulier .horizontal-tabs-panes {
  padding-top: 1.75rem;
}
/* ==========================================================================
   BLOK 19 — Inlogscherm (/user/login, /user/password, /user/reset/...)
   Standaard Drupal-formulierklassen; gin_login is uitgezet
   ========================================================================== */
form[id^="user-login-form"],
form[id^="user-pass"] {
  max-width: 30rem;
  margin: 2.5rem auto 3.5rem;
  padding: 2rem 2.25rem;
  background: #fff;
  border-radius: 18px;
  border-top: 4px solid var(--wsv-goud);
  box-shadow: 0 6px 18px rgba(8, 35, 63, .08);
}
form[id^="user-login-form"] .form-item,
form[id^="user-pass"] .form-item {
  margin-bottom: 1.25rem;
}
form[id^="user-login-form"] label,
form[id^="user-pass"] label {
  display: block;
  font-weight: 600;
  color: #08233f;
  margin-bottom: .35rem;
}
form[id^="user-login-form"] input.form-text,
form[id^="user-login-form"] input[type="password"],
form[id^="user-pass"] input.form-text {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid rgba(8, 35, 63, .2);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
}
form[id^="user-login-form"] .description,
form[id^="user-pass"] .description {
  font-size: .85rem;
  color: #5b6b7c;
  margin-top: .3rem;
}
form[id^="user-login-form"] .form-actions {
  margin-top: 1.5rem;
}

/* ==========================================================================
   BLOK 20 — Tekstgrootte Canvas-tekstcomponent
   De component levert Tailwind-klassen "text-base md:text-lg xl:text-xl" mee,
   waardoor lopende tekst op brede schermen naar 18-20px schaalt. Tailwind
   staat in @layer utilities; deze regel staat buiten elke laag en wint dus.
   ========================================================================== */
.region-content div.font-serif {
  font-size: 1rem;
}
/* ==========================================================================
   BLOK 21 — Royale padding terugschroeven op mobiel
   Canvas-groepen krijgen via de editor Tailwind-padding mee (p-16 = 64px
   rondom). Op een scherm van 390px slikt dat 128px op, waardoor de inhoud
   nog maar ~198px breed is — de kaart op /passanten/campers werd zo half
   zo smal als de titelband erboven. Gemeten met getBoundingClientRect:
   ouder 326px, section daarbinnen 198px.
   Dit geldt site-breed: elke groep met p-16 heeft hetzelfde probleem.
   ========================================================================== */
@media (max-width: 767px) {
  .region-content .p-16 {
    padding: 1.25rem !important;
  }
  .region-content .p-16 > * {
    width: 100%;
  }
}

/* ==========================================================================
   BLOK 22 — Footernavigatie verbergen op mobiel
   De footer heeft drie kolommen: about (logo + tagline), een navigatiekolom
   (h3 + ul.wsv-footer__links) en een contactkolom (h3 + ul.wsv-footer__contact).
   Op smalle schermen is het hamburgermenu bovenin al genoeg; de herhaling
   onderaan maakt de pagina onnodig lang. De hele kolom gaat weg, inclusief
   de kop erboven. De links in .wsv-footer__legal (Disclaimer, Privacy,
   Havenreglement) blijven staan.
   ========================================================================== */
@media (max-width: 767px) {
  .wsv-footer__col:has(> .wsv-footer__links) { display: none; }

  /* Tagline onder het logo */
  .wsv-footer__tagline { display: none; }

  /* Kop CONTACT boven de adresgegevens */
  .wsv-footer__col:has(> .wsv-footer__contact) .wsv-footer__heading { display: none; }

  /* Verenigingsnaam — staat al in het logo erboven */
  .wsv-footer__contact li:first-child { display: none; }

  /* Logo dichter op de adresgegevens: het gat was 28px kolomafstand
     plus 14px ondermarge van het logoblok. */
  .wsv-footer__cols { gap: 0.75rem; }
  .wsv-footer__brand { margin-bottom: 0; }
}
/* ==========================================================================
   BLOK 23 — Footer disclaimerregel (kleiner)
   ========================================================================== */
.wsv-footer__legal {
  font-size: .8rem;
}

/* ==========================================================================
   BLOK 24 — "Meer info →" viel weg onder de homepage-kaarten (mobiel)
   De drie tegels Leden / Passanten / Campers op de homepage krijgen hun
   "Meer info →"-regel via een ::after op de gridcel (style.css regel 709),
   niet uit de markup — in de DOM bestaat die tekst niet.
   OORZAAK: het kind binnen de gridcel draagt de Tailwind-klasse h-full
   (height: 100%) en vult daarmee de hele cel: 24px padding + 176px kind +
   24px padding = 224 van de 225px. Voor het ::after blijft niets over, dus
   de regel begint precies op de onderrand en wordt afgekapt. Op desktop
   valt dat niet op omdat de cellen daar ruimer zijn.
   FIX: op mobiel de h-full loslaten — de kaarten staan daar toch onder
   elkaar, dus gelijke hoogtes zijn niet nodig. Desktop blijft ongewijzigd.
   ========================================================================== */
@media (max-width: 767px) {
  .wsv-front-content .grid.md\:grid-cols-3 > div > .h-full {
    height: auto;
  }
  .wsv-front-content .grid.md\:grid-cols-3 > div::after {
    margin-top: 12px;
  }
}
/* BLOK 25. Logo groter in de header (2026-08-14) ----
   Haven-basisthema zet via :is(.navbar--logo, .navbar--modal-logo)
   height:auto !important en max-height:100% op .branding img.
   Beide moeten hier overschreven worden. */
body header .branding img {
  height: 70px !important;
  max-height: none !important;
  width: auto;
}
@media (max-width: 980px) {
  body header .branding img { height: 48px !important; }
}