/**
 * Usatomania Theme Hooks — Footer
 *
 * Il footer è presente su tutte le pagine: le regole qui dentro sono
 * site-wide anche se il file sta in sections/.
 * Caricato dopo global.css, quindi qui puoi usare le custom properties --usm-*.
 */

/* =============================================================
   CONTATTI — da lista di link a griglia 2 colonne di "chip"
   =============================================================
   Il blocco NON è Elementor: è il widget WP "Menu di navigazione"
   (sidebar footer-4) collegato al menu `contatti-footer`, stampato da
   blonwe/includes/footer/footer-type1.php. Il markup non è modificabile
   senza toccare tema o contenuto: qui si lavora solo di CSS.

   Markup reale:
     .footer-widgets .column-widgets > .widget-column
       > .klbfooterwidget.widget.widget_nav_menu
         > .menu-contatti-footer-container
           > ul#menu-contatti-footer > li.menu-item > a

   ANCORAGGIO — si usano in coppia l'id `#menu-contatti-footer` e la classe
   contenitore `.menu-contatti-footer-container`: entrambi derivano dallo
   slug del menu, ma la classe sopravvive alla duplicazione del widget
   (in quel caso WP rinomina l'id in `menu-contatti-footer-1`).
   Gli id delle singole voci (#menu-item-4719…) NON vanno usati: cambiano
   a ogni re-import del DB. L'icona si mappa quindi sullo schema dell'href.

   CASCATA — base.css del tema è caricato prima di questo foglio, quindi a
   parità di specificità vinciamo noi. Restano dopo di noi solo il blocco
   inline di blonwe-core (che tocca il solo `color`, e il bianco ci sta
   bene) e l'Additional CSS del Customizer (che tocca solo .usm-ft-socials,
   gestito più sotto). Per questo qui non serve nessun !important.
   ============================================================= */

/* La colonna Contatti è l'ultima delle tre widget-column, che il tema
   dimensiona tutte uguali con `flex: 1 0 0%`. Per starci in due colonne le
   serve più spazio, sottratto alle due liste di link (voci più corte).
   Solo da 1200px in su per due motivi: sotto i 576px `.column-widgets` è in
   direzione colonna e il flex-grow agirebbe sull'ALTEZZA anziché sulla
   larghezza; fra 576 e 1199 lo spazio è già poco di suo (la colonna brand è
   fissa a 380px) e stringere "Categorie"/"Informazioni" peggiorerebbe più
   di quanto migliori. */
@media screen and (min-width: 1200px) {
    .footer-widgets .column-widgets > .widget-column:last-child {
        flex: 1.7 0 0%;
    }
}

/* ── La <ul> diventa la griglia ─────────────────────────────── */
/* auto-fit invece di un media query sul viewport: la larghezza di questa
   colonna dipende dai 380px fissi della colonna brand, non linearmente
   dalla finestra. Così passa a 2 colonne esattamente quando ci stanno
   (in pratica da ~1330px di viewport in su) e resta a 1 sotto, invece di
   spaccarsi in due colonne illeggibili a una soglia decisa a occhio. */
.footer-widgets #menu-contatti-footer,
.footer-widgets .menu-contatti-footer-container > ul {
    display: grid;
    /* Esattamente 2 colonne, come chiesto: con auto-fit a 145px la colonna
       larga ne faceva stare 3 e l'email finiva su tre righe spezzata a metà
       parola. minmax(0,1fr) e non 1fr: senza, il contenuto lungo (l'email)
       imporrebbe la larghezza minima della traccia e sfonderebbe la griglia. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* righe di pari altezza */
    gap: 10px;
    max-width: 420px; /* .container è a max-width:100%: su schermi larghi le chip diventerebbero enormi */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* L'email è la voce più lunga: le diamo l'intera riga così sta in orizzontale
   senza spezzarsi. Il grid-column va sul <li> (figlio diretto della griglia),
   selezionato per href così regge anche se cambia posizione nel menu. */
.footer-widgets #menu-contatti-footer > li:has(> a[href^="mailto:"]),
.footer-widgets .menu-contatti-footer-container > ul > li:has(> a[href^="mailto:"]) {
    grid-column: 1 / -1;
}

/* Sotto i 576px il footer del tema va in colonna singola: anche i contatti. */
@media screen and (max-width: 575.98px) {
    .footer-widgets #menu-contatti-footer,
    .footer-widgets .menu-contatti-footer-container > ul {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

/* Il tema spaziava le voci con `.widget_nav_menu ul li + li{margin-top}`:
   sommato al gap della griglia disallineerebbe le righe. */
.footer-widgets #menu-contatti-footer > li + li,
.footer-widgets .menu-contatti-footer-container > ul > li + li {
    margin-top: 0;
}

/* li come flex container così la <a> riempie tutta la cella e le chip
   della stessa riga risultano alte uguali. */
.footer-widgets #menu-contatti-footer > li,
.footer-widgets .menu-contatti-footer-container > ul > li {
    display: flex;
}

/* ── La singola voce diventa una chip icona + testo ─────────── */
.footer-widgets #menu-contatti-footer > li > a,
.footer-widgets .menu-contatti-footer-container > ul > li > a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--usm-radius, 12px);
    background-color: rgba(255, 255, 255, 0.06);
    font-family: var(--usm-font-label, 'Work Sans', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere; /* l'email è lunga: meglio andare a capo che sfondare la chip */
    transition:
        background-color var(--usm-transition-md, 250ms ease),
        border-color var(--usm-transition-md, 250ms ease);
}

/* L'indirizzo email è la stringa più lunga del blocco: un filo più piccola
   per restare su due righe invece che tre. */
.footer-widgets #menu-contatti-footer > li > a[href^="mailto:"],
.footer-widgets .menu-contatti-footer-container > ul > li > a[href^="mailto:"] {
    font-size: 12px;
}

/* Hover/focus in oro e non nel verde delle CTA del sito: qui la superficie
   È già il verde del footer, un hover verde sarebbe invisibile. L'oro è
   l'altra metà della coppia cromatica del brand, quindi resta coerente. */
.footer-widgets #menu-contatti-footer > li > a:hover,
.footer-widgets #menu-contatti-footer > li > a:focus-visible,
.footer-widgets .menu-contatti-footer-container > ul > li > a:hover,
.footer-widgets .menu-contatti-footer-container > ul > li > a:focus-visible {
    border-color: var(--usm-gold, #EBBD17);
    background-color: rgba(235, 189, 23, 0.12);
}

.footer-widgets #menu-contatti-footer > li > a:focus-visible,
.footer-widgets .menu-contatti-footer-container > ul > li > a:focus-visible {
    outline: 2px solid var(--usm-gold, #EBBD17);
    outline-offset: 2px;
}

/* ── Icona ──────────────────────────────────────────────────────
   Si riusa il ::before che il tema impiega come underline di hover
   (base.css: position:absolute; width:100%; height:1px; opacity:0):
   vanno quindi RIAZZERATE tutte quelle proprietà, altrimenti resta una
   barretta di 1px sopra l'icona. Il reset è scoped al solo menu contatti,
   così "Categorie" e "Informazioni" mantengono il loro underline.
   Il glifo arriva dal font Material Symbols Outlined (handle
   usm-material-symbols, flag feat_assets_icons): è la convenzione già in
   uso nel resto del progetto. */
.footer-widgets #menu-contatti-footer > li > a::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a::before {
    content: "info"; /* fallback, sovrascritto dalla mappatura per href */
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(235, 189, 23, 0.16);
    color: var(--usm-gold, #EBBD17);
    opacity: 1;
    font-family: var(--usm-font-icons, 'Material Symbols Outlined');
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-feature-settings: 'liga';
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    transition:
        background-color var(--usm-transition-md, 250ms ease),
        color var(--usm-transition-md, 250ms ease);
}

/* Mappatura icona ← schema dell'href (robusta ai cambi di id delle voci). */
.footer-widgets #menu-contatti-footer > li > a[href^="tel:"]::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a[href^="tel:"]::before {
    content: "call";
}
.footer-widgets #menu-contatti-footer > li > a[href^="mailto:"]::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a[href^="mailto:"]::before {
    content: "mail";
}
.footer-widgets #menu-contatti-footer > li > a[href*="wa.me"]::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a[href*="wa.me"]::before {
    content: "chat";
}
.footer-widgets #menu-contatti-footer > li > a[href*="/maps"]::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a[href*="/maps"]::before {
    content: "location_on";
}
/* link brevi di Google Maps (maps.app.goo.gl/…), senza "/maps" nel path */
.footer-widgets #menu-contatti-footer > li > a[href*="goo.gl"]::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a[href*="goo.gl"]::before {
    content: "location_on";
}

/* Sull'hover il badge si inverte: oro pieno, glifo scuro. */
.footer-widgets #menu-contatti-footer > li > a:hover::before,
.footer-widgets #menu-contatti-footer > li > a:focus-visible::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a:hover::before,
.footer-widgets .menu-contatti-footer-container > ul > li > a:focus-visible::before {
    background-color: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
}

/* Su mobile la colonna è a tutta larghezza: una sola colonna di chip,
   come da specifica (auto-fit ne farebbe due, troppo strette). */
@media screen and (max-width: 575.98px) {
    .footer-widgets #menu-contatti-footer,
    .footer-widgets .menu-contatti-footer-container > ul {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }
}

/* =============================================================
   SOCIAL — .usm-ft-socials (widget Testo, sidebar footer-1)
   =============================================================
   SPECIFICITÀ: le regole che oggi stilano questo blocco stanno
   nell'Additional CSS del Customizer (post custom_css 3485), stampato
   DOPO questo foglio: a parità di specificità vincono loro. Aggiungendo
   il contesto `.footer-widgets` si passa da (0,1,1) a (0,2,1) e si vince
   senza !important — tranne su `color`, che là è dichiarato !important e
   qui va quindi pareggiato con !important a specificità maggiore.
   ============================================================= */

/* BUG: il widget Testo ha wpautop attivo, quindi WP inietta un <br> dentro
   ogni <a>, dopo ogni <svg> e fra un <a> e l'altro. In un flex container
   quei <br> diventano flex item fantasma: raddoppiano il gap e spingono
   le icone fuori asse. Questa è la causa principale del disallineamento. */
.footer-widgets .usm-ft-socials br {
    display: none;
}

.footer-widgets .usm-ft-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.footer-widgets .usm-ft-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--usm-radius, 12px);
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85) !important; /* la regola del Customizer è !important */
    transition:
        background-color var(--usm-transition-md, 250ms ease),
        border-color var(--usm-transition-md, 250ms ease),
        color var(--usm-transition-md, 250ms ease);
}

.footer-widgets .usm-ft-socials a:hover,
.footer-widgets .usm-ft-socials a:focus-visible {
    border-color: var(--usm-gold, #EBBD17);
    background-color: rgba(235, 189, 23, 0.12);
    color: var(--usm-gold, #EBBD17) !important; /* idem: pareggia l'!important del Customizer */
}

.footer-widgets .usm-ft-socials a:focus-visible {
    outline: 2px solid var(--usm-gold, #EBBD17);
    outline-offset: 2px;
}

.footer-widgets .usm-ft-socials a svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* I tre SVG inline sono disegnati a mano e MISCHIANO gli stili: Facebook e
   WhatsApp sono tracciati Feather (pensati per essere stroked) ma senza
   attributo fill, quindi ereditavano il riempimento e uscivano come macchie
   piene; Instagram è un rettangolo con bordo più un cerchio pieno. Qui si
   normalizzano tutti e tre a outline coerente. Il CSS batte gli attributi
   di presentazione dell'SVG (fill="none", stroke-width="1.5"), che hanno
   specificità zero. Fix definitivo = sostituire i path: vedi nota. */
.footer-widgets .usm-ft-socials a svg > * {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Il widget Testo del brand contiene `<p><!-- company-details --></p>`:
   un paragrafo vuoto che apre un margine morto sopra le icone social. */
.footer-widgets .klbfooterwidget .widget-body p:empty {
    display: none;
}