/* ==========================================================================
   ITINERA — design system
   Palette e tipografia condivise da tutte le pagine.
   Import: <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
   dopo bootstrap.load_css() in base.html.
   ========================================================================== */

/* ==========================================================================
   Font self-hosted — nessuna richiesta a fonts.googleapis.com.
   File attesi in app/static/fonts/... (struttura consigliata, adattabile).
   NB: questo è un file .css statico, servito direttamente da Flask — NON
   passa dal motore Jinja. I percorsi qui sotto sono quindi relativi/assoluti
   "normali" (partendo da /static/, assumendo lo static_url_path di default),
   non {{ url_for(...) }} come nei template .html.
   Se scarichi con nomi/pesi diversi, aggiorna solo i percorsi qui sotto:
   il resto del CSS referenzia i font per nome (font-family), non per file.
   ========================================================================== */
@font-face{
  font-family: 'Fraunces';
  src: url("/static/fonts/fraunces/fraunces-regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fraunces';
  src: url("/static/fonts/fraunces/fraunces-600.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fraunces';
  src: url("/static/fonts/fraunces/fraunces-500italic.woff2") format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Public Sans';
  src: url("/static/fonts/public-sans/public-sans-regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Public Sans';
  src: url("/static/fonts/public-sans/public-sans-500.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Public Sans';
  src: url("/static/fonts/public-sans/public-sans-600.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Public Sans';
  src: url("/static/fonts/public-sans/public-sans-700.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Mono';
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Mono';
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-medium.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  /* --- palette --- */
  --ink:       #16232E;   /* testo principale, nav, headline */
  --graphite:  #3C4A55;   /* testo secondario */
  --paper:     #FFFFFF;   /* sfondo pagina — bianco pieno, nessun tono carta */
  --paper-alt: #F3F0EA;   /* sfondo sezioni alternate, molto tenue su bianco */
  --line:      #DEDACE;   /* bordi/hairline, leggermente più chiaro per stare su bianco */
  --rust:      #9C4A32;   /* accento primario: CTA, link, icone */
  --rust-dark: #7C3A27;   /* hover/active dell'accento primario */
  --verdigris: #4C6B63;   /* accento secondario: eyebrow, hover */
  --verdigris-dark: #415B54;
  --gold:      #B08D57;   /* dettagli minori, badge, date */
  --gold-dark: #96784A;
  --info:      #4F7896;   /* nuovo: stati informativi */
  --info-dark: #43667F;
  --danger:    #A13327;   /* nuovo: azioni distruttive — volutamente diverso dal ruggine */
  --danger-dark: #892B21;

  /* --- override variabili Bootstrap 5.3 --- */
  --bs-primary: var(--rust);
  --bs-primary-rgb: 156,74,50;
  --bs-secondary: var(--graphite);
  --bs-secondary-rgb: 60,74,85;
  --bs-success: var(--verdigris);
  --bs-success-rgb: 76,107,99;
  --bs-info: var(--info);
  --bs-info-rgb: 79,120,150;
  --bs-warning: var(--gold);
  --bs-warning-rgb: 176,141,87;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 161,51,39;
  --bs-light: var(--paper-alt);
  --bs-dark: var(--ink);
  --bs-dark-rgb: 22,35,46;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-link-color: var(--rust);
  --bs-link-hover-color: var(--rust-dark);
  --bs-border-color: var(--line);

  /* --bs-secondary-color è la variabile che alimenta .text-muted — è DIVERSA
     da --bs-secondary (quella dei bottoni/badge), quindi va sovrascritta a
     parte, altrimenti .text-muted resta grigio Bootstrap di default ovunque
     nell'app. */
  --bs-secondary-color: var(--graphite);
  --bs-tertiary-color: rgba(60,74,85,.55);

  /* Raggio "istituzionale" uniforme per card/alert/input/dropdown ecc.
     (i bottoni hanno già il loro override dedicato più sotto). Le pillole
     (badge/rounded-pill) restano tonde: usano una variabile separata. */
  --bs-border-radius: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 3px;
  --bs-border-radius-xl: 4px;
}

/* ==========================================================================
   Alert — come i bottoni, le varianti hanno colori "subtle/emphasis" già
   calcolati e fissi nel CSS compilato, non derivati da --bs-warning ecc. a
   runtime. Si sovrascrivono le custom property locali di ogni variante.
   ========================================================================== */
.alert-primary{ --bs-alert-color: var(--rust-dark); --bs-alert-bg: rgba(156,74,50,.1); --bs-alert-border-color: var(--rust); }
.alert-secondary{ --bs-alert-color: var(--graphite); --bs-alert-bg: var(--paper-alt); --bs-alert-border-color: var(--line); }
.alert-success{ --bs-alert-color: var(--verdigris-dark); --bs-alert-bg: rgba(76,107,99,.12); --bs-alert-border-color: var(--verdigris); }
.alert-danger{ --bs-alert-color: var(--danger-dark); --bs-alert-bg: rgba(161,51,39,.1); --bs-alert-border-color: var(--danger); }
.alert-warning{ --bs-alert-color: var(--ink); --bs-alert-bg: rgba(176,141,87,.15); --bs-alert-border-color: var(--gold); }
.alert-info{ --bs-alert-color: var(--info-dark); --bs-alert-bg: rgba(79,120,150,.1); --bs-alert-border-color: var(--info); }

/* pagine "di lavoro" (admin, import, dedup, tassonomia...) restano neutre:
   aggiungere class="workspace" sul <body> di quei template */
body.workspace{
  --bs-body-bg: #F7F6F2;
  --paper: #F7F6F2;
  --paper-alt: #EFEDE7;
}

body{
  font-family: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

h1, h2, h3, .font-display{ font-family: 'Fraunces', Georgia, serif; }
.font-mono{ font-family: 'IBM Plex Mono', monospace; }

a {
    color: var(--rust);
    text-decoration: none;
}
a:hover{ color: var(--rust-dark); }

code{
  color: var(--rust-dark);
  background: rgba(156,74,50,.08);
  padding: .05rem .3rem;
  border-radius: 2px;
  font-size: .92em;
}

/* ==========================================================================
   Dropcap — capolettera per aprire un blocco di testo lungo (editoriale/
   archivistico). Applicare class="dropcap" al <p> che deve iniziare col
   capolettera. NB: funziona meglio su un paragrafo che inizia con testo
   semplice — su un paragrafo che apre con un elemento inline stilizzato
   (es. il "chip" <code>) il capolettera prenderebbe la prima lettera
   dentro quel chip, con risultati poco puliti.
   ========================================================================== */
.dropcap:first-letter{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 3.4em;
  line-height: .82;
  float: left;
  padding-right: .09em;
  padding-top: .04em;
  color: var(--rust);
}

/* --- eyebrow: etichetta piccola maiuscola in mono, usata come "numero di scheda" --- */
.eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .7rem;
  color: var(--verdigris);
}

/* --- prose: larghezza di lettura per blocchi di testo lunghi (usata in
   about.html come .about-copy, e nella sezione "Il progetto" della home) --- */
.prose{ max-width: 46rem; }

/* ==========================================================================
   Bottoni — un'unica regola di FORMA per tutti (radius, peso, letter-spacing,
   qualunque variante), poi il COLORE per ciascuna variante semantica.

   Per ogni variante impostiamo esplicitamente anche hover/focus/active:
   Bootstrap compilato porta questi stati "hardcoded" per classe (es.
   .btn-primary ha --bs-btn-focus-shadow-rgb fissato al blu di default),
   NON derivati da --bs-primary — quindi non basta ricolorare lo sfondo di
   riposo, altrimenti l'anello di focus (Tab/click) resterebbe blu.
   ========================================================================== */
.btn{
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* --- primary (ruggine) --- */
.btn-primary{
  background-color: var(--rust); border-color: var(--rust);
  --bs-btn-focus-shadow-rgb: 156,74,50;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background-color: var(--rust-dark) !important; border-color: var(--rust-dark) !important;
}
.btn-outline-primary{ color: var(--rust); border-color: var(--rust); --bs-btn-focus-shadow-rgb: 156,74,50; }
.btn-outline-primary:hover, .btn-outline-primary:active{
  background-color: var(--rust) !important; border-color: var(--rust) !important; color: #fff !important;
}

/* --- secondary (grafite) --- */
.btn-secondary{
  background-color: var(--graphite); border-color: var(--graphite);
  --bs-btn-focus-shadow-rgb: 60,74,85;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active{
  background-color: var(--ink) !important; border-color: var(--ink) !important;
}
.btn-outline-secondary{ color: var(--graphite); border-color: var(--graphite); --bs-btn-focus-shadow-rgb: 60,74,85; }
.btn-outline-secondary:hover, .btn-outline-secondary:active{
  background-color: var(--graphite) !important; border-color: var(--graphite) !important; color: #fff !important;
}

/* --- success (verderame) --- */
.btn-success{
  background-color: var(--verdigris); border-color: var(--verdigris);
  --bs-btn-focus-shadow-rgb: 76,107,99;
}
.btn-success:hover, .btn-success:focus, .btn-success:active{
  background-color: var(--verdigris-dark) !important; border-color: var(--verdigris-dark) !important;
}
.btn-outline-success{ color: var(--verdigris); border-color: var(--verdigris); --bs-btn-focus-shadow-rgb: 76,107,99; }
.btn-outline-success:hover, .btn-outline-success:active{
  background-color: var(--verdigris) !important; border-color: var(--verdigris) !important; color: #fff !important;
}

/* --- danger (rosso, volutamente distinto dal ruggine) --- */
.btn-danger{
  background-color: var(--danger); border-color: var(--danger);
  --bs-btn-focus-shadow-rgb: 161,51,39;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active{
  background-color: var(--danger-dark) !important; border-color: var(--danger-dark) !important;
}
.btn-outline-danger{ color: var(--danger); border-color: var(--danger); --bs-btn-focus-shadow-rgb: 161,51,39; }
.btn-outline-danger:hover, .btn-outline-danger:active{
  background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important;
}

/* --- warning (oro — testo scuro per contrasto, non bianco) --- */
.btn-warning{
  background-color: var(--gold); border-color: var(--gold); color: var(--ink);
  --bs-btn-focus-shadow-rgb: 176,141,87;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active{
  background-color: var(--gold-dark) !important; border-color: var(--gold-dark) !important; color: var(--ink) !important;
}
.btn-outline-warning{ color: var(--gold-dark); border-color: var(--gold); --bs-btn-focus-shadow-rgb: 176,141,87; }
.btn-outline-warning:hover, .btn-outline-warning:active{
  background-color: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important;
}

/* --- info (blu ardesia) --- */
.btn-info{
  background-color: var(--info); border-color: var(--info); color: #fff;
  --bs-btn-focus-shadow-rgb: 79,120,150;
}
.btn-info:hover, .btn-info:focus, .btn-info:active{
  background-color: var(--info-dark) !important; border-color: var(--info-dark) !important; color: #fff !important;
}
.btn-outline-info{ color: var(--info); border-color: var(--info); --bs-btn-focus-shadow-rgb: 79,120,150; }
.btn-outline-info:hover, .btn-outline-info:active{
  background-color: var(--info) !important; border-color: var(--info) !important; color: #fff !important;
}

/* --- link testuale --- */
.btn-link{ font-weight: 600; color: var(--rust); }
.btn-link:hover{ color: var(--rust-dark); }

/* ==========================================================================
   Navbar (si applica al componente esistente, nessuna modifica al template)
   ========================================================================== */
.navbar{
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line);
}
.navbar-brand{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink) !important;
}
.nav-link{
  color: var(--graphite) !important;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.nav-link:hover,
.nav-link.active{
  color: var(--rust) !important;
}
.dropdown-menu{
  border: 1px solid var(--line);
  border-radius: 2px;
}
.dropdown-item:hover{
  background: var(--paper-alt);
  color: var(--rust);
}
.dropdown-header{
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--verdigris);
}

/* ==========================================================================
   Divisore firma — "linea di itinerario": tratteggio + puntino + etichetta.
   Da usare al posto di <hr> tra sezioni.
   Markup:
   <div class="itinerary-divider"><span class="idot"></span><span class="ilabel">Testo</span></div>
   ========================================================================== */
.itinerary-divider{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 2.75rem 0;
  color: #A69E8B;
}
.itinerary-divider::before{
  content: "";
  flex: 0 0 48px;
  height: 1px;
  background-image: linear-gradient(to right, currentColor 50%, transparent 0%);
  background-size: 7px 1px;
  background-repeat: repeat-x;
}
.itinerary-divider::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-image: linear-gradient(to right, currentColor 50%, transparent 0%);
  background-size: 7px 1px;
  background-repeat: repeat-x;
}
.itinerary-divider .idot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rust);
  flex-shrink: 0;
}
.itinerary-divider .ilabel{
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b846f;
  white-space: nowrap;
}

/* ==========================================================================
   Content item — sostituisce le card Bootstrap standard nelle griglie
   di presentazione (es. "Contenuti dell'archivio" in home).
   Markup:
   <div class="content-item"><div class="ci-icon"><i class="bi ..."></i></div><h3>...</h3><p>...</p></div>
   ========================================================================== */
.content-item{
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.content-item .ci-icon{
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-alt);
  color: var(--rust);
  margin-bottom: .85rem;
  font-size: 1rem;
}
.content-item h3{
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.content-item p{
  color: var(--graphite);
  font-size: .9rem;
}

section.bg-alt{ background: var(--paper-alt); }

/* ==========================================================================
   Liste puntate "editoriali" (metodologia, elenchi sintetici)
   ========================================================================== */
.methodology-list{ list-style: none; padding-left: 0; }
.methodology-list li{
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
  font-size: .92rem;
  color: var(--graphite);
}
.methodology-list li::before{
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--verdigris);
}

/* ==========================================================================
   Footer (si applica al componente esistente components/footer.html):
   vedi css in component/footer.html
   ========================================================================== */