/* ═══════════════════════════════════════════════════ */
/* Mobile Menu Override — White, Clean, Premium UX    */
/* Load AFTER custom.css                              */
/* ═══════════════════════════════════════════════════ */

@media only screen and (max-width: 991px) {

    /* ── Menu Container ── */
    .slicknav_menu {
        background: #FFFFFF;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .slicknav_menu ul {
        margin: 0;
        padding: 0;
    }

    .slicknav_menu ul ul {
        margin: 0;
    }

    /* ── Hamburger Button ── */
    .slicknav_btn {
        background: var(--accent-color, #872325);
        border-radius: 8px;
        width: 42px;
        height: 42px;
    }

    .slicknav_icon .slicknav_icon-bar {
        background-color: #FFFFFF;
        height: 2.5px;
        border-radius: 2px;
    }

    /* ── Top-level menu items ── */
    .slicknav_nav .slicknav_row,
    .slicknav_nav > li > a {
        font-size: 16px;
        font-weight: 600;
        color: #202020;
        padding: 14px 20px;
        margin: 0;
        border-bottom: 1px solid #F0F0F0;
        line-height: 1.4em;
        transition: background .2s, color .2s;
    }

    /* Last top-level item — no border */
    .slicknav_nav > li:last-child > a,
    .slicknav_nav > li:last-child > .slicknav_row {
        border-bottom: none;
    }

    /* Hover / focus state */
    .slicknav_nav a:hover,
    .slicknav_nav a:focus,
    .slicknav_nav .slicknav_row:hover {
        background-color: #F8F8F8;
        color: var(--accent-color, #872325);
    }

    /* ── Chevron arrow (dropdown indicator) ── */
    .slicknav_arrow {
        font-size: 0 !important;
    }

    .slicknav_arrow:after {
        content: '\f107';
        position: absolute;
        font-family: 'FontAwesome';
        font-weight: 900;
        font-size: 14px;
        color: #AAAAAA;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .25s ease, color .25s ease;
    }

    .slicknav_open > a .slicknav_arrow:after,
    .slicknav_open > .slicknav_row .slicknav_arrow:after {
        transform: translateY(-50%) rotate(-180deg);
        color: var(--accent-color, #872325);
    }

    .slicknav_menu ul li a {
        color: #202020;
        font-weight: bold;
    }

    /* ── Child / sub-menu items ── */
    .slicknav_menu ul ul {
        background: #FAFAFA;
        border-top: 1px solid #EEEEEE;
        border-bottom: 1px solid #EEEEEE;
    }

    .slicknav_menu ul ul li a {
        font-size: 15px;
        font-weight: 400;
        color: #5A6361;
        padding: 12px 20px 12px 44px;
        margin: 0;
        border-bottom: 1px solid #F0F0F0;
        position: relative;
        transition: background .2s, color .2s;
    }

    /* Small dot indicator for child items */
    .slicknav_menu ul ul li a::before {
        content: '';
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #CCCCCC;
        transition: background .2s;
    }

    .slicknav_menu ul ul li a:hover::before {
        background: var(--accent-color, #872325);
    }

    .slicknav_menu ul ul li:last-child a {
        border-bottom: none;
    }

    .slicknav_menu ul ul li a:hover,
    .slicknav_menu ul ul li a:focus {
        background: #F2F2F2;
        color: var(--accent-color, #872325);
    }

    /* ── 3rd-level items (deeper nesting) ── */
    .slicknav_menu ul ul ul {
        background: #F5F5F5;
    }

    .slicknav_menu ul ul ul li a {
        padding-left: 62px;
    }

    .slicknav_menu ul ul ul li a::before {
        left: 44px;
        width: 4px;
        height: 4px;
        background: #D5D5D5;
    }

    /* ── Highlighted menu item (CTA) ── */
    .slicknav_nav li.highlighted-menu {
        display: block;
        padding: 12px 20px 16px;
        border-bottom: none;
    }

    .slicknav_nav li.highlighted-menu a {
        display: block;
        text-align: center;
        background: var(--accent-color, #872325);
        color: #FFFFFF;
        font-weight: 600;
        font-size: 15px;
        padding: 14px 20px;
        border-radius: 10px;
        border-bottom: none;
        transition: background .2s;
    }

    .slicknav_nav li.highlighted-menu a:hover {
        background: #6e1c1e;
        color: #FFFFFF;
    }

    /* ── Scrollbar styling inside menu ── */
    .slicknav_menu::-webkit-scrollbar {
        width: 4px;
    }

    .slicknav_menu::-webkit-scrollbar-track {
        background: transparent;
        border: none;
    }

    .slicknav_menu::-webkit-scrollbar-thumb {
        background: #D0D0D0;
        border-radius: 4px;
    }
}