:root {
    --cromo-header-menu-text: #ffffff;
    /* arancio brand chiaro: sull'header nero fa 7.5:1 (era il rosso #ff3b3b
       rimasto da una palette precedente, che questo file forzava con
       !important sopra le utility Tailwind del menu) */
    --cromo-header-menu-hover: var(--cromo-primary-bright, #ff7a45);
    --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,
.header-menu a.header-menu__link > span svg,
.header-menu a.header-menu__link > span svg:hover,
.header-menu a.header-menu__link > span svg:focus,
.header-menu a.header-menu__link > span svg: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-primary-darker) continuano a vincere.
 */
.header-menu__mega {
    color: var(--cromo-header-menu-panel-text);
}