/* ─── Toggle button ─────────────────────────────────────────────────────── */

#dlt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: 6px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    color: inherit;
    transition: background 0.2s, color 0.2s;
}

#dlt-toggle:hover {
    background: rgba(128, 128, 128, 0.18);
}

#dlt-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* In light mode la luna resterebbe su sfondo trasparente e si leggerebbe
   poco sulla navbar chiara. Applichiamo quindi lo stesso bg grigio-chiaro
   dell'hover come stato di default, e alziamo leggermente l'opacità
   sull'hover per mantenere il feedback visivo. */
html.light-mode #dlt-toggle {
    background: rgba(128, 128, 128, 0.18);
}
html.light-mode #dlt-toggle:hover {
    background: rgba(128, 128, 128, 0.30);
}

/* ─── LIGHT MODE — testo ─────────────────────────────────────────────────── */
/* Il canvas neural-bg gestisce lo sfondo (via NeuralBG.setBgColor in JS).  */
/* Il colore del body viene overridato dall'inline style in wp_head priority 2. */

html.light-mode p,
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6,
html.light-mode li,
html.light-mode td,
html.light-mode th,
html.light-mode label,
html.light-mode blockquote,
html.light-mode figcaption,
html.light-mode .entry-content,
html.light-mode .entry-content *,
html.light-mode .page-content,
html.light-mode .page-content *,
html.light-mode .post-content,
html.light-mode .post-content *,
html.light-mode article,
html.light-mode article * {
    color: #0F172A !important;
}

html.light-mode .entry-content a,
html.light-mode .page-content a,
html.light-mode article a {
    color: #E0E2E2 !important;
}

html.light-mode .entry-content a:hover,
html.light-mode .page-content a:hover,
html.light-mode article a:hover {
    color: #1D4ED8 !important;
}

/* ─── LIGHT MODE — navigazione ───────────────────────────────────────────── */

html.light-mode .site-header,
html.light-mode #site-navigation,
html.light-mode #site-navigation .navbar,
html.light-mode .navbar,
html.light-mode .header-inner,
html.light-mode .inner-wrap,
html.light-mode .header-inner.inner-wrap,
html.light-mode .header-inner.inner-wrap.wpz_menu_center {
    background-color: #e2e8f0 !important;
    background-image: none !important;
}

html.light-mode .sub-menu,
html.light-mode .children,
html.light-mode .dropdown-menu {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

html.light-mode #site-navigation a,
html.light-mode .navbar a,
html.light-mode .nav a,
html.light-mode .primary-menu-wrapper a {
    color: #1E293B !important;
}

html.light-mode #site-navigation a:hover,
html.light-mode .navbar a:hover,
html.light-mode .nav a:hover {
    color: #2563EB !important;
}

html.light-mode .sub-menu a,
html.light-mode .children a {
    color: #1E293B !important;
}

html.light-mode .navbar-toggle .icon-bar {
    background-color: #1E293B !important;
}

html.light-mode #sb-search,
html.light-mode #sb-search * {
    color: #1E293B !important;
}

html.light-mode #sb-search svg,
html.light-mode #sb-search path,
html.light-mode .sb-search-button-open,
html.light-mode .sb-search-button-open svg,
html.light-mode .sb-search-button-open path,
html.light-mode .sb-search-button-close,
html.light-mode .sb-search-button-close svg,
html.light-mode .sb-search-button-close path,
html.light-mode .sb-icon-search svg,
html.light-mode .sb-icon-search path {
    fill: #1E293B !important;
    color: #1E293B !important;
    background: transparent !important;
}

html.light-mode .sb-search-input {
    color: #1E293B !important;
    background-color: transparent !important;
    border-color: #94A3B8 !important;
}

html.light-mode .sb-search-input::placeholder {
    color: #64748B !important;
}

/* ─── LIGHT MODE — widget destra navbar ──────────────────────────────────── */

html.light-mode .header-widgets-wrapper,
html.light-mode .header_social,
html.light-mode .header-extras {
    background-color: transparent !important;
    background-image: none !important;
}

html.light-mode .header-widgets-wrapper *,
html.light-mode .header_social *,
html.light-mode .header-extras * {
    color: #1E293B !important;
}

html.light-mode .header_social a,
html.light-mode .header-extras a {
    color: #1E293B !important;
}

html.light-mode .header_social a:hover,
html.light-mode .header-extras a:hover {
    color: #2563EB !important;
}

/* ─── LIGHT MODE — breadcrumb ────────────────────────────────────────────── */

html.light-mode .navbar-breadcrumbs,
html.light-mode .navbar-breadcrumbs *,
html.light-mode .breadcrumbs,
html.light-mode .breadcrumbs *,
html.light-mode .breadcrumb,
html.light-mode .breadcrumb *,
html.light-mode nav.breadcrumb-navigation,
html.light-mode nav.breadcrumb-navigation * {
    color: #334155 !important;
    background-color: transparent !important;
}

html.light-mode .navbar-breadcrumbs a,
html.light-mode .breadcrumbs a,
html.light-mode .breadcrumb a {
    color: #2563EB !important;
}

html.light-mode .navbar-breadcrumbs a:hover,
html.light-mode .breadcrumbs a:hover,
html.light-mode .breadcrumb a:hover {
    color: #1D4ED8 !important;
}

/* ─── LIGHT MODE — footer ────────────────────────────────────────────────── */

html.light-mode .site-footer,
html.light-mode footer,
html.light-mode #colophon,
html.light-mode aside.footer-widgets,
html.light-mode .footer-widgets,
html.light-mode .widget-columns-4,
html.light-mode .site-info {
    background-color: #E2E8F0 !important;
    background-image: none !important;
}

html.light-mode .site-footer *,
html.light-mode footer * {
    color: #334155 !important;
}

html.light-mode .site-footer a,
html.light-mode footer a {
    color: #2563EB !important;
}

/* ─── LIGHT MODE — widget e sidebar ─────────────────────────────────────── */

html.light-mode .widget,
html.light-mode .widget * {
    color: #0F172A !important;
}

html.light-mode .widget a {
    color: #2563EB !important;
}

/* ─── LIGHT MODE — escludi .card-title e .card-text ─────────────────────── */

html.light-mode .card-title,
html.light-mode .card-title *,
html.light-mode .card-text,
html.light-mode .card-text *,
html.light-mode .text-card-prog,
html.light-mode .text-card-prog *,
html.light-mode .card-detail-title,
html.light-mode .card-detail-title *,
html.light-mode .card-detail-text,
html.light-mode .card-detail-text *,
html.light-mode #detailLink,
html.light-mode #detailLink *,
html.light-mode .p-card-prog,
html.light-mode .p-card-prog *,
html.light-mode .card-tag,
html.light-mode .card-tag *,
html.light-mode .project-grid-index,
html.light-mode .project-grid-index *,
html.light-mode .pm-card-tags,
html.light-mode .pm-card-tags *,
html.light-mode .pm-card-title,
html.light-mode .pm-card-title *,
html.light-mode .pm-card-text,
html.light-mode .pm-card-text *,
html.light-mode .progetti-closing-card,
html.light-mode .progetti-closing-card *,
html.light-mode .closing-content,
html.light-mode .closing-content *,
html.light-mode .eventi-closing-card,
html.light-mode .eventi-closing-card *,
html.light-mode .agro-closing-card,
html.light-mode .agro-closing-card *,
html.light-mode .section-card,
html.light-mode .section-card *,
html.light-mode .eyebrow,
html.light-mode .eyebrow * {
    color: #ffffff !important;
}
html.light-mode #detailLink:hover {
    color: #10182C !important;
}

/* ─── LIGHT MODE — pagina idee: sezioni con sfondo scuro ─────────────────── */
/* .method-sticky-card e .idee-cta hanno image-bg scuro → testo bianco.
   .idee-section.idee-target ha overlay blu scuro → testo bianco. */
html.light-mode .method-sticky-card,
html.light-mode .method-sticky-card *,
html.light-mode .idee-cta,
html.light-mode .idee-cta *,
html.light-mode .idee-section.idee-target,
html.light-mode .idee-section.idee-target * {
    color: #ffffff !important;
}
/* Il pulsante CTA ha sfondo #6BC6A5 → testo scuro */
html.light-mode .idee-btn {
    color: #0E3658 !important;
}

/* ─── LIGHT MODE — pagina ricerca e innovazione: sezioni con sfondo scuro ── */
html.light-mode .ricerca-section.ricerca-target,
html.light-mode .ricerca-section.ricerca-target *,
html.light-mode .ricerca-cta,
html.light-mode .ricerca-cta * {
    color: #ffffff !important;
}
html.light-mode .ricerca-btn {
    color: #0E3658 !important;
}

/* ─── LIGHT MODE — pagina trasferimento al mercato: sezioni con sfondo scuro */
html.light-mode .mercato-section.mercato-target,
html.light-mode .mercato-section.mercato-target *,
html.light-mode .mercato-cta,
html.light-mode .mercato-cta * {
    color: #ffffff !important;
}
html.light-mode .mercato-btn {
    color: #0E3658 !important;
}

/* ─── LIGHT MODE — pagina comunicazione & impatto: sezioni con sfondo scuro */
html.light-mode .comunicazione-section.comunicazione-target,
html.light-mode .comunicazione-section.comunicazione-target *,
html.light-mode .comunicazione-cta,
html.light-mode .comunicazione-cta * {
    color: #ffffff !important;
}
html.light-mode .comunicazione-btn {
    color: #0E3658 !important;
}

/* ─── LIGHT MODE — box1.html (.macroaree-1) ─────────────────────────────── */
/* Banner parallax ha sfondo scuro → bianco. Heading su sfondo chiaro → scuro. */
html.light-mode .macroaree-1 .intro-parallax-wrap,
html.light-mode .macroaree-1 .intro-parallax-wrap * {
    color: #ffffff !important;
}
html.light-mode .macroaree-1 .progetti-section-heading,
html.light-mode .macroaree-1 .progetti-section-heading * {
    color: #0F172A !important;
}

/* ─── LIGHT MODE — menu mobile (hamburger/side-nav Inspiro) ──────────────── */
/* Il tema Inspiro apre il menu burger in un pannello fisso .side-nav con
   sfondo nero (#101010). In light mode lo trasformiamo in un pannello chiaro
   con testo scuro. Valgono solo su mobile (dove il menu è effettivamente
   attivo via burger), sotto i 64em (~1024px) come il tema stesso. */

@media screen and (max-width: 64em) {

    html.light-mode .side-nav,
    html.light-mode .side-nav__scrollable-container,
    html.light-mode .side-nav__wrap {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    html.light-mode .side-nav-overlay {
        background-color: rgba(15, 23, 42, 0.45) !important;
    }

    html.light-mode .side-nav,
    html.light-mode .side-nav *,
    html.light-mode .side-nav__scrollable-container,
    html.light-mode .side-nav__scrollable-container * {
        color: #0F172A !important;
    }

    html.light-mode .side-nav__scrollable-container h1,
    html.light-mode .side-nav__scrollable-container h2,
    html.light-mode .side-nav__scrollable-container h3,
    html.light-mode .side-nav__scrollable-container h4,
    html.light-mode .side-nav__scrollable-container h5,
    html.light-mode .side-nav__scrollable-container h6,
    html.light-mode .side-nav .widget .title,
    html.light-mode .side-nav .widget_block .title,
    html.light-mode .side-nav .widget_block .wp-block-search__label {
        color: #0F172A !important;
    }

    html.light-mode .side-nav a,
    html.light-mode .side-nav .navbar-nav a,
    html.light-mode .side-nav .navbar-nav li a {
        color: #1E293B !important;
    }

    html.light-mode .side-nav a:hover,
    html.light-mode .side-nav a:active,
    html.light-mode .side-nav .navbar-nav li a:hover,
    html.light-mode .side-nav .navbar-nav li a:active {
        color: #2563EB !important;
    }

    html.light-mode .side-nav .navbar-nav li.menu-item-has-children > a .svg-icon {
        fill: #64748B !important;
    }
    html.light-mode .side-nav .navbar-nav li.menu-item-has-children > a .svg-icon:hover,
    html.light-mode .side-nav .navbar-nav li.menu-item-has-children > a .svg-icon:active {
        fill: #0F172A !important;
    }

    /* Campo di ricerca dentro il side-nav */
    html.light-mode .side-nav .search-form .search-field,
    html.light-mode .side-nav .wp-block-search__input {
        color: #0F172A !important;
        background-color: #F1F5F9 !important;
        border-color: #CBD5E1 !important;
    }
    html.light-mode .side-nav .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
        border-color: #CBD5E1 !important;
    }

    /* Pulsante "X" di chiusura */
    html.light-mode .side-nav__close-button,
    html.light-mode .side-nav__close-button * {
        color: #0F172A !important;
    }
    html.light-mode .side-nav__close-button .icon-bar,
    html.light-mode .side-nav__wrap .navbar-toggle .icon-bar {
        background-color: #0F172A !important;
    }
}

/* ─── LIGHT MODE — Dashboard singolo progetto (.pm-dashboard-main) ───────── */
/* Il template del plugin progetti-manager renderizza la scheda del singolo
   progetto dentro <main class="pm-dashboard-main">. I pannelli glass interni
   (.pm-section, .pm-info-card, .pm-doc-item) restano su sfondo scuro
   (rgba(12,20,32,.78)) anche in light mode, quindi forziamo il testo in
   bianco per garantire leggibilità. Non tocchiamo bg/bordi né le icone
   colorate dalla macroarea (var(--pm-color)). */

html.light-mode .pm-dashboard-main,
html.light-mode .pm-dashboard-main * {
    color: #ffffff !important;
}

/* Label uppercase, sottotitoli documenti, testi secondari: bianco pieno
   per massima leggibilità sui pannelli glass scuri. */
html.light-mode .pm-dashboard-main .pm-text-block h4,
html.light-mode .pm-dashboard-main .pm-detail-label,
html.light-mode .pm-dashboard-main .pm-info-label,
html.light-mode .pm-dashboard-main .pm-doc-item small {
    color: #ffffff !important;
}

/* Link interni della dashboard: azzurro chiaro (stesso colore già usato
   in dark mode su .pm-detail-link) per restare ben visibili sul glass scuro. */
html.light-mode .pm-dashboard-main a,
html.light-mode .pm-dashboard-main .pm-detail-link {
    color: #9fd0ff !important;
}
html.light-mode .pm-dashboard-main a:hover,
html.light-mode .pm-dashboard-main .pm-detail-link:hover {
    color: #ffffff !important;
}

/* Preserva il colore dinamico delle dashicons (var(--pm-color) e' impostata
   per ogni macroarea → es. Mobilità = blu specifico). Senza questa regola
   la precedente "* { color: … }" le forzerebbe tutte a slate-900,
   facendo sparire il color-coding della macroarea nelle icone di sezione
   e della navigazione laterale. */
html.light-mode .pm-dashboard-main .pm-section-header .dashicons,
html.light-mode .pm-dashboard-main .pm-nav-item .dashicons,
html.light-mode .pm-dashboard-main .pm-nav-item.active {
    color: var(--pm-color, #2271b1) !important;
}