/*
Theme Name: New Sicilia
Version: 0.0.2
Theme URI: https://digitrend.it
Description: New Sicilia - Tema Custom
Author: Digitrend
Author URI: https://digitrend.it
Text Domain: new-sicilia
*/


/* =========================================
   1. VARIABILI E RESET GLOBALE
   ========================================= */

:root {
    --font-primary: 'Inter', sans-serif;
    --font-headings: 'Inter', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --primary-color: #0073b5;
    --secondary-color:#f65700;
    --tertiary-color:#4ac0ee;
    /* Rosso Qua Milano */
    --menu-surface: #0f0f0f;
    --menu-chip: #1c1c1c;
    --pc-grid-height: 500px;
    /* Altezza griglia news desktop */
    --pc-gap: 5px;
    /* Spazio tra i riquadri news */
    --pc-overlay-grad: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    --mobile-header-offset: 0px;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: #000;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
    font-weight: 700;
    margin-top: 0;
    color: #000;
}

a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

/*a:hover {
    color: var(--primary-color);
}*/

.opacity, .opacity2, .opacity3 {
    transition: all 0.3s ease-in-out;
}

.opacity:hover {
    opacity: 85%!important;
}

.opacity2:hover {
    opacity: 87%!important;
}

.opacity3:hover {
    filter: brightness(0.9);
}

/* =========================================
   2. WRAPPER PRINCIPALE
   ========================================= */
.container {
    max-width: 1200px;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    /* box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); */
    position: relative;
    padding: 0 15px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .wrapper {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

/* =========================================
   3. TOP BAR E HEADER LOGO
   ========================================= */
#top-bar {
    border-bottom: 1px solid #e6e6e6;
    margin: 0 -15px;
    font-size: 12px;
    background: #fff;
    height: 40px;
}

.top-menu-class ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}

.top-menu-class ul li a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px;
    transition: color 0.3s;
}

.top-menu-class ul li a:hover{
    color: var(--primary-color)!important;
}

/* Area Logo e Manchette */
#main-nav {
    background: #fff;
    padding-bottom: 0;
    /* Lo spazio sotto lo gestisce il menu wrapper */
}

#logo-row {
    align-items: center;
    margin-bottom: 15px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.6fr 1.8fr 0.6fr;
}

.top-logo img {
    max-height: 80px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.header-date {
    text-align: center;
    font-size: 12px;
    color: #666;
    letter-spacing: 1px;
    width: fit-content;
    margin: 0 auto;
}

.doodle {
    text-align: center;
    font-size: 12px;
    color: #666;
    letter-spacing: 1px;
    width: fit-content;
    margin: 0 auto;
    padding: 3px 15px;
    border-radius: 50px;
}

.doodle a {
    color: #666!important;
}


.pc-sezione-doodle-doodle:has(.doodle) + .header-date {
    display: none;
}

.pc-sezione-doodle-doodle:not(:has(.doodle)) {
    display: none;
}

.pc-sezione-doodle-doodle .verde, .pc-sezione-doodle-doodle .verde a{
    background: #2eab62;
    color: #fff!important;
}

.pc-sezione-doodle-doodle .rosso, .pc-sezione-doodle-doodle .rosso a{
    background: var(--primary-color);
    color: #fff!important;
}

.pc-sezione-doodle-doodle .blu, .pc-sezione-doodle-doodle .blu a{
    background: #2d4ab4;
    color: #fff!important;
}

.pc-sezione-doodle-doodle .grigio, .pc-sezione-doodle-doodle .grigio a{
    background: grey;
    color: #fff!important;
}

/* Placeholder adv */

.adv {
    margin: 10px 0;
    background: #f0f0f0;
    justify-content: center;
}


.adv:before {
    content: 'ADV';
    font-size: 10px;
    color: #999;
    display: flex;
    justify-content: center;
}

.adv.manchette {
    width: 320px;
    height: 100px;
}


@media(min-width: 768px) and (max-width: 991px) {
    .adv.manchette {
        width: auto!important;
        max-width: 320px!important;
    }
}


.adv.box {
    width: 100%;
    max-width: 300px;
    min-height: 250px;
}

.adv.billboard {
    width: 100%;
    max-width: 990px;
    min-height: 90px;
}

.adv.leaderboard {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
}

/* =========================================
   4. NUOVA NAVIGAZIONE (Menu a due righe)
   ========================================= */

.navigation-wrapper {
    background-color: #fff;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

/* --- RIGA 1: Principale --- */
.nav-primary-row {
    min-height: 35px;
}

/* Bottone Hamburger Menu */
.btn-hamburger-menu {
    background: transparent;
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    color: #fff;
}

.btn-hamburger-menu i {
    font-size: 14px;
    margin-right: 8px;
}

/* Bottone "Altro" */
.btn-altro-trigger {
    background: transparent;
    border: none;
    font-family: var(--font-primary);
    font-size: 13px;
    cursor: pointer;
    border-left: 1px solid #ccc;
    padding-left: 15px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    margin-top: 3px;
}

/* Stili liste menu orizzontali */
.nav-inline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.nav-inline-list li a {
    text-decoration: none;
    color: #000;
    transition: color 0.2s;
}


/* Grassetto per menu sx */
.bold-nav li a {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.5px;
    color: #000;
    display: flex;
    align-items: center;
}

.bold-nav li a:hover {
    text-decoration: none;
}

/* Normale per menu dx */
.regular-nav li a {
    font-weight: 400;
    font-size: 13px;
}

.regular-nav li a:hover {
    text-decoration: none;
}

/* --- RIGA 2: Secondaria (Città + Social) --- */
.nav-secondary-row {
    border-top: 1px solid #000000;
    min-height: 40px;
}

#menu-secondario-sinistra li a {
    font-size: 13px;
    text-transform: capitalize;
    color: #333;
    font-weight: 600;
}

#menu-secondario-sinistra li a:hover {
    color: var(--primary-color);
}

/* Icone Social Header */
.header-social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.header-social-icons li a {
    color: #333;
    font-size: 14px;
    transition: color 0.3s;
}

.header-social-icons li a:hover {
    color: var(--primary-color);
}

/* =========================================
   5. MOBILE OVERLAY
   ========================================= */
#menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: var(--menu-surface);
    display: none;
    /* Gestito via JS */
    color: #fff;
}

.overlay {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
}

.close-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.close-overlay svg {
    width: 30px;
    height: 30px;
}

.search-bar {
    position: relative;
    border-bottom: 2px solid #333;
    margin-top: 60px;
    padding-bottom: 10px;
}

.search-input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    width: 100%;
    outline: none;
}

.search-icon {
    position: absolute;
    right: 0;
    top: 5px;
    color: #666;
}

/* =========================================
   6. PERSONAL COMPOSER (Griglia News)
   ========================================= */
[class^="pc-sezione"] .ultime-notizie,
[class*=" pc-sezione"] .ultime-notizie,
.mosaico .ultime-notizie,
.mosaico-titolo-dentro .ultime-notizie {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Garantisce margini consistenti per template in sidebar */
.col-sm-4 .mosaico,
.col-md-4 .mosaico,
.col-lg-4 .mosaico,
.col-sm-3 .mosaico,
.col-md-3 .mosaico,
.col-lg-3 .mosaico,
.col-sm-4 .lista-sidebar,
.col-md-4 .lista-sidebar,
.col-lg-4 .lista-sidebar,
.col-sm-3 .lista-sidebar,
.col-md-3 .lista-sidebar,
.col-lg-3 .lista-sidebar,
.col-sm-4 .mosaico-titolo-dentro,
.col-md-4 .mosaico-titolo-dentro,
.col-lg-4 .mosaico-titolo-dentro,
.col-sm-3 .mosaico-titolo-dentro,
.col-md-3 .mosaico-titolo-dentro,
.col-lg-3 .mosaico-titolo-dentro {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Compensa padding colonne principali per allineare con blocchi full-width */
@media (min-width: 576px) {
    .col-sm-8 > .mosaico,
    .col-md-8 > .mosaico,
    .col-lg-8 > .mosaico,
    .col-sm-9 > .mosaico,
    .col-md-9 > .mosaico,
    .col-lg-9 > .mosaico,
    .col-sm-7 > .mosaico,
    .col-md-7 > .mosaico,
    .col-lg-7 > .mosaico,
    .col-sm-8 > .mosaico-titolo-dentro,
    .col-md-8 > .mosaico-titolo-dentro,
    .col-lg-8 > .mosaico-titolo-dentro,
    .col-sm-9 > .mosaico-titolo-dentro,
    .col-md-9 > .mosaico-titolo-dentro,
    .col-lg-9 > .mosaico-titolo-dentro,
    .col-sm-7 > .mosaico-titolo-dentro,
    .col-md-7 > .mosaico-titolo-dentro,
    .col-lg-7 > .mosaico-titolo-dentro,
    .col-sm-8 > .lista-sidebar,
    .col-md-8 > .lista-sidebar,
    .col-lg-8 > .lista-sidebar,
    .col-sm-9 > .lista-sidebar,
    .col-md-9 > .lista-sidebar,
    .col-lg-9 > .lista-sidebar,
    .col-sm-7 > .lista-sidebar,
    .col-md-7 > .lista-sidebar,
    .col-lg-7 > .lista-sidebar,
    .col-sm-8 > .layout-main-col-split,
    .col-md-8 > .layout-main-col-split,
    .col-lg-8 > .layout-main-col-split,
    .col-sm-9 > .layout-main-col-split,
    .col-md-9 > .layout-main-col-split,
    .col-lg-9 > .layout-main-col-split,
    .col-sm-7 > .layout-main-col-split,
    .col-md-7 > .layout-main-col-split,
    .col-lg-7 > .layout-main-col-split {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }
}


.pc-news-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

.pc-news-grid-wrapper h1,
.pc-news-grid-wrapper h2,
.pc-news-grid-wrapper h3,
.pc-news-grid-wrapper h4 {
    font-family: var(--font-primary);
}

/* Card Generica */
.pc-post-card {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.pc-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pc-card-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px;
    background: var(--pc-overlay-grad);
    pointer-events: none;
}

.pc-card-overlay a {
    pointer-events: auto;
}

/* Tipografia Card */
.pc-title,
.pc-title-small {
    color: #fff;
    margin: 5px 0 10px 0;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.pc-title a,
.pc-title-small a {
    color: #fff;
    text-decoration: none;
}

.pc-title {
    font-size: 24px;
}

.pc-title-small {
    font-size: 16px;
}

.pc-meta {
    font-size: 11px;
    color: #ddd;
    text-transform: uppercase;
}

.pc-badge {
    background-color: var(--primary-color);
    color: #fff;
    padding: 3px 8px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}

/* Layout Desktop Griglia */
@media (min-width: 768px) {
    .pc-news-grid-wrapper {
        height: var(--pc-grid-height);
        padding:0;
        margin-bottom:15px;
    }

    .pc-main-post {
        width: 50%;
        height: 100%;
        padding-right: var(--pc-gap);
        box-sizing: border-box;
    }

    .pc-secondary-posts-container {
        width: 50%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .pc-sub-item {
        width: 50%;
        height: 50%;
        box-sizing: border-box;
    }
    
    /* Spaziature griglia - DEFAULT (4 POST SECONDARI) */
    .pc-sub-item:nth-child(1) { padding-right: var(--pc-gap); padding-bottom: var(--pc-gap); }
    .pc-sub-item:nth-child(2) { padding-bottom: var(--pc-gap); }
    .pc-sub-item:nth-child(3) { padding-right: var(--pc-gap); }
    .pc-sub-item:nth-child(4) { }

    /* --- LAYOUT SPECIALE PER 2 POST SECONDARI (3 TOTALI) --- */
    /* Il main post occupa il 75% */
    .pc-posts-2 .pc-main-post {
        width: 60%;
        padding-right: var(--pc-gap);
    }

    /* Container secondario occupa il 25% */
    .pc-posts-2 .pc-secondary-posts-container {
        width: 40%;
    }

    /* I due post secondari sono impilati verticalmente, ciascuno al 100% larghezza e 50% altezza */
    .pc-posts-2 .pc-sub-item {
        width: 100%;
        height: 50%;
    }

    .pc-posts-2 .pc-sub-item:nth-child(1) {
        padding-right: 0;
        padding-bottom: var(--pc-gap);
    }

    .pc-posts-2 .pc-sub-item:nth-child(2) {
        padding-right: 0;
        padding-bottom: 0;
    }

    /* --- LAYOUT SPECIALE PER 3 POST SECONDARI (4 TOTALI) --- */
    .pc-posts-3 .pc-sub-item {
        width: 100%;
        height: auto;
    }

    /* Il primo post secondario occupa tutta la larghezza destra e metà altezza */
    .pc-posts-3 .pc-sub-item:nth-child(1) {
        width: 100%;
        height: 50%;
        padding-right: 0;
        padding-bottom: var(--pc-gap);
    }

    /* Gli altri due post occupano metà larghezza in basso */
    .pc-posts-3 .pc-sub-item:nth-child(2) {
        width: 50%;
        height: 50%;
        padding-right: var(--pc-gap);
        padding-bottom: 0;
    }

    .pc-posts-3 .pc-sub-item:nth-child(3) {
        width: 50%;
        height: 50%;
        padding-right: 0;
        padding-bottom: 0;
    }
}

/* Layout Mobile Griglia */
@media (max-width: 767px) {
    .pc-news-grid-wrapper {
        display: block;
        padding: 0;
    }

    .pc-main-post {
        width: 100%;
        height: 300px;
        margin-bottom: 5px;
    }

    .pc-secondary-posts-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        gap: 10px;
    }

    .pc-sub-item {
        flex: 0 0 80%;
        height: 200px;
        scroll-snap-align: start;
    }
}

/*stili comuni personal composer*/
.widget-title {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
}


.bg-blue .lista, .bg-blue-lista .lista,.bg-black .lista, .bg-black-lista .lista, .bg-gray .lista, .bg-gray-lista .lista {
    border: none!important;
}


.bg-blue-lista .lista {
    background: var(--primary-color) !important;
    border: none;
}

.bg-black-lista .lista {
    background: #000 !important;
    border: none;
}

.bg-gray-lista .lista {
    background: #f3f3f5;
    border: none;
}

.bg-blue-lista a,
.bg-blue-lista h2,
.bg-blue-lista p,
.bg-black-lista a,
.bg-black-lista h2,
.bg-black-lista p {
    color: #fff !important;
}


.bg-gray {
    background: #f3f3f5;
    border: none;
}

.bg-black {
    background: #000 !important;
    border: none;
}

.aspect-ratio-4\/3 {
    padding-bottom: 75%;
    background-size: cover !important;
    background-position: center !important;
}

.aspect-ratio-16\/9 {
    padding-bottom: 56.25%;
    background-size: cover !important;
    background-position: center !important;
}

.aspect-ratio-18\/9 {
    padding-bottom: 50%;
    background-size: cover !important;
    background-position: center !important;
}

.aspect-ratio-1\/1 {
    padding-bottom: 100%;
    background-size: cover !important;
    background-position: center !important;
}

.ratio-copertina {
    --bs-aspect-ratio: 120%;
}

/* =========================================
   PERSONAL COMPOSER (Apertura)
   ========================================= */

/* 1. Il contenitore: definisce lo spazio e il colore di fondo (placeholder) */
.apertura .aspect-ratio-evidenza {
    background-color: #f0f0f0;
    /* Grigio chiaro di attesa */
    position: relative;
    /* Necessario per posizionare l'img */
    width: 100%;
    overflow: hidden;
    /* Taglia eventuali sbavature */

    /* Gestione Aspect Ratio responsive (opzionale ma consigliata) */
    aspect-ratio: 16 / 9;
    /* Desktop wide */
}

/* Mobile: magari vuoi un formato più alto */
@media (max-width: 767px) {
    .apertura .aspect-ratio-evidenza {
        aspect-ratio: 4 / 3;
        /* Più quadrato su mobile */
    }
}

/* 2. L'immagine di base */
.apertura .aspect-ratio-evidenza img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Riempie il box senza deformarsi */
    /* Preparazione all'animazione */
    transition: opacity 0.6s ease-in-out, filter 0.6s ease-in-out;
}

/* 3. Stato INIZIALE (Classe .lazy-load presente, .lazy-loaded assente) */
.apertura .aspect-ratio-evidenza img.lazy-load:not(.lazy-loaded) {
    opacity: 0;
    /* Invisibile */
    filter: blur(5px);
    /* Leggermente sfocata (effetto moderno) */
}

/* 4. Stato FINALE (Classe .lazy-loaded aggiunta dal JS) */
.apertura .aspect-ratio-evidenza img.lazy-loaded {
    opacity: 1;
    /* Visibile */
    filter: blur(0);
    /* Nitida */
}


/* =========================================
   PERSONAL COMPOSER (main column hero)
   ========================================= */


/* --- Stile per Opzione A: Main Col Split (7+5) --- */

.layout-main-col-split {
    border: 1px solid #000;
}

.layout-main-col-split.bg-blue {
    background-color: var(--primary-color);

}

.bg-blue .main-hero .titolo, .bg-blue .main-hero .titolo h2, .bg-red .main-hero .titolo, .bg-red .main-hero .titolo h2, .bg-green .main-hero .titolo, .bg-green .main-hero .titolo h2, .bg-purple .main-hero .titolo, .bg-purple .main-hero .titolo h2, .bg-grey .main-hero .titolo, .bg-grey .main-hero .titolo h2, .bg-orange .main-hero .titolo, .bg-orange .main-hero .titolo h2, .bg-blue .main-hero .sommario, .bg-red .main-hero .sommario, .bg-green .main-hero .sommario, .bg-purple .main-hero .sommario, .bg-grey .main-hero .sommario, .bg-orange .main-hero .sommario   {
    color: #fff!important;
}

.bg-blue .main-hero .firma, .bg-blue .main-hero .firma a, .bg-red .main-hero .firma, .bg-red .main-hero .firma a, .bg-green .main-hero .firma, .bg-green .main-hero .firma a, .bg-purple .main-hero .firma, .bg-purple .main-hero .firma a, .bg-grey .main-hero .firma, .bg-grey .main-hero .firma a, .bg-orange .main-hero .firma, .bg-orange .main-hero .firma a {
    color: #fff!important;
}


.bg-blue>div.col-md-7 {
    background-color: var(--primary-color)!important;
}

.bg-blue>div.col-md-7 .categoria a {
    color: var(--primary-color)!important;
    background: #fff!important;
}

.bg-red>div.col-md-7 {
    background-color: #e30613!important;
}

.bg-red>div.col-md-7 .categoria a {
    color: #e30613!important;
    background: #fff!important;
}

.bg-red>div.col-md-5 .categoria a {
    color: #fff!important;
    background: #e30613!important;
}

.bg-green>div.col-md-7 {
    background-color: #016b57!important;
}

.bg-green>div.col-md-7 .categoria a {
    color: #016b57!important;
    background: #fff!important;
}

.bg-green>div.col-md-5 .categoria a {
    color: #fff!important;
    background: #016b57!important;
}

.bg-purple>div.col-md-7 {
    background-color: #6a006b!important;
}

.bg-purple>div.col-md-7 .categoria a {
    color: #6a006b!important;
    background: #fff!important;
}

.bg-purple>div.col-md-5 .categoria a {
    color: #fff!important;
    background: #6a006b!important;
}

.bg-grey>div.col-md-7 {
    background-color: #535353!important;
}

.bg-grey>div.col-md-7 .categoria a {
    color: #535353!important;
    background: #fff!important;
}

.bg-grey>div.col-md-5 .categoria a {
    color: #fff!important;
    background: #535353!important;
}

.bg-orange>div.col-md-7 {
    background-color: #f65700!important;
}

.bg-orange>div.col-md-7 .categoria a {
    color: #f65700!important;
    background: #fff!important;
}

.bg-orange>div.col-md-5 .categoria a {
    color: #fff!important;
    background: #f65700!important;
}

.layout-main-col-split h2 {
    /* Titolo Hero: leggermente più piccolo rispetto al full-width */
    font-family: var(--font-headings);
    font-size: clamp(28px, 2.5vw, 45px) !important;
    line-height: 1.1 !important;
    font-weight: 700;
}

.layout-main-col-split h3 {
    /* Titoli laterali */
    font-family: var(--font-headings);
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 600;
}

.img-full-bleed {
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
}

/* Gestione Mobile per Opzione A */
@media (max-width: 767px) {

    /* Su mobile aggiungiamo una riga divisoria tra gli articoli laterali */
    .layout-main-col-split article {
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    /* Rimuoviamo il bordo dall'ultimo elemento */
    .layout-main-col-split .col-md-5 article:last-child {
        border-bottom: 0;
        margin-bottom: 0;
    }

    .bg-blue .bordo {
        border: 2px solid var(--primary-color)!important;
    }

    .bg-red .bordo {
        border: 2px solid #e30613!important;
    }

    .bg-green .bordo {
        border: 2px solid #016b57!important;
    }

    .bg-purple .bordo {
        border: 2px solid #6a006b!important;
    }

    .bg-grey .bordo {
        border: 2px solid #535353!important;
    }

    .bg-orange .bordo {
        border: 2px solid #f65700!important;
    }
}

/* =========================================
   PERSONAL COMPOSER (copertina.php)
   ========================================= */

/* Hero Copertina */
  .copertina-hero-wrapper {
    overflow: hidden;
    min-height: 400px;
  }

  .copertina-hero-wrapper .featured-image-wrapper {
    border-radius: 4px;
  }

  .copertina-hero-image {
    transition: transform 0.3s ease;
  }

  .copertina-hero-wrapper:hover .copertina-hero-image {
    transform: scale(1.02);
  }

  .copertina-hero-overlay {
    z-index: 10;
  }

  /* Grid Copertine */
  .copertina-grid-item {
    overflow: hidden;
  }

  .copertina-grid-item .featured-image-wrapper {
    border-radius: 4px;
  }

  .copertina-grid-image {
    transition: transform 0.3s ease;
  }

  .copertina-grid-item:hover .copertina-grid-image {
    transform: scale(1.03);
  }

  .copertina-grid-overlay {
    z-index: 10;
  }

  /* Responsive */
  @media (max-width: 767px) {
    .copertina-hero-wrapper {
      min-height: 300px;
    }

    .copertina-hero-overlay {
      padding: 12px !important;
    }

    .copertina-hero-overlay h2 {
      font-size: 18px !important;
    }

    .copertina-grid-overlay {
      padding: 12px !important;
    }

    .copertina-grid-overlay h3 {
      font-size: 14px !important;
    }
  }

/* =========================================
   7. FOOTER
   ========================================= */
footer {
    color: #fff;
    padding: 40px 20px;
    font-size: 13px;
    margin: 40px auto;
    max-width: 1200px;
    border-top: 1px solid #e6e6e6;
}

.footer-logo {
    border-right:var(--primary-color) 2px solid;
}

.footer-menu-list {
    gap: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
}

footer p {
    color: #fff;
    font-size:12px;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.footer-social-icons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Icone tonde footer (SVG wrapper) */
.btn_icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #282828;
    transition: all .2s linear;
}

.btn_icon:hover {
    background: var(--primary-color);
}

.btn_icon svg {
    fill: #fff;
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .footer-logo {
        border-right: none;
        max-width: 130px;
    }

    .footer-social-icons {
        justify-content: center;
        margin-bottom: 20px;
    }

    .wrapper {
        margin-top: 0;
        box-shadow: none;
    }

    #main-nav {
        padding: 10px;
    }
}

/* =========================================
   MOSAICO WIDGET RESPONSIVE TEXT
   ========================================= */

/* Base Styles (Mobile Default) */
.mosaico-title {
    font-size: 24px !important;
    line-height: 1 !important;
    margin-bottom: 0.5rem;
}

.mosaico-excerpt {
    line-height: 1.5;
    display: block;
    /* Ensure visibility */
}

.mosaico-category {
    font-size: 14px;
    font-weight: 700;
}

/*.mosaico-author {
    font-size: 12px;
}*/

/* Tablet / Desktop Overrides based on columns */
@media (min-width: 768px) {

    /* 1 Column: Very large */
    .mosaico-cols-1 .mosaico-title {
        font-size: 32px !important;
    }

    /*.mosaico-cols-1 .mosaico-excerpt {
        font-size: 18px;
    }*/

    .mosaico-cols-1 .mosaico-category,
    .mosaico-cols-1 .mosaico-author {
        font-size: 16px;
    }

    /* 2 Columns: Large */
    .mosaico-cols-2 .mosaico-title {
        font-size: 24px !important;
    }

    .mosaico-cols-2 .mosaico-excerpt {
        font-size: 16px;
    }

    .mosaico-cols-2 .mosaico-category,
    .mosaico-cols-2 .mosaico-author {
        font-size: 14px;
    }

    /* 3 Columns: Medium (Standard) */
    .mosaico-cols-3 .mosaico-title {
        font-size: 22px !important;
    }

    .mosaico-cols-3 .mosaico-excerpt {
        font-size: 14px;
    }

    .mosaico-cols-3 .mosaico-category,
    .mosaico-cols-3 .mosaico-author {
        font-size: 14px;
    }

    /* 4+ Columns: Small */
    .mosaico-cols-4 .mosaico-title,
    .mosaico-cols-5 .mosaico-title,
    .mosaico-cols-6 .mosaico-title {
        font-size: 18px !important;
    }

    .mosaico-cols-4 .mosaico-excerpt,
    .mosaico-cols-5 .mosaico-excerpt,
    .mosaico-cols-6 .mosaico-excerpt {
        font-size: 13px;
    }

    .mosaico-cols-4 .mosaico-category,
    .mosaico-cols-4 .mosaico-author,
    .mosaico-cols-5 .mosaico-category,
    .mosaico-cols-5 .mosaico-author,
    .mosaico-cols-6 .mosaico-category,
    .mosaico-cols-6 .mosaico-author {
        font-size: 11px;
    }
}

/* =========================================
   MOSAICO IN SIDEBAR (Colonne piccole)
   ========================================= */

/* Stili per mosaico quando è dentro una sidebar (col-sm-4, col-md-4, col-lg-4) */
.col-sm-4 .mosaico,
.col-md-4 .mosaico,
.col-lg-4 .mosaico,
.col-sm-3 .mosaico,
.col-md-3 .mosaico,
.col-lg-3 .mosaico {
    /* Mantieni i margini della sidebar */
    padding-left: 0;
    padding-right: 0;
}

/* Nascondi HR separatori in sidebar */
.col-sm-4 .mosaico hr,
.col-md-4 .mosaico hr,
.col-lg-4 .mosaico hr,
.col-sm-3 .mosaico hr,
.col-md-3 .mosaico hr,
.col-lg-3 .mosaico hr {
    display: none !important;
}

/* Riduci padding e margini interni */
.col-sm-4 .mosaico .row.px-2,
.col-md-4 .mosaico .row.px-2,
.col-lg-4 .mosaico .row.px-2,
.col-sm-3 .mosaico .row.px-2,
.col-md-3 .mosaico .row.px-2,
.col-lg-3 .mosaico .row.px-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.col-sm-4 .mosaico .row.g-3,
.col-md-4 .mosaico .row.g-3,
.col-lg-4 .mosaico .row.g-3,
.col-sm-3 .mosaico .row.g-3,
.col-md-3 .mosaico .row.g-3,
.col-lg-3 .mosaico .row.g-3 {
    gap: 0.75rem !important;
}

/* Riduci padding interno delle card */
.col-sm-4 .mosaico .m-3,
.col-md-4 .mosaico .m-3,
.col-lg-4 .mosaico .m-3,
.col-sm-3 .mosaico .m-3,
.col-md-3 .mosaico .m-3,
.col-lg-3 .mosaico .m-3 {
    padding: 0.75rem !important;
}

/* Riduci margine inferiore immagini */
.col-sm-4 .mosaico .mb-3,
.col-md-4 .mosaico .mb-3,
.col-lg-4 .mosaico .mb-3,
.col-sm-3 .mosaico .mb-3,
.col-md-3 .mosaico .mb-3,
.col-lg-3 .mosaico .mb-3 {
    margin-bottom: 0.75rem !important;
}

/* Riduci dimensioni font titoli in sidebar */
.col-sm-4 .mosaico .mosaico-title,
.col-md-4 .mosaico .mosaico-title,
.col-lg-4 .mosaico .mosaico-title,
.col-sm-3 .mosaico .mosaico-title,
.col-md-3 .mosaico .mosaico-title,
.col-lg-3 .mosaico .mosaico-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Riduci dimensioni excerpt */
.col-sm-4 .mosaico .mosaico-excerpt,
.col-md-4 .mosaico .mosaico-excerpt,
.col-lg-4 .mosaico .mosaico-excerpt,
.col-sm-3 .mosaico .mosaico-excerpt,
.col-md-3 .mosaico .mosaico-excerpt,
.col-lg-3 .mosaico .mosaico-excerpt {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
}

/* Riduci dimensioni categoria e autore */
.col-sm-4 .mosaico .mosaico-category,
.col-md-4 .mosaico .mosaico-category,
.col-lg-4 .mosaico .mosaico-category,
.col-sm-3 .mosaico .mosaico-category,
.col-md-3 .mosaico .mosaico-category,
.col-lg-3 .mosaico .mosaico-category {
    font-size: 10px !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.col-sm-4 .mosaico .mosaico-author,
.col-md-4 .mosaico .mosaico-author,
.col-lg-4 .mosaico .mosaico-author,
.col-sm-3 .mosaico .mosaico-author,
.col-md-3 .mosaico .mosaico-author,
.col-lg-3 .mosaico .mosaico-author {
    font-size: 11px !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Riduci altezza immagini (ratio più compatto) 
.col-sm-4 .mosaico .ratio-16x9,
.col-md-4 .mosaico .ratio-16x9,
.col-lg-4 .mosaico .ratio-16x9,
.col-sm-3 .mosaico .ratio-16x9,
.col-md-3 .mosaico .ratio-16x9,
.col-lg-3 .mosaico .ratio-16x9 {
    padding-bottom: 50% !important; 
}
    */

/* Riduci margine superiore del widget title */
.col-sm-4 .mosaico .mb-4,
.col-md-4 .mosaico .mb-4,
.col-lg-4 .mosaico .mb-4,
.col-sm-3 .mosaico .mb-4,
.col-md-3 .mosaico .mb-4,
.col-lg-3 .mosaico .mb-4 {
    margin-bottom: 1rem !important;
}

/* =========================================
   MOSAICO TITOLO DENTRO (Card Overlay)
   ========================================= */

/* Stili per le card overlay nel template mosaico-titolo-dentro */
.mosaico-titolo-dentro .pc-post-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: 0;
}

.mosaico-titolo-dentro .pc-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mosaico-titolo-dentro .pc-card-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 16px;
    background: var(--pc-overlay-grad);
    pointer-events: none;
}

.mosaico-titolo-dentro .pc-card-overlay a {
    pointer-events: auto;
    text-decoration: none;
}

.mosaico-titolo-dentro .pc-title,
.mosaico-titolo-dentro .pc-title-small {
    font-family: var(--font-primary);
    color: #fff;
    margin: 5px 0 10px 0;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.mosaico-titolo-dentro .pc-title a,
.mosaico-titolo-dentro .pc-title-small a {
    color: #fff;
    text-decoration: none;
}

.mosaico-titolo-dentro .pc-title {
    font-size: 24px;
}

.mosaico-titolo-dentro .pc-title-small {
    font-size: 16px;
}

.mosaico-titolo-dentro .pc-meta {
    font-family: var(--font-primary);
    font-size: 11px;
    color: #ddd;
    text-transform: uppercase;
}


.mosaico-titolo-dentro .pc-badge {
    font-family: var(--font-primary);
    background-color: var(--primary-color);
    color: #fff;
    padding: 3px 8px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}

/* Responsive: altezza card su mobile */
@media (max-width: 767px) {
    .mosaico-titolo-dentro .pc-post-card {
        min-height: 250px;
    }

    .mosaico-titolo-dentro .pc-title {
        font-size: 18px;
    }

    .mosaico-titolo-dentro .pc-title-small {
        font-size: 16px;
    }
}

/* Altezza card in base alle colonne su desktop */
@media (min-width: 768px) {
    .mosaico-titolo-dentro.mosaico-cols-1 .pc-post-card {
        min-height: 500px;
    }

    .mosaico-titolo-dentro.mosaico-cols-2 .pc-post-card {
        min-height: 350px;
    }

    .mosaico-titolo-dentro.mosaico-cols-3 .pc-post-card,
    .mosaico-titolo-dentro.mosaico-cols-4 .pc-post-card {
        min-height: 300px;
    }
}

/* MOSAICO TITOLO DENTRO IN SIDEBAR */
.col-sm-4 .mosaico-titolo-dentro .pc-post-card,
.col-md-4 .mosaico-titolo-dentro .pc-post-card,
.col-lg-4 .mosaico-titolo-dentro .pc-post-card,
.col-sm-3 .mosaico-titolo-dentro .pc-post-card,
.col-md-3 .mosaico-titolo-dentro .pc-post-card,
.col-lg-3 .mosaico-titolo-dentro .pc-post-card {
    min-height: 200px !important;
}

.col-sm-4 .mosaico-titolo-dentro .pc-title,
.col-md-4 .mosaico-titolo-dentro .pc-title,
.col-lg-4 .mosaico-titolo-dentro .pc-title,
.col-sm-3 .mosaico-titolo-dentro .pc-title,
.col-md-3 .mosaico-titolo-dentro .pc-title,
.col-lg-3 .mosaico-titolo-dentro .pc-title {
    font-size: 16px !important;
}

.col-sm-4 .mosaico-titolo-dentro .pc-title-small,
.col-md-4 .mosaico-titolo-dentro .pc-title-small,
.col-lg-4 .mosaico-titolo-dentro .pc-title-small,
.col-sm-3 .mosaico-titolo-dentro .pc-title-small,
.col-md-3 .mosaico-titolo-dentro .pc-title-small,
.col-lg-3 .mosaico-titolo-dentro .pc-title-small {
    font-size: 16px !important;
}

.col-sm-4 .mosaico-titolo-dentro .pc-card-overlay,
.col-md-4 .mosaico-titolo-dentro .pc-card-overlay,
.col-lg-4 .mosaico-titolo-dentro .pc-card-overlay,
.col-sm-3 .mosaico-titolo-dentro .pc-card-overlay,
.col-md-3 .mosaico-titolo-dentro .pc-card-overlay,
.col-lg-3 .mosaico-titolo-dentro .pc-card-overlay {
    padding: 15px !important;
}

/* =========================================
   MOSAICO ALTERNATIVO
   ========================================= */

  h2.mosaico-alt-title {
    font-family: var(--font-primary);
    font-size: 18px!important;
    line-height: 1.3;
    font-weight: 700;
  }

  .mosaico-alt-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mosaico-alt-author {
    font-size: 14px;
  }

  .lista-side-author {
    font-size: 14px;
  }

  /* Responsive adjustments */
  @media (min-width: 768px) {
    .mosaico-alt-cols-2 .mosaico-alt-title {
      font-size: 20px;
    }

    .mosaico-alt-cols-3 .mosaico-alt-title {
      font-size: 18px;
    }

    .mosaico-alt-cols-4 .mosaico-alt-title {
      font-size: 16px;
    }
  }

  @media (max-width: 767px) {
    .mosaico-alt-title {
      font-size: 20px;
    }

    .mosaico-alt-excerpt {
      font-size: 14px;
    }
  }

  /* Sidebar adjustments */
  .col-sm-4 .mosaico-alt-title,
  .col-md-4 .mosaico-alt-title,
  .col-lg-4 .mosaico-alt-title,
  .col-sm-3 .mosaico-alt-title,
  .col-md-3 .mosaico-alt-title,
  .col-lg-3 .mosaico-alt-title {
    font-size: 16px;
  }

  .col-sm-4 .mosaico-alt-excerpt,
  .col-md-4 .mosaico-alt-excerpt,
  .col-lg-4 .mosaico-alt-excerpt,
  .col-sm-3 .mosaico-alt-excerpt,
  .col-md-3 .mosaico-alt-excerpt,
  .col-lg-3 .mosaico-alt-excerpt {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

/* =========================================
   STEP 1: HEADER FIXED - Stili Base
   ========================================= */
#fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9998;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 15px;
    display: none; /* Nascosto di default su desktop, mostrato via JS quando si scrolla */
}

/* Posizionamento sotto la admin bar di WordPress - Desktop */
@media (min-width: 768px) {
    body.admin-bar #fixed-header {
        top: 32px; /* Altezza standard della admin bar su desktop */
    }
}

/* Posizionamento sotto la admin bar di WordPress - Mobile */
@media (max-width: 767px) {
    body.admin-bar #fixed-header {
        top: 46px; /* Altezza della admin bar su mobile */
    }
}

#fixed-header.show {
    display: block;
}

/* Su mobile sempre visibile */
@media (max-width: 767px) {
    html {
        margin-top: 0 !important;
    }

    #fixed-header {
        display: block !important; /* Forza la visualizzazione su mobile */
    }
    
    body {
        margin-top: 0;
    }

    /* Rimuovi margini dal wrapper su mobile */
    .wrapper {
        margin-top: 0 !important;
        margin-bottom: 0;
        box-shadow: none;
        padding: var(--mobile-header-offset, 0) 15px 0 15px!important;
    }

    #top-bar,
    #main-nav {
        display: none !important;
    }
}

/* Desktop: mostra quando si scrolla */
@media (min-width: 768px) {
    #fixed-header.show {
        display: block;
    }
}

.btn-hamburger-menu-fixed {
    background: transparent;
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    color: #000;
    transition: color 0.2s;
}

.btn-hamburger-menu-fixed:hover {
    border-radius: 3px;
    color: var(--primary-color);
}

.btn-hamburger-menu-fixed i {
    margin-right: 8px;
    font-size: 16px;
}

/* Su mobile solo icona, senza testo */
@media (max-width: 767px) {
    .btn-hamburger-menu-fixed {
        font-size: 0; /* Nasconde il testo */
        padding: 0px;
    }
    
    .btn-hamburger-menu-fixed i {
        margin-right: 0;
        font-size: 20px;
    }
}

.fixed-logo {
    display: block;
}

.fixed-logo img {
    max-height: 40px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Desktop: Abbonati e Pubblicità */
.btn-pubblicita-fixed {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-abbonati-fixed {
    border: 1px solid #000;
    border-radius: 50px;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 600;
}

.btn-abbonati-fixed:hover {
    background-color: #000;
    color: #fff;
}


/* Mobile: Placeholder per icona meteo */
.meteo-placeholder {
    width: 40px;
    height: 40px;
    /* Spazio riservato per icona meteo - sarà implementato successivamente */
}

/* =========================================
   DRAWER MENU (SIDEBAR)
   ========================================= */

/* Il contenitore principale del menu */
#drawer-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #fff;
    z-index: 10000; /* Superiore a tutto tranne modali bootstrap */
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    transform: translateX(-100%); /* Nascosto a sinistra di default */
    transition: transform 0.3s ease-in-out;
    overflow-y: auto; /* Permette lo scroll verticale interno */
    
    /* WIDTH LOGIC */
    width: 100%; /* Default Mobile/Tablet */
}

/* Regola Desktop: 25% width */
@media (min-width: 992px) {
    #drawer-menu {
        width: 25%;
        min-width: 350px; /* Evita che diventi troppo stretto */
        max-width: 450px; /* Evita che diventi enorme su schermi giganti */
    }
}

/* Classe attiva per mostrare il menu */
#drawer-menu.is-open {
    transform: translateX(0);
}

/* Contenuto interno con padding */
.drawer-content {
    padding: 20px;
}

/* Sposta il menu drawer sotto la admin bar se presente */
body.admin-bar .drawer-content {
    margin-top: 46px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    overflow-y: auto;
}

/* Pulsante chiusura X */
.btn-close-drawer {
    background: none;
    border: none;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.btn-close-drawer:hover {
    transform: rotate(90deg);
    color: var(--primary-color);
}

/* Search Bar */
.search-form-drawer {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: 4px;
}
.search-form-drawer input {
    border: none;
    box-shadow: none;
    padding-right: 40px;
}
.search-form-drawer .search-submit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
}

/* Icone Social Piccole */
.btn_icon_small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background 0.2s;
    font-size: 14px;
}
.btn_icon_small:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Divider Sottili */
.drawer-divider {
    border-top: 1px solid #eee;
    opacity: 1;
    margin: 1.5rem 0;
}

/* STILI MENU */

/* Temi Caldi (Uppercase e grassetto leggero) */
.drawer-nav-simple li a {
    color: #333;
    font-size: 14px;
    display: block;
    text-decoration: none;
    transition: color 0.2s;
    width: fit-content;
}

.drawer-section-title {
    font-family: sans-serif;
}

.drawer-nav-simple li a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Primary Second (Menu Principale) - Font più grande */
.drawer-nav-main .main-nav-list > li {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 7px;
}

.drawer-nav-main .main-nav-list > li > a {
    font-family: var(--font-primary); /* O 'Inter' */
    font-size: 18px;
    font-weight: 400;
    color: #000;
    display: block;
    border-bottom: 1px solid #f2f2f2;
    width: fit-content;
}

.drawer-nav-main .main-nav-list > li > a:hover {
    color: var(--primary-color);
    padding-left: 5px; /* Effetto spostamento */
}

/* --- IL TUO CODICE ORIGINALE (Intatto) --- */
.drawer-nav-main li.menu-item-has-children {
    position: relative;
}

.drawer-toggle-icon {
    position: absolute;
    right: 0;
    top: 0px; 
    cursor: pointer;
    font-size: 18px;
    width: 30px;
    text-align: center;
}

.drawer-toggle-icon:hover {
    color: var(--primary-color);
}

.drawer-nav-main .sub-menu {
    background: #f2f2f2;
    margin: -1px -20px 0 -20px;
    padding: 0 20px; 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out, padding 0.2s ease-in-out;
}

.drawer-nav-main .sub-menu.is-open {
    max-height: 1000px; /* L'ho solo aumentato un po' per non far tagliare le voci extra */
    padding: 10px 20px; 
}

.drawer-nav-main .sub-menu li {
    list-style-type: none;
    position: relative; /* Necessario per far posizionare bene il + del terzo livello */
}

.drawer-nav-main .sub-menu li a {
    font-size: 15px;
    font-weight: 400;
    padding: 6px 0;
    border-bottom: none;
}

/* --- L'UNICA AGGIUNTA PER IL 3° LIVELLO --- */
.drawer-nav-main .sub-menu .sub-menu {
    margin: 0; /* Toglie il margine negativo del livello precedente */
    padding: 0 0 0 10px; /* Aggiunge i 10px a sinistra da chiuso */
}

.drawer-nav-main .sub-menu .sub-menu.is-open {
    padding: 0 0 15px 10px; /* Mantiene i 10px a sinistra da aperto */
}

#menu-secondario-sinistra-1 li, #menu-rubriche li {
    padding-left: 0;
}

#menu-province-1 li {
    padding-left: 0;
}

/* Backdrop Oscuro */
#drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999; /* Subito sotto il menu */
    display: none; /* Nascosto default */
    backdrop-filter: blur(2px);
}

/* =========================================
   ARCHIVE LIST LAYOUT
   ========================================= */

/* Titolo archivio */
.archive-list-title {
    font-family: "Inter";
    font-size: 1.9rem;
    font-weight: 700;
    color: #000;
    /*margin-top: 1.5rem;*/
}

/* Linea divisore sotto il titolo */
.archive-list-divider {
    width: 100%;
    height: 1px;
    background: #ebe7ea;
    margin-top: 0.5rem;
}

/* Wrapper articoli */
.archive-list-wrapper {
    margin-top: 2rem;
}


/* Contenitore del testo allineato verticalmente */
.archive-list-item .col-md-6:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Categoria */
.archive-list-category {
    display: inline-block;
    background: var(--primary-color);
    color: white !important;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.archive-list-category:hover {
    opacity: 0.9;
}

/* Titolo articolo (h2) */
.archive-list-post-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 0.5rem;
}


/* Estratto con limite a 3 righe */
.archive-list-excerpt {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.5rem;
}


.archive-list-meta a {
    color: var(--primary-color);
}

.archive-list-meta a:hover {
    color: var(--primary-color);
}

/* Responsive: Mobile */
@media (max-width: 767px) {

    .archive-list-post-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .archive-list-excerpt {
        font-size: 0.9rem;
        -webkit-line-clamp: 3;
        margin-bottom: 0.75rem;
    }
    
    /*.archive-list-item {
        padding-bottom: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }*/
    
    .archive-list-category {
        font-size: 0.7rem;
        padding: 3px 10px;
    }
    
    .archive-list-meta {
        font-size: 0.8rem;
    }

    .archive-list-title {
        font-size: 2rem;
    }
}
#drawer-backdrop.is-visible {
    display: block;
}

/* =========================================
   DROPDOWN "ALTRO" MENU
   ========================================= */
.altro-dropdown-wrapper {
    position: relative;
}

.altro-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #595b5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-width: 200px;
    padding: 10px 0;
    margin-top: 8px;
    display: none;
    z-index: 1000;
    text-align: right;
}

.altro-dropdown.show {
    display: block;
}

.altro-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.altro-dropdown-list li {
    margin: 0;
}

.altro-dropdown-list li a {
    display: block;
    padding: 5px 20px;
    color: #000;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: background 0.2s;
}

.altro-dropdown-list li a:hover {
    /*background: #f5f5f5;*/
    color: var(--primary-color);
}

.btn-altro-trigger .fa-chevron-down {
    transition: transform 0.3s;
}

.btn-altro-trigger.active .fa-chevron-down {
    transform: rotate(180deg);
}

/* =========================================
   SIDEBAR LISTA RESPONSIVE FIX
   Range: 576px - 991px (Tablet / Narrow Desktop)
   ========================================= */

   @media (min-width: 576px) and (max-width: 991px) {
    
    /* Ruota il flex container in colonna (verticale) */
    .lista-sidebar .sidebar-card-body {
        flex-direction: column !important;
        align-items: flex-start !important; /* Allinea a sinistra */
        gap: 10px !important; /* Un po' di spazio tra immagine e titolo */
    }

    /* Forza l'immagine a prendere tutta la larghezza disponibile */
    .lista-sidebar .sidebar-img-wrap {
        width: 100% !important;
        height: auto;
    }

    /* Cambia l'aspect ratio dell'immagine in questo range 
       per renderla rettangolare (16/9) invece che quadrata, 
       che sta meglio quando impilata */
    .lista-sidebar .sidebar-img-wrap .aspect-ratio-1\/1 {
        padding-bottom: 56.25%; /* Diventa 16:9 */
    }
}

/* =========================================
   ARTICLE SINGLE PAGE - INDICE E SOCIAL SHARE
   ========================================= */

/* Stili per il tooltip di condivisione social */
.share-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
}

.share-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s ease;
}

.share-btn:hover {
    opacity: 0.7;
}

/* Tooltip di condivisione social - posizionamento */
.share-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-top: 8px;
    background: #ffffffc2;
    border: 1px solid #ebe7ea;
    border-radius: 8px;
    padding: 12px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(5px);
}
 
.share-tooltip.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Social icons nel tooltip */
.share-tooltip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 4px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #000;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 18px;
}

.share-tooltip a:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Stili per il widget titolo indice */
.sh-widget-title-styling {
    /* margin-bottom: 16px; */
}

.widget-title {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.5px;
    /* padding: 2px 6px; */
    display: inline-block;
    line-height: 100%;
    text-transform: uppercase;
}

.widget-title a {
    position: relative; 
    text-decoration: none!important; 
    padding-bottom: 8px;
    transition: color 0.3s ease;
}

.widget-title a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 0; 
    height: 4px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.widget-title a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.widget-title a:hover::after {
    width: 100%;
}

.widget-title-single {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.5px;
    /* padding: 2px 6px; */
    display: inline-block;
    line-height: 100%;
    text-transform: uppercase;
}

.widget-title-single a {
    position: relative; 
    text-decoration: none!important; 
    padding-bottom: 8px;
}

.widget-title-single a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* Contenitore indice articolo */
.mx-neg {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Link indice - stile hover */
.indice {
    transition: color 0.2s ease, padding-left 0.2s ease;
    position: relative;
}

.indice:hover {
    color: var(--primary-color);
    padding-left: 8px;
}

/* Stile per gli elementi dell'indice con pallino rosso */
.indice-item {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease;
    font-size: 16px;
}

.indice-item::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    flex-shrink: 0;
}

.indice-item:hover {
    color: var(--primary-color);
}

/* =========================================
   STILI CORPO ARTICOLO
   ========================================= */
/* Corpo del testo articolo */
#post-content {
    font-size: 18px;
    line-height: 1.7;
}

/* Titoli dentro l'articolo usano font-primary invece di font-heading */
#post-content h1,
#post-content h2,
#post-content h3,
#post-content h4,
#post-content h5,
#post-content h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    color: #000;
}

#post-content h2 {
    font-size: 1.45em;
}

#post-content h3 {
    font-size: 1.35em;
}

#post-content h4 {
    font-size: 1.25em;
}

#post-content p {
    margin-bottom: 1.2em;
    text-align: justify;
}

@media(max-width: 767px) {
    #post-content p {
        text-align: start;
    }
}

/* Separatori indice */
.indice-divider {
    border-bottom: 1px solid rgb(235 231 234);
}

.post-tags {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.post-tags a {
    background: var(--primary-color);
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.post-tags a:hover {
    opacity: 0.8;
}

/* Responsive per indice su mobile */
@media (max-width: 767px) {
    .widget-title {
        font-size: 14px;
        /* padding: 2px 4px; */
    }

    .mx-neg {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .share-btn {
        padding: 6px 8px;
        font-size: 12px;
    }

    .share-tooltip {
        right: -50%;
        min-width: 180px;
        padding: 10px 8px;
    }

    .share-tooltip a {
        width: 36px;
        height: 36px;
        margin: 3px;
    }
}
/* =========================================
   SEARCH MODAL DESKTOP
   ========================================= */

.btn-search-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    padding: 0;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.btn-search-trigger:hover {
    color: var(--primary-color);
}

#search-modal-overlay {
    position: absolute;
    top: 50px; /* Distanza base per schermi piccoli (mobile) */
    right: 0;
    bottom: auto;
    background-color: transparent; /* Sfondo trasparente come richiesto */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding-right: 24px; /* Allinea il box al margine destro del tuo wrapper */
}

/* Posizionamento sotto l'header su desktop */
@media (min-width: 768px) {
    #search-modal-overlay {
        /* È qui la magia! Riduciamo drasticamente i 250px. 
           50px corrisponde circa all'altezza della tua top-bar. 
           Se vedi che la finestra copre l'icona, aumenta questo numero (es. 60px). 
           Se c'è troppo spazio, diminuiscilo (es. 40px). */
        top: 50px; 
    }
}

#search-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.search-modal-container {
    background: var(--primary-color);
    border-radius: 4px;
    /* Ho reso l'ombra leggermente più marcata per far risaltare il box senza lo sfondo scuro dietro */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 
    padding: 20px;
    position: relative;
    max-width: 320px; /* L'ho stretta un pochino per renderla più proporzionata sotto l'icona */
    width: 100%;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-close-search {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    padding: 3px;
    transition: color 0.2s;
}


.search-modal-content {
    text-align: left;
}

.search-modal-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-modal-form {
    margin-top: 10px;
}

.search-modal-group {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.search-modal-input {
    flex: 1;
    border: none;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    background: white;
    color: #000;
}

.search-modal-input::placeholder {
    color: #ccc;
}

.search-modal-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   FEATURED IMAGE LIGHTBOX
   ========================================= */

.featured-image-container {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.featured-image-container:hover {
    opacity: 0.9;
}

.featured-image-wrapper {
    position: relative;
}

.featured-image-preview {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.featured-image-container:hover .featured-image-preview {
    transform: scale(1.02);
}

/* Image Modal (Lightbox) */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}

.image-modal.active {
    display: flex;
}

.image-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(3px);
    z-index: 1;
}

.image-modal-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
    max-width: 1200px;
    max-height: 800px;
    animation: modalZoomIn 0.3s ease;
}

@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.image-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.image-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 3;
}

.image-modal-close:hover {
    transform: scale(1.2);
}

.image-modal-close svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .image-modal-content {
        width: 95%;
        height: 95%;
        max-width: 100%;
        max-height: 100%;
    }
    
    .image-modal-close {
        top: 10px;
        right: 10px;
    }
    
    .image-modal-close svg {
        width: 24px;
        height: 24px;
    }
}

@-webkit-keyframes pulse{ 0%, to{ opacity:.1 } 50%{ opacity:1 } }
@keyframes pulse{ 0%, to{ opacity:.1 } 50%{ opacity:1 } }

.is--pulsing {
    position: relative;
    padding: 6px 13px 6px 24px!important;
    background: #cb3231 !important; 
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50px;
} 

.is--pulsing .overtitle-art::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    animation: 2s ease 0s infinite normal none running pulse;
    transform: translate(0px, -50%);
    margin: 0 10px;
}

.live-label .overtitle-art {
    padding-left: 5px;
    font-size: 16px;
}

.box-author a span:hover {
    opacity: 75%;
}


.sommario {
    overflow-wrap: break-word;
    hyphens: none;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.no-titolo .titolo {
    display: none!important;
}

.no-categoria .categoria {
    display: none!important;
}

.no-sommario .sommario {
    display: none!important;
}

.no-firma .firma {
    display: none!important;
}

.no-img .img {
    display: none!important;
}   


.menu-principale .nav-inline-list {
    list-style: none; 
    margin: 0;
    padding: 0;
    display: flex; 
    gap: 5px;
}

.menu-principale .nav-inline-list li {
    border-left: 4px solid #fff; 
}

.menu-principale li {
    min-height: 45px;
    align-items: center;
    display: flex;
    padding: 0 10px;
}

.menu-principale .nav-inline-list .menu-item-has-children:hover {
    border-left: 4px solid var(--primary-color);
}

.menu-principale .sub-menu li {
    min-height: 35px!important;
    border: 0;
}

.menu-principale .nav-inline-list .menu-item-has-children {
    position: relative; 
}

.menu-principale .nav-inline-list .sub-menu {
    /* Rimuoviamo display: none; e usiamo opacity e visibility */
    visibility: hidden; 
    opacity: 0; 
    
    /* Le proprietà per l'animazione di entrata dal basso */
    transform: translateY(-10px); /* Sposta il menu 10px più in basso di base */
    transition: all 0.3s ease-in-out; /* Regola la velocità e la fluidità dell'animazione */
    
    /* Il resto del tuo codice rimane uguale */
    position: absolute; 
    top: 45px; 
    left: -4px;
    background-color: var(--primary-color); 
    min-width: 200px; 
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1); 
    padding-left: 5px;
    z-index: 1000; 
    list-style: none; 
}

.menu-principale .nav-inline-list .menu-item-has-children:hover > .sub-menu {
    /* Rendiamo il menu visibile e solido */
    visibility: visible;
    opacity: 1;
    
    /* Riportiamo il menu nella sua posizione originale (scivola verso l'alto) */
    transform: translateY(0); 
}

.menu-principale .nav-inline-list .sub-menu a {
    color: #fff; 
    display: block;
    text-decoration: none; 
}


.menu-principale  .nav-inline-list .menu-item-has-children > a::after {
    content: "▾"; 
    margin-left: 8px; 
    display: inline-block; 
    font-size: 14px;
    vertical-align: middle;
}

.menu-principale .nav-inline-list .sub-menu .sub-menu {
    top: 0;
    left: 100%; 
}

.menu-principale .nav-inline-list .sub-menu .menu-item-has-children > a::after {
    content: "▸"; 
}

.pagination {
    gap: 25px;
}

.pagination .page-pagination .current a{
    color: var(--primary-color)!important;
}