/**
 * Webhouse, Core Web Vitals-ondersteuning
 *
 * Kleine, veilige regels die de Largest Contentful Paint, Cumulative Layout
 * Shift en Interaction to Next Paint helpen, zonder de bestaande (GSAP/Lenis-)
 * animaties of het ontwerp te doorkruisen. De zware optimalisaties (preconnect,
 * fetchpriority, minify, cache, preload) zitten in functions.php en de
 * Static Generator.
 */

/* --- CLS: media reserveren zodat er niets verspringt tijdens het laden --- */
img,
video {
    max-width: 100%;
    height: auto;
}

/* Afbeeldingen met width/height-attributen behouden hun verhouding zonder shift */
img[width][height] {
    height: auto;
}

/* De vaste-hoogte hero/servicevideo's reserveren hun ruimte vooraf (geen CLS
   wanneer de video pas na window.load wordt geladen). */
.video-fixed-height {
    width: 100%;
    background: rgba(118, 66, 148, .12);
}

/* --- LCP: het lettertype toont direct tekst (fallback) i.p.v. onzichtbaar ---
   Werkt alleen als de @font-face 'swap' gebruikt; dit is een vangnet voor
   eventueel los ingeladen fonts. */
@font-face {
    font-family: 'Satoshi-fallback';
    src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
    font-display: swap;
    ascent-override: 100%;
    descent-override: 25%;
    line-gap-override: 0%;
}

/* --- INP/UX: soepel scrollen naar ankers, respecteer reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --- Toegankelijkheid: zichtbare focus voor toetsenbordgebruikers --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid #764294;
    outline-offset: 2px;
}

/* --- Voorkom horizontale overflow (mobiele CLS/UX) --- */
html, body { overflow-x: hidden; }

/* --- Contactformulier op dienstpagina's links uitlijnen + volle breedte ---
   Stond gecentreerd/ingesprongen en smal (margin:0 auto, max-width); nu links
   onder de kop, even breed als de tekst, met invoervelden over de volle breedte.
   Geldt op alle dienstpagina's met de contactsectie. */
.single-contact .contact-form-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
.single-contact .contact-form-box .contact-box-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
.single-contact .contact-form-box .wpcf7-form input:not([type="submit"]),
.single-contact .contact-form-box .wpcf7-form select,
.single-contact .contact-form-box .wpcf7-form textarea {
    width: 100% !important;
    max-width: 100% !important;
}

/* --- Zakelijke gegevens in de footer (KvK en BTW) ------------------------ */
.footer-zakelijk {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    color: rgba(255, 255, 255, .55);
}

/* --- Slider "Alle diensten op een rij": nette navigatieknoppen -----------
   De standaard Swiper-navigatie (swiper-bundle.min.css laadt na de themacss)
   overschreef de bedoelde ronde knop, waardoor er een misplaatste paarse vorm
   midden op een kaart bleef staan. Deze regels staan hoger in specificiteit en
   in dit bestand dat als laatste laadt, dus ze winnen altijd. De knoppen komen
   netjes rechtsboven de slider, met een eigen pijl (geen Swiper-icoonfont), en
   overlappen de kaarten niet meer. */
.related-services {
    position: relative;
}
/* De slidercontainer knipt standaard alles boven de kaarten weg
   (clip-path). We geven bovenaan wat ruimte terug zodat de knoppen netjes
   boven de kaarten (op de kophoogte) kunnen staan in plaats van erop. */
.related-services .related-service-slider .swiper {
    clip-path: inset(-90px -100% 0 0);
}
.related-services .swiper-button-prev,
.related-services .swiper-button-next {
    position: absolute;
    top: -72px;
    bottom: auto;
    margin: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #764294;
    color: #fff;
    display: flex;
    visibility: visible;
    opacity: 1;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(118, 66, 148, .28);
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
    z-index: 6;
    cursor: pointer;
}
.related-services .swiper-button-prev { right: 62px; left: auto; }
.related-services .swiper-button-next { right: 4px; left: auto; }
.related-services .swiper-button-prev:hover,
.related-services .swiper-button-next:hover {
    background: #5c60a2;
    transform: translateY(-2px);
}
/* Eigen pijl uit rand (vervangt de Swiper-icoonfont volledig) */
.related-services .swiper-button-prev::after,
.related-services .swiper-button-next::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    font-size: 0;
    line-height: 0;
}
.related-services .swiper-button-next::after {
    transform: rotate(45deg);
    margin-left: -3px;
}
.related-services .swiper-button-prev::after {
    transform: rotate(-135deg);
    margin-right: -3px;
}
/* Uitgeschakelde staat (begin/eind van de slider) rustig tonen */
.related-services .swiper-button-disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}
.related-services .swiper-button-disabled:hover {
    background: #764294;
    transform: none;
}
@media (max-width: 767px) {
    .related-services .swiper-button-prev,
    .related-services .swiper-button-next {
        width: 40px;
        height: 40px;
        top: -56px;
    }
    .related-services .swiper-button-prev { right: 52px; }
    .related-services .swiper-button-next { right: 6px; }
}