/* * Mosaic Theme Custom CSS 
 */

/* Abilita lo scroll fluido nativo per i browser che lo supportano */
html {
    scroll-behavior: smooth;
}

/* Compensazione dell'ancora se CSS scroll-behavior è attivo (96px è l'h-24 di Tailwind) */
html {
    scroll-padding-top: 96px; 
}

/* Rimuove l'outline blu fastidioso sui bottoni cliccati da mobile */
button:focus, a:focus {
    outline: none;
}

/* * ⚠️ NOTA IMPORTANTE SU TAILWIND CSS:
 * L'HTML che stiamo usando utilizza moltissime classi Tailwind (es. text-[#C9A962], md:grid-cols-2).
 * Affinché il sito appaia come nell'anteprima, devi fare una di queste tre cose:
 * 1. (Consigliato per dev veloce) Aggiungere la CDN di Tailwind nell'header.php prima di wp_head(): 
 * <script src="https://cdn.tailwindcss.com"></script>
 * 2. Compilare Tailwind localmente nella cartella del tuo tema e importarlo qui.
 * 3. Copiare il file CSS generato nel sito di anteprima e incollarlo in questo file main.css.
 */
/* --- FIX LIGHTBOX: FORZA VISIBILITÀ FRECCE --- */

/* 1. Rimuoviamo l'effetto "nascondi" di Elementor */
.elementor-slideshow--ui-hidden .elementor-swiper-button,
.elementor-slideshow--ui-hidden .elementor-slideshow__header,
.elementor-slideshow--ui-hidden .elementor-slideshow__footer {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* 2. Rendiamo i bottoni visibili e grandi */
.elementor-lightbox .elementor-swiper-button {
    width: 60px !important;
    height: 60px !important;
    background-color: rgba(26, 58, 58, 0.5) !important; /* Colore scuro del brand semitrasparente */
    border-radius: 50%;
    color: #C9A962 !important; /* Oro Mosaic */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 3. Se l'icona SVG di Elementor è vuota, usiamo RemixIcon (che abbiamo già) */
.elementor-lightbox .elementor-swiper-button-prev::after,
.elementor-lightbox .elementor-swiper-button-next::after {
    font-family: 'remixicon' !important;
    font-size: 32px !important;
    position: absolute;
}

/* Sostituiamo il contenuto dei bottoni con le icone Remix */
.elementor-lightbox .elementor-swiper-button-prev::after {
    content: "\ea60" !important; /* Freccia sinistra */
}

.elementor-lightbox .elementor-swiper-button-next::after {
    content: "\ea6e" !important; /* Freccia destra */
}

/* Nascondiamo l'SVG originale che non si vede */
.elementor-lightbox .elementor-swiper-button svg {
    display: none !important;
}

/* Hover effect */
.elementor-lightbox .elementor-swiper-button:hover {
    background-color: #1A3A3A !important;
    color: #fff !important;
    transform: scale(1.1);
}

/* --- RESET TOTALE LIGHTBOX PER ZONA PUBBLICA --- */

/* Forza la comparsa delle frecce bypassando ogni logica JS di Elementor */
html body .elementor-lightbox.elementor-slideshow--ui-hidden .elementor-swiper-button,
html body .elementor-lightbox .elementor-swiper-button {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
}

/* Creiamo le frecce "finte" ma indistruttibili con RemixIcon */
html body .elementor-lightbox .elementor-swiper-button-prev::before,
html body .elementor-lightbox .elementor-swiper-button-next::before {
    font-family: 'remixicon' !important;
    font-size: 48px !important;
    color: #C9A962 !important;
    content: "\ea60" !important; /* Freccia sinistra default */
    display: block !important;
}

html body .elementor-lightbox .elementor-swiper-button-next::before {
    content: "\ea6e" !important; /* Freccia destra */
}

/* Nascondiamo completamente gli SVG originali che creano conflitti */
html body .elementor-lightbox .elementor-swiper-button svg {
    display: none !important;
}

/* Posizionamento fisso per evitare che finiscano sotto l'immagine */
html body .elementor-lightbox .elementor-swiper-button-prev { left: 30px !important; }
html body .elementor-lightbox .elementor-swiper-button-next { right: 30px !important; }