/* Container - necessary to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* The clickable image (Menu Icon) */
.dropbtn {
    cursor: pointer;
    display: block;
    max-width: 150px; 
    padding: 5px; 
}

/* Dropdown Content */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 550px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
    z-index: 9999;
    border: 1px solid #333;
    max-height: 500px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
}

/* Force links to stay black when the general dropdown parent container is hovered */
.dropdown:hover .dropdown-content a,
.dropdown-content a,
.dropdown-content a:link,
.dropdown-content a:visited {
    color: #2c2c2c !important; 
    padding: 18px 25px; 
    text-decoration: none;
    display: block;
    font-family: 'Cera Pro', sans-serif;
    font-size: 17px; 
    border-bottom: 1px solid #eee;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}

/* Apply red ONLY when the user directly hovers over a single specific line - High Priority */
.dropdown:hover .dropdown-content a:hover {
    background-color: #f2f2f2;
    color: #FF0000 !important; 
}

/* Show class (applied via JavaScript) */
.show {
    display: block;
}

/* --- Mobile Specific Adjustments --- */
@media (max-width: 600px) {
    .dropdown-content {
        min-width: 90vw; 
        left: 0;
        max-height: 60vh; 
    }
         
    .dropdown-content a {
        padding: 20px; 
        font-size: 18px;
    }
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Vertical offset for anchor links to prevent title overlap */
tr[id] {
    scroll-margin-top: 20px;
}