/**
 * Final fix for mobile menu icon alignment
 */

@media (max-width: 767px) {
    /* Ensure menu items display correctly with arrow */
    .main-navigation .nav-menu {
        width: 100% !important;
    }
    
    .main-navigation .nav-menu li {
        width: 100% !important;
    }
    
    .main-navigation .nav-menu li a {
        display: inline-flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        padding: 12px 15px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Arrow icon style - inline with text */
    .main-navigation .nav-menu li a::before {
        content: '\203A' !important; /* Single right angle quote */
        position: relative !important;
        display: inline-block !important;
        margin-right: 10px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        font-weight: normal !important;
        color: #c8232c !important;
        vertical-align: middle !important;
        top: -1px !important; /* Fine tune vertical position */
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Ensure text doesn't wrap */
    .main-navigation .nav-menu li a span {
        flex: 1 !important;
        white-space: nowrap !important;
    }
    
    /* Hover state - keep same position */
    .main-navigation .nav-menu li a:hover {
        padding-left: 15px !important; /* Keep same padding as normal state */
        transform: none !important; /* No transform on hover */
    }
    
    .main-navigation .nav-menu li a:hover::before {
        margin-right: 10px !important; /* Keep same margin */
        margin-left: 0 !important;
    }
}