/* style.css — Cesvi Indice Infanzia */

:root {
    --cesvi-orange:      #eb6608;
    --cesvi-orange-dark: #c9561a;
    --cesvi-gray:        #94A4A4;
    --cesvi-gray-dark:   #3d4646;

    /* Colori testo — allineati al sito Cesvi */
    --cesvi-text:        #1a1a1a;   /* corpo testo: quasi nero */
    --cesvi-text-muted:  #6b7280;   /* secondario: grigio medio */
    --cesvi-heading:     #111111;   /* titoli: nero pieno */

    /* sovrascrive il teal di Minty con l'arancione Cesvi */
    --bs-primary:        #eb6608;
    --bs-primary-rgb:    235, 102, 8;
    --bs-link-color:     #eb6608;
    --bs-link-color-rgb: 235, 102, 8;
    --bs-link-hover-color: #c9561a;

    /* sovrascrive font-family Bootstrap */
    --bs-font-sans-serif: 'Raleway', sans-serif;
    --bs-body-color:      #1a1a1a;
}

/* Font — override completo incluso Bootstrap/Bootswatch */
*, *::before, *::after,
body, h1, h2, h3, h4, h5, h6,
p, label, .form-label, .form-check-label,
.btn, .nav-link, .navbar-brand, .dropdown-item,
input, select, textarea {
    font-family: 'Raleway', sans-serif !important;
}

/* Testo corpo */
body {
    color: var(--cesvi-text) !important;
    background-color: #ffffff;
}

/* Titoli più scuri e leggermente pesanti */
h1, h2, h3, h4, h5, h6 {
    color: var(--cesvi-heading) !important;
    font-weight: 700 !important;
}

/* Testo secondario (sottotitoli, date, note) */
.text-muted {
    color: var(--cesvi-text-muted) !important;
}

/* Markdown body (dcc.Markdown genera p, strong, em) */
p, li {
    color: var(--cesvi-text) !important;
    line-height: 1.7;
}

/* Navbar */
.navbar-cesvi {
    background-color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.navbar-cesvi .nav-link,
.navbar-cesvi .navbar-brand {
    color: var(--cesvi-text) !important;
}
.navbar-cesvi .nav-link:hover,
.navbar-cesvi .navbar-brand:hover {
    color: var(--cesvi-orange) !important;
}
.navbar-cesvi .nav-link.active {
    color: var(--cesvi-orange) !important;
    font-weight: 600;
}

/* Buttons */
.btn-primary {
    background-color: var(--cesvi-orange) !important;
    border-color: var(--cesvi-orange) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--cesvi-orange-dark) !important;
    border-color: var(--cesvi-orange-dark) !important;
}

/* Tabs Bootstrap/dbc */
.nav-tabs .nav-link { color: var(--cesvi-text) !important; }
.nav-tabs .nav-link.active {
    color: var(--cesvi-orange) !important;
    border-bottom: 2px solid var(--cesvi-orange) !important;
}
.nav-tabs .nav-link:hover:not(.active) { color: var(--cesvi-orange) !important; }

/* Tabs dcc.Tabs */
.tab          { color: var(--cesvi-text) !important; }
.tab--selected {
    color: var(--cesvi-orange) !important;
    border-top: 3px solid var(--cesvi-orange) !important;
}

/* Form focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--cesvi-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(235,102,8,.2) !important;
}

/* Chart container */
.chart-container { min-height: 400px; }

/* Footer / link generici */
.link {
    color: var(--cesvi-orange) !important;
    text-decoration: none;
}
.link:hover { text-decoration: underline; }

/* ── Hero section ─────────────────────────────────────────────────────────── */
/* Sostituire /assets/hero.jpg con l'immagine definitiva */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 78vh;
    background-image: url('/assets/hero.jpg');
    background-size: cover;
    background-position: center top;
    background-color: var(--cesvi-gray-dark); /* fallback se l'immagine non è presente */
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(20, 20, 20, 0.88) 0%,
        rgba(20, 20, 20, 0.60) 45%,
        rgba(20, 20, 20, 0.00) 75%
    );
}

.hero-text {
    position: relative;
    z-index: 10;
    padding: 4rem 3rem 4rem 3rem;
    max-width: 55%;
    color: #fff;
}
.hero-text h1, .hero-text h2 { color: #fff !important; }

.hero-accent {
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--cesvi-orange);
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .hero-section { min-height: 60vh; }
    .hero-text { max-width: 92%; padding: 2rem 1.5rem; }
}

/* ── Stats strip ──────────────────────────────────────────────────────────── */
.stats-strip {
    width: 100%;
    background-color: var(--cesvi-orange);
}

.stats-strip .stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff !important;
    line-height: 1.1;
}

.stats-strip .stat-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.stat-divider {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

@media (max-width: 576px) {
    .stat-divider { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.28); }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer-section {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.footer-rule {
    border-color: #dee2e6;
    opacity: 1;
}

.footer-heading {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesvi-gray-dark) !important;
}

.footer-text {
    font-size: 0.78rem;
    color: var(--cesvi-text-muted) !important;
}

.footer-link {
    font-size: 0.78rem;
    color: var(--cesvi-text-muted) !important;
    text-decoration: none;
    line-height: 2;
}
.footer-link:hover {
    color: var(--cesvi-orange) !important;
    text-decoration: none;
}

/* ── dcc.Dropdown Dash 4 — colore accento Cesvi ──────────────────────────── */
/* Il trigger usa la variabile CSS; il menu è un portale fuori dal DOM tree
   quindi servono regole esplicite su .dash-dropdown-content */
.dash-dropdown,
.dash-dropdown-content {
    --Dash-Fill-Interactive-Strong: var(--cesvi-orange);
    --Dash-Fill-Interactive-Weak: rgba(235, 102, 8, 0.15);
}
/* Hover su singola opzione */
.dash-dropdown-option:hover {
    background-color: rgba(235, 102, 8, 0.12) !important;
}
/* Input radio/checkbox dentro le opzioni (single/multi select) */
.dash-dropdown-options input[type="radio"],
.dash-dropdown-options input[type="checkbox"] {
    accent-color: var(--cesvi-orange) !important;
}

/* ── Frecce variazione scorecard ─────────────────────────────────────────── */
.arrow-up {
    display: inline-block;
    margin-right: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #eb6608; /* arancione Cesvi */
    vertical-align: middle;
}
.arrow-right {
    display: inline-block;
    margin-right: 6px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #F39840;   /* arancione chiaro */
    vertical-align: middle;
}
.arrow-down {
    display: inline-block;
    margin-right: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #3d4646;    /* grigio scuro */
    vertical-align: middle;
}

/* ── Grafico evoluzione: altezza responsive ─────────────────────────────── */
#scorecard_evolution {
    height: 280px !important;
}
@media (min-width: 1400px) {
    #scorecard_evolution { height: 340px !important; }
}
@media (min-width: 1800px) {
    #scorecard_evolution { height: 400px !important; }
}