/* 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;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Il wrapper dell'app occupa tutta l'altezza disponibile */
.app-initial-fade {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Il contenuto principale cresce per spingere il footer in fondo */
.app-initial-fade > .container-fluid {
    flex: 1 0 auto;
}

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

/* Titoli pagina: sfondo arancione, testo bianco */
.page-title {
    color: #ffffff !important;
    background-color: var(--cesvi-orange);
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.9rem;
    display: inline-block;
    margin-bottom: 1rem !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: 700;
    border-bottom: 2px solid var(--cesvi-orange);
    padding-bottom: 2px;
}

/* 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;
}
.btn-outline-primary {
    color: var(--cesvi-orange) !important;
    border-color: var(--cesvi-orange) !important;
}
.btn-outline-primary:hover {
    background-color: var(--cesvi-orange) !important;
    border-color: var(--cesvi-orange) !important;
    color: #fff !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;
}

/* Slider anno — colore Cesvi (Dash 4 / Radix UI) */
.dash-slider-range {
    background-color: var(--cesvi-orange) !important;
}
.dash-slider-thumb {
    background-color: var(--cesvi-orange) !important;
    border-color: var(--cesvi-orange) !important;
}
.dash-slider-thumb:hover,
.dash-slider-thumb:focus {
    background-color: var(--cesvi-orange-dark) !important;
    box-shadow: 0 0 0 5px rgba(235,102,8,.25) !important;
}
.dash-slider-dot {
    border-color: var(--cesvi-orange) !important;
}
.dash-slider-dot-outside-selection {
    border-color: #d1d5db !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; }

/* ── Dropdown (Dash 4 / dcc.Dropdown) ───────────────────────────────────── */
/* Placeholder "Search" → "Cerca" (via JS in scroll_top.js) */
input.dash-dropdown-search::placeholder { color: #adb5bd; }
/* Nascondi checkbox sulle opzioni disabilitate (separatori) */
input.dash-options-list-option-checkbox[disabled] { display: none !important; }
.dash-options-list-option-wrapper:has(input[disabled]) { display: none !important; }

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

/* ── Hero split (testo sx | foto dx) ─────────────────────────────────────── */
.hero-split {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Colonna sinistra — sfondo scuro */
.hero-split-left {
    width: 42%;
    background-color: #000000;  /* #1a1a1a;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5.5rem 3.5rem 3rem 4rem;
    position: relative;
}

.hero-left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.hero-title {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    line-height: 1.35 !important;
    letter-spacing: 0.03em;
    margin-bottom: 2.2rem !important;
}

/* Blocco arancione "GENERAZIONE SOLA" */
.hero-focus-tag {
    display: inline-block;
    background-color: var(--cesvi-orange);
    padding: 1rem 1.6rem;
    margin-bottom: 2rem;
}

.hero-focus-tag span {
    display: block;
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

.hero-year {
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Scroll hint ─────────────────────────────────────────────────────────── */
.hero-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: scrollBounce 1.8s ease-in-out infinite;
    opacity: 0.5;
    margin-bottom: 2.5rem;
    cursor: pointer;
}
.hero-scroll-hint::before,
.hero-scroll-hint::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0);   opacity: 0.5; }
    50%       { transform: translateY(6px); opacity: 0.9; }
}

/* Dissolvenza in ingresso — tutte le pagine */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.app-initial-fade {
    animation: fadeIn 0.6s ease-in both;
}
#_pages_content > div {
    animation: fadeIn 0.6s ease-in both;
}

/* Colonna destra — foto */
.hero-split-right {
    width: 58%;
    background-image: url('/assets/hero.jpeg');
    background-size: cover;
    background-position: center top;
}

/* Mobile: immagine sopra, testo sotto */
@media (max-width: 768px) {
    .hero-split {
        flex-direction: column;
        height: auto;
    }
    .hero-split-right {
        width: 100%;
        height: 45vh;
    }
    .hero-split-left {
        width: 100%;
        padding: 2.5rem 1.8rem 2rem;
    }
    .hero-title {
        font-size: 1.1rem !important;
    }
    .hero-focus-tag span {
        font-size: 1.8rem;
    }
}

/* Intro lead (primo paragrafo arancione) */
.intro-lead p {
    color: var(--cesvi-orange) !important;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* ── 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); }
    .stats-strip .col-6 { min-height: 90px; }
    /* mappa dati: riduce altezza minima su mobile perché la legenda va sotto */
    #data_map { min-height: 45vh !important; }
}

/* ── 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;
}

.report-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.13) !important;
    transform: translateY(-2px);
    transition: box-shadow .2s, transform .2s;
}

/* 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; }
}

/* ── Box interpretativo (sintesi teorica) ────────────────────────────────── */
.interpretive-box {
    background-color: #f5f5f5;
    border-left: 4px solid var(--cesvi-orange);
    border-top: none;
    border-right: none;
    border-bottom: none;
}

/* ── Accordion sezione focus ─────────────────────────────────────────────── */.accordion-button {
    font-weight: 700;
    color: var(--cesvi-gray-dark) !important;
    background-color: #f8f8f8 !important;
}
.accordion-button:not(.collapsed) {
    color: #ffffff !important;
    background-color: var(--cesvi-orange) !important;
    box-shadow: none;
}
.accordion-button::after {
    filter: none;
}
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}
.accordion-body {
    color: var(--cesvi-gray-dark);
    line-height: 1.75;
}