/* ==========================================================================
	Aanvullingen op site.css: toegankelijkheid, slider-fallback en motion
	========================================================================== */

/* Menuknop is nu een <button> */
button.nav-toggle {
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	line-height: 0;
}

/* Sliderpijlen (vervangen FontAwesome) */
.flex-direction-nav li .flex-next:before,
.flex-direction-nav li .flex-prev:before {
	font-size: 30px;
	line-height: 30px;
	display: block;
	text-align: center;
}

/* Zonder JavaScript: eerste slide tonen */
html:not(.js) .flexslider .slides > li:first-child { display: block; }

/* Geen focusrand na klikken met de muis (logo, menu, knoppen) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
	outline: none;
}
a, button { -webkit-tap-highlight-color: transparent; }

/* Zichtbare focus voor toetsenbordgebruikers */
a:focus-visible,
button:focus-visible {
	outline: 2px solid #0082CB;
	outline-offset: 2px;
}

/* Contactblok in de footer */
.contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contact-list li + li { margin-top: 14px; }
.footer .contact-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #FFF;
	text-decoration: none;
}
.contact-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #0082CB;
	transition: background-color 500ms ease-in-out, transform 500ms ease-in-out;
}
.contact-icon svg { fill: #FFF; }
.contact-text {
	line-height: 1.45;
	padding-top: 1px;
	word-break: break-word;
}
.contact-text strong { font-weight: normal; font-family: 'Signika', sans-serif; font-size: 16px; }
.contact-text small {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9aa3a8;
}
.footer .contact-list a:hover,
.footer .contact-list a:focus { text-decoration: none; }
.footer .contact-list a:hover .contact-icon,
.footer .contact-list a:focus-visible .contact-icon { background-color: #FFF; transform: scale(1.06); }
.footer .contact-list a:hover .contact-icon svg,
.footer .contact-list a:focus-visible .contact-icon svg { fill: #0082CB; }
@media (prefers-reduced-motion: reduce) {
	.contact-icon { transition: none; }
	.footer .contact-list a:hover .contact-icon { transform: none; }
}

/* Kaart op contactpagina */
.maps-container iframe { border: 0; }

/* Lenis (smooth scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Motion: foto's in een kader zodat parallax en zoom binnen het blok blijven */
.leader-image,
.article-image p {
	overflow: hidden;
}

/* Hover op galerijfoto's */
.js-popup { display: block; overflow: hidden; }
.js-popup img { transition: transform 500ms ease-in-out; }
.js-popup:hover img { transform: scale(1.04); }

/* Intro: elementen kort verbergen tot motion.js ze laat inkomen.
   De class wordt in de <head> gezet en na 2,5 s altijd weer verwijderd. */
html.motion-intro .logo,
html.motion-intro .quick-contact,
html.motion-intro .header .flexslider,
html.motion-intro .leader,
html.motion-intro #content h1 {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.motion-intro .logo,
	html.motion-intro .quick-contact,
	html.motion-intro .header .flexslider,
	html.motion-intro .leader,
	html.motion-intro #content h1 { opacity: 1; }
	.js-popup img { transition: none; }
	.js-popup:hover img { transform: none; }
}