/*
Theme Name: Marco Vaccaro WP Full Format
Author: Marco Vaccaro
Description: Tema personalizzato basato su Bulma CSS
Version: 1.3 (Fix Mobile + Logo Piccolo)
*/

/* ==========================================================
   SEZIONE 1: LAYOUT GENERALE E CONTENITORE
   ========================================================== */
.container.is-fluid {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* FIX MOBILE: Riduciamo i margini su schermi piccoli */
@media screen and (max-width: 768px) {
    .container.is-fluid {
        padding-left: 1rem; 
        padding-right: 1rem;
    }
    .section {
        padding: 2rem 1rem; 
    }
}


/* ==========================================================
   SEZIONE 2: HEADER E NAVBAR
   ========================================================== */
.navbar.is-light-mode { 
    background-color: #f9f9f9 !important; 
    border-bottom: 1px solid #dbdbdb;
    min-height: 70px; /* Altezza Desktop */
}

/* MOBILE: Barra bianca e pulita */
@media screen and (max-width: 768px) {
    .navbar.is-light-mode { 
        min-height: 60px; 
        background-color: #ffffff !important; /* Diventa BIANCO */
        border-bottom: none !important;       /* Toglie la riga grigia */
        box-shadow: none !important;          /* Toglie eventuali ombre */
    }
}

.navbar-item, .navbar-link {
    color: #363636 !important; 
    font-weight: 500;
}

.navbar-item:hover {
    color: #1a5f7a !important; 
    background-color: transparent !important;
}


/* ==========================================================
   SEZIONE 3: LOGO
   ========================================================== */
.navbar-brand .navbar-item img {
    max-height: 50px !important; /* Dimensione Desktop (Grande) */
    width: auto !important;
    display: block;
}

/* MOBILE: Logo rimpicciolito e abbassato */
@media screen and (max-width: 768px) {
    .navbar-brand .navbar-item img {
        max-height: 35px !important;
        margin-top: 12px;  /* <--- Questo lo spinge verso il basso */
    }
}

.navbar-brand .navbar-item {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%; 
}


/* ==========================================================
   SEZIONE 4: MENU DI NAVIGAZIONE
   ========================================================== */
.navbar-menu ul, .navbar-menu li {
    list-style: none !important;
    margin: 0 !important; 
    padding: 0 !important;
}

.navbar-start ul { 
    display: flex; 
    gap: 1rem; 
    align-items: center; 
}


/* ==========================================================
   SEZIONE 5: SIDEBAR E COMPONENTI DESKTOP
   ========================================================== */
.column.is-3-desktop {
    border-left: 1px solid #f0f0f0;
    padding-left: 2rem;
}


/* ==========================================================
   SEZIONE 6: ELEMENTI UI
   ========================================================== */
.pagination-link.is-current {
    background-color: #1a5f7a !important;
    border-color: #1a5f7a !important;
    color: #fff !important;
}


/* ==========================================================
   SEZIONE 7: COMPORTAMENTO MOBILE E TABLET (FIX SCROLL)
   ========================================================== */
@media screen and (max-width: 1280px) {

    /* Reset delle colonne per farle andare a capo */
    .columns:not(.is-mobile) {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .columns:not(.is-mobile) > .column {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 2rem; 
    }

    .column.is-offset-1 {
        margin-left: 0 !important;
    }

    /* Sidebar: bordo sopra invece che a sinistra */
    .column.is-3-desktop {
        border-left: none !important;
        border-top: 1px solid #f0f0f0; 
        margin-top: 1rem;
        padding-top: 2rem;
        padding-left: 0 !important;
    }

    .tabs.is-centered ul {
        flex-wrap: wrap; 
        justify-content: center;
    }
    
    .tabs li {
        width: auto;
        margin-bottom: 5px;
    
	}
}

/* ==========================================================
   SEZIONE 8: VIDEO FOOTER (MVTV)
   ========================================================== */

.mv-video-footer {
    width: 100%;       /* Su mobile occupa tutta la larghezza della colonna */
    max-width: 400px;  /* Limite massimo per non farlo diventare enorme su tablet */
}

/* Quando lo schermo è grande (Desktop/Laptop) torna piccolo */
@media screen and (min-width: 769px) {
    .mv-video-footer {
        width: 220px;
    }
}

/* ==========================================================
   SEZIONE 9: FIX VIDEO RESPONSIVI (PAGINA MVTV E ARTICOLI)
   ========================================================== */

/* * Questo serve per i video inseriti nel corpo della pagina (es. MVTV).
 * Usa !important per vincere su eventuali dimensioni scritte nel codice HTML.
 */
.content iframe, 
.content video, 
.content object, 
.content embed {
    width: 100% !important;   /* Occupa tutta la larghezza disponibile */
    height: auto !important;  /* Resetta l'altezza fissa */
    aspect-ratio: 16 / 9;     /* Mantiene la forma rettangolare (TV) */
    max-width: 100%;          /* Non uscire mai dai bordi */
    display: block;
}

/* ==========================================================
   SEZIONE 10: LEGGIBILITÀ ARTICOLI DESKTOP
   ========================================================== */
@media screen and (min-width: 1024px) {
    /* Aumenta il font solo dentro il corpo dell'articolo (.content) */
    .content {
        font-size: 1.25rem; /* Porta il testo a circa 20px */
        line-height: 1.7;   /* Aumenta l'interlinea per dare respiro */
    }

    /* Opzionale: sistema anche i titoli interni all'articolo per mantenere le proporzioni */
    .content h2 {
        font-size: 1.75em;
        margin-top: 1.5em; /* Spazia di più i titoli dai paragrafi precedenti */
    }
    
    .content h3 {
        font-size: 1.5em;
    }
}

/* ==========================================================
   SEZIONE 11: SPAZIATURA MEDIA (VIDEO E IMMAGINI)
   ========================================================== */

/* Regole per dare aria SIA SOPRA che SOTTO i media */
.content figure,
.content iframe, 
.content video, 
.content .wp-block-image, 
.content .wp-block-embed {
    margin-top: 2rem !important;      /* Stacca dal testo sopra */
    margin-bottom: 2.5rem !important; /* Stacca dal testo sotto */
    display: block; 
    height: auto; /* Per sicurezza, evita stiramenti strani */
}

/* Eccezione: Se l'immagine è la primissima cosa dell'articolo, 
   non vogliamo lo spazio sopra, altrimenti c'è un buco vuoto sotto il titolo */
.content > *:first-child figure,
.content > figure:first-child {
    margin-top: 0 !important;
}

/* Didascalie ordinate */
.content figcaption {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-style: italic;
    color: #666;
    text-align: center;
}

/* ==========================================================
   SEZIONE 12: LISTE E CITAZIONI (POLISHING)
   ========================================================== */

/* 1. LISTE PIÙ LEGGIBILI (Solo dentro gli articoli) */
.content li {
    margin-bottom: 0.5rem; /* Stacca i punti della lista uno dall'altro */
}

.content ul, .content ol {
    margin-left: 2em; /* Sposta i pallini verso destra per non farli uscire dallo schermo */
}

/* 2. CITAZIONI (BLOCKQUOTE) EVIDENZIATE */
.content blockquote {
    background-color: #f9f9f9;      /* Sfondo grigio chiarissimo */
    border-left: 5px solid #1a5f7a; /* Barra laterale del tuo blu */
    padding: 1.5em;                 /* Spazio interno */
    font-style: italic;             /* Corsivo */
    border-radius: 4px;             /* Angolini morbidi */
    margin-top: 2rem;               /* Aria sopra */
    margin-bottom: 2rem;            /* Aria sotto */
}

/* ==========================================================
   FIX NAVBAR FISSA (STICKY)
   ========================================================== */
/* Necessario perché la navbar fissa non occupa spazio fisico */
body {
    padding-top: 70px; /* Corrisponde alla min-height desktop definita sopra */
}

@media screen and (max-width: 768px) {
    body {
        padding-top: 60px; /* Corrisponde alla min-height mobile definita sopra */
    }
}