/* ================================================
   Mobile & Responsive Overrides
   ================================================ */

/* Desktop: keep Bootstrap hover behaviour */
@media (min-width: 992px) {
    .sub-toggle {
        display: none !important;
    }
    /* Let Bootstrap handle dropdown on hover */
    #mainmenu .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Mobile: adjust dropdown appearance */
@media (max-width: 991.98px) {
    #mainmenu {
        flex-direction: column;
        width: 100%;
        padding: 10px 0;
        background: #1a1a1a; /* adjust to match your header background */
    }
    #mainmenu .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    #mainmenu .nav-item:last-child {
        border-bottom: none;
    }
    #mainmenu .nav-link {
        display: inline-block;
        padding: 10px 15px;
        color: #fff !important;
    }
    /* Dropdown menu: full width, hidden by default, shown with .show */
    #mainmenu .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        background: #2a2a2a;
        border: none;
        border-radius: 0;
        padding-left: 20px;
        display: none; /* hidden by default */
        box-shadow: none;
    }
    #mainmenu .dropdown-menu.show {
        display: block;
    }
    #mainmenu .dropdown-menu .dropdown-item {
        color: #ccc;
        padding: 8px 15px;
    }
    #mainmenu .dropdown-menu .dropdown-item:hover,
    #mainmenu .dropdown-menu .dropdown-item:focus {
        background: var(--primary-color);
        color: #fff;
    }
    /* Custom sub‑toggle for nested menus (if any) */
    .sub-toggle {
        float: right;
        padding: 10px 15px;
        cursor: pointer;
        color: #fff;
        display: inline-block;
    }
    .sub-toggle:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f078";
        font-size: 12px;
    }
    .sub-toggle.open:after {
        content: "\f077";
    }
    /* Hide Bootstrap's default dropdown arrow on mobile */
    #mainmenu .dropdown-toggle::after {
        display: none;
    }
    /* Ensure dropdown items are not wrapped */
    #mainmenu .dropdown-item {
        white-space: normal;
    }
}

@media (max-width: 576px) {
    .navbar-brand img {
        max-height: 40px !important;
    }
    #mainmenu .nav-link {
        padding: 8px 12px;
        font-size: 14px;
    }
}