/* ==========================================================================
   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)
   ========================================================================== */
@media (max-width: 1099px) {
    header {
        position: relative;
        width: 100%;
        height: auto;
        padding: 20px 25px;
        background: var(--bg-sidebar);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
    }

    #menu_icon {
        display: block;
        width: 32px;
        height: 32px;
        background: url('../img/men_icons.png') no-repeat 0 0;
        cursor: pointer;
    }

    header nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg-sidebar);
        border-bottom: 1px solid var(--border);
    }

    header nav ul {
        display: none;
        list-style: none;
        padding: 15px 25px;
        margin: 0;
    }

    header nav ul li a {
        display: block;
        padding: 12px 0;
        color: var(--text-main);
        border-bottom: 1px solid var(--border);
    }

    .main {
        margin-left: 0;
        width: 100%;
        padding: 20px;
    }

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

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

    .content {
        padding: 25px;
    }
}

/* Contenitore responsive per incorporare i post/reel di Instagram senza sformare la pagina */
.instagram-embed-wrapper {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    width: 100%;
}

.instagram-embed-wrapper .instagram-media {
    max-width: 100% !important;
    width: 100% !important;
    min-width: unset !important;
    border-radius: 0px !important; /* Mantiene lo stile squadrato del tuo sito */
    box-shadow: none !important;
    background: var(--bg-content) !important;
}

/* 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 */
}