/**
 * Navigation Icons - Frontend Styles
 */

/* Icon base styles */
.webtron-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
}

/* Icon position: before text */
.has-nav-icon.icon-position-before .webtron-nav-icon {
    margin-right: 0.5em;
}

/* Icon position: after text */
.has-nav-icon.icon-position-after .webtron-nav-icon {
    margin-left: 0.5em;
}

/* Submenu indicator icons - don't add extra margin */
.wp-block-navigation__submenu-icon {
    margin-left: 0.25em;
}

/* Hover effects for icons */
.wp-block-navigation-item__content:hover .webtron-nav-icon,
.wp-block-navigation-item__content:focus .webtron-nav-icon {
    opacity: 0.85;
}

/* Icon sizing in different navigation contexts */
.wp-block-navigation .webtron-nav-icon {
    font-size: 0.9em;
}

/* Large navigation */
.wp-block-navigation[style*="font-size: 18px"] .webtron-nav-icon,
.wp-block-navigation[style*="font-size: 20px"] .webtron-nav-icon,
.wp-block-navigation.has-large-font-size .webtron-nav-icon {
    font-size: 0.85em;
}

/* Small navigation */
.wp-block-navigation[style*="font-size: 12px"] .webtron-nav-icon,
.wp-block-navigation[style*="font-size: 13px"] .webtron-nav-icon,
.wp-block-navigation.has-small-font-size .webtron-nav-icon {
    font-size: 1em;
}

/* Mobile menu icon adjustments */
.wp-block-navigation__responsive-container.is-menu-open .webtron-nav-icon {
    font-size: 1em;
}

/* Icon animation on hover (subtle) */
@media (prefers-reduced-motion: no-preference) {
    .webtron-nav-icon {
        transition: transform 0.15s ease, opacity 0.15s ease;
    }
    
    .wp-block-navigation-item__content:hover .webtron-nav-icon {
        transform: scale(1.1);
    }
}

/* Ensure icons inherit link color by default */
.webtron-nav-icon:not([style*="color"]) {
    color: inherit;
}