/*
Theme Name: Sartori Trade
Theme URI: https://sartoritrade.it
Description: Tema figlio di Storefront per Sartori Trade. Catalogo tecnico B2B: densita' di lettura alta, ricerca e filtri in primo piano, schede prodotto da scheda tecnica. Impostazione apple-design (risposta al tocco, bersagli 44px, tipografia in rem, rispetto delle preferenze di sistema).
Author: TA Tech Informatica
Template: storefront
Version: 1.0.0
Text Domain: sartori
*/

/* Il CSS vero sta in assets/css/, caricato da functions.php in file separati.
   Questo foglio si carica per ULTIMO: qui stanno solo le correzioni che devono
   avere l'ultima parola. */

/* =========================================================================
   TESTO ILLEGGIBILE SUI RIQUADRI PIENI  (correzione)

   I contenuti della home arrivano da Magento e usano ancora le loro classi
   (.colored_box, .btn-catalogo). Le regole che li colorano dicono la cosa
   giusta — fondo blu, testo bianco — ma piu' avanti nello stesso foglio
   arrivano due regole generiche per il contenuto delle pagine:

       .page .entry-content p { color: var(--sa-inchiostro-2); }
       .page .entry-content a { color: var(--sa-blu); }

   Hanno la stessa specificita' delle regole dei riquadri e vengono DOPO,
   quindi vincono per ordine. Risultato misurato in pagina: il paragrafo
   dentro il riquadro blu diventava grigio (rgb 74,83,97) e il pulsante
   "VAI AL CATALOGO" finiva blu su blu — invisibile, sembrava un rettangolo
   vuoto.

   Non basta ridichiarare il colore sul contenitore: l'ereditarieta' perde
   contro una regola che colpisce direttamente il discendente. Va detto sul
   discendente, ed e' quello che si fa qui.
   ========================================================================= */

.home .colored_box,
.page .entry-content .colored_box p,
.page .entry-content .colored_box a,
.home .colored_box p,
.home .colored_box a {
    color: var(--sa-superficie);
}

.page .entry-content a.btn-catalogo,
.home .btn-catalogo,
.home .btn-catalogo:link,
.home .btn-catalogo:visited,
.home .btn-catalogo:hover,
.home .btn-catalogo:focus {
    color: var(--sa-superficie);
}

/* Stessa trappola ovunque un fondo pieno ospiti del testo di contenuto. */
.sa-su-fondo-blu,
.page .entry-content .sa-su-fondo-blu p,
.page .entry-content .sa-su-fondo-blu a {
    color: var(--sa-superficie);
}

/* =========================================================================
   PAGINA CATALOGO: i sette riquadri delle famiglie

   Il contenuto arriva da Magento gia' fatto bene — un `.grid12-4` per famiglia,
   con l'immagine come sfondo e dentro titolo e link. Quello che mancava era
   TUTTO il CSS: senza `background-size` le foto uscivano alla loro dimensione
   naturale, ripetute e disallineate, i riquadri si impilavano uno sotto l'altro
   e l'"ENTRA" finiva sopra la foto come un link di testo qualsiasi.

   Qui diventano schede vere: griglia, immagine ritagliata, velatura che rende
   leggibile il testo sopra qualunque foto, e un pulsante che sembra un pulsante.
   ========================================================================= */

/* La misura di lettura (74ch) imposta su tutte le pagine e' giusta per un testo
   e sbagliata per una griglia di schede: qui strozzava il catalogo a 658px su
   1296 disponibili, e le schede uscivano grandi come francobolli. Si spegne
   solo dove c'e' davvero la griglia. Il selettore ha la stessa specificita' di
   quello che imposta il limite, e questo foglio si carica dopo. */
body.page .entry-content:has(.grid12-4) {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s5);
}
/* Storefront mette un ::before/::after di pulizia sul contenuto. In un
   contenitore a griglia quei due pseudo-elementi diventano CELLE: la prima
   restava vuota e spingeva tutte le schede di un posto, lasciando un buco in
   alto a sinistra. */
body.page .entry-content:has(.grid12-4)::before,
body.page .entry-content:has(.grid12-4)::after { display: none; }

@media (min-width: 600px)  { body.page .entry-content:has(.grid12-4) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { body.page .entry-content:has(.grid12-4) { grid-template-columns: repeat(3, 1fr); } }

.entry-content .grid12-4 {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: var(--sa-raggio-lg);
    border: 1px solid var(--sa-bordo);
    background-color: var(--sa-superficie-2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* L'altezza arriva come stile in linea dal contenuto importato (370px):
       per riportarla a una proporzione serve per forza `!important`, e' l'unico
       modo di battere un attributo style. */
    height: auto !important;
    aspect-ratio: 4 / 3;
    margin-bottom: 0 !important;
    transition: box-shadow var(--sa-durata) var(--sa-curva),
                transform var(--sa-durata-uscita) var(--sa-curva);
}
.entry-content .grid12-4:hover { box-shadow: var(--sa-ombra-alta); }
.entry-content .grid12-4:has(a:active) { transform: scale(.99); }

/* Velatura dal basso: le foto degli articoli sono chiare e cambiano da riquadro
   a riquadro, il testo bianco senza questa non si leggerebbe su tutte. */
.entry-content .grid12-4::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(0, 26, 54, .92) 0%,
                rgba(0, 26, 54, .72) 32%,
                rgba(0, 26, 54, .08) 62%,
                rgba(0, 26, 54, 0) 100%);
}

.entry-content .grid12-4 .titolo {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--sa-s5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sa-s3);
}

.entry-content .category-box-title {
    margin: 0;
    color: #fff;
    font-size: var(--sa-t-lg);
    line-height: var(--sa-riga-stretta);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.page .entry-content a.category-box-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s5);
    border-radius: var(--sa-raggio);
    background: var(--sa-azione);
    color: var(--sa-su-azione);
    font-size: var(--sa-t-sm);
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    text-transform: uppercase;
}
.page .entry-content a.category-box-button:hover,
.page .entry-content a.category-box-button:focus-visible {
    background: var(--sa-azione-scuro);
    color: var(--sa-su-azione);
}
.page .entry-content a.category-box-button:active { transform: scale(.96); }

/* Il numero di articoli lo aggiunge il tema (vedi sartori_conta_articoli_catalogo):
   su un catalogo B2B sapere quanto c'e' dentro una famiglia cambia dove si clicca. */
.entry-content .category-box-conta {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: var(--sa-t-sm);
    font-variant-numeric: tabular-nums;
}

/* Tutta la scheda e' cliccabile, non solo il pulsante: il bersaglio piu' grosso
   e' l'immagine, ed e' quello che il dito centra. Il link resta uno solo per i
   lettori di schermo. */
.entry-content .grid12-4 .category-box-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* =========================================================================
   CONTENUTO A TUTTA LARGHEZZA QUANDO NON C'E' LA COLONNA LATERALE

   Storefront imposta `.content-area { float: left; width: 68.2% }` perche'
   presuppone una colonna laterale. Qui la colonna laterale non esiste (i filtri
   stanno in un pannello loro), quindi su desktop restavano 467px vuoti a destra
   su 1425 disponibili: la home finiva schiacciata a sinistra su due terzi di
   schermo, con mezzo monitor bianco.

   La regola si applica SOLO quando la colonna laterale non c'e' davvero:
   `body:not(.has-sidebar)` e' la classe che Storefront stesso aggiunge quando
   il widget-area e' popolato, quindi il giorno che si aggiungesse una colonna
   questa regola si spegne da sola.
   ========================================================================= */

body:not(.has-sidebar) .content-area,
body:not(.has-sidebar) #primary {
    float: none;
    width: 100%;
    max-width: none;
    margin-right: 0;
}
body:not(.has-sidebar) .site-main { width: 100%; }

/* =========================================================================
   PIEDE COMPATTO

   Era alto quasi mille pixel: due file di colonne, l'elenco del catalogo
   ripetuto dal menu della testata, i recapiti in due posti e spaziature da
   pagina di contenuto. Le colonne ora stanno su una fila sola (la struttura
   e' cambiata in footer.php) e qui si stringe il resto: meno respiro
   verticale, elenchi piu' fitti, marchi di pagamento piu' piccoli.
   Le righe restano comunque bersagli da 44px: si comprime lo spazio FRA i
   blocchi, non dentro i comandi.
   ========================================================================= */

.sa-piede__griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s5) var(--sa-s6);
    padding-block: var(--sa-s6) var(--sa-s5);
}
@media (min-width: 600px)  { .sa-piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .sa-piede__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Cinque blocchi veri: azienda, pagamenti, informazioni, contatti, social.
   Con quattro colonne il quinto andava a capo da solo e apriva mezza fila
   vuota. */
@media (min-width: 1200px) { .sa-piede__griglia { grid-template-columns: 1.2fr 1.2fr 1fr 1fr .8fr; } }

/* I dati societari non sono una colonna: sono una riga di chiusura, e vanno
   sotto a tutta larghezza invece di occupare una cella e sbilanciare la fila. */
.sa-piede__griglia .sa-footer-legale {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--sa-s4);
    border-top: 1px solid rgba(255, 255, 255, .16);
    text-align: center;
    font-size: var(--sa-t-xs);
    line-height: 1.5;
    opacity: .85;
}
.sa-piede__griglia .sa-footer-legale p { margin: 0; max-width: none; }
.sa-piede__griglia .sa-footer-legale__societa { font-weight: 600; }

/* Gli elenchi del piede sono incolonnati a sinistra: centrati sembravano
   sparsi e allungavano la lettura. */
.sa-piede__col, .sartori-footer-col { text-align: left; }
.sa-piede__lista a, .sa-piede .sartori-footer-menu a { justify-content: flex-start; text-align: left; }

.sa-piede__titolo {
    font-size: var(--sa-t-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 var(--sa-s3);
    opacity: .82;
}

.sa-piede__lista,
.sa-piede .sartori-footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.35;
}
.sa-piede__lista li,
.sa-piede .sartori-footer-menu li { margin: 0; }

/* Il bersaglio da 44px resta, ma preso col padding invece che con margini
   fra una riga e l'altra: cosi' non si aprono fessure morte. */
.sa-piede__lista a,
.sa-piede .sartori-footer-menu a {
    display: flex;
    align-items: center;
    min-height: var(--sa-tocco);
    padding: 0;
    font-size: var(--sa-t-sm);
}

.sa-piede__indirizzo { margin: 0 0 var(--sa-s3); font-size: var(--sa-t-sm); line-height: 1.45; }
.sa-piede__nota      { margin: var(--sa-s2) 0 0; font-size: var(--sa-t-xs); opacity: .8; max-width: 34ch; }

/* I moduli entrano nella fila: niente contenitore che ricrea una fascia. */
.sa-piede__griglia .sartori-footer-nav {
    display: contents;
}

.sa-piede__coda      { padding-block: var(--sa-s3); }
.sa-piede__coda-int  { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sa-s3); }
.sa-piede__legale    { margin: 0; font-size: var(--sa-t-xs); opacity: .75; max-width: none; }

/* =========================================================================
   MENU PRINCIPALE: le sottocategorie erano irraggiungibili

   Il menu contiene 7 rami e 81 sottocategorie, correttamente annidate — ma
   senza regole per `.sub-menu` restavano invisibili e non apribili: dal menu
   si arrivava solo ai 7 rami principali. Su un catalogo dove la navigazione
   per categoria E' il modo di trovare le cose, e' il difetto piu' grave.

   Pannello a piu' colonne invece della lista verticale lunga: Carpenteria ha
   19 figli, in colonna singola uscirebbe dallo schermo.
   Si apre al passaggio del mouse E con `:focus-within`, quindi funziona anche
   da tastiera senza una riga di JavaScript.
   ========================================================================= */

/* NOTA DI COORDINAMENTO: il pannello a tendina esiste gia' in struttura.css
   (`.sa-nav .sub-menu`, aperto con `display: flex`). Un contenitore flex pero'
   IGNORA `columns`, quindi le 19 sottocategorie di Carpenteria uscivano in
   colonna singola alta 630px. Qui non si riscrive la tendina: si riporta il
   pannello a `display: block` quando e' aperto, cosi' le colonne funzionano.
   Questo foglio si carica per ultimo, quindi a parita' di specificita' vince. */

@media (min-width: 992px) {

    .sa-menu { position: relative; }

    .sa-menu > li { position: static; }

    .sa-nav li:hover > .sub-menu,
    .sa-nav li:focus-within > .sub-menu,
    .sa-menu > li:hover > .sub-menu,
    .sa-menu > li:focus-within > .sub-menu {
        display: block;
    }

    .sa-menu > li > a {
        position: relative;
        min-height: var(--sa-tocco);
    }

    /* Segno che il ramo ha figli: il colore da solo non lo direbbe. */
    .sa-menu > li.menu-item-has-children > a::after {
        content: "";
        width: .45em; height: .45em;
        margin-left: .45em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-.15em) rotate(45deg);
        transition: transform var(--sa-durata) var(--sa-curva);
    }
    .sa-menu > li.menu-item-has-children:hover > a::after,
    .sa-menu > li.menu-item-has-children:focus-within > a::after {
        transform: translateY(.05em) rotate(-135deg);
    }

    .sa-menu .sub-menu,
    .sa-nav .sub-menu {
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        z-index: var(--sa-z-testata);
        margin: 0;
        padding: var(--sa-s5) var(--sa-s5) var(--sa-s4);
        list-style: none;
        background: var(--sa-superficie);
        border: 1px solid var(--sa-bordo);
        border-top: 3px solid var(--sa-blu);
        border-radius: 0 0 var(--sa-raggio-lg) var(--sa-raggio-lg);
        box-shadow: var(--sa-ombra-alta);
        columns: 4;
        column-gap: var(--sa-s5);

        /* Nascosto ma raggiungibile: `visibility` invece di `display:none`
           cosi' la transizione esiste e il fuoco da tastiera lo trova. */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity var(--sa-durata) var(--sa-curva),
                    transform var(--sa-durata) var(--sa-curva),
                    visibility 0s linear var(--sa-durata);
    }

    .sa-menu > li:hover > .sub-menu,
    .sa-menu > li:focus-within > .sub-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s;
    }

    .sa-menu .sub-menu li,
    .sa-nav .sub-menu li {
        break-inside: avoid;
        margin: 0 0 var(--sa-s1);
    }

    .sa-menu .sub-menu a,
    .sa-nav .sub-menu a {
        display: block;
        min-height: 0;              /* in colonna il bersaglio si prende con il padding */
        padding: var(--sa-s2) var(--sa-s3);
        border-radius: var(--sa-raggio);
        color: var(--sa-inchiostro);
        font-size: var(--sa-t-sm);
        line-height: 1.35;
        text-decoration: none;
        text-align: left;
        justify-content: flex-start;
    }
    .sa-menu .sub-menu a:hover,
    .sa-nav .sub-menu a:hover,
    .sa-menu .sub-menu a:focus-visible,
    .sa-nav .sub-menu a:focus-visible {
        background: var(--sa-blu-tenue);
        color: var(--sa-blu-scuro);
    }
    .sa-menu .sub-menu a:active { transform: scale(.985); }
}

/* Chi ha chiesto meno movimento non deve vedere il pannello scivolare. */
@media (prefers-reduced-motion: reduce) {
    .sa-menu .sub-menu { transform: none; }
}