/* /static/css/base.css — v1 (05/07/2026)
   Blocchi condivisi da TUTTE le pagine pubbliche tranne /map (che usa
   deliberatamente header sticky con z-index diverso e resta autonoma).
   Contiene: variabili, reset, body, header fisso, logo, nav, breadcrumb,
   e la media query mobile per header/breadcrumb (breakpoint UNIFICATO a
   860px — prima variava per pagina: 640/768/860/960, incoerenza nota).
   NON contiene il footer: esiste in 3 varianti reali (scuro standard,
   scuro index, chiaro changelog), non è duplicazione da estrarre.
   Va linkato PRIMA del CSS di pagina, che puo' fare override. */

:root {
    --cream:  #FAF7F2;
    --ink:    #1C1917;
    --sepia:  #7C5C2E;
    --gold:   #B8943F;
    --muted:  #6B6560;
    --border: #E2DBD0;
    --white:  #FFFFFF;
    --hover:  #F5F0E8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--ink); }

header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 48px;
    background: rgba(250,247,242,0.93);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-logo { display: inline-flex; align-items: center; }

.site-logo img { height: clamp(34px, 5.2vw, 46px); width: auto; display: block; }

nav a {
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: #4A4642;
    text-decoration: none; margin-left: 32px; transition: color 0.2s;
}

nav a:hover { color: var(--ink); }
nav a.current { color: var(--gold); }

.breadcrumb {
    margin-top: 88px;
    padding: 16px 80px;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb a { color: var(--gold); text-decoration: none; }

.breadcrumb a:hover { color: var(--sepia); }

.breadcrumb .sep { color: var(--border); }

@media (max-width: 860px) {
    header { padding: 16px 20px; }
    .breadcrumb { padding: 14px 20px; }
}