/* ==========================================================================
   Driever Partyservice - moderne laag (2026)
   Wordt na style.css geladen. Kleuren komen uit Weergave > Aanpassen.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bar: #1f1f1f;        /* balken, knoppen, footer (Customizer) */
	--accent: #b30f0e;     /* kleine details: streepjes, hover (Customizer) */
	--light: #f2f2f2;      /* lichtgrijze vlakken (Customizer) */
	--overlay: 0.35;       /* donkere laag over de achtergrondfoto (Customizer) */
	--ink: #151515;        /* tekstkleur */
	--font: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Lettertype: overal hetzelfde, behalve de pictogrammen ------------- */
html body *:not(.fa):not([class*="fa-"]),
.mainMenu ul li a,
.Btn, .subtitle, .headerSubtitle, .featuredSubtitle, .blockSubtitle,
.featuredPrice p, .blockPrice p, .breadBtn {
	font-family: var(--font) !important;
}

body {
	font-family: var(--font);
	min-width: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	border-top-color: var(--bar);
	-webkit-font-smoothing: antialiased;
}
p { font-size: 1rem; line-height: 1.65; }
.desc, .pageContent p, .pageContent ul, .articleContent, .articleContent p,
.articleContent ul, .productContent p, .introDesc { font-size: 1.0625rem; line-height: 1.65; }
.featuredDesc, .blockDesc, .footerDesc, .footerTimes, .footerTimes li,
.footerMenu ul li, .breadCrumbs p { font-size: 1rem; }

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	text-transform: none;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.subtitle, .headerSubtitle, .featuredSubtitle, .blockSubtitle, .introShortDesc {
	font-style: normal;
	font-weight: 500;
	text-transform: none;
}

/* ---- Links en tekst links uitlijnen ----------------------------------- */
a { color: var(--ink); }
.desc a, .introDesc a, .productContent p a, .articleContent a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.alignCenter, .headerTexts, .featuredContent, .blockContent, .introTitle,
.introShortDesc, .introDesc, .featuredPrice, .blockPrice, .footerBottom,
.homeIntro .inner { text-align: left; }
.alignCenter .pageTitle:after { left: 0; margin-left: 0; }

/* ---- Achtergronden: lichtgrijs i.p.v. patroon -------------------------- */
.container, .smudgeBg, .footerTop { background: var(--light); }
.whiteBg { background: #fff; }

/* ---- Kop met foto: donkere laag voor leesbare tekst ------------------- */
.header { position: relative; }
.header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, calc(var(--overlay) + 0.2)) 0%,
		rgba(0, 0, 0, var(--overlay)) 100%);
	pointer-events: none;
}
.header > .inner { position: relative; z-index: 1; }
.headerTexts { margin: 0; max-width: 680px; padding-top: 140px; }
.headerSubtitle, .headerTitle, .headerDesc { color: #fff; text-shadow: none; }
.headerTitle { font-size: 3rem; line-height: 1.1; }
.headerTitle:after { left: 0; margin-left: 0; background: var(--accent); }
.headerDesc { font-size: 1.25rem; line-height: 1.5; }

/* ---- Menu ------------------------------------------------------------- */
.mainMenu ul li a {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #fff;
}
.mainMenu ul li:hover a { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.mainMenu ul li.current-menu-item a:after { background: #fff; }
.panel { background: #161616; }
.panel .socialFace { color: var(--bar); }

/* ---- Knoppen en balken ------------------------------------------------ */
.Btn {
	background: var(--bar);
	border-radius: 2px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	box-shadow: none;
}
.Btn:hover { background: var(--accent); color: #fff; }
.greyBtn { background: #4a4a4a; }
.clearBtn { background: none; box-shadow: 0 0 0 2px var(--bar) inset; color: var(--ink); }
.clearBtn:hover { background: var(--bar); color: #fff; }
.featuredPrice p, .blockPrice p { background: var(--bar); color: #fff; }
.pageTitle:after, .featuredDivider, .blockDivider { background: var(--accent); }
.featuredTitle, .blockTitle { color: var(--ink); }
.featuredContent, .blockContent { background: #fff; }
.featuredDesc, .blockDesc { color: #222; }
.socialFace, .socialInst { background: var(--bar); }

/* ---- Footer ----------------------------------------------------------- */
.footerContact { background: var(--bar); color: #fff; }
.footerContact .footerTitle, .footerSubtitle { color: #fff; }
.footerContact .footerDesc, .footerContact .footerDesc a,
.footerContact .footerTimes { color: #ececec; }
.footerMenu ul li, .footerMenu ul li a { color: var(--ink); }
.copyright, .copyright a { color: #444; }

/* ---- Formulieren: duidelijke velden ----------------------------------- */
.contactForm form input, .contactForm form textarea,
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
	font-size: 1rem;
	color: var(--ink);
	border: 1px solid #8a8a8a;
	border-radius: 2px;
}
.contactForm div.wpcf7-response-output { color: var(--ink); font-size: 1rem; }
.contactForm span.wpcf7-not-valid-tip { background: #8a0d0d; font-size: 1rem; }

/* ---- Toegankelijkheid: duidelijke focusrand --------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* ---- Kopbalk: past op één regel, icoontjes goed zichtbaar ------------- */
.logo { margin-right: 8px; }
.mainMenu ul li a { font-size: 14px; letter-spacing: 0.02em; padding: 0 8px; }
.headerSocials { margin-left: 8px; }
.socialFace, .socialInst { background: #fff; color: var(--bar); }
.socialFace:hover, .socialInst:hover { background: var(--accent); color: #fff; }
.headerSocials a.socialFace, .headerSocials a.socialInst { background: #fff; color: var(--bar); }
.headerSocials a.socialFace:hover, .headerSocials a.socialInst:hover { background: var(--accent); color: #fff; }
/* Sliderpijltjes in de balkkleur i.p.v. rood */
#featuredSlider .flex-direction-nav a, #impressionSlider .flex-direction-nav a { background: var(--bar); border-radius: 50%; }
#featuredSlider .flex-direction-nav a:hover, #impressionSlider .flex-direction-nav a:hover { background: var(--accent); }

/* ---- Footer: groeit mee met de inhoud (geen vaste hoogte meer) -------- */
.innerContainer { padding-bottom: 0 !important; }
.footer { height: auto !important; margin-top: 0 !important; }
.footerTop { height: auto !important; }
.footerContact { height: auto !important; min-height: 340px; }
.footerBottom { height: auto !important; padding: 10px 0; line-height: 1.5; }
.footerDesc, address.footerDesc { font-style: normal; }

/* ---- Formulieren (stap 3) --------------------------------------------- */
form.drieverForm, .contactForm form { max-width: 640px; }
.drieverForm .formRow { margin: 0 0 18px; }
.drieverForm .formRow2 { display: flex; gap: 16px; flex-wrap: wrap; }
.drieverForm .formRow2 > label { flex: 1 1 200px; }
.drieverForm label, .drieverForm .labelText {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	margin: 0 0 6px;
}
.drieverForm .star { color: #8a0d0d; font-size: 1em; vertical-align: baseline; }
.drieverForm input[type="text"], .drieverForm input[type="email"], .drieverForm input[type="tel"],
.drieverForm input[type="date"], .drieverForm input[type="number"], .drieverForm textarea {
	display: block;
	width: 100%;
	height: auto;
	min-height: 48px;
	margin: 6px 0 0;
	padding: 10px 14px;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--ink);
	background: #fff;
	border: 1px solid #6f6f6f;
	border-radius: 2px;
}
.drieverForm textarea { min-height: 140px; }
.drieverForm input:focus, .drieverForm textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.drieverForm .wpcf7-not-valid { border-color: #8a0d0d; border-width: 2px; }
.drieverForm .wpcf7-not-valid-tip { display: block; margin-top: 6px; padding: 0; background: none !important; color: #8a0d0d !important; font-size: 1rem; font-weight: 600; }
.drieverForm .cfChecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.drieverForm .cfChecks label { font-weight: 400; margin: 0; }
.drieverForm .cfChecks input { width: auto; min-height: 0; display: inline-block; margin: 0 8px 0 0; }
.drieverForm .hpWrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.drieverForm input[type="submit"] { width: auto; min-height: 50px; padding: 0 28px; cursor: pointer; border: 0; border-radius: 2px;
	background: var(--bar); color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; }
.drieverForm input[type="submit"]:hover { background: var(--accent); }
.wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 16px; font-size: 1rem; color: var(--ink); border: 2px solid var(--bar); background: #fff; }
.wpcf7 form.invalid .wpcf7-response-output { border-color: #8a0d0d; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #1d6b2f; }

/* Bereikbaarheid */
.timesGroup .footerSubtitle { margin: 18px 0 4px; }
.timesBlock { margin-top: 24px; }
.timesBlock .footerSubtitle { color: var(--ink); }
.timesBlock .footerDesc, .timesBlock .footerDesc a { color: var(--ink); font-size: 1.0625rem; }
.verhuurAanvraag { padding: 50px 0; }

/* Foutmelding onder het veld i.p.v. erboven; duidelijke keuzevakjes; adres niet cursief */
.contactForm .drieverForm span.wpcf7-not-valid-tip { position: static !important; display: block; margin: 6px 0 0 !important; padding: 0 !important; background: none !important; color: #8a0d0d !important; font-size: 1rem; font-weight: 600; }
.drieverForm .wpcf7-form-control-wrap { position: static; display: block; }
.drieverForm .cfChecks input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0 10px 0 0; vertical-align: middle; accent-color: var(--bar); }
.drieverForm .cfChecks label { display: flex; align-items: center; padding: 4px 0; font-size: 1rem; }
address { font-style: normal; }

/* ---- Foto's: overal dezelfde verhouding (3:2) ------------------------- */
.blockImg, .featuredImg, .productImg { overflow: hidden; }
.blockImg, .featuredImg { aspect-ratio: 3 / 2; background: #e4e4e4; }
.blockImg img, .featuredImg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blockImg .imgPlaceholder, .featuredImg .imgPlaceholder { height: 100%; }

/* Plaatshouder voor foto's die nog komen */
.imgPlaceholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; min-height: 120px;
	background: repeating-linear-gradient(135deg, #e9e9e9, #e9e9e9 14px, #e1e1e1 14px, #e1e1e1 28px);
	color: #4a4a4a; font-weight: 600; font-size: 1rem; letter-spacing: 0.02em;
}

/* ---- Brede banner onder de onderste balk ------------------------------ */
.wideBanner { width: 100%; height: 320px; overflow: hidden; background: #e4e4e4; }
.wideBanner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wideBannerEmpty {
	display: flex; align-items: center; justify-content: center; color: #4a4a4a; font-weight: 600;
	background: repeating-linear-gradient(135deg, #e9e9e9, #e9e9e9 14px, #e1e1e1 14px, #e1e1e1 28px);
}

/* ---- Voorbeelden-galerij: rustig doorlopend --------------------------- */
.voorbeelden { padding: 50px 0 40px; background: #fff; }
.voorbeeldenIntro { margin: 0 0 24px; max-width: 640px; font-size: 1.0625rem; }
.marquee { overflow: hidden; }
.marqueeTrack { display: flex; gap: 12px; width: max-content; animation: marqueeScroll 70s linear infinite; }
.marquee:hover .marqueeTrack, .marquee:focus-within .marqueeTrack { animation-play-state: paused; }
.marqueeItem { flex: 0 0 auto; width: 320px; aspect-ratio: 4 / 3; overflow: hidden; background: #e4e4e4; }
.marqueeItem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.voorbeeldenLink { margin-top: 28px; }
@keyframes marqueeScroll { to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) {
	.marqueeTrack { animation: none; }
	.marquee { overflow-x: auto; }
	.marqueeItem[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
	.wideBanner { height: 200px; }
	.marqueeItem { width: 240px; }
}

/* ---- Seizoens-pop-up (stap 5) ----------------------------------------- */
.popup[hidden] { display: none; }
.popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.popupBackdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.popupBox { position: relative; display: block; max-width: min(92vw, 900px); line-height: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.popupBox a { display: block; }
.popupImg { display: block; max-width: min(92vw, 900px); max-height: 90vh; width: auto; height: auto; }
.popupClose { position: absolute; top: 12px; right: 12px; z-index: 2; min-height: 44px; margin: 0; padding: 0 16px; border: 0;
	background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 1rem; font-weight: 600; line-height: 44px; cursor: pointer; }
.popupClose:hover { background: var(--accent); }
.popupClose:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.popupOpen { overflow: hidden; }

/* Kleine lettertjes (zoals "Prijswijzigingen voorbehouden") leesbaar houden */
.blockExtra { font-size: 0.875rem; line-height: 1.5; }

/* Startpagina: minder lege ruimte tussen menu en kop, en onder de knoppen */
body.home .header { height: auto; padding-bottom: 160px; }
.headerTexts { padding-top: 50px; }
@media (min-width: 769px) { .header { height: 260px; } }

/* Pijltjes alleen tonen als er echt meer te zien is (flexslider zet anders "flex-disabled") */
.flex-direction-nav a.flex-disabled { display: none !important; }

/* Blokken in rijen van drie: grid in plaats van float, zodat een hoger blok geen gat achterlaat */
.cols.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.cols.cols-3::before, .cols.cols-3::after { display: none; }
.cols.cols-3 > * { float: none; width: auto; margin-left: 0; }
.cols.cols-3 > .clearRow { display: none; }
@media (max-width: 900px) { .cols.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cols.cols-3 { grid-template-columns: minmax(0, 1fr); } }

/* Voettekst direct onder de inhoud, geen lege ruimte op korte pagina's */
.container { min-height: 0; }


/* Kaarten in een rij even hoog: wit vlak rekt mee (hapjesbox-fix) */
.cols.cols-3>div{display:flex}
.cols.cols-3>div>a.block{flex:1;display:flex;flex-direction:column;min-width:0}
.cols.cols-3>div>a.block>.blockContent{flex:1}