/* BVL ledenoverzicht + detailpagina. Huisstijl: navy #213361, teal #2199b2, lichtblauw #9ed5e1, oranje #e18532, Roboto Condensed (erft van het thema). */

.bvl-leden, .bvl-detail-wrap, .bvl-page-wrap, .bvl-form-wrap { --navy:#213361; --teal:#2199b2; --teal-d:#1d879c; --lblue:#9ed5e1; --orange:#e18532; --line:#e6e6e6; --muted:#7a7f87; }
.bvl-leden *, .bvl-detail-wrap *, .bvl-page-wrap *, .bvl-form-wrap * { box-sizing:border-box; }
.bvl-detail-wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
.bvl-page-wrap { max-width:1240px; margin:0 auto; padding:34px 20px 64px; }
.bvl-page-title { margin:0 0 20px; font-size:34px; line-height:1.1; color:var(--navy); }

/* Bovenbalk: zoeken + telling */
.bvl-controls { display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; margin-bottom:18px; }
.bvl-search { position:relative; flex:1 1 320px; max-width:460px; }
.bvl-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--teal); }
.bvl-search input { width:100%; padding:12px 14px 12px 42px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:16px; background:#fff; color:var(--navy); }
.bvl-search input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(33,153,178,.14); }
.bvl-resultcount { margin:0; color:var(--muted); font-size:15px; }
.bvl-resultcount strong { color:var(--navy); font-size:18px; }

/* A-Z balk */
.bvl-az { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }
.bvl-azbtn { min-width:34px; padding:6px 9px; border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:5px; font:inherit; font-weight:700; cursor:pointer; transition:.15s; }
.bvl-azbtn:hover { border-color:var(--teal); color:var(--teal-d); }
.bvl-azbtn.is-active { background:var(--navy); border-color:var(--navy); color:#fff; }

/* Twee kolommen: filter + resultaten */
.bvl-directory { display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:start; }

/* Branchefilter. Dit is een <details>: op desktop altijd open met een gewone kop, op een
   telefoon inklapbaar. De lijst met knoppen zit in .bvl-branches-lijst, want een flexbox
   rechtstreeks op een <details> zetten breekt het open- en dichtklappen in sommige browsers. */
.bvl-branches { position:sticky; top:20px; }
.bvl-branches-lijst { display:flex; flex-direction:column; gap:4px; }
.bvl-branches-title { margin:0 0 8px; font-weight:700; color:var(--navy); text-transform:uppercase; font-size:13px; letter-spacing:.03em; }
/* Het standaard driehoekje van <details> weg, we tekenen op telefoon zelf een pijltje. */
.bvl-branches-title { list-style:none; }
.bvl-branches-title::-webkit-details-marker { display:none; }
/* Op desktop mag de kop niet inklappen, dus geen klikdoel en geen handje. */
@media (min-width:901px) {
  .bvl-branches-title { pointer-events:none; }
  .bvl-brhuidig { display:none; }
}
.bvl-brbtn { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 12px; border:0; background:transparent; color:var(--navy); border-radius:6px; font:inherit; font-size:15px; cursor:pointer; transition:.15s; }
.bvl-brbtn:hover { background:#f2f6f7; }
.bvl-brbtn.is-active { background:var(--teal); color:#fff; }
.bvl-brcount { font-size:12px; font-weight:700; background:rgba(0,0,0,.06); color:inherit; padding:1px 8px; border-radius:20px; min-width:26px; text-align:center; }
.bvl-brbtn.is-active .bvl-brcount { background:rgba(255,255,255,.25); }

/* Grid met kaartjes, nagebouwd naar het oude ledenoverzicht.

   Dat oude overzicht werd niet door Connections gemaakt maar door NextGEN Gallery Pro
   (ThumbnailGrid, caption-template-2). De maten hieronder komen letterlijk daaruit:
     logovak   180px hoog, 15px ruimte rondom, logo gecentreerd, verhouding blijft heel
     naam      18px, kapitalen, vet, #213361, gecentreerd, vak minimaal 60px hoog
     kaart     wit met alleen een zachte schaduw, GEEN rand en GEEN ronde hoeken
   Op de oude pagina waren de kaarten circa 378px breed (geen zijbalk). Hier staat de
   branchefilter ernaast, dus de kaarten zijn 289px. Het logovak blijft 180px hoog, zodat
   de logo's even groot uitvallen als vroeger. */
.bvl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:18px; }
.bvl-card { display:flex; flex-direction:column; background:#fff; box-shadow:0 0 2px 1px rgba(100,100,100,.1); text-decoration:none; color:var(--navy); transition:box-shadow .18s; }
.bvl-card:hover { box-shadow:0 6px 18px rgba(33,51,97,.13); }
.bvl-card:hover .bvl-logo img { opacity:.9; }   /* het oude overzicht deed hetzelfde */
.bvl-card[hidden] { display:none; }
.bvl-logo { height:180px; padding:15px; display:flex; align-items:center; justify-content:center; }
.bvl-logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:opacity .18s; }
/* De twee leden zonder logo krijgen hun initialen, zodat er geen gat in de rij valt. */
.bvl-logo-empty { color:var(--navy); font-weight:700; font-size:34px; letter-spacing:.04em; text-transform:uppercase; }
/* Vast minimum van 60px zoals vroeger, zodat namen van één en van twee regels
   allemaal even hoge kaarten geven. margin-top:auto duwt het vak naar onderen. */
.bvl-name { margin:0; margin-top:auto; min-height:60px; padding:5px 15px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; font-size:18px; line-height:1.3; text-transform:uppercase; color:var(--navy); }

.bvl-noresults { padding:40px 0; text-align:center; color:var(--muted); font-size:16px; }
.bvl-noresults button { margin-left:8px; padding:8px 16px; border:0; background:var(--navy); color:#fff; border-radius:6px; font:inherit; cursor:pointer; }

/* --- Detailpagina --- */
.bvl-back { display:inline-block; margin:24px 0 18px; color:var(--teal-d); text-decoration:none; font-weight:700; }
.bvl-back:hover { text-decoration:underline; }
.bvl-detail { display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; margin-bottom:60px; }
.bvl-name-lg { margin:6px 0 0; font-size:32px; line-height:1.1; color:var(--navy); }
/* Het branchelabel staat alleen nog op de detailpagina. In het overzicht is het weggelaten,
   omdat het oude ledenoverzicht daar ook alleen logo en naam toonde. */
.bvl-chip { font-size:12px; font-weight:700; color:var(--teal-d); background:rgba(33,153,178,.12); padding:3px 10px; border-radius:20px; }
.bvl-detail .bvl-chip { margin-bottom:8px; }
.bvl-bio { margin:22px 0; font-size:17px; line-height:1.7; color:#3d434b; }
.bvl-person { padding-top:14px; border-top:1px solid var(--line); font-weight:700; color:var(--navy); }
.bvl-person-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin-bottom:2px; }
.bvl-contactcard { background:#fafbfc; border:1px solid var(--line); border-radius:10px; padding:22px; }
.bvl-contactcard h3 { margin:0 0 12px; font-size:16px; text-transform:uppercase; letter-spacing:.03em; color:var(--navy); }
.bvl-contactcard .row { margin:0 0 8px; font-size:15px; color:#3d434b; }
.bvl-contactcard .row a { color:var(--teal-d); text-decoration:none; }
.bvl-contactcard .row a:hover { text-decoration:underline; }
.bvl-webbtn { display:inline-block; margin-top:10px; padding:11px 18px; background:var(--teal); color:#fff; border-radius:6px; text-decoration:none; font-weight:700; }
.bvl-webbtn:hover { background:var(--teal-d); }

/* Responsief */
@media (max-width:900px) {
  .bvl-directory { grid-template-columns:1fr; }
  .bvl-branches { position:static; margin-bottom:18px; }
  .bvl-branches-lijst { flex-flow:row wrap; margin-top:10px; }
  .bvl-brbtn { width:auto; }
  .bvl-detail { grid-template-columns:1fr; }

  /* De kop wordt hier een tikbare balk. Zonder dit staan zeventien branches onder elkaar
     en moet je ruim een scherm scrollen voordat je het eerste lid ziet. */
  .bvl-branches-title { display:flex; align-items:center; gap:10px; margin:0; padding:13px 15px;
    border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-size:13px; }
  .bvl-branches-title:hover { border-color:var(--teal); }
  /* De gekozen branche in de kop, zodat je bij een dichtgeklapte lijst nog ziet waarop
     gefilterd is. */
  .bvl-brhuidig { margin-left:auto; font-weight:700; font-size:14px; color:var(--teal-d);
    text-transform:none; letter-spacing:0; }
  /* Zelfgetekend pijltje: naar beneden als dicht, naar boven als open. */
  .bvl-branches-title::after { content:''; flex:0 0 auto; width:8px; height:8px; margin-left:4px;
    border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
    transform:rotate(45deg) translateY(-2px); transition:transform .18s; }
  .bvl-branches[open] .bvl-branches-title::after { transform:rotate(-135deg) translateY(-2px); }
}

/* --- Aanmeldformulier --- */
.bvl-form-wrap { max-width:760px; margin:0 auto; }
.bvl-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bvl-form .bvl-field { display:flex; flex-direction:column; margin-bottom:16px; }
.bvl-form label { font-weight:700; color:var(--navy); font-size:14px; margin-bottom:6px; }

/* Veldgroepen: het adres, de herhaalvelden en de radiovragen zijn een fieldset met een legend
   in plaats van een los label. Een label hoort namelijk bij precies een veld; bij een groep
   van meerdere velden is legend het juiste element, en dat is wat een schermlezer voorleest
   voordat hij de radio's opsomt.

   De browser geeft fieldset en legend van zichzelf een rand en inspringing. Hieronder zetten
   we die terug naar exact hoe een gewoon veld met label eruitzag, zodat er visueel niets
   verandert. Bewust display:block en geen flex: een legend in een flex-fieldset wordt door
   browsers apart behandeld en kan dan verspringen. */
.bvl-form fieldset.bvl-field { display:block; border:0; margin:0 0 16px; padding:0; min-width:0; }
.bvl-form fieldset.bvl-field > legend { display:block; float:none; width:100%; padding:0; margin-bottom:6px;
  font-weight:700; color:var(--navy); font-size:14px; }
.bvl-form input, .bvl-form select, .bvl-form textarea { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:16px; color:var(--navy); background:#fff; }
.bvl-form input:focus, .bvl-form select:focus, .bvl-form textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(33,153,178,.14); }
.bvl-form input[type=file] { padding:8px; background:#fafbfc; }
.bvl-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bvl-row:has(.bvl-field-sm) { grid-template-columns:1fr .6fr 1fr; }
.bvl-check { display:flex; align-items:flex-start; gap:10px; font-weight:400 !important; color:#3d434b; font-size:15px; margin:6px 0 20px; }
.bvl-check input { width:auto; margin-top:3px; }
.bvl-submit { display:inline-block; padding:14px 30px; background:var(--orange); color:#fff; border:0; border-radius:6px; font:inherit; font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.02em; cursor:pointer; transition:.15s; }
.bvl-submit:hover { filter:brightness(.94); }
.bvl-success { background:#eef8f1; border:1px solid #bfe3cb; border-radius:10px; padding:26px 28px; }
.bvl-success h2 { margin:0 0 8px; color:#1f7a44; }
.bvl-success p { margin:0; color:#2f5b41; font-size:16px; }
.bvl-formerror { background:#fdf0f0; border:1px solid #f2c4c4; border-radius:8px; padding:14px 18px; margin-bottom:22px; color:#a12b2b; }
.bvl-formerror ul { margin:6px 0 0; padding-left:20px; }
@media (max-width:640px) { .bvl-row, .bvl-row:has(.bvl-field-sm) { grid-template-columns:1fr; } }

/* Detailpagina: slogan, labels en socials */
/* Slogan mag opvallen (Irene, 01-10-2026): groter en vet, cursief blijft, met de oranje streep van BVL. */
.bvl-slogan { font-style:italic; font-weight:700; color:var(--navy); margin:10px 0 0; font-size:clamp(20px, 2.4vw, 27px); line-height:1.25; border-left:5px solid var(--orange); padding:2px 0 2px 14px; max-width:46rem; }
.bvl-lbl { color:var(--muted); font-size:12px; }
.bvl-socials a { margin-right:14px; }
.bvl-bio { margin:22px 0; font-size:17px; line-height:1.7; color:#3d434b; }

/* --- Wizard (aanmeldformulier stappen) --- */
.bvl-progress { display:flex; list-style:none; padding:0; margin:0 0 26px; gap:6px; }
.bvl-progress li { flex:1; text-align:center; font-size:13px; color:var(--muted); padding:10px 4px 0; border-top:3px solid var(--line); }
.bvl-progress li.is-active { color:var(--navy); border-top-color:var(--teal); font-weight:700; }
.bvl-progress li.is-done { color:var(--teal-d); border-top-color:var(--teal); cursor:pointer; }
.bvl-step[hidden] { display:none; }
.bvl-step-title { margin:0 0 4px; color:var(--navy); font-size:22px; }
.bvl-step-uitleg { margin:0 0 18px; color:var(--muted); font-size:14px; }
.bvl-repeat-row { margin-bottom:8px; }
.bvl-add { background:none; border:0; color:var(--teal-d); font:inherit; font-weight:700; cursor:pointer; padding:4px 0 12px; }
.bvl-add:hover { text-decoration:underline; }
.bvl-radios { display:flex; flex-direction:column; gap:8px; }
.bvl-radios-inline { flex-direction:row; gap:24px; }
.bvl-radios label { font-weight:400 !important; color:#3d434b; display:flex; align-items:center; gap:8px; margin:0; }
.bvl-radios input { width:auto; }
.bvl-toggleblok[hidden] { display:none; }
.bvl-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; }
.bvl-prev, .bvl-next { padding:12px 28px; border-radius:6px; font:inherit; font-weight:700; cursor:pointer; }
.bvl-prev { border:1px solid var(--line); background:#fff; color:var(--navy); }
.bvl-next { border:1px solid var(--navy); background:var(--navy); color:#fff; margin-left:auto; }
.bvl-next:hover { background:#1a2a52; }
.bvl-summary-list { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0 0 22px; }
.bvl-summary-list dt { color:var(--muted); font-size:14px; }
.bvl-summary-list dd { margin:0; font-weight:500; color:var(--navy); }
.bvl-summary h4 { margin:0 0 14px; color:var(--navy); }

/* --- Intro-content boven het aanmeldformulier --- */
.bvl-intro { margin-bottom:34px; }
.bvl-intro h2 { color:var(--navy); font-size:26px; margin:0 0 10px; }
.bvl-intro h3 { color:var(--navy); font-size:19px; margin:26px 0 10px; }
.bvl-intro ul { margin:0 0 12px; padding-left:22px; }
.bvl-intro li { margin-bottom:6px; line-height:1.5; }
.bvl-contributie li { font-weight:500; color:var(--navy); }
.bvl-klein { font-size:14px; color:#55595f; margin:8px 0; }
.bvl-form-kop { padding-top:24px; border-top:2px solid var(--line); margin-top:30px !important; }

/* --- Mobiel --- */
@media (max-width:640px) {
  .bvl-row, .bvl-row:has(.bvl-field-sm) { grid-template-columns:1fr; }
  .bvl-progress li { font-size:13px; padding:8px 2px 0; }
  .bvl-radios-inline { gap:16px; }
  .bvl-nav { flex-wrap:wrap; gap:10px; }
  .bvl-prev, .bvl-next { flex:1 1 auto; text-align:center; margin-left:0; }
}

/* --- Detailpagina in de opzet van de oude site --- */
.bvl-detail-wrap .bvl-chip { display:inline-block; margin:0 0 10px; }
.bvl-detail-wrap .bvl-name-lg { margin:0 0 6px; font-size:40px; line-height:1.1; color:var(--navy); }
.bvl-lid-top { display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start; margin:26px 0 40px; }
.bvl-veld { margin:0 0 8px; font-size:16px; line-height:1.45; color:#3d434b; }
.bvl-veld strong { color:var(--navy); }
.bvl-veld a { color:var(--teal-d); text-decoration:none; }
.bvl-veld a:hover { text-decoration:underline; }
.bvl-veldgroep .bvl-veld { margin-bottom:2px; }
.bvl-veldgroep { margin-bottom:8px; }
.bvl-lid-foto img { width:100%; height:auto; border-radius:4px; display:block; }

/* Social-icoontjes, rond en in de merkkleur van het netwerk */
.bvl-socials { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0; }
.bvl-social { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; color:#fff !important; font-weight:700; font-size:13px; text-decoration:none !important;
  text-transform:lowercase; transition:.15s; }
.bvl-social:hover { filter:brightness(1.12); transform:translateY(-1px); }

/* Kader "Over ons" met de tekst en het logo, zoals op de oude site */
.bvl-overons { border:1px solid var(--line); border-radius:4px; padding:34px 38px; margin-bottom:60px; background:#fff; }
.bvl-overons h2 { margin:0 0 22px; font-size:26px; text-transform:uppercase; color:var(--navy); letter-spacing:.01em; }
.bvl-overons-inhoud { display:grid; grid-template-columns:1fr 260px; gap:36px; align-items:start; }
.bvl-overons-tekst { font-size:16px; line-height:1.7; color:#3d434b; }
.bvl-overons-tekst p { margin:0 0 16px; }
.bvl-overons-tekst strong { color:var(--navy); }
.bvl-overons-logo { border:1px solid var(--line); border-radius:4px; padding:16px; background:#fff; }
.bvl-overons-logo img { width:100%; height:auto; display:block; }

@media (max-width:900px) {
  .bvl-lid-top { grid-template-columns:1fr; gap:24px; }
  .bvl-lid-foto { max-width:240px; }
  .bvl-overons { padding:24px 20px; }
  .bvl-overons-inhoud { grid-template-columns:1fr; }
  .bvl-overons-logo { max-width:220px; }
  .bvl-detail-wrap .bvl-name-lg { font-size:30px; }
}

/* Bedrijfsnaam is een h2 (net als op de live site, goed voor Google en schermlezers).
   Deze regel is specifieker dan .bvl-name hierboven en moet dus dezelfde waarden hebben,
   anders wint hij en verdwijnen de kapitalen. */
.bvl-card h2.bvl-name { margin:0; margin-top:auto; min-height:60px; padding:5px 15px; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1.3; font-weight:700; text-transform:uppercase; text-align:center; color:var(--navy); }
.bvl-intro h2 { color:var(--navy); font-size:19px; margin:26px 0 10px; }
.bvl-intro h2:first-child { margin-top:0; font-size:26px; }

/* Tapdoelen op de ledenpagina. De links naar telefoon, e-mail en website zijn 19 pixels
   hoog, en juist die tik je op een telefoon aan. De vuistregel is minstens 32.

   Alleen op smalle schermen, want op desktop maakte die extra ruimte de pagina onnodig
   luchtig. Irene gaf aan dat ze de strakkere regelafstand van de huidige site mooier vindt,
   en met muis en toetsenbord is een tapdoel geen probleem. */
@media (max-width: 899px) {
  .bvl-veld a { display:inline-block; padding:7px 0; }
  .bvl-back   { padding:6px 0; }
}

/* Het branchefilter verdween voorgoed na het draaien van het scherm. Het staat in een
   details-element dat op mobiel dicht begint; bij het draaien naar liggend bleef het dicht
   en was de kop niet meer aanklikbaar, want die was verborgen. Vanaf tabletbreedte staat
   het filter nu altijd open en is de kop weer zichtbaar. */
@media (min-width: 900px) {
  .bvl-branches > summary { display:none; }
  .bvl-branches[open] > *, .bvl-branches > * { display:block; }
}
@media (max-width: 899px) {
  .bvl-branches > summary { display:block; cursor:pointer; }
}

/* Grotere tikvlakken voor de letters op een telefoon (sitecheck 05-10-2026: 34x41 px). */
@media (max-width:700px){ .bvl-azbtn { min-width:42px; min-height:44px; } }

/* Sitecheck 06-10-2026 */
.bvl-direct-wrap { margin:0 0 22px; }
.bvl-direct { display:inline-block; background:var(--orange); color:var(--navy)!important; font-weight:700; text-transform:uppercase; letter-spacing:.04em; text-decoration:none!important; padding:13px 22px; }
.bvl-direct:hover, .bvl-direct:focus-visible { background:var(--navy); color:#fff!important; }
#aanmeldformulier { scroll-margin-top:140px; }
.bvl-card .bvl-logo { padding:22px 28px; }
.bvl-meer-wrap { text-align:center; margin:26px 0 0; }
.bvl-meer { font:inherit; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--navy); color:#fff; border:0; padding:13px 26px; cursor:pointer; }
.bvl-meer:hover, .bvl-meer:focus-visible { background:var(--orange); color:var(--navy); }
.bvl-meer[hidden] { display:none; }