/* ==========================================================================
   ALGEMENE STYLING & BASIS (Geldt voor alles)
   ========================================================================== */
#peet-uniform-menu { 
    font-family: 'Open Sans', sans-serif; 
    position: relative; 
    z-index: 99999; 
    width: 100%; 
    background: #000000; 
}

/* Verberg standaard de mobiele sluitknop-header */
.p-overlay-header { display: none !important; }

/* ==========================================================================
   DESKTOP / LAPTOP STYLING (Schermen breder dan 1023px)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    /* Verberg de hamburger balk */
    .p-mobiel-bar { display: none !important; }
    
    /* Zorg dat de menu-container gewoon op de pagina staat in plaats van een overlay */
    #p-menu-overlay { 
        position: static !important; 
        height: auto !important; 
        background: #000000 !important; 
        overflow-y: visible !important; 
        display: block !important;
    }
    
    /* Zet de hoofdlinks horizontaal naast elkaar */
    .p-menu-links { 
        display: flex !important; 
        flex-direction: row !important; 
        justify-content: flex-start !important; 
        flex-wrap: wrap !important;
        list-style: none !important; 
        padding: 0 !important; 
        margin: 0 !important; 
    }
    
    .p-menu-links > li { 
        position: relative !important; 
        border-bottom: none !important; 
    }
    
    /* BASIS KLEUR VAN DE LINKS OP DESKTOP (Altijd wit, ongeacht of je er al op geklikt hebt) */
    .p-menu-links > li > a,
    .p-menu-links > li > a:visited,
    .p-menu-links > li > a:link { 
        padding: 15px 20px !important; 
        font-size: 15px !important; 
        color: #ffffff !important; /* Strak wit */
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }
    
    /* KLEUR BIJ HOVER (Wordt rood als je er met de muis op staat) */
    .p-menu-links > li:hover > a {
        color: #c1121f !important; /* Peet Cadillac Rood */
    }
    
    /* Submenu styling voor laptop (zwevend onder het hoofdmenu) */
    .p-submenu { 
        display: none !important; 
        position: absolute !important; 
        top: 100% !important; 
        left: 0 !important; 
        min-width: 240px !important; 
        background: #111111 !important; 
        box-shadow: 0px 8px 16px rgba(0,0,0,0.5) !important;
        border-top: 3px solid #c1121f !important;
    }
    
    .p-submenu li { 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
    }
    
    /* KLEUR VAN DE LINKS IN HET SUBMENU */
    .p-submenu li a,
    .p-submenu li a:visited,
    .p-submenu li a:link { 
        padding: 12px 20px !important; 
        color: #cccccc !important; /* Lichtgrijs voor submenu */
        font-size: 14px !important;
        font-weight: normal !important;
        text-align: left !important;
    }

    /* SUBMENU HOVER (Wordt wit met een subtiele rode gloed of rode tekst bij hover) */
    .p-submenu li a:hover {
        color: #ffffff !important;
        background: #1a1a1a !important;
    }

    /* TOON SUBMENU BIJ HOVER */
    .p-has-submenu:hover .p-submenu { 
        display: block !important; 
    }
    
    /* Draai het pijltje om bij hover */
    .p-has-submenu:hover .p-pijl { 
        transform: rotate(180deg) !important; 
        display: inline-block !important; 
    }
}

/* ==========================================================================
   MOBIEL & TABLET STYLING (Schermen tot 1023px)
   ========================================================================== */
@media screen and (max-width: 1023px) {
    .p-mobiel-bar { display: flex !important; justify-content: flex-start !important; align-items: center !important; padding: 15px 20px !important; background: #000000 !important; border-bottom: 3px solid #c1121f !important; height: auto !important; box-sizing: border-box !important; width: 100% !important; border-top: none !important; border-left: none !important; border-right: none !important; cursor: pointer !important; }
    .p-overlay-header { display: flex !important; justify-content: flex-start !important; align-items: center !important; padding: 15px 20px !important; background: #000000 !important; border-bottom: 3px solid #c1121f !important; height: auto !important; box-sizing: border-box !important; }
    
    .p-menu-titel { color: #ffffff !important; font-weight: bold !important; font-size: 18px !important; letter-spacing: 1px !important; margin-left: 15px !important; }
    .p-burger-icon { display: flex !important; flex-direction: column !important; gap: 5px !important; width: 28px !important; }
    .p-burger-icon span { display: block !important; width: 28px !important; height: 3px !important; background-color: #ffffff !important; }
    
    #p-sluitknop { background: none !important; border: none !important; color: #ffffff !important; font-size: 36px !important; cursor: pointer !important; line-height: 1 !important; padding: 0 !important; margin-right: 15px !important; }
    
    #p-menu-overlay { position: fixed !important; top: -100% !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.98) !important; z-index: 100000 !important; transition: top 0.3s ease-in-out !important; overflow-y: auto !important; padding: 0 !important; margin: 0 !important; }
    #p-menu-overlay.p-active { top: 0 !important; }
    
    .p-menu-links { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; }
    .p-menu-links li { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 0 !important; margin: 0 !important; display: block !important; float: none !important;}
    
    /* MOBIELE LINKS KLEUR */
    .p-menu-links li a,
    .p-menu-links li a:visited,
    .p-menu-links li a:link { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 18px 20px !important; color: #ffffff !important; text-decoration: none !important; font-size: 16px !important; font-weight: 600 !important; text-align: left !important; box-sizing: border-box !important; }
    
    .p-submenu { display: none !important; list-style: none !important; background: #111111 !important; padding: 0 !important; margin: 0 !important; width: 100% !important; }
    .p-submenu li { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }
    
    /* MOBIELE SUBMENU LINKS KLEUR */
    .p-submenu li a,
    .p-submenu li a:visited,
    .p-submenu li a:link { padding: 14px 35px !important; font-size: 15px !important; font-weight: 400 !important; color: #cccccc !important; }
    
    .p-has-submenu.p-open .p-submenu { display: block !important; }
    .p-has-submenu.p-open .p-pijl { transform: rotate(180deg) !important; display: inline-block !important; }
}