/**
 * 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: #f3f1f7;
}

/* --- 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; }