/*
 * Aanvullingen op build/css/main.css.
 *
 * Deze file staat bewust los: build/css/main.css wordt door gulp gegenereerd
 * uit assets/sass/ en zou bij een volgende build overschreven worden.
 * Wordt na build-style ingeladen, dus overschrijft die waar nodig.
 */

/* Screenreader-only tekst (skip-link, H1 op de homepage) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip-link wordt zichtbaar zodra hij focus krijgt */
.skip-link:focus {
    position: fixed !important;
    top: 10px;
    left: 10px;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip: auto;
    clip-path: none;
    background: #ffffff;
    color: #322920;
    font-family: 'Saira', sans-serif;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/*
 * Afbeeldingen krijgen sinds de overstap naar wp_get_attachment_image() een
 * expliciete width en height mee (tegen layout shift). De browser vertaalt die
 * height naar een presentational hint, en die wint van een `aspect-ratio` als
 * de CSS zelf geen height opgeeft: de afbeelding werd daardoor uitgerekt.
 * height: auto geeft de zeggenschap terug aan de aspect-ratio uit het ontwerp.
 */
.block-content-variable .container .type-content-visual .column.column-visual img {
    height: auto;
    object-fit: cover;
}

/*
 * De blokken zaten voorheen direct in body, dat een grid is. Sinds ze in het
 * <main>-landmark staan, zijn het gewone blokelementen en klappen hun verticale
 * marges samen: de margin-bottom van .block (150px) en de margin-top van
 * .block-hero + .block (1200px) werden samen 1200px in plaats van 1350px,
 * waardoor het dienstenblok over de hero heen viel.
 *
 * main zelf een grid maken herstelt precies het oude gedrag: grid-items klappen
 * hun marges niet, net als toen de blokken nog directe kinderen van body waren.
 */
main {
    display: grid;
    align-content: start;
    min-width: 0;
}

/*
 * body is een grid met "1fr auto". Op subpagina's staat header in de flow en
 * pakte die de 1fr-rij, waardoor de footer op korte pagina's (404, contact)
 * omhoog kwam. main krijgt nu de flexibele rij, zoals de opzet van de body-grid
 * ook al aangeeft.
 */
body:not(.home) {
    grid-template-rows: auto 1fr auto;
}

/*
 * De titels in de slider zijn onderdelen van "Onze diensten" en staan daarom
 * als H3 in de markup; de styling blijft die van de oude H2.
 */
.block-slider .slider-container .carousel-cell h3 {
    font-size: 26px;
    color: #AB6704;
    padding: 0 55px;
    margin-top: 30px;
    line-height: 100%;
    transition: 250ms;
}

@media screen and (max-width: 768px) {
    .block-slider .slider-container .carousel-cell h3 {
        padding: 0 25px;
    }
}

.block-slider .slider-container .carousel-cell a:hover h3 {
    color: #FF9900;
}

/* Hamburger is nu een <button>; de tegel eromheen blijft de klikzone */
.sticky-menu-button .hamburger {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: 0;
}

.sticky-menu-button .hamburger:focus-visible {
    outline: 2px solid #FF9900;
    outline-offset: 2px;
}

/* Zichtbare focus voor toetsenbordgebruikers */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #FF9900;
    outline-offset: 2px;
}

/* Tegels zonder link in het dienstenblok gedragen zich als de <a>-variant */
.block-services .container ul li .service-tile {
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    width: 255px;
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: gray;
    background-size: cover;
    background-position: center;
}

@media screen and (max-width: 1090px) {
    .block-services .container ul li .service-tile {
        width: 100%;
    }
}

/* Respecteer de systeeminstelling voor minder beweging */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}