/* ─────────────────────────────────────────────────────────────
   CdL THEME — OVERRIDE DI COMPONENTE
   Consulenti del Lavoro · layer di personalizzazione

   Restyling dei componenti AGID, scritto sui NOMI DI CLASSE DEL KIT
   e caricato dopo il suo CSS. Nessun file di _ds/ viene modificato.

   Regola: si può cambiare l'aspetto, non la semantica.
   Struttura DOM, ruoli ARIA, ordine di tabulazione e anello di
   focus restano quelli del kit — è ciò su cui si regge la
   dichiarazione di accessibilità.
   ───────────────────────────────────────────────────────────── */


/* ── Footer ───────────────────────────────────────────────────
   Il kit centra il blocco identitario e lo chiude con una riga
   divisoria. Per CdL logo, dati e social sono allineati a
   sinistra, senza separatore.                        [delta 01] */

.it-footer__brand {
  align-items: flex-start;
  border-bottom: none;
  padding-bottom: 0;
}


/* ── Bottoni su fondo scuro ───────────────────────────────────
   Il kit prevede la famiglia "inverse" per i fondi scuri, ma le
   due combinazioni servono come classi compound.     [delta 02] */

.it-btn--inverse-filled {
  background: var(--color-white);
  color: var(--text-primary);
  border-color: var(--color-white);
}

.it-btn--inverse-filled:hover {
  background: var(--color-blue-97);
  color: var(--text-primary);
}

.it-btn--inverse-outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.it-btn--inverse-outline:hover {
  background: var(--color-white);
  color: var(--text-primary);
}

/* Bottone terziario CdL: senza sfondo, bordo verde secondario, testo verde scuro;
   hover fondo verde chiarissimo. Variante "dark" per fondi scuri/foto: bordo e
   testo bianchi, hover bianco pieno con testo blu istituzionale.   [delta 07] */
.it-btn--cdl-tertiary { background: transparent !important; color: var(--text-primary-dark) !important; border: 2px solid var(--secondary-green) !important; white-space: nowrap; }
.it-btn--cdl-tertiary:hover { background: var(--color-green-87) !important; color: var(--text-primary-dark) !important; }

.it-btn--cdl-tertiary-dark { background: transparent !important; color: var(--color-white) !important; border: 2px solid var(--color-white) !important; }
.it-btn--cdl-tertiary-dark:hover { background: var(--color-white) !important; color: var(--ink) !important; }

/* ── Hover bottoni secondari = hover bottoni primari ───────────
   Regola generale: outline/secondario si comporta come il
   primario filled in hover — fondo verde secondario, testo
   bianco (vedi bottone Festival del Lavoro in home).   [delta 26] */
.it-btn--outline.it-btn--primary:hover,
.it-btn--outline.it-btn--primary:active {
  background: var(--secondary-green) !important;
  border-color: var(--secondary-green) !important;
  color: var(--color-white) !important;
}

.it-btn--hero-white {
  background: var(--color-white) !important;
  color: #3c6f1a !important;
  border-color: var(--color-white) !important;
}

.it-btn--hero-white:hover {
  background: #f2f9ec !important;
}

.it-btn--hero-dark {
  background: #3c6f1a !important;
  color: var(--color-white) !important;
  border-color: #3c6f1a !important;
}

.it-btn--hero-dark:hover {
  background: #2e5613 !important;
}


/* ── Footer in verde primario ─────────────────────────────────
   Il kit chiude il footer su fondo scuro (slate-20) con testo
   bianco. Per CdL il footer passa al verde primario: essendo un
   verde medio-chiaro, il bianco non garantisce contrasto AA — i
   testi passano quindi al blu istituzionale (contrasto ~8:1).
   La barra inferiore resta un'eccezione: fondo bianco, testo blu
   istituzionale, per restare leggibile e distinta dal footer.
                                                        [delta 11] */

.it-footer__main {
  background: var(--primary-green);
}

.it-footer__name,
.it-footer__heading {
  color: var(--ink) !important;
  font-weight: 700;
}

.it-footer__tagline,
.it-footer__link {
  color: var(--ink) !important;
  opacity: 1;
  text-decoration: none !important;
}

.it-footer__link:hover {
  opacity: 1;
  text-decoration: underline !important;
}

.it-footer .it-footer__brand a[aria-label] {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

.it-footer .it-footer__brand a[aria-label]:hover {
  background: rgba(36,36,36,.12) !important;
}

.it-footer__bottom {
  background: var(--color-white);
  border-top: 1px solid var(--color-slate-93);
}

.it-footer__bottom-inner,
.it-footer__bottom .it-footer__link {
  color: var(--ink) !important;
}

.it-footer__bottom .it-footer__link {
  font-size: 14px !important;
}

/* Heading di colonna del footer allineati alla dimensione del nome brand
   (17px), non più alla scala h3 (20px).                    [delta 19→23] */
.it-footer__heading {
  font-size: 17px;
  line-height: 1.3;
}


/* ── Menu di secondo livello ──────────────────────────────────
   Tendina su hover e focus-within per le voci di nav con figli.
   Da sostituire in implementazione con il Megamenu del kit,
   governato da stato e navigabile da tastiera.        [delta 03]
   ─────────────────────────────────────────────────────────────
   Le regole vivono attualmente nella pagina (.cdl-navitem):
   vanno consolidate qui quando la struttura si stabilizza.    */


/* ── Campi form: raggio CdL, mai squadrati ────────────────────
   Il kit lascia i campi form senza raggio (eccezione dichiarata
   in AGID). Nel tema CdL **nessun componente è mai squadrato**:
   i campi seguono il raggio pieno dei controlli di ricerca
   (search bar 40px, chip 100px), non i 15px delle card, così
   la riga filtri legge come un unico sistema.        [delta 25] */
.it-select,
.it-field__control,
.it-search {
  border-radius: 40px;
}

.it-select {
  padding-left: 16px;
}

/* Il campo di ricerca non ha min-width:0: il min-content del
   placeholder lo tiene largo e spinge il bottone fuori dal
   box quando la colonna si restringe.                [delta 25] */
.it-search__input {
  min-width: 0;
}

/* Dropdown dei filtri allineati alla menu bar: testo inattivo in
   --text-primary (verde scuro), hover fondo --color-green-97 con
   testo ink. Stessa coppia di stati delle voci di nav. [delta 25] */
.it-select,
.it-select-wrap__chev {
  color: var(--text-primary);
}

.it-select:hover {
  background: var(--color-green-97);
  color: var(--ink);
}

/* Label di campo allineata alla scala CdL: 13px/700
   --text-secondary, senza padding laterale del kit.  [delta 25] */
.it-field__label {
  display: block;
  padding: 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nessun focus ring: l'alone blu del kit (--color-blue-87) è
   l'unico blu fuori dal set WebTV. Rimosso; resta il solo
   cambio di colore del bordo.                        [delta 25] */
.it-select:focus,
.it-field__control:focus-within,
.it-search:focus-within {
  box-shadow: none;
  border-color: var(--border-primary);
}

/* ── Chip ─────────────────────────────────────────────────────
   Stato inattivo: bordo e testo in --text-primary-dark.
   Stato attivo: identico al bottone primario CdL (fondo verde
   primario, label ink), non bianco su verde.         [delta 25] */
.it-chip {
  border-color: var(--text-primary-dark);
  color: var(--text-primary-dark);
}

.it-chip:hover {
  background: var(--color-green-97);
}

.it-chip--selected,
.it-chip--selected:hover {
  background: var(--primary-green);
  border-color: var(--primary-green);
  color: var(--ink);
}