/* ========================================================================== 
   COMMON STYLES (Applies to both Mobile and Desktop) 
   ========================================================================== */ 
.site-menu { 
    position: relative; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    z-index: 100; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    background-color: #41747f; /* Main dark teal header theme */
    /*margin-top: 24px;*/
}

#nav-menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#nav-menu ul li a { 
    text-decoration: none; 
    color: white; 
    font-size: 1.4em; 
    transition: all 0.2s ease-in-out; 
} 

#nav-menu li { 
    margin-right: 15px;
}

/* ========================================================================== 
   MOBILE STYLES (Default / Screens under 768px wide) 
   ========================================================================== */
@media (max-width: 956px) {
    #nav-menu ul li a { 

        font-size: .8rem;
    } 
}


/* ========================================================================== 
   MOBILE STYLES (Default / Screens under 768px wide) 
   ========================================================================== */ 
@media (max-width: 767px) { 
    /* Pancake Button Styling */ 
    #pancake-btn { 
        background: none; 
        border: none; 
        cursor: pointer; 
        display: flex; 
        flex-direction: column; 
        justify-content: space-between; 
        width: 30px; 
        height: 21px; 
        padding: 0;
        margin-left: auto;  /* float the button to the right*/

    } 

 
    
    /* Change the text color for handheld light background menu */
    #nav-menu ul li a { 
        color: black; 
    } 

    #pancake-btn .line { 
        width: 100%; 
        height: 3px; 
        background-color: white; 
        transition: all 0.3s ease-in-out;
         
    } 

    /* "X" Animation Transform Rules */ 
    #pancake-btn.open .line:nth-child(1) { 
        transform: translateY(9px) rotate(45deg); 
    } 
    #pancake-btn.open .line:nth-child(2) { 
        opacity: 0; 
    } 
    #pancake-btn.open .line:nth-child(3) { 
        transform: translateY(-9px) rotate(-45deg); 
    } 

    /* Dropdown Settings */ 
    #nav-menu { 
        position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%; 
        background: #fdfdfd; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
        transition: all 0.4s ease-in-out; 
        overflow: hidden; 
        z-index: 99; 
    } 

    #nav-menu.menu-closed { 
        max-height: 0; 
        opacity: 0; 
        pointer-events: none; 
        display: block; 
    } 

    #nav-menu.menu-open { 
        /*max-height: 700px;*/ 
        opacity: 1; 
        pointer-events: auto; 
    } 

    #nav-menu ul li a { 
        display: block; 
        padding: 15px 20px; 
        border-bottom: 1px solid #eee; 
    } 

    #nav-menu ul li a.active { 
        font-weight: bold; 
        background-color: #f5f5f5;
    } 
    
} 

/* ========================================================================== 
   DESKTOP STYLES (Screens 768px and wider) 
   ========================================================================== */ 
@media (min-width: 768px) { 
    /* Hide the pancake button on desktop */ 
    #pancake-btn { 
        display: none !important; 
    } 

    /* Force header distribution */
    .site-menu { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    } 

    /* Centering Navigation */ 
    #nav-menu { 
        max-height: none !important; 
        opacity: 1 !important; 
        pointer-events: auto !important; 
        position: static; 
        box-shadow: none; 
        background: transparent; 
        flex-grow: 1; 
        display: flex; 
        justify-content: center; 
    } 

    /* Row Layout */ 
    #nav-menu ul { 
        display: flex; 
        /*gap: 20px;*/ 
    } 

    #nav-menu ul li a { 
        display: inline-block; 
        padding: 8px 12px; 
    } 

    #nav-menu ul li { 
        border-left: 2px solid #8cd1e1; 
        border-top: 2px solid #8cd1e1; 
        border-radius: 20px; 
    } 

    /* Hover effect */ 
    #nav-menu ul li a:hover { 
        background-color: #8cd1e1; 
        border-radius: 22px; 
        color: #41747f; /* Flips text color on hover for readability */
    } 

    /* FIX: Changed from dark blue to bright light-yellow for readability against teal background */
    #nav-menu ul li a.active { 
        color: #fff4a3; 
        font-weight: bold; 
    } 
}