/* ==========================================================================
   Si.Ca. Alimentari — quello che tiene insieme i due marchi

   I due marchi hanno colore, fondo e carattere diversi, ma la stessa
   ossatura: la stessa testata, lo stesso piede, la stessa riga di
   navigazione che porta a Marchi · Pesce · Alimentari · Shop. Qui c'è
   quell'ossatura, più i token di marchio che shop.css e salumi.css
   riempiono.

   Si carica DOPO style.css e PRIMA dei fogli di marchio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. I token di marchio — il valore di riposo è quello del banco pesce
   -------------------------------------------------------------------------- */
body {
  --b-accent:     var(--gold);
  --b-accent-ink: var(--gold-ink);
  --b-ground:     var(--ink);
  --b-ground-2:   #08171C;
  --b-text:       #FFFFFF;
  --b-muted:      #9DB4BC;
  --b-faint:      #7C959E;
  --b-line:       rgba(255,255,255,.14);
  --b-card:       rgba(255,255,255,.035);
  --b-card-hover: rgba(255,255,255,.07);
}

/* --------------------------------------------------------------------------
   2. La testata condivisa
   Riprende .site-header di style.css: qui si aggiunge solo la riga dei
   quattro indirizzi del sito, quella che sta accanto al logo.
   -------------------------------------------------------------------------- */

/* il marchio della testata porta sempre alla soglia, non in cima alla pagina:
   da qualunque banco si torna a casa con un click */
.site-header__logo--deli {
  height: 50px;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.8));
}

/* --- La riga dei marchi: Marchi · Pesce · Alimentari · Shop --- */
.site-nav--brand {
  flex: none;
  gap: 16px;
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.site-nav--brand a { color: #9DB4BC; }
.site-nav--brand a:hover { color: #fff; border-bottom-color: transparent; }

/* la voce della pagina in cui si è: non è un link, è dove sei */
.site-nav__on {
  color: #fff;
  border-bottom: 1px solid var(--b-accent);
  padding-bottom: 3px;
}

/* --------------------------------------------------------------------------
   3. Aggiunte al sito pesce approvato
   Due sole regole: la coppia di pulsanti della seconda porta e il blocco di
   piede che porta agli altri indirizzi. Il resto di style.css non
   viene toccato.
   -------------------------------------------------------------------------- */
.deli__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.site-footer__banchi {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 2;
  color: #5E7681;
}
.site-footer__banchi a { color: #7C959E; }
.site-footer__banchi a:hover { color: var(--b-accent); }

/* --------------------------------------------------------------------------
   4. Adattamenti
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* la testata va già a capo da sola: la riga dei marchi prende una riga sua */
  .site-nav--brand {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
    padding-left: 0;
    border-left: 0;
  }
  .site-header__spacer { display: none; }
}

@media (max-width: 420px) {
  .site-nav--brand { gap: 12px; font-size: 10.5px; letter-spacing: .12em; }
}

@media (hover: none) {
  /* La riga dei marchi arrivava a 32 px di altezza: questo blocco si carica
     dopo style.css e ne annullava il padding da 15 px. Qui la soglia dei
     44 px del dito viene ripristinata, senza toccare nulla col mouse. */
  .site-nav--brand a,
  .site-nav__on {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* Le voci corte — «Shop» sta in 40 px — restano più strette del dito.
     L'area toccabile si allarga di 6 px per lato con un elemento
     trasparente che NON occupa spazio: la riga resta spaziata esattamente
     come nel disegno, e fra un'area e l'altra restano comunque 4 px dei
     16 px di distanza, quindi due voci vicine non si rubano il tocco. */
  .site-nav--brand a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    right: -6px;
  }

  .site-footer__banchi { line-height: 2.4; }
  /* qui le voci stanno una per riga: allargarle a destra non sposta nulla */
  .site-footer__banchi a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 9px 0;
  }
}