/* Heroicons Base Styles */
.heroicon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Icon Field Styles (for search icons, etc.) */
.icon-field.heroicon {
    width: 20px;
    height: 20px;
    color: #6b7280;
}

/* Navigation Icon Styles */
.icon-nav.heroicon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: #374151;
}

/* Minimal icon styling only - preserve original layout */

/* Icon Suggest Styles */
.icon-suggest.heroicon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    margin-top: 2px;
    color: var(--text-green);
    flex-shrink: 0;
}

/* Header Icons - Larger for better touch targets */
.cta-navtrigger .heroicon,
.cta-navaccount .heroicon {
    width: 22px;
    height: 22px;
    color: #6b7280;
}

/* Language/Account Dropdown Chevrons - Smaller and centered */
.cta-navitem .heroicon {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    margin-top: 0;
    color: #9ca3af;
}

/* Hover Effects - Only on desktop */
@media (min-width: 1200px) {
    .cta-navtrigger:hover .heroicon,
    .cta-navaccount:hover .heroicon {
        color: #374151;
        background-color: rgba(107, 114, 128, 0.1);
        border-radius: 4px;
        padding: 2px;
    }

    .cta-navitem:hover .heroicon {
        color: #374151;
        transform: rotate(180deg);
    }

    .cta-navtrigger-navmenu:hover {
        background-color: rgba(107, 114, 128, 0.1);
    }
}

/* Hamburger Menu Icons */
.cta-navtrigger-navmenu {
    position: relative;
    padding: 6px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.cta-navtrigger-navmenu .hamburger-icon,
.cta-navtrigger-navmenu .close-icon {
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cta-navtrigger-navmenu .hamburger-icon .heroicon,
.cta-navtrigger-navmenu .close-icon .heroicon {
    width: 24px;
    height: 24px;
    color: #374151;
}

/* Show hamburger by default, hide close */
.cta-navtrigger-navmenu .close-icon {
    display: none;
}

/* When menu is active, show close and hide hamburger */
.navitem-menu.trigger--active .cta-navtrigger-navmenu .hamburger-icon {
    display: none;
}

.navitem-menu.trigger--active .cta-navtrigger-navmenu .close-icon {
    display: block;
}

/* Size Variants */
.heroicon-xs {
    width: 12px;
    height: 12px;
}

.heroicon-sm {
    width: 16px;
    height: 16px;
}

.heroicon-md {
    width: 20px;
    height: 20px;
}

.heroicon-lg {
    width: 24px;
    height: 24px;
}

.heroicon-xl {
    width: 32px;
    height: 32px;
}