/*
 * CGTV Header Fix — elimina il fade-in + layout shift dell'header netube.
 *
 * Problema originale:
 *   Il tema netube centra il menu navbar via JavaScript (`netubeCenterMenuMargin`
 *   in `assets/js/theme-function.js:1174`). Il JS:
 *     1. misura larghezza `.pull-left`, `.pull-center`, `.pull-right`
 *     2. calcola `margin-left: NNNpx` per centrare il menu
 *     3. applica lo stile inline + aggiunge classe `.show-opacity`
 *   Fino a quel momento, `.nav.pull-center` è `opacity: 0`.
 *   Il JS è chiamato con `setTimeout(..., 300)` due volte → menu nascosto 300ms+.
 *   Su 3G o plugin pesanti il ritardo può arrivare a 1-2s → fade-in visibile +
 *   link cliccabili nel vuoto finché non appaiono.
 *
 * Soluzione:
 *   Sovrascrive i selettori del parent in modo che:
 *   - Menu sempre `opacity: 1` (niente fade-in iniziale)
 *   - Centratura via CSS Grid (1fr auto 1fr) — il browser la calcola al primo
 *     paint, zero JS, zero layout shift
 *   - Il JS `netubeCenterMenuMargin` continua a girare innocuo (scrive un
 *     `margin-left: NNNpx` inline che viene ignorato grazie a `!important`)
 *
 * Compatibilità:
 *   - CSS Grid: supportato su 99.5% browser (IE non supportato, ma CGTV non
 *     target IE)
 *   - Mobile (< 992px): netube disabilita il centraggio in quella breakpoint
 *     (cambia a menu burger drawer). La mia regola è scopata >= 992px per
 *     non interferire.
 *
 * Rollback:
 *   Rimuovere questo file + riga `wp_enqueue_style` in functions.php.
 *   Zero altre dipendenze.
 */

/* =====================================================================
 * 1. Menu center: sempre visibile, nessun fade-in
 *    (sovrascrive .nav.pull-center { opacity: 0 } di parent)
 * ===================================================================== */
.navbar .nav.pull-center,
.topbar .nav.pull-center,
.logobar .nav.pull-center,
.mobile-header .nav.pull-center,
.footer-bottom .nav.pull-center {
    opacity: 1 !important;
    -webkit-opacity: 1 !important;
    -moz-opacity: 1 !important;
    transition: none !important;
}

/* =====================================================================
 * 2. Desktop (>= 992px): centro via CSS Grid invece del trucco JS
 *    Applico SOLO a navbar (quella principale), non a topbar/logobar/footer
 *    per non alterare layout inaspettati negli altri blocchi.
 * ===================================================================== */
@media (min-width: 992px) {
    .navbar .navbar-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 24px;
    }

    /* I 3 slot occupano le 3 colonne grid. Azzero float/position legacy. */
    .navbar .navbar-inner > .navbar-items.pull-left {
        grid-column: 1;
        justify-self: start;
        float: none !important;
        position: static !important;
        /* il JS parent setta margin-left inline → forzo 0 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navbar .navbar-inner > .navbar-items.pull-center {
        grid-column: 2;
        justify-self: center;
        float: none !important;
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navbar .navbar-inner > .navbar-items.pull-right {
        grid-column: 3;
        justify-self: end;
        float: none !important;
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Sticky-head / sticky-outer copie del navbar: applico lo stesso fix */
    .sticky-head .navbar .navbar-inner,
    .sticky-scroll .navbar .navbar-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 24px;
    }
    .sticky-head .navbar .navbar-inner > .navbar-items.pull-left,
    .sticky-scroll .navbar .navbar-inner > .navbar-items.pull-left {
        grid-column: 1;
        justify-self: start;
        margin-left: 0 !important;
    }
    .sticky-head .navbar .navbar-inner > .navbar-items.pull-center,
    .sticky-scroll .navbar .navbar-inner > .navbar-items.pull-center {
        grid-column: 2;
        justify-self: center;
        margin-left: 0 !important;
    }
    .sticky-head .navbar .navbar-inner > .navbar-items.pull-right,
    .sticky-scroll .navbar .navbar-inner > .navbar-items.pull-right {
        grid-column: 3;
        justify-self: end;
        margin-left: 0 !important;
    }
}

/* =====================================================================
 * 3. Topbar: stesso trattamento (topbar ha anch'essa pull-center menu
 *    "Iscriviti alla newsletter" + social che sparisce in fade-in)
 * ===================================================================== */
@media (min-width: 992px) {
    .topbar .topbar-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
    }
    .topbar .topbar-inner > .topbar-items.pull-left {
        grid-column: 1;
        justify-self: start;
        float: none !important;
        margin-left: 0 !important;
    }
    .topbar .topbar-inner > .topbar-items.pull-center {
        grid-column: 2;
        justify-self: center;
        float: none !important;
        margin-left: 0 !important;
    }
    .topbar .topbar-inner > .topbar-items.pull-right {
        grid-column: 3;
        justify-self: end;
        float: none !important;
        margin-left: 0 !important;
    }
}

/* =====================================================================
 * 4. Fallback: se per qualche ragione CSS Grid non si applica (es. override
 *    WP Rocket minifier rotto), comunque il menu è visibile con fallback
 *    flex classico — ancora meglio del comportamento originale.
 * ===================================================================== */
@supports not (display: grid) {
    .navbar .navbar-inner,
    .topbar .topbar-inner {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    .navbar-items.pull-center,
    .topbar-items.pull-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        opacity: 1 !important;
    }
}


/* =====================================================================
 * 5. DGWT/FiboSearch — fix CLS layout shift + nasconde preloader gif.
 *
 * Source fix CLS: supporto ufficiale FiboSearch (Kris @c0nst)
 *   https://wordpress.org/support/topic/comulative-layout-shift-cls/
 *
 * IMPORTANTE: dopo modifiche a questo file SVUOTARE cache/min/ di WP Rocket.
 *   WP Rocket cache filesystem NON rispetta ?ver= query string.
 * ===================================================================== */

/* Fix CLS: dimensioni fisse del wrapper PRIMA che il JS plugin inizializzi. */
.dgwt-wcas-search-wrapp:not(.dgwt-wcas-layout-icon-flexible-loaded) {
    min-width: 40px;
    max-width: 40px;
    height: 17px;
}

/* Nasconde lo spinner-gif (.dgwt-wcas-preloader) sempre a riposo.
 * Il plugin lo rende visibile quando sta facendo AJAX di ricerca — in quel
 * momento la classe `.dgwt-wcas-search-loading` viene aggiunta al wrapper,
 * e noi lo riportiamo visibile solo in quel caso. */
.dgwt-wcas-search-wrapp .dgwt-wcas-preloader {
    display: none !important;
}
.dgwt-wcas-search-wrapp.dgwt-wcas-search-loading .dgwt-wcas-preloader {
    display: block !important;
}


/* =====================================================================
 * 6. Mobile header — logo centrato gia' al primo paint (no FOUC).
 *
 * Problema originale:
 *   Su mobile (<992px) il tema netube usa la stessa logica .pull-center
 *   con opacity:0 + applicazione transform via JS sticky-head.
 *   Risultato: al loading il logo appare a sinistra accanto al toggle
 *   hamburger, poi salta al centro quando JS aggiunge .sticky-head.
 *
 * Fix:
 *   Forziamo il container .mobile-header-items.pull-center a essere
 *   posizionato assoluto centrato (transform:translateX(-50%)) gia' dal
 *   primo paint, senza aspettare JS. Il logo dentro e' visibile (opacity:1)
 *   da subito.
 *
 * Scope: solo mobile (<992px) per non interferire con layout desktop.
 * ===================================================================== */
@media (max-width: 991px) {
    .mobile-header-inner .mobile-header-items.pull-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0 !important;
    }
    .mobile-header-inner .nav.pull-center {
        opacity: 1 !important;
    }
    .mobile-header-inner .mobile-logo {
        text-align: center;
    }
}