/* =========================================
   MASTER CSS SKUOLASPRINT (Ricostruito)
   ========================================= */

/* --- 1. PULIZIA GENERALE --- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
}

/* --- 2. HEADER: STILE E SFONDO --- */
header.header {
    background: radial-gradient(circle at center, #0b8cd3 0%, #0686C7 40%, #051326 100%) !important;
    padding: 0px 0 !important;
    border-bottom: 3px solid #FFB800 !important;
    border-top: none !important;
}

/* --- 3. LOGO (TOPO): DINAMICO --- */

/* REGOLA BASE: Desktop (Computer) */
.navbar-brand, .brand-logo {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
}

.navbar-brand img, .brand-logo img {
    max-height: 130px !important; /* Altezza per computer */
    width: auto !important;
    filter: drop-shadow(0 0 5px rgba(255, 184, 0, 0.4)) !important;
    transition: max-height 0.3s ease; /* Rende il cambio fluido */
}
.navbar-toggler {
	padding: 0.35rem 0.7rem;
}
.icon-menu::before {
	font-size: 32px;
}
/* REGOLA PER CELLULARE (Sotto i 991px) */
@media (max-width: 991px) {
    .navbar-brand img, .brand-logo img {
        max-height: 70px !important; /* Il topo "a dieta" per il cellulare */
    }
}

/* --- 4. LEGGIBILITÀ MOBILE (Google Friendly) --- */
@media (max-width: 768px) {
    body, p, li, .item-page {
        font-size: 20px !important;
        line-height: 1.7 !important;
    }
    h1, h2, .page-header h1 {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
    }
}
/*===WHATSAPP===*/
.whatsapp-button {
	position: fixed;
	bottom: 10px;
	right: 10px;
}
/*===NREADCRUMBS===*/
.mod-breadcrumbs li {
	font-size: 12px !important;
}
.view-category .mod-breadcrumbs li {
	font-size: 14px !important;
}
/*=== HERO ===*/
.home-clean .container-banner,
.home-clean .container-component > * + *,
.home-clean .footer {
	margin: 0;
}
#mod-custom116 {
	background-image: url("/images/skuolasprint-hero.jpg");
	color: #fff;
  background-position: top,50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  min-height: 70vh;
}
.container-banner .overlay {
	text-align: center;
	background-color: #000000a1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 200px 1em;
	display: flex;
	min-height: 70vh;
}
.lead {
	font-size: 1.5rem;
}
.overlay h2 {
	color: #fff !important;
}
.overlay p {
	max-width: 800px;
	margin-bottom: 40px;
}
.btn-primary {
	background-color: #0686C7;
	border-color: #0686C7;
}
/* --- 5. STILIZZAZIONE ARTICOLI (Latino/Italiano) --- */
/* Titolo Blu */
.item-page h1, .page-header h1, .blog h1, .featured h1 {
    color: #0686C7 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Separatore "Analisi Grammaticale" (Arancione) */
p.info_libro {
    color: #E69500 !important;
    font-weight: 900 !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    text-transform: uppercase !important;
    margin: 30px 0 20px 0 !important;
}

/* Testo Latino (Serif, Scuro) */
p.txt_lat {
    font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #404040 !important;
    font-size: 20px !important;
    line-height: 1.7 !important;
   
}

/* Testo Italiano e Box Home Page (Celestino) */
p.txt_ita,
.blog p:not([class]), 
.featured p:not([class]), 
.item-page p:not([class]) {
    background-color: #eef7fc !important;
    color: #000000 !important;
    font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
    font-size: 20px !important;
    line-height: 1.7 !important;
    padding: 0px !important;
    border-radius: 15px !important;
    border-left: none;
    margin-bottom: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
}

/* Testo greco (classico) */
.txt_grc {
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 1.2rem;
    line-height: 1.6em;
    text-align: justify;
    color: #404040;
    margin: 1em 0;
    padding: 0 1rem;
 } 

/* Grassetti nel testo diventano Blu */
.item-page p strong, .item-page p b {
    color: #0686C7 !important;
}
/* Eccezione: il titolo arancione resta arancione */
p.info_libro strong, p.info_libro b {
    color: inherit !important;
}

/* =========================================
   6. FOOTER (Sfondo Blu + No Grigio + Centrato)
   ========================================= */

/* 1. IL GENITORE (Sfondo BLU) */
.footer {
    background: radial-gradient(circle at center, #0b8cd3 0%, #0686C7 40%, #051326 100%) !important;
    border-top: 3px solid #FFB800 !important;
    padding: 20px 0 !important;
    color: #fff !important;
    
    /* Centratura del blocco principale */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* 2. LA MAGIA (Rende tutto trasparente e centrato) */
.footer * {
    /* Toglie il grigio */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* FORZA LA CENTRATURA DEL TESTO */
    text-align: center !important;
}

/* 3. IL TESTO SPECIFICO (P, Link, Div) */
.footer p, 
.footer a,
.footer div,
.footer span,
.footer .custom {
    color: #fff !important;
    
    /* Questa è la chiave: occupa tutto lo spazio per potersi centrare */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================
   7. BOXED LAYOUT (Centratura Flexbox)
   ========================================= */

/* Si attiva SOLO su PC (Schermi > 992px) */
@media (min-width: 992px) {

    /* 1. HEADER E FOOTER (Centriamo il contenuto interno) */
    /* 2. CORPO CENTRALE (.site-grid) */
    /* Questo è l'elemento che rimaneva a sinistra */
    /*.site-grid {
        max-width: 95% !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        align-self: center !important; 
    }*/
}

/* =========================================
   8. HEADER: CENTRATURA ASSOLUTA (Ultima Spiaggia)
   ========================================= */


/* 3. IL MENU (Giallo) */
.container-search .top-hamburger {
    order: -1 !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    margin-right: 10px !important; /* Spazio a destra */
    
    background-color: #FFB800 !important;
    border: 2px solid #fff !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
}
.container-search .top-hamburger:before {
    content: "\2630"; font-size: 24px; color: #051326; font-weight: bold;
}

/* Nascondi menu a tendina */
.container-search .top-hamburger ul, .container-search .top-hamburger .mod-menu { display: none !important; }
/* Mostra menu */
.container-search .top-hamburger:hover ul, .container-search .top-hamburger:hover .mod-menu {
    display: block !important; position: absolute; top: 55px; left: 0; width: 280px;
    background: #051326 !important; padding: 15px; border: 2px solid #FFB800; z-index: 9999;
}
.container-search .top-hamburger li { list-style: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
.container-search .top-hamburger a { color: #fff !important; display: block; padding: 5px 0; }


/* 4. LA BARRA DI RICERCA */
.container-search .mod-finder,
.container-search form {
    flex-grow: 1 !important;
    display: flex !important;
}
.container-search input[type="search"] {
    height: 50px !important;
    border-radius: 10px 0 0 10px !important;
    border: 2px solid #fff !important; border-right: none !important;
    width: 100% !important; font-size: 16px !important;
}
.container-search .btn-primary {
    height: 50px !important;
    border-radius: 0 10px 10px 0 !important;
    background-color: #0686C7 !important;
    border: 2px solid #fff !important; border-left: none !important;
    min-width: 50px !important;
}

/* =========================================
   9. STILE MENU A TENDINA (Con Scrollbar)
   ========================================= */

/* 1. IL CONTENITORE DEL MENU (Sfondo Radiant + Scroll) */
.container-search .top-hamburger:hover ul, 
.container-search .top-hamburger:hover .mod-menu {
    /* IL GRADIENTE ORIGINALE DEL SITO */
    background: radial-gradient(circle at center, #0b8cd3 0%, #0686C7 40%, #051326 100%) !important;
    
    border: 2px solid #FFB800 !important;  /* Cornice Gialla */
    padding: 10px 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
    width: 320px !important;
    
    /* LA SOLUZIONE AL TUO PROBLEMA: */
    max-height: 70vh !important;  /* Altezza max: 70% dello schermo */
    overflow-y: auto !important;  /* Attiva lo scorrimento verticale se serve */
    scrollbar-width: thin;        /* Barra sottile (Firefox) */
    scrollbar-color: #FFB800 #051326; /* Colori barra (Firefox) */
}

/* Stilizzazione Scrollbar (Chrome/Safari/Edge) */
.container-search .top-hamburger:hover ul::-webkit-scrollbar,
.container-search .top-hamburger:hover .mod-menu::-webkit-scrollbar {
    width: 8px;
}
.container-search .top-hamburger:hover ul::-webkit-scrollbar-track,
.container-search .top-hamburger:hover .mod-menu::-webkit-scrollbar-track {
    background: #051326; 
}
.container-search .top-hamburger:hover ul::-webkit-scrollbar-thumb,
.container-search .top-hamburger:hover .mod-menu::-webkit-scrollbar-thumb {
    background-color: #FFB800; 
    border-radius: 10px;
}

/* 2. PULIZIA DELLA LISTA */
.container-search .top-hamburger ul,
.container-search .top-hamburger li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. LE VOCI DEL MENU (Link) */
.container-search
 .top-hamburger a {
    display: block !important;
    padding: 12px 20px !important;
    color: #ffffff !important;          /* Testo Bianco */
    text-decoration: none !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
}

/* 4. EFFETTO HOVER (Luce al passaggio) */
.container-search .top-hamburger a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important; 
    color: #FFB800 !important;       
    padding-left: 25px !important;   
    border-left: 4px solid #FFB800 !important;
}

/* 5. SOTTOCATEGORIE (Più scure per contrasto) */
.container-search .top-hamburger ul ul a {
    padding-left: 40px !important;
    font-size: 14px !important;
    background-color: rgba(0, 20, 40, 0.3) !important; 
}

.container-search .top-hamburger ul ul a:hover {
    color: #FFB800 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding-left: 45px !important;
}

/* Ultima riga niente bordo */
.container-search .top-hamburger li:last-child a {
    border-bottom: none !important;
}

/* =========================================
   10. STILE LISTA VERSIONI (Elegante e Leggibile)
   ========================================= */

/* 1. SPAZIATURA E CONTENITORE */
.view-category ol, 
.view-category ul {
    padding-left: 25px !important; /* Spazio a sinistra per i numeri */
    margin-top: 20px !important;
}

/* 2. LA RIGA DELLA LISTA (Numero + Riga divisoria) */
.view-category ol li {
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-size: 19px !important;       /* Testo grande e leggibile */
    margin-bottom: 15px !important;   /* Spazio tra le versioni */
    padding-bottom: 8px !important;   /* Aria sotto il testo */
    border-bottom: 1px solid #f0f0f0 !important; /* Riga grigia sottile elegante */
    color: #555 !important;           /* Colore del numero (Grigio scuro) */
}

/* 3. IL LINK (Il titolo della versione) */
.view-category ol li a {
    color: #0986c7 !important;        /* Il tuo AZZURRO */
    font-weight: 600 !important;      /* Semigrassetto */
    text-decoration: none !important; /* Niente sottolineatura a riposo */
    margin-left: 8px !important;      /* Stacca il titolo dal numero */
    display: inline-block !important; /* Migliora il click */
}

/* 4. HOVER (Quando passi sopra col mouse) */
.view-category ol li a:hover {
    color: #051326 !important;        /* Diventa Blu Scuro (più elegante) */
    text-decoration: underline !important;
}

/* 5. TITOLI DELLE CATEGORIE (Es. "Autori Sconosciuti") */
.view-category h1, 
.view-category h2,
.page-header h1 {
    color: #0986c7 !important; /* Azzurro */
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    text-align: center !important; /* Centrati come tutto il resto */
}

/* =========================================
   11. CARD VIDEO YOUTUBE (Compatta e Blu)
   ========================================= */

/* 1. IL CONTENITORE (La Card) */
.yt-card {
    /* Flexbox elimina gli spazi vuoti tra titolo e video */
    display: flex !important;
    flex-direction: column !important;
    
    position: relative !important;
    width: 90% !important;        /* Mobile: lascia un po' di bordo */
    max-width: 450px !important;  /* Desktop: non diventare enorme */
    margin: 30px auto !important; /* Centrata nella pagina */
    
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    text-decoration: none !important;
    overflow: hidden !important;  /* Taglia tutto ciò che esce dai bordi tondi */
    border: none !important;
}

/* Effetto Hover (Si alza quando passi il mouse) */
.yt-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25) !important;
    transition: all 0.3s ease !important;
}

/* 2. IL TITOLO BLU (Sopra) */
.yt-caption {
    padding: 12px 10px !important; /* Un po' più di aria */
    background-color: #0686c7 !important; /* IL TUO BLU */
    color: #ffffff !important;
    text-align: center !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 2;
    
    /* Tipografia */
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}

/* La scritta piccola sotto (es. "Clicca per aprire") */
.yt-caption span {
    display: block !important;
    font-size: 0.85em !important; /* Leggermente più piccolo */
    font-weight: normal !important;
    opacity: 0.9 !important;      /* Leggermente trasparente */
    margin-top: 3px !important;
}

/* 3. L'IMMAGINE DEL VIDEO (Fix di sicurezza) */
/* Questo serve per essere sicuri che la foto si attacchi bene al titolo */
.yt-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;    /* Toglie lo spazietto bianco sotto le immagini */
    margin: 0 !important;
}

/* =========================================
   12. HEADER PERFETTO (Topo Alto + Zero Spazio Sotto)
   ========================================= */

/* 1. RIPRISTINA LA PAGINA (Toglie le righe strane laterali) */
.site-grid {
    margin-top: 0 !important;
    z-index: auto !important;
}

/* 3. LOGO (Il Topo): Appena 5px per non tagliare le orecchie, ma resta altissimo */
.navbar-brand {
    padding-top: 5px !important; 
    margin: 0 !important;
}

/* 4. HEADER INTERNO: Toglie spazi inutili */
header.header {
    margin-bottom: 0 !important;
    /* Lasciamo 5px sotto solo per non far toccare la barra Cerca col bordo */
    padding-bottom: 5px !important; 
}

/* 5. TOGLIAMO L'ARIA SOTTO LA RICERCA */
.grid-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.mod-search {
    margin-bottom: 0 !important;
}

/* 6. CELLULARE: Compatta al massimo */
@media (max-width: 991px) {
    .container-header {
        padding-bottom: 5px !important; /* Minimo respiro su mobile */
    }
    .header {
        gap: 5px !important; /* Incolla il Cerca al Logo */
    }
}

/* FORZA TUTTI I TITOLI AZZURRI */
h1, h2, .page-header h1, .page-header h2, .item-page h1, .item-page h2 {
    color: #0686C7 !important;
}

/* --- ANALISI GRAMMATICALE: TITOLO --- */
.com-content-article__body h3, 
center b, 
p[style*="text-align: center"] b {
    font-size: 32px !important; /* Titolo imponente */
    letter-spacing: 3px !important;
    color: #c09853 !important;
    text-transform: uppercase !important;
}

/* --- ANALISI GRAMMATICALE: VOCI (Solo per Desktop) --- */
@media (min-width: 992px) {
    /* Mira alle parole blu e alla loro spiegazione */
    .com-content-article__body p, 
    .com-content-article__body span, 
    .com-content-article__body b {
        font-size: 24px !important; /* Carattere XL per desktop */
        line-height: 2 !important; /* Molto spazio tra le righe */
    }

    /* Rende le parole analizzate (in blu) ancora più evidenti */
    span[style*="color: #3366ff"], b {
        font-size: 26px !important;
        margin-top: 15px !important;
        display: inline-block !important;
    }
}

/* --- MANTIENE IL CELLULARE COSÌ COM'È --- */
@media (max-width: 991px) {
    .com-content-article__body p {
        font-size: 18px !important; 
    }
}

/* --- TASTO CONTINUA: BLU RADIANT DEFINITIVO --- */
p.info_continua, .info_continua {
    display: block !important;
    text-align: center !important;
    margin: 85px auto !important; /* Spazio protettivo XL per AdSense */
    clear: both !important;
}

.info_continua a.info_link, p.info_continua a {
    display: inline-block !important;
    /* SFUMATURA BLU RADIANT (MATCH SITO) */
    background: linear-gradient(135deg, #0686c7 0%, #0566a0 100%) !important;
    color: #ffffff !important; /* Testo Bianco per massima eleganza */
    padding: 24px 60px !important; /* Dimensione XL per facilità di tocco cellulare */
    border: none !important;
    border-radius: 50px !important; /* Forma a pillola moderna */
    
    /* TESTO MAIUSCOLO E NERETTO */
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 1.5px !important;
    
    /* OMBRA MORBIDA */
    box-shadow: 0 10px 25px rgba(6, 134, 199, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Effetto interattivo al tocco */
.info_continua a.info_link:hover, .info_continua a.info_link:active {
    transform: scale(1.05) translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(6, 134, 199, 0.45) !important;
    filter: brightness(1.1) !important;
}

/* ==================================================
   2. GRAMMATICA e ITALIANO (Sfondo Azzurrino)
   ================================================== */
p.info_txt, p.txt_ita {
    background-color: #eef7fc !important; /* AZZURRINO */
    color: #212529 !important;
    
    font-size: 19px !important;
    line-height: 1.8 !important;
    
    padding: 2px !important;
    border-radius: 15px !important;
    border: none !important;           /* Nessun bordo laterale */
    
    margin-bottom: 25px !important;
    margin-top: 20px !important;
    text-align: left !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* ==================================================
   SOLO PER PC: Aumento grandezza testo Italiano e Grammatica
   (Non tocca il cellulare, non tocca il tasto Latino)
   ================================================== */

@media (min-width: 992px) {
    p.txt_ita, p.info_txt {
        font-size: 22px !important;    /* Da 19px passa a 22px: Molto più leggibile */
        line-height: 1.8 !important;   /* Aumenta lo spazio tra le righe per far respirare il testo */
        padding: 40px !important;      /* Un po' più di spazio interno nel box */
    }
}

/* ==================================================
   video per azerion
   ================================================== */

.video-slot-fixed {
    width: 100%;
    min-height: 300px; /* Altezza minima fissa: fondamentale per lo spazio */
    margin: 25px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Grigio chiaro per riempire il buco inizialmente */
    clear: both;
}