/* ============================================================
   DEEL 1: ALLEEN HOMEPAGE HEADER (Speciaal 25% design)
   ============================================================ */

/* 1. Zet de header container vast op 25% hoogte */
.twentyseventeen-front-page.has-header-image .custom-header,
.home.blog.has-header-image .custom-header {
    height: 25vh !important;        /* Altijd een kwart van het scherm */
    min-height: 200px !important;   /* Minimaal 200px voor mobiel */
    max-height: none !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;    /* Geen witruimte onder de foto */
}

/* 2. Dwing de afbeelding om de hele balk te vullen */
.twentyseventeen-front-page.has-header-image .custom-header-media,
.home.blog.has-header-image .custom-header-media {
    height: 100% !important;
    min-height: 0 !important;
}

.twentyseventeen-front-page.has-header-image .custom-header-media img,
.home.blog.has-header-image .custom-header-media img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 3. Centreer tekst (logo) op de homepage */
.twentyseventeen-front-page.has-header-image .site-branding,
.home.blog.has-header-image .site-branding {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10;
}

.twentyseventeen-front-page.has-header-image .site-branding .wrap,
.home.blog.has-header-image .site-branding .wrap {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    text-align: left !important; /* Of center als je dat liever hebt */
}


/* ============================================================
   DEEL 2: ALLE ANDERE PAGINA'S (Witruimte fix)
   ============================================================ */

/* Verwijder die rare 72px witte marge onder headers op NIET-homepagina's */
body:not(.twentyseventeen-front-page):not(.home) .custom-header {
    margin-bottom: 0 !important;
}

/* ============================================================
   DEEL 3: MENU & NAVIGATIE FIX (Voor alles)
   ============================================================ */

/* Zorg dat menu altijd bovenop ligt en werkt */
.navigation-top {
    position: relative !important;
    z-index: 9999 !important;
    bottom: auto !important;
}

@media screen and (max-width: 48em) {
    .menu-toggle, .main-navigation ul {
        position: relative !important;
        z-index: 10000 !important;
    }
    /* Zorg dat menu uit kan klappen op mobiel */
    .custom-header { overflow: visible !important; }
    .custom-header-media { overflow: hidden !important; }
}