/**
 * Menu Icons - Frontend CSS
 * Ultra-aggressive styling to prevent mobile sizing issues
 */

/* ==========================================================================
   BASE STYLES - Both Dashicons and Custom Images
   ========================================================================== */

/* Menu icon general styles - multiple selectors for specificity */
.dwm-menu-icon,
span.dwm-menu-icon,
img.dwm-menu-icon,
.menu-item .dwm-menu-icon,
.menu-item a .dwm-menu-icon,
.offcanvas .dwm-menu-icon,
.offcanvas-body .dwm-menu-icon,
.mobile-menu .dwm-menu-icon,
nav .dwm-menu-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ==========================================================================
   CUSTOM IMAGE ICONS - Primary Fix for User's Issue
   ========================================================================== */

/* Custom image icons - ULTRA AGGRESSIVE SELECTORS */
.dwm-menu-icon-image,
img.dwm-menu-icon-image,
.dwm-menu-icon.dwm-menu-icon-image,
img.dwm-menu-icon.dwm-menu-icon-image,
.menu-item .dwm-menu-icon-image,
.menu-item a .dwm-menu-icon-image,
.menu-item img.dwm-menu-icon-image,
a .dwm-menu-icon-image,
a img.dwm-menu-icon-image,
nav .dwm-menu-icon-image,
nav a .dwm-menu-icon-image,
nav img.dwm-menu-icon-image,
.offcanvas .dwm-menu-icon-image,
.offcanvas a .dwm-menu-icon-image,
.offcanvas img.dwm-menu-icon-image,
.offcanvas-body .dwm-menu-icon-image,
.offcanvas-body a .dwm-menu-icon-image,
.offcanvas-body img.dwm-menu-icon-image,
.mobile-menu .dwm-menu-icon-image,
.mobile-menu a .dwm-menu-icon-image,
.mobile-menu img.dwm-menu-icon-image,
#offcanvasNavbar .dwm-menu-icon-image,
#offcanvasNavbar a .dwm-menu-icon-image,
#offcanvasNavbar img.dwm-menu-icon-image {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    display: inline-block !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ==========================================================================
   DASHICON ICONS
   ========================================================================== */

/* Dashicon menu icons - ultra-specific selectors */
.dwm-menu-icon.dashicons,
span.dwm-menu-icon.dashicons,
.menu-item .dwm-menu-icon.dashicons,
.menu-item a .dwm-menu-icon.dashicons,
a .dwm-menu-icon.dashicons,
.offcanvas .dwm-menu-icon.dashicons,
.offcanvas-body .dwm-menu-icon.dashicons,
.mobile-menu .dwm-menu-icon.dashicons,
.dwm-icon-position-before .dwm-menu-icon.dashicons,
.dwm-icon-position-after .dwm-menu-icon.dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    line-height: 18px !important;
    margin-right: 6px;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Prevent dashicons from inheriting large sizes */
.dwm-menu-icon.dashicons:before,
span.dwm-menu-icon.dashicons:before,
.offcanvas .dwm-menu-icon.dashicons:before,
.offcanvas-body .dwm-menu-icon.dashicons:before {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
}

/* ==========================================================================
   ICON POSITIONING
   ========================================================================== */

/* Icon position: before */
.dwm-icon-position-before .dwm-menu-icon {
    margin-right: 6px;
    margin-left: 0;
}

/* Icon position: after */
.dwm-icon-position-after .dwm-menu-icon {
    margin-left: 6px;
    margin-right: 0;
}

/* Ensure icons align properly in different menu layouts */
.menu-item a .dwm-menu-icon,
nav .menu-item a .dwm-menu-icon,
.nav-menu .menu-item a .dwm-menu-icon,
.offcanvas .menu-item a .dwm-menu-icon,
.offcanvas-body .menu-item a .dwm-menu-icon {
    line-height: 1 !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE - Tablets
   ========================================================================== */

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

    /* Image icons on mobile */
    .dwm-menu-icon-image,
    img.dwm-menu-icon-image,
    .menu-item .dwm-menu-icon-image,
    .menu-item a img.dwm-menu-icon-image,
    .offcanvas .dwm-menu-icon-image,
    .offcanvas-body .dwm-menu-icon-image,
    .offcanvas-body a img.dwm-menu-icon-image,
    .mobile-menu .dwm-menu-icon-image {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }

    /* Dashicons on mobile */
    .dwm-menu-icon.dashicons,
    span.dwm-menu-icon.dashicons,
    .menu-item .dwm-menu-icon.dashicons,
    .menu-item a .dwm-menu-icon.dashicons,
    .offcanvas .dwm-menu-icon.dashicons,
    .offcanvas-body .dwm-menu-icon.dashicons,
    a .dwm-menu-icon.dashicons {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        line-height: 16px !important;
    }

    .dwm-menu-icon.dashicons:before,
    span.dwm-menu-icon.dashicons:before {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE - Phones
   ========================================================================== */

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

    /* Image icons on small phones */
    .dwm-menu-icon-image,
    img.dwm-menu-icon-image,
    .menu-item .dwm-menu-icon-image,
    .menu-item a img.dwm-menu-icon-image,
    .offcanvas .dwm-menu-icon-image,
    .offcanvas-body .dwm-menu-icon-image,
    .offcanvas-body a img.dwm-menu-icon-image,
    .mobile-menu .dwm-menu-icon-image {
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }

    /* Dashicons on small phones */
    .dwm-menu-icon.dashicons,
    span.dwm-menu-icon.dashicons,
    .menu-item .dwm-menu-icon.dashicons,
    .menu-item a .dwm-menu-icon.dashicons,
    .offcanvas .dwm-menu-icon.dashicons,
    .offcanvas-body .dwm-menu-icon.dashicons,
    a .dwm-menu-icon.dashicons {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        line-height: 14px !important;
    }

    .dwm-menu-icon.dashicons:before,
    span.dwm-menu-icon.dashicons:before {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
        line-height: 14px !important;
    }
}