/* =======================================
    VARIABILI E STILI BASE
======================================= */
:root {
    --blu: #22a1f0;
    --blu-hover: #197bbd;
    --rosso: #e63946;
    --shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'PT Sans', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f9f9f9;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cabin Sketch', cursive;
}

h6 { font-size: 5px; }
h5 { font-size: 10px; }
h4 { font-size: 15px; }
h3 { font-size: 20px; }
h2 { font-size: 25px; }
h1 { font-size: 30px; }

p {
    font-size: 0.875em;
    font-family: Arial, sans-serif;
    line-height: 150%;
    color: #000000;
}

.wrapper {
    width: 100%;
}

/* =======================================
    HEADER E NAVIGAZIONE
======================================= */

/* HEADER STICKY */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: var(--shadow);
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* GRID MODIFICATA IN FLEX */
.header-grid {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    box-sizing: border-box;
}

/* LOGO PRINCIPALE */
.logo-main {
    flex-shrink: 0;
    align-self: center;
    justify-self: start;
}

.logo-main img {
    max-height: 130px;
    height: auto;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.logo-main img:hover {
    transform: scale(1.05);
}

/* RIGA DESTRA SUPERIORE */
.right-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* NUOVA RIGA PER I LOGHI */
.logos-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.top-logos {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-logos img {
    max-height: 50px;
    height: auto;
    width: auto;
    display: block;
}

.academy-logo {
    margin-right: 60px;
}

.cert-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cert-logos img {
    max-height: 45px;
    height: auto;
    width: auto;
    display: block;
    transition: transform .2s;
}

.cert-logos img:hover {
    transform: scale(1.08);
}

.cert-pdr {
    margin-right: 30px;
}

.search-box form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-box input[type="text"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.search-box button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background: var(--blu);
    color: #fff;
    cursor: pointer;
    transition: background .2s;
}

.search-box button:hover {
    background: var(--blu-hover);
}

/* NAV */
nav.main-nav {
    background: var(--blu);
    border-radius: 6px;
    font-size: 12px;
    width: 100%;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 8px;
    margin: 0;
    align-items: center;
    font-size: 12px;
}

.nav-list li {
    margin: 10;
}

.nav-list li a {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 4px;
    transition: background .2s;
    white-space: nowrap;
    text-decoration: none;
}

.nav-list li a:hover {
    background: var(--rosso);
}

.nav-list .social-item {
    margin-left: auto;
}

.nav-list .social-links {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 1px;
}

.nav-list .social-links a {
    padding: 0;
        max-height: 20px;
    width:auto;
}

.nav-list .social-links img {
    max-height: 20px;
    width:auto;
    transition: transform .2s;
    display: block; /* meglio di inline-block in flexbox */
    gap: 0px;
}

.nav-list .social-links img:last-child {
    margin-right: 0; /* niente margine sull’ultima */
}

.nav-list .social-links img:hover {
    transform: scale(2.5);
}


/* =======================================
    STILI PER IL CONTENUTO
======================================= */

/* Sezione Hero */
.hero {
    background: url("hero.jpg") no-repeat center center/cover;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 20px;
}

/* Contenuto generico */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

section {
    padding: 40px 0;
}

.red-separator {
    background-color: #FF0000;
    height: 2px;
    margin: 2px 0;
}

/* Testi vari */
.link { font-family: Arial; font-size: 12px; font-variant: small-caps; color: #000000; text-decoration: none; }
.link:hover { font-size: 14px; font-weight: bold; color: #FF0000; }

.link1 { font-family: Arial; font-size: 18px; font-weight: bold; font-variant: small-caps; color: #000000; text-decoration: none; text-shadow: 2px 2px 3px #bab5b5; }
.link1:hover { font-size: 125%; color: #cf0000; }

.link2 { font-size: 120%; font-variant: small-caps; color: #02B1FF; text-decoration: none; }
.link2:hover { font-size: 140%; font-weight: bold; color: #FF0000; }

.link3 { font-family: Arial; font-size: 18px; font-variant: small-caps; color: #000000; text-decoration: none; }
.link3:hover { font-size: 140%; font-weight: bold; color: #FF0000; }

.link4 { font-family: Cairo, sans-serif; font-size: 19px; color: #000000; line-height: 120%; text-decoration: none; }
.link4:hover { font-size: 140%; font-weight: bold; color: #FF0000; }

.libri { font-family: Arial; font-size: 16px; font-variant: small-caps; color: #000000; text-decoration: none; }
.libri:hover { font-size: 20px; font-weight: bold; font-variant: small-caps; color: #FF0000; }

.title1 { font-size: 33px; font-weight: bold; color: #02B1FF; line-height: 120%; }
.title1-22 { font-size: 25px; font-weight: bold; color: #02B1FF; letter-spacing: 2px; word-spacing: 10px; text-shadow: 1px 1px 2px #778899; }
.title1-22r { font-size: 25px; font-weight: bold; color: #ff0000; letter-spacing: 3px; word-spacing: 15px; text-shadow: 1px 1px 2px #778899; }

.title2-bn, .title2-cl { font-size: 20px; font-style: italic; }
.title2-bn { color: #000000; }
.title2-cl { color: #02B1FF; }

.title16-bn, .title16-cl { font-size: 16px; font-style: italic; }
.title16-bn { color: #000000; }
.title16-cl { color: #02B1FF; }

.title162-bn, .title162-cl { font-size: 16px; font-style: italic; }
.title162-bn { color: #000000; }
.title162-cl { color: #02B1FF; }

.title18-bn, .title18-cl { font-size: 18px; font-style: italic; }
.title18-bn { color: #000000; }
.title18-cl { color: #02B1FF; }

.title22-bn, .title22-cl { font-size: 22px; font-style: italic; }
.title22-bn { color: #000000; }
.title22-cl { color: #02B1FF; }

.text1-bn, .text1-cl { font-family: Cairo; font-size: 22px; line-height: 120%; }
.text1-bn { color: #000000; text-align: justify; text-decoration: none; }
.text1-cl { color: #02B1FF; }

.text12-bn, .text12-cl { font-family: Cairo; font-size: 12px; line-height: 120%; }
.text12-bn { color: #000000; text-align: justify; }
.text12-cl { color: #02B1FF; }

.text14-bn, .text14-cl { font-family: Cairo; font-size: 14px; line-height: 120%; }
.text14-bn { color: #000000; text-align: justify; }
.text14-cl { color: #02B1FF; }

.text18-bn, .text18-cl { font-family: Cairo; font-size: 19px; line-height: 120%; }
.text18-bn { color: #000000; text-align: justify; }
.text18-cl { color: #02B1FF; }

.text2-bn, .text2-cl { font-family: Cairo; font-size: 16px; line-height: 120%; }
.text2-bn { color: #000000; text-align: justify; text-decoration: none; }
.text2-cl { color: #02B1FF; }

.testo-bottom-container {
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-variant: small-caps;
    color: #000000;
}

.testo-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 7px 0;
}

.info-col {
    flex: 1;
    min-width: 200px;
    padding: 0 5px;
}

.left-align { text-align: left; }
.center-align { text-align: center; }
.right-align { text-align: right; }

.calendar-txt { font-family: Arial; font-size: 12px; font-variant: small-caps; color: #000000; }
.ip-txt { font-family: Arial; font-size: 14px; font-variant: small-caps; font-weight: bold; color: #000000; }

.nospam {
    font-family: Arial;
    font-size: 22px;
    color: #000000;
    text-decoration: none;
}
.nospam:hover {
    cursor: pointer;
    font-weight: bold;
    font-size: 26px;
    font-variant: small-caps;
    color: #FF0000;
    text-shadow: 1px 1px 2px grey;
}

/* =======================================
    STILI PER TABELLE E IMMAGINI
======================================= */
td.celle_strette { width: 11%; }
td.celle_larghe { width: 33%; }
.mostre-img img { border-radius: 8px; }

/* =======================================
    EFFETTI E ANIMAZIONI
======================================= */
.zoom:hover { transform: scale(1.5); }
.zoom2:hover { transform: scale(2.0); }
.zoom3:hover { transform: scale(3.0); }

.blink-blu { animation: 1s blinker linear infinite; color: #02B1FF; }
.blink-red { animation: 1s blinker linear infinite; color: red; }

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

/* =======================================
    PULSANTI
======================================= */
.menu-sx { background-image: url("/img/buttons/menu-sx/blu-230x70px.png"); background-color: #ffffff; width: 230px; height: 70px; background-position: center; background-repeat: no-repeat; }
.menu-sx:hover { background-image: url("/img/buttons/menu-sx/red-230x70px.png"); }

.menu-sx-v { background-image: url("/img/buttons/menu-sx/red-230x70px.png"); background-color: #ffffff; width: 230px; height: 70px; background-position: center; background-repeat: no-repeat; }
.menu-sx-v:hover { background-image: url("/img/buttons/menu-sx/red-230x70px-green.png"); }

.button { background-color: #4CAF50; border: 2px solid #4CAF50; color: red; padding: 4px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; }

.button1 { background-color: white; color: black; border: 2px solid #4CAF50; }
.button1:hover { background-color: #4CAF50; color: white; }

.button2 { background-color: white; color: black; border: 2px solid #008CBA; }
.button2:hover { background-color: #008CBA; color: white; }

.button3 { background-color: white; color: black; border: 2px solid #f44336; }
.button3:hover { background-color: #f44336; color: white; }

.button4 { background-color: #e7e7e7; color: black; border: 2px solid #ff0000; border-radius: 4px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); transition-duration: 0.4s; cursor: pointer; }
.button4:hover { background-color: #555555; color: white; }

.button5 { background-color: white; color: black; border: 2px solid #555555; }
.button5:hover { background-color: #555555; color: white; }

/* =======================================
    RESPONSIVE
======================================= */
@media (max-width: 900px) {
    .logo-main img { max-height: 110px; }
    .cert-logos img { max-height: 40px; }
    .top-logos img { max-height: 46px; }
}

@media (max-width: 768px) {
    .header-grid {
        flex-direction: column;
        align-items: center;
    }
    .logo-main {
        margin-bottom: 10px;
    }
    .right-top {
        align-items: center;
    }
    nav.main-nav {
        width: 100%;
    }
    .nav-list { justify-content: center; }
    .nav-list .social-item { margin-left: 0; }
    .testo-bottom-row { flex-direction: column; align-items: center; }
    .info-col { width: 100%; text-align: center; margin-bottom: 10px; }
    .hero { height: 250px; padding: 20px; }
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 16px; }
    h2 { font-size: 22px; }
}


/* =======================================
    OVERLAY IMMAGINI E PULSANTE CHIUDI
======================================= */
.overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    inset: 0;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.overlay-box {
    position: relative;
    display: inline-block;
}

.overlay-box img {
    display: block;
    height: auto;
    width: auto;
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.overlay .close {
    position: absolute;
    top: 0;
    right: -35px;
    color: white;
    background-color: red;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 2001;
}

.overlay .close:hover {
    background-color: #cc0000;
}

/*
 * File: academy.css
 * Descrizione: Stili CSS per la pagina della galleria fotografica.
 */

/* =======================================
    LAYOUT PRINCIPALE (MENU + CONTENUTO)
======================================= */
.main-wrapper {
    display: flex;
    gap: 20px; /* Spazio tra il menu e la galleria */
    padding: 20px;
    box-sizing: border-box;
}

.menu-wrapper {
    flex-basis: 200px; /* Larghezza iniziale del menu */
    flex-shrink: 0; /* Impedisce al menu di rimpicciolirsi */
}

.galleria-container {
    flex-grow: 1; /* Permette alla galleria di occupare lo spazio restante */
    max-width: 900px; /* Mantieni il max-width come richiesto */
}

/* =======================================
    GALLERIA FOTOGRAFICA
======================================= */
.centered-title h1 {
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: 5px;
}

.img-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    width: 100%;
    max-width: 650px;
    padding: 0 5px;
    box-sizing: border-box;
}

.text-col {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    max-width: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-right: 25px; /* Spazio a destra */
}

.img-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.img-box {
    font-size: 12px;
    text-align: center;
    width: 50%;
}

.img-box img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.img-box p {
    font-weight: bold;
    margin: 0;
    font-size: 12px;
}

.galleria-container a img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    margin: 0;
    padding: 0;
}

/* =======================================
    MEDIA QUERIES PER LA REATTIVITÀ
======================================= */
@media (max-width: 768px) {
    .main-wrapper {
        flex-direction: column; /* Impila gli elementi verticalmente su schermi piccoli */
    }

    .menu-wrapper,
    .galleria-container {
        width: 100%;
        flex-basis: auto;
    }
    
    .img-row {
        flex-direction: column; /* Impila la riga di testo e immagini */
        align-items: center;
    }
    
    .text-col {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .img-container {
        flex-direction: column;
    }

    .img-box {
        width: 100%;
        margin-bottom: 15px;
    }

    .img-box img {
        max-width: none;
    }
}