/* === VARIABILI E RESET === */
:root {
    --bg-color: #f0f0f0; 
    --text-color: #111;
    --sidebar-width: 180px; 
    --font-serif: 'Ledger', serif;
    --font-sans: 'Inter', sans-serif;
}

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

body { background-color: var(--bg-color); color: var(--text-color); display: flex; min-height: 100vh; overflow-x: hidden; }

/* === SIDEBAR E NAVIGAZIONE (Desktop) === */
.sidebar {
    width: var(--sidebar-width); position: fixed; top: 0; left: 0; height: 100vh;
    border-right: 1px solid #999; padding: 40px 15px 30px 15px; display: flex; flex-direction: column;
    background-color: var(--bg-color); z-index: 100;
    overflow-y: auto; 
}

.menu-arrow {
    position: absolute; right: -1px; top: 0; width: 0; height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 14px solid #111; 
    transform: translateY(-50%); transition: top 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease; 
    pointer-events: none; opacity: 0; 
}
.menu-arrow.show { opacity: 1; }

/* ========================================================= */
/* === COMANDI MANUALI: ALLINEAMENTO LOGO E MENÙ         === */
/* ========================================================= */
.desktop-logo { 
    display: block; width: 150%; max-width: 130px; flex-shrink: 0;
    margin-left: auto; margin-right: auto;
    margin-top: -40px; margin-bottom: 6px; 
}
.desktop-logo img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: contain; 
    /* Aggiunge la transizione fluida per grandezza e trasparenza */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* 👇 L'effetto al passaggio del mouse 👇 */
.desktop-logo:hover img { 
    transform: scale(1.08); /* Lo ingrandisce dell'8% */
}

/* 👇👇👇 MODIFICA EVIDENZIATA: ALTEZZA MENU 👇👇👇 */
.nav-menu { 
    margin-top: -14px; /* Modifica questo numero per far salire/scendere il menù */
}
/* 👆👆👆 --------------------------------- 👆👆👆 */

.nav-menu ul { list-style: none; }
.nav-menu li { margin-bottom: 4px; }
.nav-menu a { 
    text-decoration: none; color: var(--text-color); font-family: var(--font-serif); 
    font-size: 1.5rem; transition: color 0.2s ease; display: inline-block; width: 100%; 
}
.nav-menu a:hover, .nav-menu a.active { color: #111; }

/* ========================================================= */
/* === STILI TASTO LINGUA ENG-ITA (Desktop & Mobile)     === */
/* ========================================================= */
.lang-switch { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--text-color); cursor: pointer; }
.lang-switch span { transition: opacity 0.2s ease, font-weight 0.2s ease; }
.lang-switch span:not(.active) { opacity: 0.4; font-weight: 400; }
.lang-switch span:hover { opacity: 1; }

.desktop-lang { margin-top: 5px; margin-bottom: 0; }
.mobile-lang { margin-bottom: 4px; }
body.hub-page .lang-switch { color: #0000ff; }

@media (max-width: 768px) { .desktop-lang { display: none; } }
@media (min-width: 769px) { .mobile-lang { display: none; } }

.mobile-menu-header { display: none; }
.mobile-lang { font-size: 1.2rem; margin-bottom: 2px; }
.hours { margin-top: auto; font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.4; color: #222; margin-bottom: 10px; white-space: nowrap; flex-shrink: 0; }

/* === HEADER MOBILE E HAMBURGER === */
.mobile-header { display: none; }
.hamburger-menu { display: flex; width: 30px; height: 22px; cursor: pointer; flex-direction: column; justify-content: space-between; }
.hamburger-menu span { display: block; height: 3px; width: 100%; background-color: var(--text-color); transition: 0.3s ease; }
.hamburger-menu.active span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.hamburger-menu.active span:nth-child(2) { opacity: 0; }
.hamburger-menu.active span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* === MAIN CONTENT === */
.main-content { 
    margin-left: var(--sidebar-width); flex: 1; padding: 40px 15px 0 15px; display: flex; flex-direction: column; 
    min-height: calc(100vh + 180px); 
}

.content-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; padding-top: 0; }
.main-title { font-family: var(--font-serif); font-size: 4rem; line-height: 0.8; margin-bottom: 0; letter-spacing: -0.02em; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.events-link { font-family: var(--font-sans); font-size: 1.1rem; color: var(--text-color); text-decoration: none; margin-top: 5px; }
.events-link:hover { text-decoration: underline; }

/* === GALLERY HOME === */
.gallery { display: flex; flex-direction: column; width: 100%; padding-bottom: 50px; }
.gallery-link { display: block; width: 100%; position: relative; margin-bottom: 0; }
.gallery img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover; }
.gallery-overlay { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; width: 90%; }
.g-date { 
    background-color: #fff; 
    color: #111; 
    padding: 3px 8px; 
    font-family: var(--font-sans); 
    font-size: 0.8rem; 
    white-space: nowrap;
    display: table; 
    margin: 0 auto; 
}

.g-artist { 
    background-color: #fff; 
    color: #111; 
    font-family: var(--font-sans); 
    font-size: 0.9rem; 
    font-weight: 400; 
    text-transform: uppercase; 
    display: inline; 
    padding: 4px 8px; 
    line-height: 1.6; 
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; 
}
/* === OVERRIDE HOME PAGE FULL SCREEN (Desktop & Mobile) === */
body.home-page .main-content { padding: 0 !important; display: block !important; } 
body.home-page .content-header { display: none !important; } 
body.home-page .gallery { display: flex !important; flex-direction: column !important; padding-bottom: 0 !important; width: 100% !important; min-height: 100vh !important; } 
body.home-page .gallery-link { display: block !important; height: 98vh !important; min-height: 98vh !important; max-height: 98vh !important; width: 100% !important; position: relative !important; flex: 0 0 98vh !important; overflow: hidden !important; } 
body.home-page .gallery img { display: block !important; border-radius: 0 !important; height: 100% !important; width: 100% !important; object-fit: cover !important; } 
body.home-page .gallery-overlay { display: block !important; }

/* === ALTRE PAGINE === */
.about-text { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.3; color: var(--text-color); margin-bottom: 60px; }
.hero-quote { display: flex; flex-direction: column; justify-content: center; margin-top: 30px; margin-bottom: 50px; }
.hero-quote p { margin-bottom: 0; }

/* === REGOLE FISARMONICA (FIX RIGA INFERIORE E FOOTER) === */
.events-list { width: 100%; margin-bottom: 60px; border-bottom: none !important; }
.event-item { width: 100%; }
.event-item:last-child { border-bottom: 1px solid #111; }
.event-header { display: grid; grid-template-columns: 140px 2fr 1fr 80px; padding: 20px 0; cursor: pointer; border-top: 1px solid #111; align-items: start; transition: background-color 0.2s ease; }
.event-item:first-child .event-header { border-top: none; padding-top: 0; }
.event-header:hover { background-color: rgba(0,0,0,0.03); }
.e-date { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.e-title { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.2; }
.e-loc { font-family: var(--font-sans); font-size: 0.7rem; text-transform: uppercase; line-height: 1.3; color: #333; }
.event-details { max-height: 0; overflow: hidden; opacity: 0; padding: 0; display: grid; grid-template-columns: 140px 2fr 1fr 80px; transition: 0.5s ease; }
.event-item.open .event-details { 
    max-height: 1500px; 
    opacity: 1; 
    padding: 20px 0 0 0; /* Questo azzera il padding inferiore e fa toccare l'immagine alla riga! */
}
.e-desc { grid-column: 1 / 3; padding-right: 60px; display: flex; flex-direction: column; }
.e-desc p { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.15; margin-bottom: 25px; }
.buy-tickets { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: #111; text-decoration: none; margin-top: auto; margin-bottom: 20px; }
.e-image { grid-column: 3 / 5; display: flex; }
.e-image img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; }

/* === ARTISTS MENU === */
.artist-header { display: grid; grid-template-columns: 2fr 2fr 1fr; padding: 20px 0; cursor: pointer; border-top: 1px solid #111; align-items: center; transition: background-color 0.2s ease; }
.event-item:first-child .artist-header { border-top: none; padding-top: 0; }
.artist-header:hover { background-color: rgba(0,0,0,0.03); }
.a-name { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; }
.a-category { font-family: var(--font-serif); font-size: 1.1rem; }
.a-date { font-family: var(--font-serif); font-size: 1.1rem; text-align: right; }
.a-desc { grid-column: 1 / 3; padding-right: 60px; display: flex; flex-direction: column; }
.a-desc p { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.3; margin-bottom: 20px; }
.a-image { grid-column: 3 / 5; display: flex; }
.a-image img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; }

/* === TEMA BLU PER HUB EVENTS === */
body.hub-page, body.hub-page .main-title, body.hub-page .e-date, body.hub-page .e-title, body.hub-page .e-loc, body.hub-page .e-desc p, body.hub-page .buy-tickets, body.hub-page .events-link, body.hub-page .event-header::after { color: #0000ff; }
body.hub-page .nav-menu a, body.hub-page .nav-menu a:hover, body.hub-page .nav-menu a.active, body.hub-page .hours, body.hub-page .mobile-menu-title { color: #0000ff; }
body.hub-page .event-header { border-color: #0000ff; } 
body.hub-page .event-item:first-child .event-header { border-top: none; }
body.hub-page .event-item:last-child { border-bottom-color: #0000ff; } 
body.hub-page .sidebar { border-right-color: #0000ff; }
body.hub-page .menu-arrow { border-right-color: #0000ff; }
body.hub-page .hamburger-menu span { background-color: #0000ff; }
body.hub-page .buy-tickets:hover, body.hub-page .events-link:hover { color: #0000aa; }
body.hub-page .desktop-logo img, body.hub-page .logo-mobile img { filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(238deg) brightness(104%) contrast(148%); }

/* === FOOTER NERO (Desktop & Mobile) === */
.site-footer { background-color: #000; color: #fff; padding: 25px 40px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.3; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; z-index: 105; margin-top: auto; margin-left: calc(-1 * var(--sidebar-width) - 15px); margin-right: -15px; align-self: stretch; flex-shrink: 0; }
body.home-page .site-footer { margin-left: calc(-1 * var(--sidebar-width)); margin-right: 0; margin-top: 0; }
.footer-logo { width: 140px; display: block; }
.footer-logo img { width: 100%; height: auto; display: block; object-fit: contain; }
.invert-logo { filter: brightness(0) invert(1); }
.footer-col { display: flex; flex-direction: column; }
.footer-col a { color: #fff; text-decoration: none; transition: opacity 0.2s ease; font-weight: 300; display: inline-block; }
.footer-col a:hover { opacity: 0.6; }
body.hub-page .site-footer, body.hub-page .site-footer .footer-col, body.hub-page .site-footer a { color: #fff !important; }
body.hub-page .site-footer .invert-logo { filter: brightness(0) invert(1) !important; }

/* === MOBILE (Smartphone) === */
@media (max-width: 768px) {
    .mobile-header { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: var(--bg-color); z-index: 1002; padding: 0 20px; }
    
    .logo-mobile { 
        width: 180px;      
        height: 80px;      
        display: flex;
        align-items: center; 
        margin-top: 0;
    } 

    .logo-mobile img { 
        width: 100%; 
        height: 100%; 
        display: block; 
        object-fit: contain; 
        object-position: left center; 
    }
    
    .sidebar { transform: translateX(-100%); width: 100%; padding: 90px 20px 30px 20px; transition: 0.3s ease; border-right: none; z-index: 1001; }
    .sidebar.open { transform: translateX(0); }
    .desktop-logo, .menu-arrow, .hours { display: none; }
    .mobile-menu-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; }
    .mobile-menu-title { font-family: var(--font-serif); font-size: 2.8rem; line-height: 1; color: var(--text-color); }
    .nav-menu ul { border-top: none; } 
    .nav-menu li { margin-bottom: 0; border-bottom: 1px solid #111; }
    .nav-menu a { font-family: var(--font-sans); font-weight: 600; font-size: 1.2rem; padding: 15px 0; display: block; }
    body.hub-page .nav-menu li { border-bottom-color: #0000ff; }
    .main-content { margin-left: 0; padding: 100px 15px 0 15px; min-height: 100vh; }
    body.home-page .main-content { padding: 70px 0 0 0 !important; }
    .content-header { flex-direction: column; margin-bottom: 45px; }
    .main-title { font-size: 1.8rem; }
    .events-link { display: none; } 
    .event-header { grid-template-columns: 75px 1fr 20px; gap: 10px; padding: 15px 0; }
    .artist-header { grid-template-columns: 1fr 20px; gap: 10px; padding: 15px 0; align-items: start; } 
    .e-loc { display: none; } 
    .e-date { font-size: 0.75rem; font-weight: 800; line-height: 1.2; } 
    .e-title { font-size: 0.85rem; line-height: 1.15; } 
    .event-header::after, .artist-header::after { content: '+'; font-size: 1.3rem; font-weight: 300; font-family: var(--font-sans); justify-self: end; align-self: center; line-height: 0; }
    .artist-header::after { grid-column: 2 / 3; grid-row: 1 / 3; }
    .event-item.open .event-header::after, .event-item.open .artist-header::after { content: '−'; font-size: 1.6rem; }
    .event-item.open .event-details { display: flex; flex-direction: column; padding: 10px 0 20px 0; }
    .e-desc, .a-desc { display: contents; }
    .e-desc p, .a-desc p { order: 1; padding: 0; margin-bottom: 15px; font-family: var(--font-sans); } 
    .e-image, .a-image { order: 2; width: 100%; margin-bottom: 0; } 
    .e-image img, .a-image img { min-height: auto; border-radius: 0; } 
    .buy-tickets { order: 3; margin: 15px 0 0 0; font-size: 1.1rem; font-weight: 800; } 
    .a-date { display: none; } 
    .a-name { font-size: 0.85rem; grid-column: 1 / 2; line-height: 1.15; } 
    .a-category { font-size: 0.75rem; grid-column: 1 / 2; grid-row: 2; color: #555; margin-top: 3px; }
    .hero-quote { min-height: auto; margin-top: 10px; margin-bottom: 40px; }
    .about-text { font-size: 1.3rem; margin-bottom: 50px; }
    .site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 15px; padding: 40px 20px; margin-left: -15px; margin-right: -15px; margin-top: auto; align-self: stretch; }
    body.home-page .site-footer { margin-left: 0; margin-right: 0; }
    .footer-logo { grid-column: 1 / -1; width: 110px; }
    .footer-col:nth-child(2) { grid-column: 1 / -1; margin-bottom: -10px; }
    .footer-col:last-child { grid-column: 1 / -1; margin-top: 10px; text-wrap: pretty; font-size: 0.82rem; }
    body.home-page .gallery-link { height: 45vh !important; min-height: 45vh !important; max-height: 45vh !important; flex: none !important; } 
    body.home-page .gallery img { height: 100% !important; }
}

/* ========================================================= */
/* === SISTEMA MULTILINGUA MANUALE                       === */
/* ========================================================= */
body:not(.lang-en) .en-only { display: none !important; }
body.lang-en .it-only { display: none !important; }

/* Grandezza del testo contatti su Desktop */
.contact-details-text {
    font-size: 1.2rem;
}

/* Rimpicciolisce il testo contatti solo su Mobile per evitare che vada a capo */
@media (max-width: 768px) {
    .contact-details-text {
        font-size: 0.95rem; 
    }
}

/* BLOCCO EFFETTO VIOLA LINK VISITATI (Per iPhone/Safari) */
a.logo-mobile:visited, a.desktop-logo:visited {
    color: inherit;
    text-decoration: none;
    fill: currentColor;
}