/* ==========================================================================
   MARCO TONINATO • SOUND ENGINEER • STILE MODERNO DARK (MONOCROMATICO BIANCO)
   Font Unificato: Raleway | 100% Compatibile con tutte le pagine
   ========================================================================== */

/* --- 1. IMPORT FONT RALEWAY (Completo di tutti gli spessori) --- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');

/* --- 2. VARIABILI GLOBALI COLORI E MISURE --- */
:root {
    --bg-body: #0d0d10;         /* Sfondo generale scuro profondo */
    --bg-sidebar: #141418;      /* Sfondo barra laterale */
    --bg-content: #17171c;      /* Sfondo schede dei lavori e articoli */
    --text-main: #ffffff;       /* Tutto bianco puro */
    --text-muted: #a1a1aa;      /* Grigio chiaro solo per voci non attive */
    --border: #22222a;          /* Bordi sottili moderni */
    --sidebar-width: 280px;     /* Larghezza della barra laterale su PC */
    --font-family: 'Raleway', Arial, sans-serif; /* FONT UNICO GLOBALE */
    --accent: #ffffff;          /* TUTTO BIANCO */
}

/* --- 3. REGOLE BASE GLOBALI --- */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-family) !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-family: var(--font-family) !important;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

/* Uccisione dei vecchi clearfix che creavano riquadri vuoti */
.clearfix::before, .clearfix::after {
    display: none !important;
}

/* ==========================================================================
   4. SIDEBAR / HEADER FISSO A SINISTRA (DESKTOP)
   ========================================================================== */
@media (min-width: 1100px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-width);
        height: 100vh;
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border);
        padding: 30px 35px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        z-index: 9999;
    }

    /* Logo / Nome in cima alla barra */
    header .logo {
        margin-bottom: 50px;
    }

    header .logo h1 {
        font-size: 3.3rem !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        margin-bottom: 8px !important;
        letter-spacing: -1px;
    }

    header .logo h3 {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #ffffff !important;
        opacity: 0.85;
        text-transform: uppercase;
        letter-spacing: 2px !important;
        margin: 0;
    }

    #menu_icon, .close_menu {
        display: none;
    }
}

/* ==========================================================================
   5. MENU NAVIGAZIONE E LOGHI ARTISTA
   ========================================================================== */

/* Lista delle pagine (About, Portfolio, Electronic Works...) */
header nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

header nav ul li {
    margin-bottom: 10px !important;
}

header nav ul li a {
    font-family: var(--font-family) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #a1a1aa !important;
    display: inline-block !important;
    letter-spacing: -0.2px;
}

header nav ul li a:hover,
header nav ul li a.selected {
    color: #ffffff !important;
    transform: translateX(6px) !important;
}

/* Titolo della sezione progetti ('Music and visual Projects:') */
.nav-section {
    font-family: var(--font-family) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    margin: 55px 0 20px 0 !important;
}

/* Lista dei loghi SVG */
.brand-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.brand-list li {
    margin-bottom: 16px !important;
}

.brand-logo-link {
    display: inline-block !important;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.brand-logo-link:hover {
    opacity: 1 !important;
    transform: translateX(6px) !important;
}

/* UNICA REGOLA PER LA DIMENSIONE DEI LOGHI SVG */
.brand-logo-link img {
    width: 190px !important;
    height: auto !important;
    display: block !important;
}

/* Rende gli altri 3 loghi BIANCO PURO, lasciando Bacteria intatto con il suo nero */
.brand-logo-link img:not([src*="bacteria"]) {
    filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   6. CONTENITORE PRINCIPALE (.main) E GRIGLIA PORTFOLIO
   ========================================================================== */
.main {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    padding: 30px;
    background: var(--bg-body);
}

/* Griglia per le pagine Portfolio ed Electronic Works */
.main:has(.work) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* Se in cima c'è un banner (come in electronic.html), copre tutte e 3 le colonne */
.main:has(.work) > section[class^="top"],
.main:has(.work) > .top {
    grid-column: 1 / -1 !important;
    margin-bottom: 15px;
}

/* Schede dei progetti (.work) */
.main .work {
    position: relative;
    border-radius: 0px !important;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--bg-content);
    border: 1px solid var(--border);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.main .work:hover {
    transform: translateY(-4px);
    border-color: #383844;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.main .work .media {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.45s ease;
    object-position: center center;
}

.main .work:hover .media {
    transform: scale(1.06);
}

/* Didascalia del progetto al passaggio del mouse */
.main .work .caption {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main .work:hover .caption {
    opacity: 1;
}

.main .work .caption h1 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    border: none;
    background: transparent;
}

/* ==========================================================================
   7. PAGINE INTERNE DEI SINGOLI LAVORI (Sonar, rrudere, Equipment...)
   ========================================================================== */
.content {
    background: var(--bg-content);
    color: var(--text-main);
    padding: 45px;
    border-radius: 0px !important;
    border: 1px solid var(--border);
    border-top: none;
    margin: 0 auto 50px auto;
}

.content p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

.content p b {
    color: #ffffff;
}

.content a {
    color: #ffffff;
    text-decoration: underline;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 0px !important;
    margin: 15px 0;
    border: 1px solid var(--border);
}

.content iframe {
    max-width: 100%;
    border-radius: 0px !important;
    margin: 20px 0;
    border: 1px solid var(--border);
}

/* Banner di testata delle pagine interne (top, top1... top19) */
.top, .top1, .top2, .top3, .top4, .top5, .top6, .top7, .top8, .top9,
.top10, .top11, .top12, .top13, .top14, .top15, .top16, .top17, .top18, .top19 {
    width: 100%;
    height: 340px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 0px !important;
    border: 1px solid var(--border);
    border-bottom: none;
}

/* Titolo sfumato sopra il banner */
.top .title, .top1 .title, .top2 .title, .top3 .title, .top4 .title, .top5 .title,
.top6 .title, .top7 .title, .top8 .title, .top9 .title, .top10 .title, .top11 .title,
.top12 .title, .top13 .title, .top14 .title, .top15 .title, .top16 .title, .top17 .title,
.top18 .title, .top19 .title {
    width: 100%;
    background: linear-gradient(to top, rgba(13,13,16,0.95) 0%, transparent 100%);
    color: #ffffff;
    padding: 25px 35px;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0;
}

/* Freccette di navigazione (Previous, Grid, Next) */
.work_nav {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 10;
}

.work_nav ul.btn {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    position: relative;
}

.work_nav ul.btn li {
    position: relative;
}

.tooltip {
    display: none !important;
}

.work_nav a {
    display: block;
    width: 38px;
    height: 38px;
    background: #0d0d10 url('../img/p_navigation.png') no-repeat;
    border-radius: 0px !important;
    border: 1px solid var(--border);
}

.work_nav a.previous { background-position: 0 0; }
.work_nav a.grid     { background-position: -41px 0; }
.work_nav a.next     { background-position: -82px 0; }

/* Tutte le immagini di sfondo dei banner preservate */
.top   { background-image: url('../img/ssl4000e1.jpg'); }
.top1  { background-image: url('../img/coverfico.jpg'); }
.top2  { background-image: url('../img/work2.jpg'); }
.top3  { background-image: url('../img/invaders.png'); }
.top4  { background-image: url('../img/work4.jpg'); }
.top5  { background-image: url('../img/saebanner.png'); }
.top6  { background-image: url('../img/igt.png'); }
.top7  { background-image: url('../img/pand.png'); }
.top8  { background-image: url('../img/deabanner.png'); }
.top9  { background-image: url('../img/macabannerr.png'); }
.top10 { background-image: url('../img/visionebanner.jpg'); }
.top11 { background-image: url('../img/elec.png'); }
.top12 { background-image: url('../img/tegb.png'); }
.top13 { background-image: url('../img/biennaleb.jpeg'); }
.top14 { background-image: url('../img/steffanob.png'); }
.top15 { background-image: url('../img/av1.png'); }
.top16 { background-image: url('../img/equip.png'); }
.top17 { background-image: url('../img/struggleb.png'); }
.top18 { background-image: url('../img/sonar.png'); }
.top19 { background-image: url('../img/rrudereban.png'); }

/* ==========================================================================
   8. RESPONSIVE DESIGN (SMARTPHONE E TABLET - PRO FLUID)
   ========================================================================== */
@media (max-width: 1099px) {
    header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: auto !important;
        min-height: 85px;
        padding: 16px 24px !important;
        background: var(--bg-sidebar) !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        z-index: 99999;
    }

    /* NOME PIÙ GRANDE E AUTOREVOLE ANCHE SU MOBILE */
    header .logo {
        margin: 0 !important;
    }

    header .logo h1 {
        font-size: 2.1rem !important;      /* Ingrandito: bello presente anche su smartphone */
        line-height: 1.05 !important;
        margin-bottom: 4px !important;
    }

    header .logo h3 {
        font-size: 0.8rem !important;      /* Più leggibile */
        letter-spacing: 1.5px !important;
        color: var(--text-muted);
    }

    /* TASTO MENU A PROVA DI SUBNORMALE: [ ≡ MENU ] CHE DIVENTA [ ✕ CLOSE ] */
    /* TASTO MENU / CLOSE PIÙ GRANDE, VISIBILE E COMODO PER IL POLLICE */
    #menu_icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;              /* Più spazio tra icona e testo */
        background: #1a1a22 !important;
        border: 1px solid #3d3d4d !important;
        border-radius: 0px !important;
        width: auto !important;
        height: 44px !important;           /* Box più alto: standard touch perfetto */
        padding: 0 18px !important;        /* Box più largo */
        cursor: pointer;
        color: #ffffff !important;
        font-family: var(--font-family) !important;
        font-size: 0.98rem !important;     /* TESTO 'MENU' PIÙ GRANDE E CHIARO */
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        flex-shrink: 0;
        margin: 0 !important;
        line-height: 1 !important;
        transition: all 0.2s ease;
    }

    #menu_icon:hover {
        background: #252530 !important;
        border-color: #ffffff !important;
    }

    /* LE 3 RIGHETTE PIÙ GRANDI, SPESSE E CENTRATE */
    #menu_icon::before {
        content: "" !important;
        display: inline-block !important;
        width: 18px !important;            /* Più larghe (da 14px a 18px) */
        height: 2.5px !important;          /* Più spesse e definite */
        background: #ffffff !important;
        /* Ombre calibrate sulle nuove dimensioni */
        box-shadow: 0 -6px 0 0 #ffffff, 0 6px 0 0 #ffffff !important;
        margin: 0 !important;
        transform: translateY(-1px) !important;
    }

    #menu_icon::after {
        content: "MENU" !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* STATO CLOSE: LA X PIÙ GRANDE E NETTA */
    #menu_icon.close_menu {
        background: #2a2a36 !important;
        border-color: #ffffff !important;
    }

    #menu_icon.close_menu::before {
        content: "✕" !important;
        background: none !important;
        box-shadow: none !important;
        font-size: 1.15rem !important;     /* X più grande e visibile */
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
        transform: translateY(0px) !important;
    }

    #menu_icon.close_menu::after {
        content: "CLOSE" !important;
        line-height: 1 !important;
    }

    /* IL CASSETTO DEL MENU A TENDINA */
    header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        background: #111115 !important;
        border-bottom: 2px solid var(--border);
        padding: 30px 28px !important;
        box-shadow: 0 25px 50px rgba(0,0,0,0.9);
        box-sizing: border-box !important;
    }

    header nav.menu-open {
        display: block !important;
    }

    /* VOCI DEL MENU FLUIDE: SI ADATTANO ALLA LARGHEZZA DELLO SMARTPHONE */
    header nav ul li {
        margin-bottom: 16px !important;
    }

    header nav ul li a {
        font-size: clamp(1.25rem, 5vw, 1.6rem) !important; /* Scalabile da 1.25rem a 1.6rem */
        color: #f0f0f4 !important;
        display: block !important;
        padding: 4px 0;
    }

    .nav-section {
        margin: 40px 0 18px 0 !important;
        font-size: clamp(1.2rem, 4.5vw, 1.45rem) !important;
    }

    /* Loghi proporzionati su smartphone */
    .brand-list li {
        margin-bottom: 20px !important;
    }

    .brand-logo-link img {
        width: clamp(160px, 50vw, 210px) !important; /* Scalabili in base allo schermo */
    }

    /* Contenuto principale staccato dalla barra in alto */
    .main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 110px 20px 40px 20px !important;
    }

    .main:has(.work) {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonne su tablet */
        gap: 15px !important;
    }
}

@media (max-width: 650px) {
    .main:has(.work) {
        grid-template-columns: 1fr !important; /* 1 colonna perfetta su smartphone */
    }

    .content {
        padding: 30px 20px !important;
    }
}

/* ==========================================================================
   9. STACCA LOGO BROKENGLITCH
   ========================================================================== */

/* Stacca l'ultimo logo (Broken Glitch) dagli altri sopra */
.brand-list li:last-child {
    margin-top: 40px !important; /* Regola questo numero: es. 30px, 40px o 50px */
}