/* --- TIMELINE CSS REALE - PROTETTO DA HELIX --- */
.custom-timeline-container {
    position: relative;
    padding: 30px 0;
    width: 100%;
}

/* La linea verticale grigia ben visibile */
.timeline-vertical-line-new {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    background-color: #cccccc !important;
    z-index: 1 !important;
    height: 100% !important;
}

/* Colonna centrale */
.timeline-col-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    padding: 0 !important;
}

/* Il cerchio arancione perfetto */
.timeline-badge-circle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 10 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important;
    margin-top: 5px !important;
}

/* Icona bianca centrata */
.timeline-badge-circle span.fas,
.timeline-badge-circle i {
    font-size: 1.2rem !important;
    color: #ffffff !important;
    display: inline-block !important;
}

/* Freccia arancione */
.timeline-arrow-box {
    position: absolute !important;
    right: -8px !important;
    top: 15px !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 10px solid !important;
    z-index: 5 !important;
}

/* Card arancione con testo bianco visibile */
.timeline-card {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 5 !important;
}

.timeline-card-title {
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    padding-bottom: 10px !important;
    color: #ffffff !important;
}

.timeline-period {
    font-size: 1.1rem !important;
    color: #6c757d !important;
}

.timeline-img {
    max-width: 45% !important;
    height: auto !important;
    object-fit: cover !important;
}

.text-justify {
    text-align: justify !important;
}

/* Fix Mobile */
@media (max-width: 576px) {
    .timeline-img {
        max-width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        display: block !important;
    }
}

/* --- FINE TIMELINE CSS REALE - PROTETTO DA HELIX --- */

/* ==========================================================================
   AIKIKAI ITALIA - CSS DEFINITIVO PER HELIX ULTIMATE (JOOMLA)
   ========================================================================== */

/* 1. TIPOGRAFIA E COLORI DI BASE */
body {
    /* Font Primario: Avenir (Peso 400 per il testo normale) */
    font-family: "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400;
    color: #333333; /* Colore testo globale (--e-global-color-text) */
    background-color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
}

/* Titoli principali */
h1, h2, h3, h4, h5, h6,
.sp-module .sp-module-title {
    /* Carattere Primario per i titoli: Avenir (Peso 600) */
    font-family: "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    color: #140D54; /* Blu scuro istituzionale primario (--e-global-color-primary) */
    margin-bottom: 20px;
}

/* Link globali */
a {
    color: #3F8EA0; /* Colore secondario di base (--e-global-color-secondary) */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: #7BB4C3; /* Passaggio al colore azzurro intermedio (--e-global-color-d752efb) */
    text-decoration: none;
}

/* 2. HEADER E NAVIGAZIONE (MENU PRINCIPALE) */
#sp-header {
    background-color: #ffffff !important;
    border-bottom: 3px solid #140D54; /* Linea blu primario sotto l'header */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#sp-top-bar {
    background-color: #140D54 !important;
    border-bottom: 3px solid #140D54; /* Linea blu primario sotto l'header */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Voci del menu principale */
ul.sp-menu > li > a, 
ul.sp-menu > li > span {
    /* Il menu principale adotta il carattere secondario: Oswald (Peso 400) */
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #140D54 !important; /* Colore blu primario */
    text-transform: uppercase;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

/* Voci del menu attive e al passaggio del mouse */
ul.sp-menu > li.active > a,
ul.sp-menu > li.active > span,
ul.sp-menu > li:hover > a {
    color: #3F8EA0 !important; /* Colore secondario */
}

/* Menu a discesa (Dropdown) */
ul.sp-menu li.sp-menu-item .sp-dropdown .sp-dropdown-inner {
    background: #ffffff;
    border-top: 3px solid #3F8EA0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

ul.sp-menu .sp-dropdown li.sp-menu-item a {
    font-family: "Avenir", sans-serif; /* Sottomenu con carattere di lettura fluido */
    color: #322F32 !important; /* Colore grigio scuro di accento (--e-global-color-accent) */
    font-size: 14px;
    padding: 8px 20px;
}

ul.sp-menu .sp-dropdown li.sp-menu-item a:hover {
    background-color: #E6F3F7; /* Sfondo azzurrino chiaro quando si passa sopra (--e-global-color-a8fb777) */
    color: #140D54 !important;
}

/* riduzione spazio tra voci di menu */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    padding: 0 10px !important; /* Riduce lo spazio a destra e sinistra di ogni voce */
}

/* Icona del menu mobile (Burger Icon) */
.burger-icon span {
    background-color: #140D54 !important;
}

/* 3. PULSANTI (BUTTONS) */
.btn-primary, 
.sppb-btn-primary,
button[type="submit"],
.btn.btn-secondary {
    background-color: #140D54 !important; /* Sfondo Blu scuro */
    border-color: #140D54 !important;
    color: #ffffff !important;
    /* Pulsanti con carattere Oswald di accento (Peso 500) */
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 25px;
    border-radius: 0px !important; /* Taglio netto senza angoli arrotondati */
    transition: all 0.3s ease;
}

.btn-primary:hover, 
.sppb-btn-primary:hover,
button[type="submit"]:hover {
    background-color: #322A79 !important; /* Passaggio al blu alternativo scuro (--e-global-color-f90d478) */
    border-color: #322A79 !important;
    color: #ffffff !important;
}

/* 4. SEZIONI E MODULI (WIDGETS) */
.sp-module {
    margin-bottom: 10px;
}

/* Linea decorativa sotto i titoli dei moduli di Helix Ultimate */
.sp-module .sp-module-title::after {
    background-color: #7BB4C3 !important; /* Linea color azzurro medio (--e-global-color-d752efb) */
    width: 50px;
    height: 2px;
}

/* 5. SEZIONE FOOTER (PIE DI PAGINA) */
#sp-footer {
    background-color: #140D54 !important; /* Sfondo blu scuro primario */
    color: #D8D8D8 !important; /* Testo footer grigio chiaro (--e-global-color-517ef0d) */
    padding: 15px 0;
    font-size: 14px;
    border-top: 4px solid #3F8EA0; /* Bordo superiore azzurro secondario */
}

/* Link all'interno del footer */
#sp-footer a {
    color: #7BB4C3 !important; /* Link azzurro intermedio */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Effetto al passaggio del mouse sui link del footer */
#sp-footer a:hover {
    color: #ffffff !important;
}

/* Titoli dei moduli nel footer */
#sp-footer .sp-module .sp-module-title {
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    color: #ffffff !important;
    border-bottom: 2px solid #3F8EA0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 6. CORREZIONI DI IMPAGINAZIONE (PADDINGS) */
.sp-main-body {
    padding: 40px 0;
}