/* Aanvullingen voor WordPress
   Je eigen layout.css en style.css zijn ongewijzigd overgenomen.
   Hier staan alleen stijlen die nodig zijn omdat WordPress
   sommige HTML net anders opbouwt dan jij in de module deed. */

/* Menu uit Weergave > Menu's: WordPress zet klassen op de <li>, niet op de <a>.
   Geef het menu-item Contact de CSS-klasse "knop-contact". */
.hoofdnavigatie .knop-contact > a {
    padding: 15px;
    background-color: #fbd200;
    color: #12294f;
    font-weight: bold;
    border-radius: 5px;
}

.hoofdnavigatie .knop-contact > a:hover {
    background-color: #ffe044;
    color: #12294f;
    text-decoration: none;
}

/* Actieve pagina (in je module was dit de klasse "actief") */
.hoofdnavigatie .current-menu-item:not(.knop-contact) > a {
    font-weight: bold;
    color: #fbd200;
    text-decoration: underline;
    text-decoration-color: #fbd200;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

/* Tekstpagina's zoals de privacyverklaring */
.pagina-tekst {
    max-width: 760px;
    padding: 64px 80px 120px;
    line-height: 1.6;
}

.pagina-tekst h2 {
    font-size: 40px;
    margin: 48px 0 12px;
}

.pagina-tekst a {
    color: #12294f;
}

.pagina-tekst img {
    max-width: 100%;
    height: auto;
}

/* Meldingen bij het offerteformulier */
.melding {
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: 5px;
    font-weight: bold;
}

.melding-succes {
    background-color: #e8f5e9;
    border: 2px solid #2e7d32;
    color: #1b5e20;
}

.melding-fout {
    background-color: #fdecea;
    border: 2px solid #c62828;
    color: #8e1c1c;
}

/* Spamval verbergen voor bezoekers */
.veld-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Standaardklasse van WordPress voor tekst die alleen schermlezers voorlezen */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Portfolio: de foto is nu een link */
.portfolio-item a {
    display: block;
    color: inherit;
}

.portfolio-item a:focus-visible {
    outline: 3px solid #fbd200;
    outline-offset: -3px;
}

.portfolio-item a:focus-visible figcaption {
    opacity: 1;
}

/* Projectpagina */
.single-project .etalage-tekst h1 {
    font-size: 80px;
}

.project-dienst {
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 8px solid #fbd200;
}

.project-terug {
    padding: 32px 80px 0;
}

.project-terug a {
    font-weight: bold;
    color: #12294f;
    text-decoration: none;
}

.project-terug a:hover {
    text-decoration: underline;
    text-decoration-color: #fbd200;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

.project-inhoud {
    padding: 48px 80px 140px;
}

.project-inhoud > p,
.project-inhoud > h2,
.project-inhoud > h3,
.project-inhoud > ul {
    max-width: 720px;
}

.project-inhoud > p {
    font-size: 20px;
    line-height: 1.6;
}

.project-inhoud h2 {
    font-size: 56px;
    margin: 64px 0 16px;
}

.project-inhoud .wp-block-gallery {
    margin-top: 64px;
}

.project-inhoud .wp-block-gallery img {
    border-radius: 1em;
}

/* Carrousel in de etalage: alle foto's liggen op elkaar */
.etalage-fotos {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #12294f;
}

/* Alle foto's onzichtbaar; overvloeien duurt 1,5 seconde */
.etalage-fotos img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s;
}

/* De foto die JavaScript de klasse "zichtbaar" geeft */
.etalage-fotos img.zichtbaar {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .etalage-fotos img {
        transition: none;
    }
}