/* ========================================================================= */
/* 1. CONTAINER & BASIS STIJL */
/* ========================================================================= */

/* De hoofdcontainer van het uitschuifbare paneel */
#shiftnav-main {
    background: #000000; /* Zwarte achtergrond */
    color: #ffffff;      /* Standaardtekst wit voor leesbaarheid */
    padding: 30px 20px;
    box-shadow: none;
}

/* De Sluitknop (X of Tekst) */
#shiftnav-close {
    color: #ffffff !important;
    font-size: 1.2em;
}

/* ========================================================================= */
/* 2. MENU LINKS & TYPOGRAFIE */
/* ========================================================================= */

/* Alle links in het menu */
#shiftnav-main a {
    color: #ffffff !important;
    text-decoration: none;
    background-color: transparent !important;
    font-size: 1.1em;
    padding: 10px 0; /* Verticale ruimte voor links */
    display: block; /* Zorgt ervoor dat de hele regel klikbaar is */
}

/* Muis over (Hover) stijl voor de links */
#shiftnav-main a:hover {
    color: #D6C7B7 !important; /* Tekst wordt beige bij hover */
    text-shadow: 0 0 5px rgba(214, 199, 183, 0.5); /* Zachte beige gloed */
}

/* ========================================================================= */
/* 3. SCHEIDINGSPUNTJES & LIJNEN */
/* ========================================================================= */

/* Stijl voor de individuele lijst-items */
#shiftnav-main ul.shiftnav-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtiele witte scheidingslijn */

}

/* ========================================================================= */
/* 4. CUSTOM CONTENT (Voor Adres, Kom langs, etc.) */
/* ========================================================================= */

/* Algemene styling voor tekstblokken die je met de "Custom Content" optie toevoegt */
#shiftnav-main .shiftnav-custom-content {
    color: #cccccc; /* Lichtere kleur voor leesbaarheid op zwart */
    font-size: 0.95em;
    line-height: 1.5;
    padding: 15px 0 10px 0;
}
#shiftnav-main .shiftnav-custom-content strong {
    color: #ffffff; /* Witte kopjes zoals 'Kom langs' */
    display: block;
    margin-top: 10px;

}

/* Een generieke reset voor de lijst-stijl (voor als het een onbedoelde bullet is) */
#shiftnav-main ul.shiftnav-menu {
    list-style: none !important;
    padding-left: 0 !important;
}
/* Zorgt dat de achtergrond van de knop (het vierkant) beige wordt */
#shiftnav-toggle-main,
#shiftnav-toggle-main.shiftnav-target,
.shiftnav-toggle a.shiftnav-target {
    background-color: #CAB8A2 !important; /* De gewenste beige kleur */
}

/* Zorgt dat de streepjes ZWART zijn voor contrast op de beige achtergrond */
#shiftnav-toggle-main .shiftnav-target-icon span {
    background-color: #000000 !important; 
}
/* Zorgt ervoor dat de ACHTERGROND van de knop zwart blijft bij HOVER en FOCUS */
#shiftnav-toggle-main:hover,
#shiftnav-toggle-main:focus,
#shiftnav-toggle-main.shiftnav-target:hover,
#shiftnav-toggle-main.shiftnav-target:focus,
.shiftnav-toggle a.shiftnav-target:hover,
.shiftnav-toggle a.shiftnav-target:focus {
    background-color: #000000 !important; /* Zwart bij hover/focus */
    /* Zorg er ook voor dat eventuele randen of schaduwen uitgeschakeld blijven */
    border-color: #000000 !important;
    box-shadow: none !important; 
}

/* Zorgt ervoor dat de STREEPJES van het icoon wit blijven bij HOVER en FOCUS */
#shiftnav-toggle-main:hover .shiftnav-target-icon span,
#shiftnav-toggle-main:focus .shiftnav-target-icon span {
    background-color: #ffffff !important; /* Wit bij hover/focus */
}

/* Zorgt ervoor dat de ACHTERGROND van de knop zwart blijft bij HOVER en FOCUS */
#shiftnav-toggle-main:hover,
#shiftnav-toggle-main:focus,
#shiftnav-toggle-main.shiftnav-target:hover,
#shiftnav-toggle-main.shiftnav-target:focus,
.shiftnav-toggle a.shiftnav-target:hover,
.shiftnav-toggle a.shiftnav-target:focus {
    background-color: #000000 !important; /* Zwart bij hover/focus */
    /* Zorg er ook voor dat eventuele randen of schaduwen uitgeschakeld blijven */
    border-color: #000000 !important;
    box-shadow: none !important; 
}

/* Zorgt ervoor dat de STREEPJES van het icoon wit blijven bij HOVER en FOCUS */
#shiftnav-toggle-main:hover .shiftnav-target-icon span,
#shiftnav-toggle-main:focus .shiftnav-target-icon span {
    background-color: #ffffff !important; /* Wit bij hover/focus */
}

/* 3. Als de toggle een link is (a tag), richt je op de link */
.shiftnav-toggle a.shiftnav-target,
.shiftnav-toggle a.shiftnav-target:hover {
    background-color: #CAB8A2 !important; 
}

/* Definitieve Fix voor hardnekkige ROZE knipper bij hover/focus */
/* Deze overschrijft mogelijk door de plugin ingestelde kleuren met *zeer* hoge specificiteit. */
.shiftnav-toggle-button[style],
.shiftnav-toggle-button:hover[style] {
    background-color: transparent !important;
}