/* Aanvullingen op style.css: lokale lettertypen, smooth scroll, slider en fotoviewer */

/* ---------- Roboto, lokaal gehost (geen Google Fonts meer) ---------- */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/roboto-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/roboto-latin-700-italic.woff2') format('woff2'); }

/* ---------- Smooth scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Toegankelijkheid ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid #e30613; outline-offset: 2px; }
.sr-only a:focus { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 8px 12px; background: #fff; color: #333; }
.sr-only:focus-within { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }

/* ---------- Contact ---------- */
.contact-details { font-style: normal; margin-bottom: 15px; }

/* ---------- Slider op de homepage (vervangt Owl Carousel) ---------- */
.slider-track { display: flex; height: 100%; will-change: transform; transition: transform 800ms ease; }
.slider-track.is-dragging { transition: none; }
.slider-track > .slider-item { flex: 0 0 100%; height: 100%; }
.slider { touch-action: pan-y; }
.slider .owl-controls { z-index: 2; }
.slider .owl-page { border: 0; padding: 0; background: none; cursor: pointer; }
.owl-theme .owl-controls .owl-page span { background: #869791; }
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page:hover span { background: #e30613; }
@media (prefers-reduced-motion: reduce) {
	.slider-track { transition: none; }
}

/* ---------- Fotoviewer (vervangt Magnific Popup) ---------- */
html.lb-open { overflow: hidden; }
.lb {
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: rgba(11, 11, 11, 0.9); color: #fff;
	touch-action: pan-y; overscroll-behavior: contain;
}
.lb::backdrop { background: transparent; }
.lb:not([open]) { display: none; }
.lb-figure { position: absolute; inset: 40px 60px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb-img { display: block; max-width: 100%; max-height: calc(100% - 30px); width: auto; height: auto; box-shadow: 0 0 8px rgba(0,0,0,0.6); user-select: none; -webkit-user-drag: none; }
.lb-count { margin-top: 8px; font-size: 12px; color: #ccc; }
.lb button { position: absolute; border: 0; background: transparent; color: #fff; cursor: pointer; opacity: 0.7; font: 300 40px/1 Arial, sans-serif; padding: 10px 14px; }
.lb button:hover, .lb button:focus-visible { opacity: 1; }
.lb-close { top: 0; right: 0; font-size: 34px !important; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 60px !important; }
.lb-prev { left: 0; }
.lb-next { right: 0; }
.lb.is-single .lb-prev, .lb.is-single .lb-next, .lb.is-single .lb-count { display: none; }
@media (max-width: 767px) {
	.lb-figure { inset: 44px 8px 20px; }
	.lb-prev, .lb-next { top: auto; bottom: 0; transform: none; font-size: 44px !important; }
}
@media (prefers-reduced-motion: no-preference) {
	.lb[open] { animation: lb-in 200ms ease-out; }
	@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}