/*
 * Bastabooks: thema.css
 * Alles wat het ontwerp zelf niet heeft: koppeling met de builder-klassen (mb-el), de bouwstenen
 * voor subpagina's, lopende tekst, formulieren, standaardpagina en 404. Laadt na ontwerp.css.
 * Eigenaar: het thema. Pagina-agents wijzigen dit bestand niet; eigen regels horen in
 * css/pagina-<slug>.css. Zie BOUWSTENEN.md.
 */

/* ------------------------------------------------------------------
 * 1. Koppeling met Melange Builder
 * ------------------------------------------------------------------ */
.mb-el--column,.mb-el--container,.mb-el--grid{min-width:0}
.mb-el--image{max-width:100%;height:auto}
/* De builder zet bij een grid inline repeat(n,1fr): op kleinere schermen stapelen. */
@media (max-width:900px){.mb-el--grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.mb-el--grid{grid-template-columns:minmax(0,1fr)!important}}
/* Tekstblokken met meer dan een alinea of een lijst: rustige witruimte ertussen. */
.mb-el--text>p+p,.mb-el--text>p+ul,.mb-el--text>p+ol,.mb-el--text>ul+p,.mb-el--text>ol+p{margin-top:.9em}
/* Links in gewone tekstblokken zichtbaar maken (het ontwerp zet a op inherit). */
.mb-el--text p a,.mb-el--text li a{color:var(--p);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mb-el--text p a:hover,.mb-el--text li a:hover{color:var(--pd)}
.donker .mb-el--text p a,.slot .mb-el--text p a,.basta .mb-el--text p a,.bb-paginahero .mb-el--text p a{color:var(--accent)}
/* Knoppen naast elkaar in een kolom met de klasse hero-acties (ook buiten de hero). */
.hero-acties{display:flex;flex-wrap:wrap;gap:12px}
.hero-acties.midden{justify-content:center}
/* Kopbalk op smalle telefoons: in het ontwerp is de rij (merk, demoknop, hamburger) op 393 px
   15 px te breed, waardoor de hele pagina horizontaal schuift. Iets minder ruimte en een
   compactere knop houden alles binnen beeld. */
@media (max-width:420px){
  .hdr .wrap{gap:10px}
  .hdr-acties{gap:6px}
  .hdr .btn{padding:11px 14px}
  .hdr .merk{font-size:1.1rem;gap:8px}
  .hdr .hamb{width:40px}
}
@media (max-width:380px){
  .hdr .btn{padding:10px 12px;font-size:.84rem}
}
/* Blokken die van opzij inschuiven (reveal-links, reveal-rechts) mogen de pagina niet breder
   maken voordat ze in beeld zijn. clip maakt geen scrollcontainer, dus sticky blijft werken. */
main#inhoud{overflow-x:clip}
/* Knop in het Bas-venster na een eigen vraag. */
.bas-body .bas-link{margin-top:8px;max-width:none}
.bas-body .bas-link a{color:var(--p);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------------
 * 2. Paginahero: donkere band zoals de homepage-hero, maar lager.
 *    section.bb-paginahero > container.wrap > column.bb-paginahero-tekst
 *    Variant: bb-paginahero midden (gecentreerd).
 * ------------------------------------------------------------------ */
.bb-paginahero{position:relative;background:radial-gradient(1000px 560px at 82% 0%,#1d5a6e 0%,rgba(29,90,110,0) 60%),radial-gradient(800px 500px at 6% 100%,#12404d 0%,rgba(18,64,77,0) 55%),linear-gradient(160deg,#0b161b 0%,#0f2530 55%,#0b161b 100%);color:#fff;overflow:hidden;margin-top:calc(-1 * var(--hdr-h));padding-top:var(--hdr-h)}
.bb-paginahero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000 30%,transparent 75%);pointer-events:none}
.bb-paginahero>.wrap{position:relative;padding:clamp(48px,6vw,92px) 0 clamp(52px,6vw,96px)}
.bb-paginahero-tekst{max-width:780px}
.bb-paginahero .kicker{color:var(--accent)}
.bb-paginahero h1{color:#fff;margin-bottom:18px}
.bb-paginahero h1 .regel.licht{color:#9dd6e6;font-size:.58em}
.bb-paginahero .lead{color:#c7d6dc;font-size:1.13rem}
.bb-paginahero .lead b,.bb-paginahero .lead strong{color:#fff}
.bb-paginahero .hero-acties{margin-top:28px}
.bb-paginahero.midden .bb-paginahero-tekst{margin-inline:auto;text-align:center}
.bb-paginahero.midden .lead p{margin-inline:auto}
.bb-paginahero.midden .hero-acties{justify-content:center}
/* Met een beeld of mockup ernaast: twee kolommen zoals de homepage-hero. */
.bb-paginahero>.wrap.bb-paginahero-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:960px){.bb-paginahero>.wrap.bb-paginahero-twee{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
 * 3. Rasters als klassen op een container of column (in plaats van het grid-element).
 *    Bestaande rasters uit het ontwerp: .functies (3), .stappen (3), .kop-grid (4), .prijzen (3).
 *    Extra: bb-raster-2 / bb-raster-3 / bb-raster-4, stapelen vanzelf.
 * ------------------------------------------------------------------ */
.bb-raster-2,.bb-raster-3,.bb-raster-4{display:grid;gap:clamp(18px,2.4vw,28px)}
.bb-raster-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bb-raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bb-raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bb-raster-midden{align-items:center}
@media (max-width:960px){.bb-raster-3,.bb-raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bb-raster-2,.bb-raster-3,.bb-raster-4{grid-template-columns:minmax(0,1fr)}}
.functies.twee{grid-template-columns:repeat(2,1fr)}
.functies.vier{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.functies.vier{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.functies.twee,.functies.vier{grid-template-columns:1fr}}
/* Twee kolommen tekst plus visual, zoals assistent en overstappen op de homepage. */
.bb-tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:960px){.bb-tweeluik{grid-template-columns:1fr}}

/* Sectiekop met knoppen eronder. */
.kop .hero-acties{margin-top:24px}
.kop.midden .hero-acties{justify-content:center}

/* ------------------------------------------------------------------
 * 4. Lopende tekst (juridische pagina's, standaardpagina's): .bb-tekst
 * ------------------------------------------------------------------ */
.bb-tekst-sec{padding:clamp(48px,6vw,88px) 0}
.bb-tekst{max-width:760px;margin-inline:auto;color:var(--tekst);font-size:1.02rem;line-height:1.7}
.bb-tekst>*+*{margin-top:1em}
.bb-tekst p{max-width:none}
.bb-tekst h2{font-size:clamp(1.4rem,2.2vw,1.75rem);margin-top:2em;margin-bottom:.2em}
.bb-tekst h3{font-size:1.15rem;margin-top:1.6em;margin-bottom:.1em}
.bb-tekst h4{font-size:1rem;margin-top:1.4em}
.bb-tekst h2:first-child,.bb-tekst h3:first-child{margin-top:0}
.bb-tekst ul,.bb-tekst ol{padding-left:1.4em}
.bb-tekst li+li{margin-top:.35em}
.bb-tekst li::marker{color:var(--p)}
.bb-tekst a{color:var(--p);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bb-tekst a:hover{color:var(--pd)}
.bb-tekst strong,.bb-tekst b{font-weight:700}
.bb-tekst blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;color:var(--muted)}
.bb-tekst hr{border:0;border-top:1px solid var(--rand);margin:2em 0}
.bb-tekst .bb-tabel,.bb-tekst figure.wp-block-table{overflow-x:auto;border:1px solid var(--rand);border-radius:var(--r-s)}
.bb-tekst table{width:100%;border-collapse:collapse;font-size:.95rem}
.bb-tekst th,.bb-tekst td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rand)}
.bb-tekst thead th{font-family:var(--font-d);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
.bb-tekst tr:last-child td{border-bottom:0}
.bb-tekst .bb-noot{background:var(--letl);color:#6b3a06;border-radius:var(--r-s);padding:14px 16px;font-size:.95rem}
.bb-tekst-meta{color:var(--muted);font-size:.9rem}

/* ------------------------------------------------------------------
 * 5. Formulier: zet de shortcode in een element met de klasse bb-formulier.
 *    De formulierplugin levert .melange-formulier met p.melange-formulier-veld per veld.
 * ------------------------------------------------------------------ */
.bb-formulier{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--schaduw);padding:clamp(22px,3vw,34px)}
.bb-formulier .melange-formulier{font-family:var(--font-t);color:var(--tekst)}
.bb-formulier form{display:grid;gap:0}
.bb-formulier .melange-formulier-veld{margin:0 0 18px}
.bb-formulier label,.bb-formulier .melange-formulier-veld>label{display:block;font-family:var(--font-d);font-weight:700;font-size:.92rem;color:var(--tekst);margin-bottom:7px}
.bb-formulier .melange-formulier-ster{color:var(--p)}
.bb-formulier input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),.bb-formulier select,.bb-formulier textarea,
.bb-formulier .melange-formulier-veld input[type="text"],.bb-formulier .melange-formulier-veld input[type="email"],.bb-formulier .melange-formulier-veld input[type="tel"],.bb-formulier .melange-formulier-veld select,.bb-formulier .melange-formulier-veld textarea{width:100%;box-sizing:border-box;padding:13px 16px;border:1px solid var(--rand-s);border-radius:12px;background:#fff;font-family:var(--font-t);font-size:1rem;line-height:1.4;color:var(--tekst);transition:border-color .15s,box-shadow .15s}
.bb-formulier textarea{min-height:140px;resize:vertical}
.bb-formulier input:focus,.bb-formulier select:focus,.bb-formulier textarea:focus,
.bb-formulier .melange-formulier-veld input:focus,.bb-formulier .melange-formulier-veld select:focus,.bb-formulier .melange-formulier-veld textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,180,205,.22)}
.bb-formulier input::placeholder,.bb-formulier textarea::placeholder{color:#94a1a8}
.bb-formulier input[aria-invalid="true"],.bb-formulier input:user-invalid,.bb-formulier textarea:user-invalid,.bb-formulier select:user-invalid{border-color:var(--fout)!important;box-shadow:0 0 0 3px rgba(179,38,30,.12)!important}
.bb-formulier .melange-formulier-keuze{font-family:var(--font-t)!important;font-size:.95rem!important}
.bb-formulier input[type=checkbox],.bb-formulier input[type=radio]{accent-color:var(--p);width:18px;height:18px}
.bb-formulier .melange-formulier-hulp{color:var(--muted);font-size:.85rem}
.bb-formulier .melange-formulier-ip{background:var(--bg);color:var(--muted);border-radius:10px;font-size:.85rem;padding:10px 14px;margin:4px 0 18px}
.bb-formulier .melange-formulier-knop{margin:0}
.bb-formulier button,.bb-formulier .melange-formulier-knop button[type=submit],.bb-formulier .melange-formulier-knop.melange-knop-eigen button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border:0;border-radius:999px;background:var(--p);color:#fff;font-family:var(--font-d);font-weight:700;font-size:.98rem;cursor:pointer;box-shadow:0 12px 28px rgba(29,100,120,.35);transition:transform .18s,background .18s}
.bb-formulier button:hover,.bb-formulier .melange-formulier-knop button[type=submit]:hover{background:var(--pd);transform:translateY(-2px)}
.bb-formulier .melange-formulier-melding{border-radius:12px;padding:14px 16px;font-size:.95rem;margin:0 0 18px}
.bb-formulier .melange-formulier-gelukt{background:var(--goedl);color:var(--goed);border:1px solid #bfe3d2}
.bb-formulier .melange-formulier-fout{background:var(--foutl);color:var(--fout);border:1px solid #f1c4c0}
.bb-formulier .melange-formulier-kop{font-family:var(--font-d);font-size:1.05rem;color:var(--tekst);border-bottom-color:var(--rand)}

/* ------------------------------------------------------------------
 * 6. 404 en standaardpagina
 * ------------------------------------------------------------------ */
.bb-tegels{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.bb-tegel{height:100%;background:var(--wit);border:1px solid var(--rand);border-radius:var(--r-s);padding:20px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s,border-color .2s}
.bb-tegel:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,22,27,.09);border-color:var(--rand-s)}
.bb-tegel .ico{width:40px;height:40px;border-radius:11px;background:var(--pl);color:var(--p);display:grid;place-items:center}
.bb-tegel .ico svg{width:20px;height:20px}
.bb-tegel b{font-family:var(--font-d);font-size:1rem}
.bb-tegel span:last-child{font-size:.88rem;color:var(--muted)}
@media (max-width:1100px){.bb-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.bb-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.bb-tegels{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
 * 7. Toegankelijkheid
 * ------------------------------------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ------------------------------------------------------------------
 * Aanvullingen na de eerste subpagina (hoe-het-werkt): een puntenlijst en meer alinea's
 * binnen een stap of functiekaart, en links in die kaarten.
 * ------------------------------------------------------------------ */
.stap .mb-el--text p+p,.functie .mb-el--text p+p{margin-top:12px}
.stap .punten,.functie .punten{margin-top:20px;padding-top:20px;border-top:1px solid var(--rand)}
.stap .punten ul,.functie .punten ul{gap:14px}
.stap p a,.functie p a,.kop-tegel p a{color:var(--p);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.functies .functie{display:flex;flex-direction:column}
@media (max-width:640px){.stap{padding:24px 20px}}