:root {
    --cromo-header-menu-text: #ffffff;
    --cromo-header-menu-hover: #ff3b3b;
    --cromo-header-menu-panel-text: #14171c;
}

.header-menu {
    color: var(--cromo-header-menu-text);
}

.header-menu a.header-menu__link,
.header-menu a.header-menu__link:hover,
.header-menu a.header-menu__link:focus,
.header-menu a.header-menu__link:focus-visible {
    color: var(--cromo-header-menu-text) !important;
    text-decoration: none !important;
}

.header-menu a.header-menu__link:hover,
.header-menu a.header-menu__link:focus,
.header-menu a.header-menu__link:focus-visible {
    color: var(--cromo-header-menu-hover) !important;
}

/*
 * Il pannello del mega menu è su fondo bianco, ma eredita il bianco di
 * .header-menu: senza questo reset i link senza utility di colore
 * risultano invisibili. Va impostato solo sul contenitore, così le utility
 * Tailwind sui figli (text-ink, group-hover:text-cromo-red) continuano a vincere.
 */
.header-menu__mega {
    color: var(--cromo-header-menu-panel-text);
}