/**
 * RESTYLING UX - CalcioWeb
 * Migliorie leggere per user experience desktop e mobile
 * Priorita 1-10: skeleton loaders, touch targets, focus, aspect-ratio,
 * font-weight, spacing, hover, colori, paginazione, footer
 */

/* ==========================================================================
   PRIORITA 1: SKELETON LOADERS PER CONTENUTI AJAX
   ========================================================================== */

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Sidebar AJAX blocks */
#sidebarNews .contRow:empty,
#sidebarNewsMondo .contRow:empty,
#correlatiCategory .contRow:empty,
.articoliCorrelatiTag .contRow:empty {
    min-height: 180px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    margin: 0.8rem 0;
}

/* Contenuto caricato: rimuovi skeleton */
#sidebarNews .contRow:not(:empty),
#sidebarNewsMondo .contRow:not(:empty),
#correlatiCategory .contRow:not(:empty),
.articoliCorrelatiTag .contRow:not(:empty) {
    min-height: 0;
    background: none;
    animation: none;
}

/* Placeholder bg per immagini lazy-loaded */
.entry__media figure,
.entry.loop figure,
.primopianobox figure,
#articoliHome figure,
#homeCouple figure,
#newsCX figure {
    background-color: #f0f0f0;
}


/* ==========================================================================
   PRIORITA 2: TOUCH TARGETS MINIMI 44px SU MOBILE
   ========================================================================== */

@media only screen and (max-width: 767px) {
    /* Toggles navigazione */
    .nav-toggle,
    .search-toggle,
    .header-inner .toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Paginazione */
    .navigation li a,
    .navigation li.active a,
    .navigation li.disabled {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .pagination .nav-links > a,
    .pagination .nav-links > span {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Footer menu links */
    .footer-menu li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Tags menu */
    .tags-menu-wrapper ul li {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Scudetti tags */
    .boxScudetti .tags a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Social icons */
    ul.footer-socials li a {
        height: 40px;
        width: 40px;
        line-height: 40px;
        border-radius: 20px;
    }
}


/* ==========================================================================
   PRIORITA 3: FOCUS VISIBLE PER ACCESSIBILITA
   ========================================================================== */

*:focus-visible {
    outline: 2px solid #2a7e4e;
    outline-offset: 2px;
}

/* Reset outline generico per non conflittare */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Focus su elementi scuri */
#homeTop *:focus-visible,
#homeVideo *:focus-visible,
#homeGallery *:focus-visible,
#boxTop *:focus-visible,
.playerSidebar *:focus-visible {
    outline-color: #ffffff;
}


/* ==========================================================================
   PRIORITA 4: SISTEMA ASPECT-RATIO IMMAGINI (anti-CLS)
   ========================================================================== */

/* Hero images (primo piano, featured) - 16/9 */
@media only screen and (min-width: 768px) {
    .primopianobox .n0 figure,
    .primopianobox .n0 figure img,
    #articoliHome .n0 figure,
    #articoliHome .n0 figure img,
    #articoliHomeBG .n0 figure,
    #articoliHomeBG .n0 figure img,
    article.entry.loop.n0 figure,
    article.entry.loop.n0 figure img,
    #fotogallery .evidenza figure,
    #fotogallery .evidenza figure img,
    #videogallery .evidenza figure,
    #videogallery .evidenza figure img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Medium images (secondo piano, sezioni) - 16/10 */
    #newsCX figure,
    #newsCX figure img,
    #articoliHome figure,
    #articoliHome figure img,
    article.entry.loop figure,
    article.entry.loop figure img,
    #fotogallery .elenco figure,
    #fotogallery .elenco figure img {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    /* Override: n0 rimane 16/9 */
    #articoliHome .n0 figure,
    #articoliHome .n0 figure img,
    article.entry.loop.n0 figure,
    article.entry.loop.n0 figure img {
        aspect-ratio: 16 / 9;
    }

    /* Thumb images (sidebar, correlati, video list) - 3/2 */
    .primopianobox .n1 figure,
    .primopianobox .n1 figure img,
    .primopianobox .n2 figure,
    .primopianobox .n2 figure img,
    .primopianobox .n3 figure,
    .primopianobox .n3 figure img,
    #homeCouple figure,
    #homeCouple figure img,
    #homeVideo figure,
    #homeVideo figure img,
    #homeGallery figure,
    #homeGallery figure img,
    #newsLive figure,
    #newsLive figure img,
    #videogallery .elenco figure,
    #videogallery .elenco figure img,
    .boxCorrelato figure,
    .boxCorrelato figure img {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    /* Gallery hero override */
    #homeGallery .n0 figure,
    #homeGallery .n0 figure img {
        aspect-ratio: 16 / 9;
    }
}


/* ==========================================================================
   PRIORITA 5: NORMALIZZAZIONE FONT-WEIGHT
   ========================================================================== */

/* Titoli principali: 800 -> 700 */
.hentry .entry-title {
    font-weight: 700;
}

.n0 .entry__title {
    font-weight: 700;
}

.archive-title,
.archive-title h1 {
    font-weight: 700;
}

/* Titoli sezione (titBox): 800 -> 700 */
.titBox,
.titBox h2,
.titBox h3 {
    font-weight: 700;
}

/* Sezioni video/gallery header */
#homeVideo .head .title,
#homeGallery .head .title {
    font-weight: 700;
}

/* News live tit */
#newsLive .live-tit span,
#newsLive .live-tit h2,
#newsLive .live-tit h3 {
    font-weight: 700;
}

/* Videogallery old */
#videogalleryOld .entry__title {
    font-weight: 700;
}

/* altriVideo vediAnche */
.altriVideo .vediAnche span {
    font-weight: 700;
}

/* Sottotitoli sezione: 500 -> 400 per gerarchia netta */
.entry__subtitle {
    font-weight: 400;
}

/* Sottotitolo articolo single */
.hentry .entry__subtitle {
    font-weight: 400;
}

/* Body articolo: line-height da 1.5 a 1.6 per lettura */
.hentry,
.hentry p,
#contCW li {
    line-height: 1.6;
}


/* ==========================================================================
   PRIORITA 6: SPAZIATURA COERENTE (griglia 8px)
   ========================================================================== */

/* Gap sezioni homepage: ridurre da valori variabili a 3.2rem */
#homeMid {
    margin-top: 2.4rem;
}

#homeVideo {
    margin-bottom: 2.4rem;
    padding: 2.4rem 1.5rem;
}

#homeGallery {
    margin-bottom: 2.4rem;
    padding: 2.4rem 1.5rem;
}

#homeCouple {
    margin-bottom: 2.4rem;
}

/* Card spacing uniforme: 1.6rem tra le card */
#articoliHome .entry__title,
#homeCouple .entry__content {
    margin-bottom: 1.6rem;
}

#homeVideo article {
    margin-bottom: 1.6rem;
}

/* Entry loop divider coerente */
article.entry:not(:last-child) .entry__content::after {
    height: 1.6rem;
}

article.entry.n0 .entry__content::after,
article.entry.n6 .entry__content::after {
    height: 1.6rem;
}

/* Mobile padding migliorato */
@media only screen and (max-width: 767px) {
    #homeMid {
        padding: 0 1.2rem;
    }

    #articoliHome {
        padding: 0 1.2rem;
    }

    #homeCouple {
        padding: 0 1.2rem;
    }

    /* Sidebar interno */
    .newsSide .live-wrapper,
    .boxGallery {
        padding: 0.8rem;
    }
}

/* Sidebar spacing coerente */
.newsSide .live-head,
.boxGallery .head {
    margin-bottom: 1.2rem;
}


/* ==========================================================================
   PRIORITA 7: HOVER TRANSITIONS SU CARD ARTICOLI
   ========================================================================== */

/* Image hover zoom */
.entry__media figure,
.entry.loop figure,
.primopianobox figure,
.itemthumb,
.itemplay,
#articoliHome figure,
#homeCouple figure,
#newsCX figure,
#newsLive figure,
.boxCorrelato figure {
    overflow: hidden;
}

.entry__media figure img,
.entry.loop figure img,
.primopianobox figure img,
.itemthumb img,
#articoliHome figure img,
#homeCouple figure img,
#newsCX figure img,
#newsLive figure img,
#homeVideo figure img,
#homeGallery figure img,
.boxCorrelato figure img {
    transition: transform 0.3s ease;
}

.entry__media:hover figure img,
.entry.loop:hover figure img,
.primopianobox article:hover figure img,
.itemthumb:hover img,
#articoliHome article:hover figure img,
#homeCouple article:hover figure img,
#newsCX article:hover figure img,
#newsLive .entry:hover figure img,
#homeVideo article:hover figure img,
#homeGallery article:hover figure img,
.boxCorrelato:hover figure img {
    transform: scale(1.04);
}

/* Title hover color transition */
.entry__title a {
    transition: color 0.2s ease;
}

.entry__title a:hover {
    color: #2a7e4e;
}

/* Override per titoli su sfondo scuro */
.primopianobox .entry__title a:hover,
#homeVideo .entry__title a:hover,
#homeGallery .entry__title a:hover,
#articoliHomeBG .entry__title a:hover,
.boxCorrelato .contCorrelato.bgFoto .entry__title a:hover,
.boxCorrelato .contCorrelato.bgVideo .entry__title a:hover {
    color: #e0e0e0;
}

/* Card correlati hover */
.boxCorrelato .contCorrelato {
    transition: box-shadow 0.2s ease;
}

.boxCorrelato .contCorrelato:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .entry__media figure img,
    .entry.loop figure img,
    .primopianobox figure img,
    .itemthumb img,
    #articoliHome figure img,
    #homeCouple figure img,
    #newsCX figure img,
    #newsLive figure img,
    #homeVideo figure img,
    #homeGallery figure img,
    .boxCorrelato figure img,
    .entry__title a,
    .boxCorrelato .contCorrelato {
        transition: none;
    }

    .entry__media:hover figure img,
    .entry.loop:hover figure img,
    .primopianobox article:hover figure img,
    .itemthumb:hover img,
    #articoliHome article:hover figure img,
    #homeCouple article:hover figure img,
    #newsCX article:hover figure img,
    #newsLive .entry:hover figure img,
    #homeVideo article:hover figure img,
    #homeGallery article:hover figure img,
    .boxCorrelato:hover figure img {
        transform: none;
    }
}


/* ==========================================================================
   PRIORITA 8: COLORI E CONTRASTO
   ========================================================================== */

/* Meta text: #666666 -> #555555 per contrasto migliore */
.post-meta {
    color: #555555;
}

.entry__subtitle {
    color: #555555;
}

#newsCX .entry__subtitle {
    color: #555555;
}

#articoliHome .entry__subtitle {
    color: #555555;
}

/* Subtitle su sfondo scuro: #f5f5f5 -> #e8e8e8 */
.primopianobox .entry__subtitle {
    color: #e8e8e8;
}

#homeVideo .entry__subtitle {
    color: #e8e8e8;
}

#homeGallery .entry__subtitle {
    color: #e8e8e8;
}

#articoliHomeBG .entry__subtitle {
    color: #e8e8e8;
}

/* Divider lines: piu neutro */
input {
    border-color: #e5e5e5;
}

.topBar {
    border-bottom-color: #e5e5e5;
}

/* Correlati bg: leggermente piu chiaro */
.boxCorrelato .contCorrelato.bgArticolo {
    background: #f0f7f3;
}

/* News live bg piu leggero */
#newsLive .live-wrapper {
    background: #f0f7f3;
}

/* Card hover bg sottile */
@media only screen and (min-width: 768px) {
    #articoliHome article:hover .entry__content,
    #homeCouple article:hover .entry__content,
    #newsCX article:hover .entry__content {
        background-color: #fafafa;
        border-radius: 0 0 4px 4px;
    }
}


/* ==========================================================================
   PRIORITA 9: PAGINAZIONE RESTYLE
   ========================================================================== */

/* Paginazione numerica moderna */
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    border-radius: 6px;
    padding: 0.8rem 1.2rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navigation li {
    margin: 0.3rem 0.2rem !important;
}

.navigation li a {
    background-color: #1a5c38;
}

.navigation li a:hover {
    background-color: #2a7e4e;
}

.navigation li.active a {
    background-color: #2a7e4e;
    box-shadow: 0 2px 8px rgba(42, 126, 78, 0.3);
}

/* Prev/Next paginazione classica */
.pagination .nav-links {
    gap: 0.4rem;
    margin: 0;
    width: 100%;
}

.pagination .nav-links > * {
    margin: 0;
}

.pagination a {
    color: #555555;
    padding: 0.6rem 0.4rem;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.pagination a:hover {
    color: #2a7e4e;
    text-decoration: none;
}

.pagination .current {
    color: #2a7e4e;
    font-weight: 700;
}


/* ==========================================================================
   PRIORITA 10: FOOTER MIGLIORAMENTI
   ========================================================================== */

/* Footer credits: min font size piu leggibile */
@media only screen and (max-width: 767px) {
    .footer-credits {
        font-size: 1.3rem;
    }

    .footer-menu li {
        font-size: 1.4rem;
        margin: 0.6rem 0.8rem;
    }

    /* titMenu piu leggibile */
    .titMenu {
        font-size: 1.5rem;
    }
}

/* Footer link spacing su desktop */
@media only screen and (min-width: 768px) {
    .footer-menu li {
        margin-bottom: 0.4rem;
    }

    .footer-menu li a {
        padding: 0.3rem 0;
        display: inline-block;
    }
}

/* Footer HR piu leggeri */
#site-footer hr {
    border-color: #e5e5e5;
    opacity: 0.5;
    margin: 0.8rem 0;
}

/* Footer social icons piu grandi su mobile */
@media only screen and (max-width: 767px) {
    #site-footer ul.footer-socials li a {
        height: 38px;
        width: 38px;
        line-height: 38px;
        border-radius: 19px;
        font-size: 1.5rem;
    }

    #site-footer ul.footer-socials li {
        margin-left: 0.4rem;
    }
}

/* Footer titMenu come elemento visivo piu forte */
.titMenu {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: #222222;
}


/* ==========================================================================
   EXTRA: PERFORMANCE UX
   ========================================================================== */

/* Content-visibility per sezioni below-the-fold */
#homeCouple,
#articoliHome,
#articoliHomeBG {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Smooth scrolling gia presente in style.css, rinforziamo su html */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione 0: DESIGN TOKENS
   ========================================================================== */

:root {
    --cw-radius-sm: 4px;
    --cw-radius-md: 8px;
    --cw-radius-lg: 16px;
    --cw-radius-pill: 9999px;

    --cw-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --cw-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --cw-shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

    --cw-bg-white: #ffffff;
    --cw-bg-light: #f8f9fa;
    --cw-bg-subtle: #f0f2f5;

    --cw-green: #2a7e4e;
    --cw-green-light: #f0f7f3;
    --cw-green-hover: #236b42;
    --cw-navy: #141a31;
    --cw-text: #222222;
    --cw-meta: #555555;

    --cw-transition-fast: 0.2s ease;
    --cw-transition-normal: 0.3s ease;
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione A: BORDER RADIUS SYSTEM
   ========================================================================== */

/* --- Immagini articoli (homepage, archivi, correlati) --- */
.entry__media figure,
.entry.loop figure,
.primopianobox figure,
#articoliHome figure,
#homeCouple figure,
#newsCX figure,
#newsLive figure,
#homeVideo figure,
#homeGallery figure,
.boxCorrelato figure {
    border-radius: var(--cw-radius-md);
}

.entry__media figure img,
.entry.loop figure img,
.primopianobox figure img,
#articoliHome figure img,
#homeCouple figure img,
#newsCX figure img,
#newsLive figure img,
#homeVideo figure img,
#homeGallery figure img,
.boxCorrelato figure img {
    border-radius: var(--cw-radius-md);
}

/* --- Sidebar blocks --- */
.newsSide .live-wrapper,
.boxGallery {
    border-radius: var(--cw-radius-md);
}

/* --- Correlato cards --- */
.boxCorrelato .contCorrelato {
    border-radius: var(--cw-radius-md);
}

/* --- Scudetti nav --- */
.boxScudetti {
    border-radius: var(--cw-radius-md);
}

/* --- News live wrapper --- */
#newsLive .live-wrapper {
    border-radius: var(--cw-radius-md);
}

/* --- Icon badges --- */
.iconvideo,
.iconthumb,
.itemplay {
    border-radius: var(--cw-radius-lg);
}

/* --- Submenu dropdown --- */
.primary-menu ul {
    border-radius: var(--cw-radius-md);
}

/* --- Mobile: radius ridotto --- */
@media only screen and (max-width: 767px) {
    .entry__media figure,
    .entry.loop figure,
    .primopianobox figure,
    #articoliHome figure,
    #homeCouple figure,
    #newsCX figure,
    #newsLive figure,
    #homeVideo figure,
    #homeGallery figure,
    .boxCorrelato figure,
    .entry__media figure img,
    .entry.loop figure img,
    .primopianobox figure img,
    #articoliHome figure img,
    #homeCouple figure img,
    #newsCX figure img,
    #newsLive figure img,
    #homeVideo figure img,
    #homeGallery figure img,
    .boxCorrelato figure img,
    .newsSide .live-wrapper,
    .boxGallery,
    .boxCorrelato .contCorrelato,
    .boxScudetti,
    #newsLive .live-wrapper {
        border-radius: var(--cw-radius-sm);
    }
}

/* --- SAFETY: ad containers devono restare rettangolari --- */
.boxAdv,
.boxAdv *,
.boxSticky,
.boxScroll,
.boxAd,
.stickyBottomAd,
.pushbarSticky,
.mobileTopSticky,
.mobile_bot,
.mobile_mediumrectangle,
.mediumrectangle_article {
    border-radius: 0 !important;
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione B: SHADOWS / ELEVATION SYSTEM
   ========================================================================== */

/* Shadows solo su desktop per evitare sovrapposizioni mobile */
@media only screen and (min-width: 768px) {
    /* --- Resting shadows --- */
    .newsSide .live-wrapper,
    .boxCorrelato .contCorrelato.bgArticolo,
    .boxScudetti,
    .author-content {
        box-shadow: var(--cw-shadow-sm);
        transition: box-shadow var(--cw-transition-fast);
    }

    /* --- Hover shadows --- */
    .boxCorrelato .contCorrelato:hover,
    .newsSide .live-wrapper:hover {
        box-shadow: var(--cw-shadow-md);
    }

    /* --- Submenu elevazione --- */
    .primary-menu ul {
        box-shadow: var(--cw-shadow-lg);
    }
}

/* --- SAFETY: nessuna shadow su ad containers --- */
.boxAdv,
.boxSticky,
.boxScroll,
.boxAd,
.stickyBottomAd,
.pushbarSticky,
.mobileTopSticky,
.mobile_bot,
.mobile_mediumrectangle,
.mediumrectangle_article {
    box-shadow: none !important;
}

/* --- Reduced motion: nessuna transition shadow --- */
@media (prefers-reduced-motion: reduce) {
    .newsSide .live-wrapper,
    .boxCorrelato .contCorrelato.bgArticolo,
    .boxCorrelato .contCorrelato,
    .boxScudetti,
    .author-content {
        transition: none;
    }
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione E: IMAGE TREATMENT
   ========================================================================== */

/* --- Bordo sottile su immagini su sfondo chiaro --- */
.entry__media figure img,
.entry.loop figure img,
#articoliHome figure img,
#homeCouple figure img,
#newsCX figure img,
#newsLive figure img,
.boxCorrelato figure img {
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- Nessun bordo su sfondo scuro --- */
.primopianobox figure img,
#homeVideo figure img,
#homeGallery figure img,
#boxTop figure img,
#articoliHomeBG figure img,
.boxCorrelato .contCorrelato.bgFoto figure img,
.boxCorrelato .contCorrelato.bgVideo figure img {
    border: none;
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione C: CARD DESIGN
   ========================================================================== */

/* --- Content padding desktop --- */
@media only screen and (min-width: 768px) {
    #articoliHome .entry__content {
        padding: 1.2rem 0 2rem 0;
    }
}

/* --- Hover background upgrade --- */
@media only screen and (min-width: 768px) {
    #articoliHome article:hover .entry__content,
    #homeCouple article:hover .entry__content,
    #newsCX article:hover .entry__content {
        background-color: var(--cw-bg-light);
        border-radius: 0 0 var(--cw-radius-sm) var(--cw-radius-sm);
    }
}

/* --- Sidebar entry separator --- */
.newsSide .live-wrapper .entry:not(:last-child) {
    border-bottom: 1px solid rgba(42,126,78,0.1);
}

/* --- News live entry separator --- */
#newsLive .live-wrapper .entry:not(:last-child) {
    border-bottom: 1px solid rgba(42,126,78,0.1);
}

/* --- Correlato e boxGallery: overflow hidden per clipping angoli --- */
.boxCorrelato .contCorrelato,
.boxGallery {
    overflow: hidden;
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione D: SECTION BACKGROUND RHYTHM
   ========================================================================== */

/* --- Alternanza bianco/grigio chiaro homepage --- */
#homeMid {
    background-color: var(--cw-bg-light);
}

#homeCouple {
    background-color: var(--cw-bg-light);
}

/* --- Separatore sottile sopra articoliHome --- */
#articoliHome {
    border-top: 1px solid #eef0f2;
}

/* --- Dark sections: gradiente sottile --- */
#homeVideo {
    background: linear-gradient(180deg, #141a31 0%, #0f1325 100%);
}

#homeGallery {
    background: linear-gradient(180deg, #141a31 0%, #0f1325 100%);
}

#boxTop {
    background: linear-gradient(180deg, #141a31 0%, #0f1325 100%);
}

/* --- articoliHomeBG radius e overflow --- */
#articoliHomeBG {
    border-radius: var(--cw-radius-md);
    overflow: hidden;
}

/* --- Accent bar sotto titoli sezione --- */
.titBox::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--cw-green);
    margin-top: 0.6rem;
    border-radius: 2px;
}

/* Titoli su sfondo scuro: accent bar bianca */
#homeVideo .titBox::after,
#homeGallery .titBox::after,
#boxTop .titBox::after,
#articoliHomeBG .titBox::after {
    background-color: #ffffff;
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione F: BADGES / LABELS
   ========================================================================== */

/* --- Occhiello badge --- */
.occhiello {
    border-radius: var(--cw-radius-sm);
    padding: 0.2rem 0.6rem;
    letter-spacing: 0.03em;
}

/* --- Live badge con animazione pulse --- */
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.liveBadge {
    border-radius: var(--cw-radius-sm);
    animation: livePulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .liveBadge {
        animation: none;
    }
}

/* --- Scudetti tags --- */
.boxScudetti .tags a {
    border-radius: var(--cw-radius-lg);
    padding: 0.6rem 1.2rem;
    transition: background-color var(--cw-transition-fast), color var(--cw-transition-fast);
}

@media (prefers-reduced-motion: reduce) {
    .boxScudetti .tags a {
        transition: none;
    }
}

/* --- Post tags box --- */
.post-tags-box {
    border-radius: var(--cw-radius-md);
    background: var(--cw-bg-light);
}

/* --- News live titolo top radius --- */
#newsLive .live-tit {
    border-radius: var(--cw-radius-md) var(--cw-radius-md) 0 0;
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione G: NAVIGATION POLISH
   ========================================================================== */

/* --- Menu primario desktop: underline animato --- */
@media only screen and (min-width: 1024px) {
    .primary-menu > li > a {
        position: relative;
    }

    .primary-menu > li > a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: var(--cw-green);
        transition: width var(--cw-transition-normal), left var(--cw-transition-normal);
    }

    .primary-menu > li > a:hover::after,
    .primary-menu > li.current-menu-item > a::after {
        width: 100%;
        left: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .primary-menu > li > a::after {
            transition: none;
        }
    }
}

/* --- Submenu dropdown styling --- */
.primary-menu ul {
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}

/* --- Tags menu hover e scrollbar --- */
.tags-menu-wrapper ul li a {
    transition: opacity var(--cw-transition-fast);
}

.tags-menu-wrapper ul li a:hover {
    opacity: 0.8;
}

@media only screen and (max-width: 767px) {
    .tags-menu-wrapper {
        scrollbar-width: none;
    }

    .tags-menu-wrapper::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tags-menu-wrapper ul li a {
        transition: none;
    }
}

/* --- Breadcrumbs --- */
#breadcrumbs {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

#breadcrumbs a {
    transition: color var(--cw-transition-fast);
}

#breadcrumbs a:hover {
    color: var(--cw-green);
}

#breadcrumbs .breadcrumb_last {
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    #breadcrumbs a {
        transition: none;
    }
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione H: BUTTON SYSTEM
   ========================================================================== */

/* --- "View all" links (Video, Gallery) — pill outline --- */
#homeVideo .head a,
#homeGallery .head a {
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--cw-radius-pill);
    padding: 0.5rem 1.4rem;
    transition: background-color var(--cw-transition-fast), border-color var(--cw-transition-fast);
}

#homeVideo .head a:hover,
#homeGallery .head a:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
}

/* --- News live footer link pill --- */
#newsLive .live-footer a {
    border: 1px solid var(--cw-green);
    border-radius: var(--cw-radius-pill);
    padding: 0.5rem 1.4rem;
    transition: background-color var(--cw-transition-fast), color var(--cw-transition-fast);
}

#newsLive .live-footer a:hover {
    background-color: var(--cw-green);
    color: #ffffff;
}

/* --- Paginazione aggiornata --- */
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    border-radius: var(--cw-radius-md);
}

@media only screen and (min-width: 768px) {
    .navigation li.active a {
        box-shadow: var(--cw-shadow-sm);
    }

    .navigation li a:hover {
        box-shadow: var(--cw-shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    #homeVideo .head a,
    #homeGallery .head a,
    #newsLive .live-footer a {
        transition: none;
    }
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione I: AD CONTAINER INTEGRATION
   ========================================================================== */

/* --- boxAdv background aggiornato --- */
.boxAdv {
    background-color: var(--cw-bg-subtle);
}

/* --- Desktop separator su sidebar ads --- */
@media only screen and (min-width: 768px) {
    .live_ad .ad-wrapper {
        border-top: 1px solid #eef0f2;
    }
}

/* --- Mobile inline ads spacing + linea decorativa --- */
@media only screen and (max-width: 767px) {
    .mobile_mediumrectangle {
        margin: 1.6rem auto;
        position: relative;
    }

    .mobile_mediumrectangle::before {
        content: "";
        display: block;
        width: 40px;
        height: 1px;
        background-color: #d0d0d0;
        margin: 0 auto 1rem auto;
    }
}

/* --- Mobile top ad separatore inferiore --- */
.mobileTopSticky {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* --- SAFETY BLOCK FINALE: tutti i contenitori ad rettangolari e senza shadow --- */
.boxAdv,
.boxSticky,
.boxScroll,
.boxAd,
.stickyBottomAd,
.pushbarSticky,
.pushbarLG .pushbarSticky,
.mobileTopSticky,
.mobile_bot,
.mobile_mediumrectangle,
.mediumrectangle_article,
.live_ad {
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   MODERNIZZAZIONE DESIGN — Sezione J: MOBILE OVERRIDES
   ========================================================================== */

@media only screen and (max-width: 767px) {
    /* --- Radius ridotto su card e immagini (gia definito in Sez. A) --- */

    /* --- Touch scroll migliorato su tags e scudetti --- */
    .tags-menu-wrapper,
    .boxScudetti .tags {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tags-menu-wrapper::-webkit-scrollbar,
    .boxScudetti .tags::-webkit-scrollbar {
        display: none;
    }

    /* --- Content spacing --- */
    .newsSide .live-wrapper,
    .boxGallery {
        padding: 0.8rem;
    }

    /* --- Dark sections mobile padding --- */
    #homeVideo,
    #homeGallery,
    #boxTop {
        padding: 2rem 1rem;
    }

    /* --- Mobile top ad separatore --- */
    .mobileTopSticky {
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    /* --- articoliHomeBG radius mobile --- */
    #articoliHomeBG {
        border-radius: var(--cw-radius-sm);
    }

    /* --- Post tags box mobile --- */
    .post-tags-box {
        border-radius: var(--cw-radius-sm);
    }
}

/* ==========================================================================
   INLINE STYLES → CLASSI (migrazione da PHP)
   ========================================================================== */

/* Sidebar ad scroll containers */
.boxScroll--ad {
    max-height: 850px;
}

/* Home scroll containers */
.boxScroll--home {
    max-height: 600px;
}

/* Home sidebar scroll container */
.boxScroll--sidebar {
    min-height: 650px;
}

/* Mobile ad spacing (singular, singular-light) */
.mobile-ad-spacing {
    margin: 10px auto;
}

/* 404 page */
.error404-content {
    min-height: 55vh;
}

.error404-img {
    width: 100%;
    margin: 3rem auto;
    display: block;
}

.error404-code {
    font-size: 6rem;
}

.error404-subtitle {
    font-size: 3rem;
}

.error404-text {
    font-size: 1.6rem;
    margin: 2rem 0;
}

.error404-cta {
    margin: 0 0 3rem 0;
}

.error404-btn {
    font-size: 1.6rem;
}

/* Footer titMenu converted from span to h2 */
h2.titMenu {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
}

/* Modal menu social icons (FA instead of theme SVGs) */
.menu-modal .social-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.menu-modal .social-menu .svg-inline--fa {
    height: 1em;
    width: 1em;
}