/* =====================================================================
   Autobedrijf van Dooren — thema-stijl
   Klassieke vormgeving naar het origineel, maar volledig responsive.

   Kenmerken van het origineel die hier zijn overgenomen:
   - Vaste, schermvullende achtergrondfoto (gevel "DOOREN")
   - Gecentreerde witte content-kolom (940px) erbovenop
   - Tekstmenu: witte blokjes, grijze tekst, marineblauw bij hover/actief
   - News Cycle (uppercase) koppen in staalblauw, Arial bodytekst
   - Voorraad als lijst, detail met fotostrip, grijze footerbalk
   ===================================================================== */

/* ---------- Lettertypen (lokaal gehost) ---------- */
@font-face{
	font-family:"News Cycle";
	src:url("../fonts/newscycle-regular.woff2") format("woff2"),
		url("../fonts/newscycle-regular.woff") format("woff");
	font-weight:400 700;font-style:normal;font-display:swap;
}

/* ---------- Ontwerp-tokens ---------- */
:root{
	--vd-navy:#003366;          /* primair marineblauw (menu actief, links) */
	--vd-navy-dark:#00284f;
	--vd-steel:#2e4a66;         /* koppen h2 */
	--vd-steel-line:#335B84;    /* lijn boven footer */
	--vd-text:#383838;          /* bodytekst */
	--vd-muted:#666666;
	--vd-menu-text:#7c7c7c;     /* inactieve menu-tekst */
	--vd-footer-bg:#C1C1C1;     /* grijze footerbalk */
	--vd-line:#dcdcdc;
	--vd-line-soft:#e8e8e8;
	--vd-content-bg:#ffffff;
	--vd-sold:#b11616;          /* "VERKOCHT" */
	--vd-content-w:940px;
	--vd-pad:47px;

	--vd-font-head:"News Cycle","Arial Narrow",Arial,sans-serif;
	--vd-font-body:Arial,Helvetica,sans-serif;
	--vd-font-menu:Tahoma,Arial,sans-serif;
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family:var(--vd-font-body);
	font-size:12px;
	line-height:18px;
	color:var(--vd-text);
	background:#1c1c1c;
}
img{border:0;max-width:100%;height:auto;vertical-align:middle}
a{color:var(--vd-navy);text-decoration:underline}
a:hover{color:var(--vd-navy);text-decoration:underline}
p{margin:0 0 15px}
ul{margin:0 0 20px;padding:0 0 0 20px;list-style:inside disc}
h1,h2,h3,h4{margin:0;padding:0;font-weight:400;font-family:var(--vd-font-head)}

/* Koppen in de huisstijl */
h1{font-size:24px;line-height:1.2;text-transform:uppercase;color:var(--vd-steel);margin:0 0 14px}
h2{font-size:18px;line-height:1.25;text-transform:uppercase;color:var(--vd-steel);margin:0 0 8px;letter-spacing:.3px}
h3{font-size:16px;line-height:1.25;text-transform:uppercase;color:var(--vd-text);margin:0 0 12px;letter-spacing:.3px}

/* ---------- Vaste achtergrondfoto ---------- */
.vd-bg-fixed{
	position:fixed;inset:0;z-index:-1;
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
	filter:grayscale(100%);
}
.vd-bg-fixed::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.35)}

/* ---------- Gecentreerde content-kolom ---------- */
.vd-page{
	width:var(--vd-content-w);
	max-width:100%;
	margin:0 auto;
	background:var(--vd-content-bg);
	box-shadow:0 0 28px rgba(0,0,0,.45);
	min-height:100vh;
	display:flex;flex-direction:column;
}
.vd-inner{padding:0 var(--vd-pad);flex:1 0 auto}

/* ===================================================================
   HEADER
   =================================================================== */
.vd-header{
	display:flex;align-items:flex-start;justify-content:space-between;
	gap:20px;padding:24px 20px 0;min-height:120px;position:relative;
}
.vd-logo{display:block}
.vd-logo img{max-height:84px;width:auto}
.vd-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.vd-keurmerken img{max-height:46px;width:auto}

/* Menu */
.vd-menu{display:flex;align-items:flex-start}
.vd-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1px}
.vd-menu li{margin:0;padding:0}
.vd-menu a{
	display:block;
	font-family:var(--vd-font-menu);
	font-size:14px;line-height:1;
	text-transform:uppercase;
	text-decoration:none;
	color:var(--vd-menu-text);
	background:#fff;
	padding:9px 18px;
	white-space:nowrap;
	transition:background .15s,color .15s;
}
.vd-menu a:hover,
.vd-menu a.menuactive,
.vd-menu a.active,
.vd-menu .current-menu-item>a,
.vd-menu .current_page_item>a{
	background:var(--vd-navy);color:#fff;
}

/* Hamburger (mobiel) */
.vd-menu-toggle{
	display:none;border:1px solid var(--vd-line);background:#fff;
	color:var(--vd-navy);font-family:var(--vd-font-menu);
	text-transform:uppercase;font-size:13px;letter-spacing:.5px;
	padding:9px 14px;cursor:pointer;align-items:center;gap:8px;border-radius:2px;
}
.vd-menu-toggle .bar{display:inline-block;width:18px;height:2px;background:var(--vd-navy);position:relative}
.vd-menu-toggle .bar::before,.vd-menu-toggle .bar::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--vd-navy)}
.vd-menu-toggle .bar::before{top:-5px}.vd-menu-toggle .bar::after{top:5px}

.vd-header-sep{height:1px;background:var(--vd-steel-line);margin:18px 10px 0}

/* ===================================================================
   HOME — banner (slider) + navigator
   =================================================================== */
.vd-banner{
	margin:14px 10px 0;background:#fff;border:1px solid var(--vd-line-soft);
	display:flex;overflow:hidden;
}
.vd-banner-stage{position:relative;flex:1 1 auto;min-width:0;background:#000}
.vd-banner-stage .vd-slide{
	display:none;position:relative;width:100%;height:340px;
}
.vd-banner-stage .vd-slide.active{display:block}
.vd-banner-stage .vd-slide img{width:100%;height:100%;object-fit:cover;display:block}
.vd-banner-stage .vd-slide-cap{
	position:absolute;left:0;bottom:0;right:0;
	background:rgba(0,32,64,.78);color:#fff;padding:10px 16px;
}
.vd-banner-stage .vd-slide-cap h3{color:#fff;margin:0 0 3px;font-size:16px}
.vd-banner-stage .vd-slide-cap a{color:#fff;text-decoration:underline;font-family:var(--vd-font-body);text-transform:none;font-size:12px}

.vd-banner-nav{
	flex:0 0 300px;max-width:300px;overflow-y:auto;max-height:340px;
	border-left:1px solid var(--vd-line-soft);background:#fff;
}
.vd-banner-nav button{
	display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--vd-line-soft);
	background:#fff;cursor:pointer;padding:10px 14px;font-family:var(--vd-font-body);
}
.vd-banner-nav button:hover,.vd-banner-nav button.active{background:#eef2f7}
.vd-banner-nav h4{font-family:var(--vd-font-head);text-transform:uppercase;color:var(--vd-navy);font-size:14px;margin:0 0 4px}
.vd-banner-nav p{color:var(--vd-text);font-size:11px;line-height:15px;margin:0}
.vd-banner-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none;padding:0 8px}
.vd-banner-arrows button{pointer-events:auto;border:0;background:rgba(0,0,0,.4);color:#fff;width:34px;height:44px;cursor:pointer;font-size:18px;line-height:1}
.vd-banner-arrows button:hover{background:var(--vd-navy)}

/* ===================================================================
   CONTENT-LAYOUT (twee kolommen op home, één kolom op subpagina's)
   =================================================================== */
.vd-content{padding:26px 0 10px}
.vd-cols{display:flex;gap:36px;align-items:flex-start}
.vd-col-left{flex:1 1 auto;min-width:0}
.vd-col-right{flex:0 0 280px;max-width:280px}
.vd-col-right img{display:block;width:100%;height:auto;margin:0 0 12px;border:4px solid #fff;outline:1px solid var(--vd-line-soft)}

.vd-full{padding:24px 0 10px}

.vd-section-gap{margin-top:26px}
.vd-list-clean{list-style:inside disc;padding-left:4px}
.vd-list-clean li{margin:0 0 4px}

/* ===================================================================
   BREADCRUMB
   =================================================================== */
.vd-breadcrumb{padding:14px 0 0}
.vd-breadcrumb ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--vd-muted)}
.vd-breadcrumb li{margin:0}
.vd-breadcrumb a{color:var(--vd-muted);text-decoration:none}
.vd-breadcrumb a:hover{color:var(--vd-navy);text-decoration:underline}

/* ===================================================================
   VOORRAAD — lijstweergave
   =================================================================== */
.vd-intro{margin:0 0 18px}
.vd-toolbar{
	background:#f4f6f9;border:1px solid var(--vd-line-soft);padding:12px 14px;margin:0 0 22px;
	display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
}
.vd-toolbar .fld{display:flex;flex-direction:column;gap:3px}
.vd-toolbar label{font-size:11px;color:var(--vd-muted);text-transform:uppercase;letter-spacing:.4px}
.vd-toolbar select{font-family:var(--vd-font-body);font-size:12px;padding:6px 8px;border:1px solid var(--vd-line);background:#fff;min-width:150px}
.vd-btn{
	display:inline-block;font-family:var(--vd-font-menu);text-transform:uppercase;font-size:12px;
	letter-spacing:.4px;background:var(--vd-navy);color:#fff;border:0;padding:8px 16px;cursor:pointer;
	text-decoration:none;line-height:1.4;
}
.vd-btn:hover{background:var(--vd-navy-dark);color:#fff;text-decoration:none}
.vd-btn-ghost{background:#fff;color:var(--vd-navy);border:1px solid var(--vd-line)}
.vd-btn-ghost:hover{background:#eef2f7;color:var(--vd-navy)}

.vd-result-count{font-size:11px;color:var(--vd-muted);margin:0 0 14px}

.vd-result{
	display:flex;gap:18px;border:1px solid var(--vd-line-soft);background:#fff;
	padding:14px;margin:0 0 14px;align-items:flex-start;
}
.vd-result:hover{border-color:#c7d2de;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.vd-result-thumb{flex:0 0 200px;max-width:200px;position:relative;display:block}
.vd-result-thumb img{display:block;width:100%;height:auto;border:1px solid var(--vd-line-soft)}
.vd-result-thumb .vd-noimg{display:block;width:100%;height:140px;background:#eef1f5;display:flex;align-items:center;justify-content:center;color:#aeb8c4;font-size:30px}
.vd-result-body{flex:1 1 auto;min-width:0}
.vd-result-title{font-family:var(--vd-font-head);text-transform:uppercase;font-size:18px;color:var(--vd-steel);margin:0 0 6px}
.vd-result-title a{color:var(--vd-steel);text-decoration:none}
.vd-result-title a:hover{color:var(--vd-navy);text-decoration:underline}
.vd-result-desc{font-size:12px;line-height:18px;color:var(--vd-text);margin:0 0 10px}
.vd-result-meta{font-size:11px;color:var(--vd-muted);margin:0 0 8px}
.vd-result-price{font-family:var(--vd-font-head);font-size:20px;color:var(--vd-navy)}
.vd-result-price.op-aanvraag{font-size:15px;color:var(--vd-steel)}
.vd-sold{
	display:inline-block;background:var(--vd-sold);color:#fff;font-family:var(--vd-font-head);
	text-transform:uppercase;letter-spacing:1px;font-size:16px;padding:4px 18px;
}
.vd-sold-overlay{
	position:absolute;top:10px;left:-4px;background:var(--vd-sold);color:#fff;
	font-family:var(--vd-font-head);text-transform:uppercase;letter-spacing:1px;
	font-size:13px;padding:4px 14px;box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* ===================================================================
   DETAILPAGINA
   =================================================================== */
.vd-detail{display:flex;gap:30px;align-items:flex-start}
.vd-detail-media{flex:1 1 58%;min-width:0}
.vd-detail-main{position:relative;border:1px solid var(--vd-line-soft);background:#f6f8fa;cursor:zoom-in}
.vd-detail-main img{display:block;width:100%;height:auto}
.vd-detail-main .vd-zoom{position:absolute;right:10px;bottom:10px;background:rgba(0,32,64,.75);color:#fff;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:16px}
.vd-detail-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.vd-detail-thumbs button{border:1px solid var(--vd-line-soft);background:#fff;padding:0;cursor:pointer;width:88px;height:64px;overflow:hidden}
.vd-detail-thumbs button.active{border-color:var(--vd-navy);box-shadow:0 0 0 1px var(--vd-navy)}
.vd-detail-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.vd-detail-info{flex:0 0 38%;max-width:38%}
.vd-detail-info h1{margin:0 0 10px}
.vd-detail-price{font-family:var(--vd-font-head);font-size:26px;color:var(--vd-navy);margin:0 0 14px}
.vd-detail-price.op-aanvraag{font-size:18px;color:var(--vd-steel)}

.vd-specs{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:12px}
.vd-specs th,.vd-specs td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--vd-line-soft);vertical-align:top}
.vd-specs th{font-family:var(--vd-font-body);font-weight:bold;color:var(--vd-steel);width:46%;background:#f6f8fa}
.vd-specs tr:last-child th,.vd-specs tr:last-child td{border-bottom:0}

.vd-contactbox{border:1px solid var(--vd-line-soft);background:#f4f6f9;padding:16px;margin:0 0 16px}
.vd-contactbox h3{margin:0 0 10px;color:var(--vd-steel)}
.vd-contactbox .ln{display:flex;gap:8px;align-items:center;margin:0 0 6px;font-size:12px}
.vd-contactbox a{text-decoration:none}
.vd-contactbox a:hover{text-decoration:underline}

.vd-prose{font-size:12px;line-height:19px}
.vd-prose h2{margin-top:18px}

/* ===================================================================
   CONTACT
   =================================================================== */
.vd-contact-cards{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 22px}
.vd-contact-card{flex:1 1 220px;border:1px solid var(--vd-line-soft);background:#fff;padding:16px}
.vd-contact-card h3{color:var(--vd-steel);margin:0 0 10px}
.vd-opening{width:100%;border-collapse:collapse;font-size:12px;margin:0 0 20px}
.vd-opening th,.vd-opening td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--vd-line-soft)}
.vd-opening th{font-weight:bold;color:var(--vd-steel);background:#f6f8fa}
.vd-map{border:1px solid var(--vd-line-soft);line-height:0}
.vd-map iframe{width:100%;height:340px;border:0;display:block}

.vd-form .row2{display:flex;gap:14px;flex-wrap:wrap}
.vd-form .fld{flex:1 1 220px;display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.vd-form label{font-size:11px;text-transform:uppercase;color:var(--vd-muted);letter-spacing:.4px}
.vd-form input,.vd-form textarea{font-family:var(--vd-font-body);font-size:13px;padding:9px 10px;border:1px solid var(--vd-line);background:#fff}
.vd-form textarea{min-height:130px;resize:vertical}
.vd-alert{padding:11px 14px;margin:0 0 16px;font-size:12px;border:1px solid}
.vd-alert.ok{background:#eef7ee;border-color:#bfe0bf;color:#256b25}
.vd-alert.err{background:#fbeeee;border-color:#e6c2c2;color:#9a2b2b}

/* ===================================================================
   PAGINA-BOUWSTENEN
   =================================================================== */
.vd-block{margin:0 0 26px}
.vd-block-tb{display:flex;gap:26px;align-items:flex-start}
.vd-block-tb.rechts{flex-direction:row-reverse}
.vd-block-tb .media{flex:0 0 42%;max-width:42%}
.vd-block-tb .media img{width:100%;border:4px solid #fff;outline:1px solid var(--vd-line-soft)}
.vd-block-tb .txt{flex:1 1 auto;min-width:0}
.vd-figure img{width:100%;border:4px solid #fff;outline:1px solid var(--vd-line-soft)}
.vd-figure figcaption{font-size:11px;color:var(--vd-muted);margin-top:6px;text-align:center}
.vd-gallery{display:grid;gap:10px}
.vd-gallery.c2{grid-template-columns:repeat(2,1fr)}
.vd-gallery.c3{grid-template-columns:repeat(3,1fr)}
.vd-gallery.c4{grid-template-columns:repeat(4,1fr)}
.vd-gallery img{width:100%;height:100%;object-fit:cover;border:1px solid var(--vd-line-soft)}
.vd-cta{background:#f4f6f9;border:1px solid var(--vd-line-soft);border-left:4px solid var(--vd-navy);padding:18px 20px}
.vd-cta h2{margin:0 0 6px}

/* ===================================================================
   PAGINERING
   =================================================================== */
.vd-pagination{display:flex;justify-content:center;gap:5px;margin:24px 0 8px;flex-wrap:wrap}
.vd-pagination .page-numbers{
	display:inline-block;padding:7px 12px;border:1px solid var(--vd-line);background:#fff;
	color:var(--vd-navy);text-decoration:none;font-size:12px;
}
.vd-pagination .page-numbers.current{background:var(--vd-navy);color:#fff;border-color:var(--vd-navy)}
.vd-pagination a.page-numbers:hover{background:#eef2f7}

/* ===================================================================
   LEGE STAAT
   =================================================================== */
.vd-empty{text-align:center;padding:40px 20px;border:1px solid var(--vd-line-soft);background:#fafbfc}
.vd-empty .ic{font-size:42px;color:#b6c0cc;margin:0 0 10px}
.vd-empty h3{color:var(--vd-steel)}

/* ===================================================================
   FOOTER
   =================================================================== */
.vd-footer{
	flex-shrink:0;
	background:var(--vd-footer-bg);
	border-top:1px solid var(--vd-steel-line);
	color:var(--vd-text);
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
	padding:14px var(--vd-pad);
}
.vd-footer-left p{margin:0 0 3px;font-size:11px;color:var(--vd-text);line-height:16px}
.vd-footer-right{font-size:11px}
.vd-footer-right a{color:var(--vd-text);text-decoration:none;margin:0 2px}
.vd-footer-right a:hover{text-decoration:underline;color:var(--vd-navy)}

/* ===================================================================
   LIGHTBOX
   =================================================================== */
.vd-lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);align-items:center;justify-content:center}
.vd-lightbox.open{display:flex}
.vd-lightbox img{max-width:92%;max-height:86vh;object-fit:contain;box-shadow:0 10px 50px rgba(0,0,0,.5)}
.vd-lightbox .lb-close,.vd-lightbox .lb-nav{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:46px;height:46px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.vd-lightbox .lb-close:hover,.vd-lightbox .lb-nav:hover{background:rgba(255,255,255,.28)}
.vd-lightbox .lb-close{top:1.4rem;right:1.6rem}
.vd-lightbox .lb-prev{left:1.6rem;top:50%;transform:translateY(-50%)}
.vd-lightbox .lb-next{right:1.6rem;top:50%;transform:translateY(-50%)}
.vd-lightbox .lb-counter{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:.9rem}

/* ---------- Hulpklassen ---------- */
.vd-skip{position:absolute;left:-9999px;top:0;background:var(--vd-navy);color:#fff;padding:8px 14px;z-index:10000}
.vd-skip:focus{left:10px;top:10px}
.text-navy{color:var(--vd-navy)}
.text-steel{color:var(--vd-steel)}
.vd-mt0{margin-top:0}

/* WordPress core */
.aligncenter{display:block;margin:0 auto}
.alignleft{float:left;margin:0 16px 10px 0}
.alignright{float:right;margin:0 0 10px 16px}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:11px;color:var(--vd-muted);text-align:center}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:940px){
	:root{--vd-pad:22px}
	.vd-page{width:100%;box-shadow:none}
}
@media (max-width:820px){
	.vd-header{flex-wrap:wrap;min-height:0;padding-top:18px}
	.vd-header-right{order:3;width:100%;align-items:stretch}
	.vd-menu-toggle{display:flex;justify-content:center}
	.vd-menu{display:none;width:100%}
	.vd-menu.open{display:block}
	.vd-menu ul{flex-direction:column;gap:1px}
	.vd-menu a{padding:12px 16px;border-bottom:1px solid var(--vd-line-soft)}
	.vd-keurmerken{align-self:flex-start}

	.vd-banner{flex-direction:column}
	.vd-banner-nav{flex-basis:auto;max-width:none;max-height:200px;border-left:0;border-top:1px solid var(--vd-line-soft)}
	.vd-banner-stage .vd-slide{height:240px}

	.vd-cols{flex-direction:column;gap:24px}
	.vd-col-right{flex-basis:auto;max-width:none;width:100%}
	.vd-col-right img{max-width:360px}

	.vd-detail{flex-direction:column}
	.vd-detail-info{flex-basis:auto;max-width:none;width:100%}

	.vd-block-tb,.vd-block-tb.rechts{flex-direction:column}
	.vd-block-tb .media{flex-basis:auto;max-width:480px}
}
@media (max-width:540px){
	.vd-result{flex-direction:column}
	.vd-result-thumb{flex-basis:auto;max-width:100%;width:100%}
	.vd-gallery.c3,.vd-gallery.c4{grid-template-columns:repeat(2,1fr)}
	.vd-footer{flex-direction:column;text-align:center}
	h1{font-size:21px}
}