/* =========================================================================
   SARTORI TRADE — Marchio
   Solo identita' visiva: dimensioni del logo, spazio di rispetto, versione
   chiara e scura. Nessun colore scritto a mano: tutto viene dai token.
   ========================================================================= */

/* -------------------------------------------------------------------------
   IL LOGO
   Il marchio e' un rettangolo largo (560 x 113, rapporto ~4.96:1). Si dimensiona
   sull'altezza, non sulla larghezza: e' l'altezza a dover restare costante
   accanto al menu e al carrello, mentre la larghezza puo' seguire.
   ------------------------------------------------------------------------- */

.sa-logo {
    display: inline-block;
    line-height: 0;              /* niente spazio fantasma sotto l'immagine */
}

.sa-logo__img {
    display: block;
    height: var(--sa-marchio-h, 40px);
    width: auto;
    max-width: 100%;
}

/* Spazio di rispetto: nessun altro elemento entra entro mezza altezza del
   marchio. E' la regola classica dei manuali d'immagine e qui evita che il
   logo finisca appiccicato alla navigazione sui monitor stretti. */
.sa-branding__logo {
    display: inline-block;
    padding: calc(var(--sa-marchio-h, 40px) / 2) 0;
    text-decoration: none;
}

.sa-branding {
    display: flex;
    align-items: center;
}

/* Il logo cresce un po' sui grandi schermi: sotto i 782px la testata di
   Storefront si stringe e il marchio deve lasciare posto al menu. */
@media (min-width: 768px) {
    .sa-branding__logo { --sa-marchio-h: 48px; }
}

/* Su schermi molto stretti si scende, ma non sotto i 28px: piu' in basso la
   parola "TRADE" (che nel file vettoriale e' alta un quinto del marchio)
   diventa una riga illeggibile. */
@media (max-width: 400px) {
    .sa-branding__logo { --sa-marchio-h: 32px; }
}

/* Il bersaglio cliccabile del logo non deve mai scendere sotto il dito. */
.sa-branding__logo {
    min-height: var(--sa-tocco);
    display: inline-flex;
    align-items: center;
}

/* Messa a fuoco visibile: il logo e' spesso il primo elemento raggiunto con
   il tasto Tab, e senza contorno non si capisce dove si e' arrivati. */
.sa-branding__logo:focus-visible {
    outline: 3px solid var(--sa-blu-chiaro);
    outline-offset: 4px;
    border-radius: var(--sa-raggio);
}

/* -------------------------------------------------------------------------
   VERSIONE CHIARA E VERSIONE SCURA
   Il file principale ha "SARTORI" in blu #004996: su fondo scuro sta a circa
   2:1 di contrasto, cioe' non si legge. La variante ha la stessa parola in
   bianco. Di norma si mostra la prima; la seconda subentra quando il fondo e'
   scuro.
   Si parte dichiarando lo stato predefinito su entrambe, senza affidarne
   nessuno soltanto a una media query.
   ------------------------------------------------------------------------- */

.sa-logo__img--scuro  { display: block; }   /* logo blu, per fondi chiari */
.sa-logo__img--chiaro { display: none; }    /* logo bianco, per fondi scuri */

/* Preferenza di sistema "scuro", salvo forzatura esplicita a tema chiaro.
   La condizione e' la stessa usata in tokens.css: le due devono restare
   allineate, altrimenti il logo e lo sfondo finiscono in due temi diversi. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) .sa-logo__img--scuro  { display: none; }
    :root:not([data-tema="chiaro"]) .sa-logo__img--chiaro { display: block; }
}

/* Forzatura esplicita al tema scuro: vince sempre, in entrambe le direzioni. */
:root[data-tema="scuro"] .sa-logo__img--scuro  { display: none; }
:root[data-tema="scuro"] .sa-logo__img--chiaro { display: block; }

/* Marchio su un fondo scuro locale (una fascia blu, un footer scuro) anche
   quando la pagina e' in tema chiaro: si marca il contenitore. */
.sa-fondo-scuro .sa-logo__img--scuro  { display: none; }
.sa-fondo-scuro .sa-logo__img--chiaro { display: block; }

/* In stampa serve la versione a inchiostro: il bianco su carta sparisce. */
@media print {
    .sa-logo__img--scuro  { display: block !important; }
    .sa-logo__img--chiaro { display: none !important; }
}

/* -------------------------------------------------------------------------
   DATI SOCIETARI NEL FOOTER
   La riga che dichiara chi vende: ragione sociale, sede, partita IVA.
   Testo piccolo ma non minuscolo — sono i dati che si vanno a cercare.
   ------------------------------------------------------------------------- */

.sa-footer-legale {
    padding: var(--sa-s5) 0 0;
    border-top: 1px solid var(--sa-bordo);
    font-size: var(--sa-t-sm);
    line-height: var(--sa-riga);
    color: var(--sa-inchiostro-2);
}

.sa-footer-legale p { margin: 0 0 var(--sa-s1); }

.sa-footer-legale__societa { color: var(--sa-inchiostro); }

/* I dati fiscali in cifre: la variante tabellare tiene le colonne allineate
   e rende piu' difficile leggere male una partita IVA. */
.sa-footer-legale__fiscale {
    font-family: var(--sa-font-num);
    font-variant-numeric: tabular-nums;
}

.sa-footer-legale a { color: inherit; }
.sa-footer-legale a:hover,
.sa-footer-legale a:focus-visible { color: var(--sa-blu-chiaro); }

.sa-footer-legale__link {
    margin-top: var(--sa-s3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-s2) var(--sa-s3);
    align-items: center;
}

/* I link legali sono spesso il bersaglio piu' piccolo della pagina: qui
   ricevono comunque l'altezza di un dito. */
.sa-footer-legale__link a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sa-tocco);
}

/* -------------------------------------------------------------------------
   DATI MANCANTI
   Un campo non ancora fornito dal cliente deve saltare all'occhio: se resta
   invisibile nessuno lo colma, e un documento legale con un buco muto e'
   peggio di uno che dichiara il buco.
   ------------------------------------------------------------------------- */

.sa-manca {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s1);
    padding: 2px var(--sa-s2);
    border: 1px dashed var(--sa-attenzione);
    border-radius: var(--sa-raggio);
    background: var(--sa-attenzione-tenue);
    color: var(--sa-attenzione);
    font-size: var(--sa-t-sm);
    font-style: normal;
}

.sa-manca__icona { font-style: normal; }

/* In stampa il segnaposto resta: e' proprio sulla copia stampata che si
   annotano i dati da chiedere. */
@media print {
    .sa-manca { border-color: #000; background: none; color: #000; }
}

/* -------------------------------------------------------------------------
   BLOCCO "TITOLARE DEL TRATTAMENTO"
   L'elenco puntato della privacy policy: etichetta e valore su righe pulite.
   ------------------------------------------------------------------------- */

.sa-titolare {
    list-style: none;
    margin: 0 0 var(--sa-s5);
    padding: var(--sa-s4);
    border: 1px solid var(--sa-bordo);
    border-left: 3px solid var(--sa-blu);
    border-radius: var(--sa-raggio);
    background: var(--sa-superficie-2);
}

.sa-titolare li { margin: 0 0 var(--sa-s2); }
.sa-titolare li:last-child { margin-bottom: 0; }
.sa-titolare strong { color: var(--sa-inchiostro); }

/* -------------------------------------------------------------------------
   LINK LEGALI IN FASE D'ORDINE
   ------------------------------------------------------------------------- */

.sa-checkout-legale {
    margin: var(--sa-s3) 0 0;
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-s2) var(--sa-s3);
}