:root {
    /* Dimensioni del testo */
    --font-size-global: 14px;
    --font-size-title: 24px;
    --font-weight-title: 700;
    --font-size-status: 14px;
    
    /* Colori principali (neutri, facilmente personalizzabili) */
    --color-primary: #3498db;      /* Blu standard */
    --color-secondary: #2c3e50;    /* Grigio scuro */
    --color-white: #ffffff;
    
    /* Colori elementi specifici */
    --color-category: #ffffff;     /* Colore testo categorie */
    --color-tag: #ffffff;          /* Colore testo tag */
    --color-dot: #ffffff;          /* Colore pallini navigazione */
    
    /* Sfondi e testi */
    --color-bg-slide-content: rgba(0, 0, 0, 0.5);  /* Sfondo overlay contenuto */
    --color-title: #ffffff;        /* Colore titolo */
}

/* 
 * PERSONALIZZAZIONE:
 * Per personalizzare i colori in base al tema del sito, 
 * aggiungi un CSS personalizzato che sovrascriva queste variabili.
 * Esempio:
 * .next-labs-slider {
 *     --color-primary: #your-color;
 *     --color-secondary: #your-color;
 * }
 */

/* Stili per lo slider */
.next-labs-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.next-labs-slider .slide {
    position: relative;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
}

.next-labs-slider .slide-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: var(--color-white);
    background-color: var(--color-bg-slide-content);
    padding: 10px;
    border-radius: 5px;
}

.next-labs-slider h2 a {
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-title);
}

/* Categorie e tag con stesso stile di base */
.slide-categories a,
.slide-tags a {
    color: var(--color-white);
    text-decoration: underline;
    font-size: var(--font-size-status);
    margin-right: 5px;
}

/* Pseudo-elementi per prefissi */
.slide-category-link::before {
    content: "•";
    display: inline-block;
    margin-right: 5px;
    font-size: 20px;
    vertical-align: middle;
}

.slide-tag-link::before {
    content: "#";
    display: inline-block;
    margin-right: 5px;
    font-size: var(--font-size-status);
    vertical-align: middle;
}

/* Stili per le frecce di navigazione */
.next-labs-slider .slick-prev,
.next-labs-slider .slick-next {
    width: 40px;
    height: 40px;
    z-index: 10;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute;
}

.next-labs-slider .slick-prev {
    left: 15px;
}

.next-labs-slider .slick-next {
    right: 15px;
}

.next-labs-slider .slick-prev:before,
.next-labs-slider .slick-next:before {
    font-size: 40px;
    color: var(--color-white);
    opacity: 0.8;
}

/* Stili per i punti di navigazione */
.next-labs-slider .slick-dots {
    display: block !important;
    bottom: 15px;
    z-index: 10;
    position: absolute;
}

.next-labs-slider .slick-dots li button:before {
    color: var(--color-dot);
    font-size: 12px;
    opacity: 0.8;
}

.next-labs-slider .slick-dots li.slick-active button:before {
    color: var(--color-dot);
    opacity: 1;
}

/* Responsività */
@media (max-width: 768px) {
    .next-labs-slider .slide-content {
        bottom: 10px;
        left: 10px;
        padding: 5px;
    }

    .next-labs-slider h2 a {
        font-size: 18px;
    }

    .slide-categories a,
    .slide-tags a {
        font-size: 12px;
    }
}