/* ============================================================
   tokens.css — variabili condivise del sito "Mercato dell'arte"

   Allineate al design system del progetto sui cataloghi d'asta
   (lots_of_zeri, frontend/static/css/style.css), così che i due
   siti si riconoscano come parti della stessa ricerca.

   Da qui NON si cambia l'impianto grafico del sito antiquari:
   il blu resta il colore d'identità delle fasce e dei tab.
   Cambiano le due famiglie tipografiche e il colore dei link.
   ============================================================ */

:root {

    /* --- Tipografia (identica al sito cataloghi) --- */
    --ff-head: 'Playfair Display', Georgia, serif;
    --ff-body: 'DM Sans', system-ui, sans-serif;

    /* --- Terracotta: palette del sito cataloghi ---
       Contrasti su fondo bianco: --terra 4,48:1 (appena sotto la
       soglia WCAG AA di 4,5:1), --terra-dark 6,42:1.
       I due toni chiari restano per hover su fondo scuro e accenti. */
    --terra:        #D94010;
    --terra-dark:   #B03008;
    --terra-light:  #E86040;
    --terra-muted:  #EB7055;

    /* --- Ruoli d'uso dei link --------------------------------
       Cambiare queste due righe cambia i link di tutto il sito.
       Scelta di Valentina: stesso colore del sito cataloghi a
       riposo, --terra-dark al passaggio del mouse. */
    --link:         var(--terra);
    --link-hover:   var(--terra-dark);

    /* --- Scala tipografica -----------------------------------
       Prima della scala ogni pagina aveva la sua: la bibliografia
       a 18px, le schede a 16px, gli eventi a 13px, le persone a
       12px. Quattro ruoli, nessuna pagina inventa più misure. */
    --fs-intro:    1.5rem;    /* 24px — occhielli della home */
    --fs-lettura:  1.125rem;  /* 18px — prosa lunga: biografie, progetto, bibliografia */
    --fs-body:     1rem;      /* 16px — testo corrente, elenchi, card, bottoni */
    --fs-body-sm:  0.875rem;  /* 14px — metadati, chip, etichette */
    --fs-caption:  0.75rem;   /* 12px — didascalie e scritte di servizio */

    /* --- I grigi caldi delle sezioni -------------------------
       Nati nella pagina eventi per lo sfondo dei grafici, servono
       ovunque una parte di pagina debba staccarsi dal bianco. */
    --carta-fondo:  #f0efea;
    --carta-bordo:  #dcd9cf;

    /* --- Identità preesistente del sito antiquari ------------ */
    --blu:          #5593C9;
    --testo:        #333;
    --fondo-chiaro: #f8f8f8;
}

/* ------------------------------------------------------------
   Base: la stessa regola del sito cataloghi — i titoli in
   Playfair Display, tutto il resto in DM Sans. I fogli di stile
   delle singole pagine si caricano dopo e possono sovrascriverla.
   ------------------------------------------------------------ */

body {
    font-family: var(--ff-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-head);
}

/* ============================================================
   Testata e piè di pagina: due marchi, due significati.

   In alto a sinistra il nome del progetto, che è l'unico link
   alla home. Il logo della Fondazione sta all'estremità destra
   della testata e nel piè di pagina, e porta al sito
   dell'istituto: è un'attribuzione, non una navigazione.

   Nasce da un test con gli utenti: nessuno cliccava il logo
   della Zeri per tornare alla home, perché tutti si aspettavano
   di finire sul sito della Fondazione. Avevano ragione loro.
   ============================================================ */

.marchio {
    font-family: var(--ff-head);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    color: var(--testo);
    text-decoration: none;
    white-space: nowrap;
}

.marchio:hover {
    color: var(--blu);
}

.testata-destra {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Separa due zone di significato: senza, il logo viene letto
   come una settima voce del menù. */
.testata-filo {
    width: 1px;
    height: 34px;
    background-color: #dcdcdc;
    flex-shrink: 0;
}

.testata-ente {
    display: flex;
    flex-shrink: 0;
}

.testata-ente img {
    height: 36px;
    width: auto;
    max-height: none;   /* batte "header img { max-height: 50px }" */
    display: block;
}

.footer-ente {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 440px;
}

.footer-ente img {
    height: 42px;
    width: auto;
    max-height: none;
    display: block;
}

.footer-ente p {
    margin: 0;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
}

.footer-ente {
    text-align: left;
}

/* I fogli delle pagine danno "footer a { margin: 0 10px }", pensato
   per i link staccati di Crediti e Documentazione: dentro una frase
   quei margini diventavano buchi intorno al nome della Fondazione. */
.footer-ente a {
    color: #fff;
    margin: 0;
}

.footer-ente p a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.footer-ente p a:hover {
    text-decoration-color: #fff;
}

@media (max-width: 768px) {
    .marchio {
        font-size: 22px;
    }

    /* Sul telefono la testata tiene solo il nome e il menù:
       il logo dell'istituto resta nel piè di pagina. */
    .testata-filo,
    .testata-ente {
        display: none;
    }

    .footer-ente {
        max-width: none;
    }
}

/* ------------------------------------------------------------
   Gli indirizzi web dentro le citazioni: compaiono sia nella
   bibliografia generale sia nelle schede di dettaglio, quindi la
   regola sta qui, dove le due pagine la leggono entrambe.
   ------------------------------------------------------------ */

.bib-web {
    color: var(--link);
    text-decoration: none;
}

.bib-web:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------
   Titolo di pagina: una misura sola per tutto il sito.
   Nasce da .section-title della pagina eventi — 32px, tondo,
   Playfair — perche' era quella che Valentina voleva ovunque.
   ------------------------------------------------------------ */

.titolo-pagina {
    font-family: var(--ff-head);
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 1.2;
    color: var(--testo);
    margin: 0 0 12px 0;
}

@media (max-width: 768px) {
    .titolo-pagina {
        font-size: 24px;
    }
}