/* ==========================================
   ACCE SALEM - MODERN MOBILE NAVBAR
   Primary: #064a9b | Accent: #dc3545
========================================== */

@media (max-width: 767px) {

    /* Header */
    .mean-container .mean-bar {
        background: #064a9b !important;
        min-height: 64px;
        padding: 0 !important;
        border-bottom: 3px solid #dc3545;
        box-shadow: 0 4px 14px rgba(6, 74, 155, 0.15);
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    /* Brand Name */
    .mean-container .mean-bar::before {
        content: "ACCE SALEM";
        position: absolute;
        left: 20px;
        top: 21px;
        color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 22px;
    }

    /* Hide Default Menu Label */
    .mean-container .mean-bar::after {
        display: none !important;
    }

    /* Hamburger Button - Preserve Original Positioning */
    .mean-container a.meanmenu-reveal {
        width: 22px;
        height: 22px;
        padding: 18px;
        top: 0;
        right: 0;
        display: block;
        float: right;
        background: transparent !important;
        border: none;
        box-sizing: content-box;
        cursor: pointer;
    }

    /* Hamburger Lines */
    .mean-container a.meanmenu-reveal span {
        display: block;
        width: 23px;
        height: 2px;
        margin-top: 5px;
        background: #ffffff !important;
        border-radius: 2px;
    }

    /* Dropdown */
    .mean-container .mean-nav {
        background: #ffffff !important;
        float: left;
        width: 100%;
        box-shadow: 0 10px 24px rgba(6, 74, 155, 0.10);
    }

    /* Menu Rows */
    .mean-container .mean-nav ul li {
        background: #ffffff !important;
        float: left;
        position: relative;
        width: 100%;
        border-top: 1px solid #edf0f5;
    }

    /* Main Links */
    .mean-container .mean-nav ul li a {
        background: #ffffff !important;
        color: #26364d !important;
        display: block;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.15px;
        line-height: 1.5;
        margin: 0;
        padding: 16px 22px;
        text-align: left;
        text-decoration: none;
        text-transform: capitalize;
        width: 90%;
        box-sizing: border-box;
        transition: color 0.2s ease, background 0.2s ease;
    }

    /* Hover */
    .mean-container .mean-nav ul li a:hover {
        background: #f2f6fc !important;
        color: #064a9b !important;
    }

    /* Expand / Collapse Controls */
    .mean-container .mean-nav ul li a.mean-expand {
        height: 15px;
        margin-top: 1px;
        padding: 12px !important;
        text-align: right;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        font-weight: 700;
        border: 0 !important;
        background: #ffffff !important;
        color: #064a9b !important;
        width: auto;
    }

    .mean-container .mean-nav ul li a.mean-expand:hover {
        background: #f2f6fc !important;
        color: #dc3545 !important;
    }

    /* Submenu Links */
    .mean-container .mean-nav ul li li a {
        background: #f6f8fc !important;
        color: #43536b !important;
        font-size: 13px;
        font-weight: 500;
        padding: 14px 10%;
        width: 80%;
        opacity: 1;
        text-shadow: none !important;
    }

    .mean-container .mean-nav ul li li li a {
        width: 70%;
        padding: 14px 15%;
    }

    .mean-container .mean-nav ul li li li li a {
        width: 60%;
        padding: 14px 20%;
    }

    /* Last Item */
    .mean-container .mean-nav ul li.mean-last a {
        border-bottom: 0;
        margin-bottom: 0;
    }

    /* Menu Background */
    .mobile-menu-area {
        background: #ffffff !important;
    }

    /* Preserve Existing Menu Flow */
    .mobile-menu.mean-container {
        overflow: hidden;
    }

    .mean-container .mean-push {
        float: left;
        width: 100%;
        padding: 0;
        margin: 0;
        clear: both;
    }
}