/* ==========================================================================
   Header / mobile-nav guarantee
   Loaded LAST so these rules always win, regardless of what gifall.css /
   gifall-responsive.css set. Fixes: transparent slide-out panel, dropdown
   accordions that never opened, and the header being unusable on tablet
   and phone screens.
   ========================================================================== */

header#main-header {
    background-color: #ffffff !important;
}

.header-container {
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Slide-out mobile menu must always have a solid, opaque background */
.mobile-menu {
    background-color: #ffffff !important;
    color: #333 !important;
}

.mobile-nav a,
.mobile-dropdown-btn {
    color: #333 !important;
}

.close-mobile-menu {
    color: #07bde7 !important;
}

/* Dropdown accordions inside the mobile menu open on the "active" class
   (that's what the page's JS toggles) */
.mobile-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.mobile-dropdown-menu.active {
    max-height: 600px;
}

/* Dark overlay behind the slide-out menu */
.overlay {
    background: rgba(0, 0, 0, 0.55) !important;
}

@media (max-width: 992px) {
    nav,
    .donate-btn {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 26px;
        color: #07bde7 !important;
        background: none !important;
    }

    .header-container {
        padding: 12px 16px !important;
    }

    .logo img {
        height: 46px !important;
    }
}

@media (min-width: 993px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    nav ul li {
        margin: 0 8px;
    }
    nav ul li a {
        font-size: 13.5px;
    }
    .donate-btn {
        padding: 8px 16px;
        font-size: 13.5px;
    }
    .logo img {
        height: 46px;
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        width: 90% !important;
        max-width: none !important;
    }

    .logo img {
        height: 38px !important;
    }
}

/* Belt-and-braces: never allow the page to scroll sideways on small screens */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}