/* ============================================================
   MALSCH ITALIA — Marchio
   Sostituisce il segnaposto testuale (.logo-word) con il logo
   vettoriale del cliente, inline in template-parts/logo.php e
   template-parts/logo-lockup.php.

   Due sole regole da tenere a mente:
   1. il colore NON si decide qui — l'SVG è tutto `currentColor` e
      eredita da .site-logo / .footer-brand, così il marchio diventa
      bianco quando l'header sta sopra la hero fotografica e nero
      quando l'header è pieno;
   2. la misura si dà solo in altezza: il viewBox è già ristretto
      all'ingombro reale del segno, quindi l'altezza in px è davvero
      l'altezza che si vede, e la larghezza segue le proporzioni.
   ============================================================ */

.logo-mark {
  display: block;
  width: auto;
  /* Nessuna altezza qui di proposito: l'altezza la danno le regole di
     contesto qui sotto. Un SVG con solo viewBox e nessuna altezza esplicita
     ripiega su 300x150px, quindi il default di main.css (50px) resta come
     rete di sicurezza per un uso non previsto. */
  overflow: visible;     /* le curve del pittogramma sfiorano il viewBox */
}

/* --- Header: wordmark orizzontale ---------------------------------- */
/* 38px sui 76px di --header-h: il marchio pesa esattamente metà
   dell'altezza della barra — restano 19px di aria sopra e sotto, che
   e' il minimo perché la barra non sembri piena fino all'orlo. */

.site-header .logo-mark--wordmark { height: 38px; }

/* Il link è alto quanto il segno: niente spazio fantasma che sposti
   l'allineamento verticale rispetto al menu. */
.site-logo {
  line-height: 0;
  flex: 0 0 auto;
}

/* --- Header su schermo stretto ------------------------------------- */
/* Sotto gli 860px compare il bottone Menu e il contenitore diventa
   stretto: il wordmark scende a 30px (≈125px di larghezza) e resta
   comunque spazio abbondante prima del bottone, anche a 320px.
   `min-width: 0` evita che, in un flex, il logo provi a schiacciarsi. */

@media (max-width: 860px) {
  .site-header .logo-mark--wordmark { height: 30px; }
  .site-header .container { gap: var(--space-3); }
  .site-logo { min-width: 0; }
}

@media (max-width: 400px) {
  .site-header .logo-mark--wordmark { height: 26px; }
}

/* --- Footer: lockup verticale -------------------------------------- */
/* Il lockup è alto (rapporto 1,27:1): 84px di altezza fanno ~107px di
   larghezza, in scala col resto del footer. */

.footer-brand { display: inline-block; line-height: 0; }
.footer-brand .logo-mark--lockup { height: 84px; }

/* La riga del footer allinea per baseline: con un marchio in colonna
   la baseline cade fuori posto, quindi qui si allinea al piede. */
.footer-top { align-items: flex-end; }

@media (max-width: 700px) {
  .footer-brand .logo-mark--lockup { height: 72px; }
  .footer-top { align-items: flex-start; }
}

/* --- Marchio a colori invertiti ------------------------------------ */
/* Nessuna regola di colore propria: sopra una foto basta che il
   contenitore imposti `color: #fff`. Vale anche per il pittogramma
   usato da solo (linee sottili: sotto i 24px diventa illeggibile,
   sotto quella soglia si usa il wordmark). */

.logo-mark--symbol { height: 32px; }