/* ------------------------------------------------------------------
   pages.css — gedeelde bouwstenen voor de losse page.*.php pagina's.

   Doel: elke inhoudspagina (adverteren, klant, dealers, informatie,
   404, ...) gebruikt dezelfde hero, kaarten, tabellen en formulier-
   velden in plaats van per pagina een eigen <style>-blok met floats,
   vaste breedtes en inline kleuren.

   Alles staat achter de .zjb-pg wrapper zodat de oude styles.css er
   niet doorheen valt en pagina's die nog niet zijn omgebouwd niets
   merken van dit bestand.
   ------------------------------------------------------------------ */

.zjb-pg{
	--pg-brand:#39679f;
	--pg-brand-dark:#2b4f7d;
	--pg-brand-zacht:#eef3fa;
	--pg-ink:#0f172a;
	--pg-muted:#64748b;
	--pg-line:#e6eaf0;
	--pg-soft:#f6f8fb;
	--pg-r:8px;
	--pg-r-klein:6px;
	--pg-schaduw:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.05);

	box-sizing:border-box;
	max-width:1180px;
	margin:0 auto;
	padding:0 16px 56px;
	color:var(--pg-ink);
	font-size:15px;
	line-height:1.6;
	overflow-x:clip;
}
.zjb-pg *,
.zjb-pg *:before,
.zjb-pg *:after{ box-sizing:border-box }

.zjb-pg img{ max-width:100%; height:auto }

/* de blokken hieronder zetten display expliciet (flex/grid), dus hidden
   moet harder zijn dan die regels om te blijven werken */
.zjb-pg [hidden]{ display:none !important }

.zjb-pg h1,.zjb-pg h2,.zjb-pg h3,.zjb-pg h4{
	margin:0; color:var(--pg-ink); line-height:1.25; letter-spacing:-.01em;
	font-family:inherit; font-weight:700; text-transform:none;
}
.zjb-pg p{ margin:0 0 12px }
.zjb-pg p:last-child{ margin-bottom:0 }
.zjb-pg a{ color:var(--pg-brand) }

.zjb-pg__smal{ max-width:820px }

/* ---- hero ------------------------------------------------------- */

.pg-hero{
	position:relative; overflow:hidden;
	margin:18px 0 28px; padding:38px 32px;
	border:1px solid var(--pg-line); border-radius:var(--pg-r);
	background:linear-gradient(160deg,#fbfcfe 0%,var(--pg-brand-zacht) 100%);
}
.pg-hero:before{
	content:""; position:absolute; z-index:0; top:-110px; right:-90px;
	width:320px; height:320px; border-radius:50%;
	background:radial-gradient(circle,rgba(57,103,159,.16),rgba(57,103,159,0) 70%);
	pointer-events:none;
}
.pg-hero>*{ position:relative; z-index:1 }
.pg-hero__badge{
	display:inline-flex; align-items:center; gap:7px;
	margin-bottom:14px; padding:5px 11px;
	background:#fff; border:1px solid var(--pg-line); border-radius:999px;
	font-size:12.5px; font-weight:600; color:var(--pg-brand);
}
.pg-hero h1{ font-size:clamp(24px,3.4vw,34px) }
.pg-hero__tekst{ max-width:640px; margin:12px 0 0; font-size:16px; color:var(--pg-muted) }
.pg-hero__acties{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }

/* ---- knoppen ---------------------------------------------------- */

.pg-knop{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	min-height:42px; padding:0 18px;
	border:1px solid transparent; border-radius:var(--pg-r-klein);
	font:inherit; font-size:14.5px; font-weight:600; text-decoration:none;
	cursor:pointer; transition:background-color .15s, border-color .15s, color .15s;
}
.pg-knop--primair{ background:var(--pg-brand); color:#fff }
.zjb-pg a.pg-knop--primair{ color:#fff }
.pg-knop--primair:hover{ background:var(--pg-brand-dark) }
.pg-knop--rand{ background:#fff; border-color:var(--pg-line); color:var(--pg-ink) }
.zjb-pg a.pg-knop--rand{ color:var(--pg-ink) }
.pg-knop--rand:hover{ border-color:#c3d3e6; background:var(--pg-soft) }
.pg-knop--vol{ width:100% }
.pg-knop:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(57,103,159,.28) }

/* ---- secties ---------------------------------------------------- */

.pg-sectie{ margin:34px 0 0 }
.pg-sectie__kop{ margin-bottom:16px }
.pg-sectie__kop h2{ font-size:clamp(19px,2.4vw,23px) }
.pg-sectie__kop p{ margin:6px 0 0; color:var(--pg-muted) }

/* ---- kaarten + raster ------------------------------------------- */

.pg-raster{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.pg-raster--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.pg-raster--4{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }

.pg-kaart{
	background:#fff; border:1px solid var(--pg-line); border-radius:var(--pg-r);
	padding:20px; box-shadow:var(--pg-schaduw);
}
.pg-kaart--vlak{ box-shadow:none }
.pg-kaart--zacht{ background:var(--pg-soft); box-shadow:none }
.pg-kaart h3{ font-size:16.5px }
.pg-kaart p{ margin:8px 0 0; color:var(--pg-muted); font-size:14.5px }

.zjb-pg a.pg-kaart{ display:block; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s }
.zjb-pg a.pg-kaart:hover{ border-color:#c3d3e6; transform:translateY(-2px) }

.pg-ico{
	display:inline-flex; align-items:center; justify-content:center;
	width:38px; height:38px; margin-bottom:12px;
	border-radius:var(--pg-r-klein);
	background:var(--pg-brand-zacht); color:var(--pg-brand);
}
.pg-ico svg{ width:20px; height:20px }

/* genummerde stappen */
.pg-stap{ counter-increment:pgstap; position:relative; padding-left:52px }
.pg-stappen{ counter-reset:pgstap }
.pg-stap:before{
	content:counter(pgstap); position:absolute; left:20px; top:20px;
	display:flex; align-items:center; justify-content:center;
	width:26px; height:26px; border-radius:50%;
	background:var(--pg-brand); color:#fff; font-size:13px; font-weight:700;
}

/* ---- lijst met vinkjes ------------------------------------------ */

.pg-lijst{ margin:0; padding:0; list-style:none; display:grid; gap:10px }
.pg-lijst li{ position:relative; padding-left:26px; font-size:14.5px }
.pg-lijst li:before{
	content:""; position:absolute; left:0; top:5px; width:16px; height:16px;
	border-radius:50%; background:var(--pg-brand-zacht);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339679f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-size:11px; background-position:center; background-repeat:no-repeat;
}

/* ---- formuliervelden -------------------------------------------- */

.pg-veld{ display:block; margin-bottom:14px }
.pg-veld>span{ display:block; margin-bottom:5px; font-size:13px; font-weight:600; color:var(--pg-ink) }
.pg-veld__hint{ display:block; margin-top:5px; font-size:12.5px; color:var(--pg-muted); font-weight:400 }

.zjb-pg input[type=text],
.zjb-pg input[type=email],
.zjb-pg input[type=tel],
.zjb-pg input[type=number],
.zjb-pg input[type=password],
.zjb-pg input[type=date],
.zjb-pg input[type=search],
.zjb-pg select,
.zjb-pg textarea{
	display:block; width:100%; min-height:42px; padding:9px 12px;
	background:#fff; border:1px solid var(--pg-line); border-radius:var(--pg-r-klein);
	font:inherit; font-size:15px; color:var(--pg-ink);
	transition:border-color .15s, box-shadow .15s;
}
.zjb-pg textarea{ min-height:120px; resize:vertical; line-height:1.5 }
.zjb-pg input:focus,
.zjb-pg select:focus,
.zjb-pg textarea:focus{
	outline:0; border-color:var(--pg-brand); box-shadow:0 0 0 3px rgba(57,103,159,.16);
}
.pg-veld--fout input,
.pg-veld--fout textarea{ border-color:#dc2626 }

.pg-velden{ display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.pg-velden--vol{ grid-template-columns:1fr }
.pg-veld--breed{ grid-column:1/-1 }

/* honeypot: onzichtbaar voor mensen, wel in de DOM voor bots */
.pg-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---- meldingen -------------------------------------------------- */

.pg-melding{
	display:flex; gap:10px; align-items:flex-start;
	margin:0 0 18px; padding:13px 15px;
	border:1px solid var(--pg-line); border-left-width:3px; border-radius:var(--pg-r-klein);
	background:var(--pg-soft); font-size:14.5px;
}
.pg-melding--goed{ border-left-color:#16a34a; background:#f0fdf4; border-color:#bbf7d0 }
.pg-melding--fout{ border-left-color:#dc2626; background:#fef2f2; border-color:#fecaca }
.pg-melding--info{ border-left-color:var(--pg-brand); background:var(--pg-brand-zacht); border-color:#d6e3f3 }

/* ---- tabel ------------------------------------------------------ */

.pg-tabelwrap{ overflow-x:auto; border:1px solid var(--pg-line); border-radius:var(--pg-r); background:#fff }
.pg-tabel{ width:100%; border-collapse:collapse; font-size:14.5px }
.pg-tabel th,
.pg-tabel td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--pg-line); vertical-align:middle }
.pg-tabel th{
	background:var(--pg-soft); font-size:13px; font-weight:700;
	letter-spacing:0; color:var(--pg-muted); white-space:nowrap;
}
.pg-tabel tr:last-child td{ border-bottom:0 }
.pg-tabel tbody tr:hover{ background:var(--pg-soft) }
.pg-tabel__rechts{ text-align:right }

/* ---- definitielijst (spec-achtige gegevens) --------------------- */

.pg-gegevens{ margin:0; display:grid; gap:0 18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.pg-gegevens div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--pg-line) }
.pg-gegevens dt{ color:var(--pg-muted); font-size:14px }
.pg-gegevens dd{ margin:0; font-weight:600; font-size:14px; text-align:right }

/* ---- FAQ / uitklap ---------------------------------------------- */

.pg-faq{ display:grid; gap:8px }
.pg-faq details{
	background:#fff; border:1px solid var(--pg-line); border-radius:var(--pg-r-klein); overflow:hidden;
}
.pg-faq summary{
	list-style:none; cursor:pointer; padding:14px 44px 14px 16px; position:relative;
	font-size:15px; font-weight:600;
}
.pg-faq summary::-webkit-details-marker{ display:none }
.pg-faq summary:after{
	content:""; position:absolute; right:16px; top:50%; width:9px; height:9px;
	margin-top:-6px; border-right:2px solid var(--pg-muted); border-bottom:2px solid var(--pg-muted);
	transform:rotate(45deg); transition:transform .2s;
}
.pg-faq details[open] summary:after{ transform:rotate(-135deg); margin-top:-2px }
.pg-faq details>div{ padding:0 16px 15px; color:var(--pg-muted); font-size:14.5px }

/* ---- vrije tekst uit het CMS ------------------------------------
   Deze inhoud komt uit de content-tabel en heeft eigen h2/ul/p/img,
   dus die krijgen hier leesbare typografie in plaats van de defaults. */

.pg-tekst{ font-size:15.5px; line-height:1.7; color:#334155 }
.pg-tekst>*:first-child{ margin-top:0 }
.pg-tekst>*:last-child{ margin-bottom:0 }
.pg-tekst h1{ font-size:24px; margin:28px 0 12px }
.pg-tekst h2{ font-size:20px; margin:28px 0 10px }
.pg-tekst h3{ font-size:17px; margin:22px 0 8px }
.pg-tekst p{ margin:0 0 14px }
.pg-tekst ul,.pg-tekst ol{ margin:0 0 16px; padding-left:22px }
.pg-tekst li{ margin-bottom:7px }
.pg-tekst a{ color:var(--pg-brand); text-decoration:underline; text-underline-offset:2px }
.pg-tekst img{ border-radius:var(--pg-r-klein); margin:8px 0 }
.pg-tekst hr{ border:0; border-top:1px solid var(--pg-line); margin:24px 0 }
.pg-tekst table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14.5px }
.pg-tekst th,.pg-tekst td{ padding:9px 12px; border:1px solid var(--pg-line); text-align:left }
.pg-tekst blockquote{
	margin:0 0 16px; padding:12px 16px; border-left:3px solid var(--pg-brand);
	background:var(--pg-soft); border-radius:0 var(--pg-r-klein) var(--pg-r-klein) 0; color:var(--pg-muted);
}

/* ---- twee kolommen (inhoud + zijbalk) --------------------------- */

.pg-kolommen{ display:grid; gap:20px; align-items:start }
@media (min-width:900px){
	.pg-kolommen{ grid-template-columns:minmax(0,1fr) 340px }
	.pg-kolommen--links{ grid-template-columns:300px minmax(0,1fr) }
	.pg-kolommen__zij{ position:sticky; top:16px }
}

/* ---- contactblok ------------------------------------------------ */

.pg-contact{ display:flex; gap:18px; align-items:center; flex-wrap:wrap }
.pg-contact__foto{
	width:96px; height:96px; flex:0 0 auto; border-radius:var(--pg-r);
	object-fit:cover; background:var(--pg-soft);
}
.pg-contact__naam{ font-size:17px; font-weight:700; color:var(--pg-brand) }
.pg-contact__rol{ margin:2px 0 12px; font-size:13.5px; color:var(--pg-muted) }
.pg-contact__knoppen{ display:grid; gap:8px; grid-template-columns:1fr }
@media (min-width:560px){ .pg-contact__knoppen{ grid-template-columns:1fr 1fr } }

/* ---- mobiel ----------------------------------------------------- */

@media (max-width:640px){
	.zjb-pg{ padding-bottom:40px; font-size:14.5px }
	.pg-hero{ margin:12px 0 22px; padding:26px 20px }
	.pg-hero__acties .pg-knop{ width:100% }
	.pg-kaart{ padding:16px }
	.pg-stap{ padding-left:46px }
	.pg-stap:before{ left:16px; top:16px }
	.pg-sectie{ margin-top:26px }
	.pg-gegevens dd{ text-align:right }
}

/* ------------------------------------------------------------------
   Nadruk op één woord in een kop

   zjbKop() zet het tweede woord in <em class="pg-nadruk">. Dat woord
   krijgt een cursieve schreefletter met een blauw verloop, zodat een
   kop een accent heeft zonder dat er een tweede kleur of gewicht bij
   komt. Alleen decoratief: de tekst zelf blijft gewoon leesbaar en
   selecteerbaar.
   ------------------------------------------------------------------ */
.pg-nadruk{
	font-family:Georgia,"Times New Roman",serif;
	font-style:italic;
	font-weight:400;
	letter-spacing:-.01em;
	padding-right:.06em;              /* cursief loopt anders tegen het volgende woord */
	background:linear-gradient(100deg,#4d86cc 0%,#39679f 45%,#2b4f7d 100%);
	-webkit-background-clip:text;
	        background-clip:text;
	color:transparent;
	-webkit-text-fill-color:transparent;
}

/* Verloop-tekst valt weg als de browser background-clip:text niet kent;
   dan gewoon een blauwe cursieve letter. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
	.pg-nadruk{ background:none; color:var(--pg-brand); -webkit-text-fill-color:currentColor }
}

/* op een donkere ondergrond een lichter verloop */
.pg-nadruk--licht{
	background:linear-gradient(100deg,#9dc2f0 0%,#6ea3e0 50%,#4d86cc 100%);
	-webkit-background-clip:text; background-clip:text;
}