/* =====================================================================
   unify.css -- Fase A1 unificazione visiva  (home SPA  <->  modulo /fhp/perf)
   =====================================================================
   Scopo: far percepire la home e il modulo Performance come la STESSA app,
          allineando la tipografia al guscio FHP (Montserrat), senza
          riscrivere app.css.
   Caricato PER ULTIMO in index.html -> override mirato sulla SPA legacy.
   Reversibile al 100%: basta rimuovere il <link> a questo file.
   Data: 2026-06-03
   ===================================================================== */

/* --- 1. Tipografia: stessa famiglia del modulo Performance ----------- */
/* app.css imposta 'Sora' sul body (riga 40). Qui lo sovrascriviamo con
   Montserrat, che e' il font del guscio FHP (_layout.html). Il monospace
   resta JetBrains Mono, gia' condiviso da entrambe le UI. */
body,
.sidebar,
.sidebar-brand,
.sidebar-nav,
.nav-item,
.card,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Manteniamo esplicitamente il monospace dove app.css lo usa per i numeri
   (ranking, metriche): coerente con il modulo Performance. */
.result-rank,
.metric-mono,
code, pre, kbd {
    font-family: 'JetBrains Mono', monospace;
}

/* --- 2. Nota per Fase A2 (NON attiva ora) ---------------------------- */
/* In A2 qui mapperemo i nomi-variabile locali della SPA sui token FHP,
   es:  :root { --gray-200: var(--fhp-grigio-200); ... }
   Lo faremo dopo aver elencato i --gray-* reali definiti in app.css,
   per non introdurre mapping a memoria. */

/* --- A2-a: blocco brand allineato al guscio FHP ------------------- */
.sidebar-brand { align-items: center; gap: 12px; }
.sidebar-brand .brand-logo { flex-shrink: 0; display: flex; }
.sidebar-brand .brand-logo img { height: 40px; width: auto; display: block; }
.sidebar-brand .brand-name {
    font-family: var(--font-serif, 'Bodoni Moda', serif);
    font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1;
}
.sidebar-brand .brand-sub {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7;
}

/* --- A2-b: accent + voci menu allineati al brand FHP -------------- */
:root {
    --accent: var(--fhp-blu, #002D72);
    --accent-light: var(--fhp-blu-600, #1A4790);
    --navy-light: var(--fhp-blu-600, #1A4790);
}
/* voce di menu attiva: stesso trattamento del modulo Performance
   (sfondo tenue + barra blu FHP a sinistra) invece del pill azzurro */
.nav-item.active {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 3px 0 0 var(--fhp-blu, #002D72);
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
}