/* ============================================================
   FONT NEXA - CONFIGURAZIONE COMPLETA
   Adobe Fonts kit ifl6wzq.css (Nexa + Nexa Text)
   ============================================================ */

/* --- Scala tipografica ---
   Variabili per gestire tutta la tipografia da un unico punto:
   cambiare un valore qui aggiorna tutto il sito. I clamp() rendono
   le dimensioni fluide tra mobile e desktop senza media query. */
:root {
    --font-h1: clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);   /* 36px -> 56px */
    --font-h2: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);  /* 30px -> 40px */
    --font-h3: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);    /* 24px -> 30px */
    --font-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20px -> 24px */
    --font-h5: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);   /* 18px -> 20px */
    --font-h6: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);   /* 16px -> 18px */
    --font-body: 1rem;                                    /* 16px, fisso */
    --font-small: 0.875rem;                               /* 14px, per label/didascalie generiche */
}

/* --- Base di fallback: applica Nexa Regular a tutto il sito ---
   Specificità volutamente bassa: elementi più specifici (Elementor,
   widget, bottoni) possono sovrascriverla senza bisogno di !important. */
body, div, span, a, li, td, th,
input, textarea, button, select,
.widget, .widget-area,
.nav-menu, .menu-item {
    font-family: 'nexa', sans-serif;
    font-weight: 400;
}

/* --- Paragrafi generali (fuori da Elementor) --- */
p {
    font-family: 'nexa-text', sans-serif;
    font-weight: 300;
    font-size: var(--font-body);
    line-height: 1.65; /* interlinea ampia: Nexa Text a peso leggero ne ha bisogno per restare leggibile */
}

/* --- Corpo articoli e testo dentro Elementor ---
   !important necessario: Elementor genera CSS per-widget con
   selettori più specifici di un semplice "p", quindi senza
   !important questa regola verrebbe ignorata. */
.entry-content p,
.post-content p,
article p,
.entry-content li,
.entry-content td,
.elementor-widget-text-editor p,
.elementor-text-editor p,
.elementor p {
    font-family: 'nexa-text', sans-serif !important;
    font-weight: 300 !important;
    font-size: var(--font-body) !important;
    line-height: 1.65 !important;
}

/* --- Titoli h1-h6 ---
   !important necessario: Elementor/ThemeREX generano CSS per-widget
   di titolo con specificità più alta di un semplice selettore di tag.
   Letter-spacing leggermente negativo sui pesi Black/Bold grandi,
   perché a quelle dimensioni Nexa risulta più equilibrato "stretto". */
h1 {
    font-family: 'nexa', sans-serif !important;
    font-weight: 900 !important; /* Nexa Black */
    font-size: var(--font-h1) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}
h2 {
    font-family: 'nexa', sans-serif !important;
    font-weight: 900 !important;
    font-size: var(--font-h2) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
}
h3 {
    font-family: 'nexa', sans-serif !important;
    font-weight: 900 !important;
    font-size: var(--font-h3) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}
h4 {
    font-family: 'nexa', sans-serif !important;
    font-weight: 600 !important; /* Nexa Bold */
    font-size: var(--font-h4) !important;
    line-height: 1.25 !important;
}
h5 {
    font-family: 'nexa', sans-serif !important;
    font-weight: 500 !important; /* Nexa Regular */
    font-size: var(--font-h5) !important;
    line-height: 1.3 !important;
}
h6 {
    font-family: 'nexa', sans-serif !important;
    font-weight: 400 !important; /* Nexa Book */
    font-size: var(--font-h6) !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important; /* i testi piccoli maiuscoli respirano meglio staccati */
}

/* --- Titoli di pagine/articoli e widget standard --- */
.entry-title, .post-title, .page-title {
    font-family: 'nexa', sans-serif !important;
    font-weight: 900 !important;
}
.widget-title, .sidebar-title,
.site-title, .site-description {
    font-family: 'nexa', sans-serif !important;
    font-weight: 700 !important;
}

/* --- Titoli widget ThemeREX (es. "Prossimi Appuntamenti", "Grandi Eventi") ---
   Il testo vive in uno span annidato (.sc_item_title_text) con una
   sua regola di peso più specifica dell'h2 genitore: va colpito
   direttamente lo span, non solo l'h2. */
h2.sc_item_title,
.sc_item_title .sc_item_title_text,
.sc_item_title_text {
    font-family: 'nexa', sans-serif !important;
    font-weight: 900 !important;
    font-size: var(--font-h2) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
}

/* --- Grassetto --- */
strong, b {
    font-family: 'nexa', sans-serif !important;
    font-weight: 800 !important; /* Nexa Heavy */
}

/* --- Corsivo e citazioni ---
   NOTA: il tag "i" è escluso apposta. Su questo sito "i" è usato
   anche per le icone (es. <i class="fa fa-phone">): includerlo qui
   avrebbe rotto la visualizzazione delle icone in tutto il sito. */
em, blockquote,
.wp-block-quote {
    font-family: 'nexa-text', sans-serif;
    font-style: italic;
    font-weight: 300;
}

/* --- Titoli dentro Slider Revolution ---
   !important indispensabile: Slider Revolution applica spesso lo
   stile dei layer come attributo "style" inline, che batte
   qualunque CSS esterno se non è marcato !important. */
.rs-layer h1, .rs-layer h2 {
    font-family: 'nexa', sans-serif !important;
    font-weight: 900 !important;
}

/* --- Classi manuali Nexa (uso libero nei widget di testo) --- */
.nexa-thin       { font-family: 'nexa', sans-serif; font-weight: 100; }
.nexa-extralight { font-family: 'nexa', sans-serif; font-weight: 200; }
.nexa-light      { font-family: 'nexa', sans-serif; font-weight: 300; }
.nexa-book       { font-family: 'nexa', sans-serif; font-weight: 400; }
.nexa-regular    { font-family: 'nexa', sans-serif; font-weight: 500; }
.nexa-bold       { font-family: 'nexa', sans-serif; font-weight: 600; }
.nexa-extrabold  { font-family: 'nexa', sans-serif; font-weight: 700; }
.nexa-heavy      { font-family: 'nexa', sans-serif; font-weight: 800; }
.nexa-black      { font-family: 'nexa', sans-serif; font-weight: 900; }

/* --- Classi manuali Nexa Text (uso libero nei widget di testo) --- */
.nexa-text-thin       { font-family: 'nexa-text', sans-serif; font-weight: 100; }
.nexa-text-extralight { font-family: 'nexa-text', sans-serif; font-weight: 200; }
.nexa-text-light      { font-family: 'nexa-text', sans-serif; font-weight: 300; }
.nexa-text-book       { font-family: 'nexa-text', sans-serif; font-weight: 400; }
.nexa-text-regular    { font-family: 'nexa-text', sans-serif; font-weight: 500; }
.nexa-text-bold       { font-family: 'nexa-text', sans-serif; font-weight: 600; }
.nexa-text-extrabold  { font-family: 'nexa-text', sans-serif; font-weight: 700; }
.nexa-text-heavy      { font-family: 'nexa-text', sans-serif; font-weight: 800; }
.nexa-text-black      { font-family: 'nexa-text', sans-serif; font-weight: 900; }

/* --- Testo piccolo generico: didascalie, meta-informazioni --- */
small, .small-text {
    font-size: var(--font-small) !important;
    line-height: 1.4 !important;
}


/* ============================================================
   SFONDI PAGINA PER PAGINA
   Ogni regola usa la classe body.page-id-XXXX che WordPress
   aggiunge automaticamente solo su quella pagina specifica,
   quindi non tocca le altre pagine del sito.
   ============================================================ */

/* --- Pagina "Costa Azzurra 2026" (ID 26574): sfondo chiaro --- */
body.page-id-26574,
body.page-id-26574 .page_content_wrap,
body.page-id-26574 .page_wrap {
    background-color: #E3E2DE !important;
}

/* --- Pagina "Derby Day" (ID 46984): sfondo grigio scuro ---
   Il colore va sul wrapper del tema (.page_content_wrap) perché
   è lui, non il body, a coprire visivamente il contenuto. */
body.page-id-46984 .page_content_wrap {
    background-color: #1C2120 !important;
    padding-top: 0 !important;
}


/* ============================================================
   BANNER DOCUMENTI IPPICA
   Usato dallo shortcode [ultimi_documenti] in homepage.
   ============================================================ */
.banner-documenti-ippica {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px 0 !important;
}
.banner-documento-item a,
.banner-documento-item a:hover,
.banner-documento-item a:visited {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-left: 3px solid #15763C !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.2s ease !important;
}
.banner-documento-item a:hover {
    background: #f0f4f1 !important;
}
.doc-icona {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background: none !important;
    padding: 0 !important;
}
.doc-titolo {
    font-family: 'nexa-text', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #000000 !important;
    line-height: 1.4 !important;
}
@media (max-width: 768px) {
    .banner-documento-item a {
        padding: 10px 12px !important;
    }
    .doc-titolo {
        font-size: 13px !important;
    }
}

/* --- Blocco "Programma" pinnato in cima al banner (sfondo verde) --- */
.banner-documento-pinned a,
.banner-documento-pinned a:hover,
.banner-documento-pinned a:visited {
    background: #15763C !important;
    border-left: none !important;
    align-items: flex-start !important;
}
.banner-documento-pinned a:hover {
    background: #0f5a2e !important;
}
.banner-documento-pinned .doc-icona svg {
    fill: #ffffff !important;
}
.banner-documento-pinned .doc-titolo {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    color: #ffffff !important;
}
.banner-documento-pinned .doc-label {
    font-family: 'nexa', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    display: block !important;
}
.banner-documento-pinned .doc-subtitle {
    font-family: 'nexa-text', sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.8) !important;
    display: block !important;
}


/* ============================================================
   ELEMENTI NASCOSTI SU PAGINE SPECIFICHE
   ============================================================ */

/* TODO: descrivere qui cosa nasconde esattamente questo elemento
   e su quale pagina si trova, per non perderne traccia in futuro. */
.elementor-element-d83ad90 {
    display: none !important;
}