/*
 Theme Name:   Twenty Seventeen Child
 Description:  Mijn aangepaste thema voor anderstein met Fixed Header
 Author:       Ronald
 Template:     twentyseventeen
 Version:      1.1.0
*/

/* 1. Zet de header vast en dwing de hoogte op 300px */
.site-header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
    height: 400px !important;
    background: #fff; /* Voorkomt dat je door de header heen kijkt */
}

/* 2. Zorg dat de foto-container de 300px volgt */
.has-header-image .custom-header, 
.has-header-video .custom-header, 
.custom-header {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

/* 3. De afbeelding zelf fixeren (geen parallax/beweging) */
.custom-header-media img {
    height: 400px !important;
    object-fit: cover !important;
    object-position: bottom !important;
    transform: none !important; /* Schakelt het irritante scroll-effect uit */
    position: absolute !important;
    top: 0 !important;
}

/* 4. Menu direct onder de afbeelding plakken */
.navigation-top {
    bottom: auto !important;
    top: 400px !important; /* Precies onder de foto */
    position: fixed !important;
    width: 100%;
}

/* 5. HEEL BELANGRIJK: Schuif de rest van de site omlaag */
/* We voegen ruimte toe bovenaan de pagina zodat de tekst pas NA de header begint */
#content {
    margin-top: 370px !important; /* 300px foto + ongeveer 70px voor het menu */
}

/* 6. Correctie voor als je ingelogd bent (de zwarte balk bovenin) */
.admin-bar .site-header {
    top: 32px !important;
}

/* Verwijder de animatie die de kop laat in-faden */
.has-header-image.twentyseventeen-front-page .custom-header {
    height: 300px !important;
}
/* Styling voor de dynamische inlog/uitlog knop */
.menu-item-logout a {
    color: #ff4444 !important; /* Maak uitloggen rood voor de duidelijkheid */
    font-weight: bold;
}

.menu-item-login a {
    color: #44ff44 !important; /* Maak inloggen groen */
    font-weight: bold;
}

/* Zorg dat het menu goed uitgelijnd blijft in de 400px header */
.navigation-top {
    background: rgba(255, 255, 255, 0.9); /* Licht transparant wit */
    border-bottom: 1px solid #eee;
}
/* Specifieke styling voor de uitlog-bevestigingspagina */
.page-slug-uitgelogd .site-header {
    position: relative !important;
    height: 150px !important; /* Maak de header hier veel kleiner */
}

.page-slug-uitgelogd .custom-header {
    display: none; /* Verberg de grote foto volledig */
}

.page-slug-uitgelogd #content {
    margin-top: 50px !important;
}

/* --- TOEGANGSBEHEER REPARATIE & UITLOGGEN --- */

.sso-nexx-btn {
    background-color: #0073aa;
    color: #ffffff !important;
    padding: 18px 36px;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
}

/* Verwijder de placeholder tekst (branding) op alle apparaten */
.site-branding, 
.site-description, 
.site-title, 
.site-branding-text {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* --- CONTENT POSITIONERING --- */

/* 1. Zorg dat de hoofdpagina niet achter de header verdwijnt */
body.logged-in .site-content-contain {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
}

/* 2. De specifieke container die we naar beneden duwen */
body.logged-in #content {
    padding-top: 50px !important; /* Ruimte tussen menu en tekst */
    display: block !important;
    clear: both;
}

/* 3. Verwijder de negatieve marge die Twenty Seventeen soms toepast */
body.logged-in .has-header-image .site-content-contain {
    top: 0 !important;
}

/* 4. Fix voor mobiel: iets minder ruimte nodig */
@media screen and (max-width: 767px) {
    body.logged-in #content {
        padding-top: 30px !important;
    }
}
/* Zorg dat het menu ALTIJD zichtbaar is voor ingelogde leden */
body.logged-in .navigation-top {
    display: block !important;
    visibility: visible !important;
    position: relative !important; /* Zet hem in de normale flow */
    background: #fff; /* Of de kleur van je keuze */
    z-index: 9999;
    width: 100%;
    border-bottom: 1px solid #eee;
}

/* Zorg dat de spacer (die we in de PHP hebben gezet) de boel niet wegduwt */
body.logged-in #content {
    padding-top: 0 !important; /* We gebruiken de spacer in PHP, dus hier is geen extra padding nodig */
}

/* --- MENU FIX VOOR DESKTOP & MOBIEL --- */

/* 1. Zorg dat het menu op desktop NIET naar de bodem zakt */
body.logged-in .navigation-top {
    position: relative !important; /* Haalt hem uit de 'zwevende' stand */
    bottom: auto !important;
    top: 0 !important;
    display: block !important;
    visibility: visible !important;
    background: #fff;
    width: 100%;
    z-index: 9999;
}

/* 2. Zorg dat het menu op mobiel zichtbaar wordt */
@media screen and (max-width: 767px) {
    body.logged-in .navigation-top {
        display: block !important;
        position: relative !important;
    }

    /* Zorg dat de menu-knop (hamburger) zichtbaar is */
    .menu-toggle {
        display: block !important;
        background: #fff;
        color: #333;
        width: 100%;
        padding: 15px;
        text-align: left;
    }
}

/* 3. Voorkom dat de content over het menu heen schuift */
body.logged-in .site-content-contain {
    margin-top: 0 !important;
    padding-top: 20px !important;
}
/* --- PAGINATITEL FIX --- */

/* 1. Zorg dat de titel van de pagina (zoals Teetimes) zichtbaar is */
body.logged-in .entry-title {
    display: block !important;
    visibility: visible !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    color: #333 !important; /* Zorg dat het niet wit-op-wit is */
}

/* 2. Twenty Seventeen verbergt titels soms op de 'front-page', dit zet ze terug */
body.logged-in .panel-content .entry-title {
    display: block !important;
}

/* 3. Duw de hele content-container nog iets verder omlaag als dat nodig is */
body.logged-in .site-content-contain {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* 4. Extra witruimte boven de kop voor een rustig beeld */
body.logged-in #content {
    padding-top: 40px !important;
}
/* Verberg de 'Bewerk' link voor IEDEREEN, overal */
.edit-link, 
.post-edit-link, 
a[href*="action=edit"], 
.entry-footer fieldset {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}