@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');

html {
  /* Imposta il colore del 'pollice' (scrollbar-color) e della 'traccia' (scrollbar-track) X FIREFOX */
  scrollbar-color: white #FEFEFE; /* thumb color track-color */
  /* Imposta la larghezza: auto, thin o none */
  scrollbar-width: thin; 
}

@font-face {
    font-family: 'PPFraktionSans-Regular'; /* <--- Questo è il nome che userai nel tuo CSS */
    src: url('../fonts/PPFraktionSans-Regular.woff2') format('woff2'),
         url('../fonts/PPFraktionSans-Regular.woff') format('woff'),
         url('../fonts/PPFraktionSans-Regular.ttf') format('truetype'); /* Aggiungi anche gli altri formati per compatibilità */
    font-weight: normal; /* O il peso specifico (e.g., 400, 700) */
    font-style: normal;
    font-display: swap; /* Molto importante per le prestazioni */
}

/* Selettori per Chrome, Safari, Edge (basati su Chromium/WebKit) */

/* 1. L'intera barra di scorrimento */
::-webkit-scrollbar {
  width: 10px; /* Larghezza della scrollbar verticale */
  height: 10px; /* Altezza della scrollbar orizzontale */
}

/* 2. La traccia (la 'pista' in cui scorre il pollice) */
::-webkit-scrollbar-track {
  background: #ffffff; /* Un grigio molto chiaro o bianco sporco */
}

/* 3. Il 'pollice' (il pezzo che si muove) */
::-webkit-scrollbar-thumb {
  background: white; /* **Colore principale: Bianco** */
  border: 1px solid #ccc; /* Aggiungi un leggero bordo se vuoi distinguerlo dalla traccia */
  border-radius: 5px; /* Angoli arrotondati, opzionale */
}

/* Opzionale: stile al passaggio del mouse */
::-webkit-scrollbar-thumb:hover {
  background: #e0e0e0; /* Un bianco/grigio leggermente diverso al passaggio del mouse */
}

/* --- 0. RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
#main-header img {
    max-width: 100%;
    height: auto;
}
*/

/* Base: Mantiene lo smooth scroll sul body per il mobile */
body {
    font-family: PPFraktionSans-Regular, Inter, Arial, sans-serif;
    background-color: white;
    color: black;
    overflow-x: hidden; 
    scroll-behavior: smooth; 
}

a {
    color: black;
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: #555;
}

/* --- 1. SEZIONI (Contenuti) --- */
.page-section {
    padding: 80px 20px 20px; /* Spazio per l'header fisso */
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    text-align: center;
}

.page-content-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.text-block {
    margin-bottom: 20px;
}

.hero-logo {
    width: 215px; 
    height: 330px; 
    /*object-fit: contain;*/
 /*   margin: 20px auto;*/

	position: absolute; 
    left: 50%;
    transform: translateX(-50%);
	max-width: 60%;	
}

/* --- 2. HEADER MOBILE (Mobile First) --- */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 15px;
    border-top: 1px solid black; 
    border-bottom: 1px solid black;
}

.logo-orizzontale-mobile {
    /* Su mobile lo posizioniamo in modo assoluto/fisso per centrarlo*/
    position: absolute; 
    left: 50%;
    top: 50%; /* Centra verticalmente */
/*    transform: translateX(-50%);*/
    transform: translate(-50%, -50%); /* Centra sia orizzontalmente che verticalmente */
    z-index: 1001; /* Assicurati che sia sopra altri elementi, ma sotto la nav aperta */
}


.menu-mobile-icon {
    font-size: 30px;
    cursor: pointer;
    order: 1; 
	flex-shrink: 0;
	margin-left: auto;
	color:#cccccc;
}

.main-logo {
    height: 40px; 
    width: auto;
    order: 2; 
}

/* Navigazione Mobile: compressa a sinistra */
.main-nav {
    /* Per il mobile, la nav è display:none di default e diventa flex. 
       Su desktop sarà sempre flex. */
    display: none; 
    position: fixed;
    top: 60px; 
    right: 0;
    width: 200px;
    height: 100vh;
    background-color: white;
    flex-direction: column;
    padding: 20px 10px;
    transform: translateX(100%); 
    transition: transform 0.3s ease-in-out;
    z-index: 999;
}

.main-nav.open {
    transform: translateX(0); 
    display: flex; /* La mostriamo solo se ha la classe 'open' */
}

.main-nav a {
    padding: 10px 0;
    display: block;
    border-bottom: 1px dotted #ccc;
}

.nav-links-left, .nav-links-right {
    display: flex;
    flex-direction: column;
}

.ig-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    border: none;
}

.ig-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: black; 
    border-radius: 4px;
}


/* --- 3. COLONNE FISSE (Mobile Only Home) --- */

.fixed-column {
    display: none; /* Nascoste di default (Mobile First) */
    position: fixed;
    top: 60px; 
    bottom: 0;
    width: 215px; 
    padding-bottom: 20px;
    z-index: 500;
    background-color: white; 
}
.left-column {
    left: 0;
}
.right-column {
    right: 0;
}

.homepage .fixed-column {
    display: block; /* Visibili solo nella Homepage mobile */
}

.rotated-text {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.homepage {
/*
    padding-left: 235px; 
    padding-right: 235px; 
*/
}

/* --- 4. MEDIA QUERY: DESKTOP & TABLET VERTICALE (>= 768px) --- */

@media (min-width: 768px) {
    
    /* 1. LAYOUT FISSO E CENTRATO DESKTOP */
    body {
        /* Blocca lo scorrimento del body, #content-wrapper scorre */
        overflow: hidden; 
        max-width: 1400px; /* Larghezza massima Fissa */
        margin: 0 auto; /* Centra il body */

	.main-nav .logo-link .logo-desktop { /* Percorso più specifico per il logo desktop */
        height: 50px; /* Imposta l'altezza desiderata per il logo verticale desktop */
        width: auto;
        max-width: none; /* Annulla qualsiasi max-width generico che potrebbe averlo ingrandito */
    } 
   }

    /* 2. CONTENITORE SCORREVOLE (Contenuto centrale) */
    #content-wrapper {
        position: absolute;
        top: 60px; /* Sotto l'header */
        bottom: 0;
        left: 215px; /* Spazio per colonna sinistra */
        right: 215px; /* Spazio per colonna destra */
        width: auto; 
        overflow-y: scroll; /* Abilita lo scorrimento */
        scroll-behavior: smooth; /* SCORRIMENTO AMMORTIZZATO SUL CONTENUTO */
    }

    /* 3. COLONNE FISSE (Visibili su tutte le pagine desktop) */
    .fixed-column {
        display: block; /* SONO SEMPRE VISIBILI (CORREZIONE) */
        top: 60px; 
        bottom: 0;
        height: auto;
        padding-bottom: 20px;
        /* Assicuriamo che la posizione sia relativa al body centrato */
        position: fixed; 
    }

	.hero-logo-mobile {
		display: none; /* Nasconde il logo verticale su mobile*/
	}

    
    .homepage {
    padding-left: 235px; 
    padding-right: 235px; 
        /*padding: 20px; */ /* Rimuovi il padding extra per il desktop */
    }

    /* 4. MENU DESKTOP CENTRATO */
    #main-header {
        justify-content: center; /* Centra l'intera barra */
        padding: 0 20px;
    }

    .menu-mobile-icon {
        display: none; /* Nascondi l'hamburger (CORREZIONE) */
    }

    /* 5. LOGO ORIZZONTALE NASCOSTO */
	.logo-mobile {
		display: none; /* Nasconde il logo orizzontale su desktop*/
	}

    /* La NAV in desktop deve essere visibile e in riga */
    .main-nav {
        display: flex; /* MOSTRA IL MENU DESKTOP (CORREZIONE) */
        position: static; 
        transform: translateX(0); 
        flex-direction: row;
        width: auto;
        height: auto;
        padding: 0;
        align-items: center;
        flex-grow: 0; 
    }
	
	.main-nav .logo-link .logo-desktop { /* Percorso più specifico per il logo desktop */
        height: 50px; /* Imposta l'altezza desiderata per il logo verticale desktop */
        width: auto;
        max-width: none; /* Annulla qualsiasi max-width generico che potrebbe averlo ingrandito */
    }

    .main-logo {
        height: 50px; 
        margin: 0 40px; 
        order: unset; 
    }

    .nav-links-left {
        display: flex;
        flex-direction: row;
        margin-right: 40px; 
        order: unset;
    }
    
    .nav-links-right {
        display: flex;
        flex-direction: row;
        margin-left: 40px; 
        order: unset;
    }
    
    .main-nav a {
        padding: 0 10px;
        border-bottom: none;
        font-weight: bold;
    }
	
/* AGGIUNTE PER FOTO BIO DESKTOP */

/* Nasconde l'immagine mobile su desktop */
.bio-image-mobile {
    display: none !important;
}

/* Mostra e flotta l'immagine desktop */
.bio-image-desktop {
    display: block !important;
    float: right; /* Allineamento a destra */
    width: 250px; /* Larghezza fissa su desktop (Regola se preferisci 250px) */
    margin-left: 20px; /* Spazio a sinistra dell'immagine (tra immagine e testo) */
    margin-bottom: 10px; /* Spazio sotto l'immagine */
}

/* Forza il testo successivo a riprendere correttamente (clearfix sul paragrafo) */
.text-block p:first-child::after {
    content: "";
    display: table;
    clear: both;
}

/* ... il resto del codice nel blocco @media (min-width: 768px) ... */	
	
}

/* --- STILI FOTO BIO (AGGIUNTI PER RICHIESTA USER) --- */

/* Stile comune per le immagini */
.bio-image-mobile, .bio-image-desktop {
    width: auto;
    height: auto;
    border-radius: 4px; /* Un leggero arrotondamento, opzionale */
    object-fit: cover;
}

/* 1. Logica Mobile (Default) */
.bio-image-mobile {
    display: block; /* Mostra l'immagine mobile */
    width: 100%; /* Piena larghezza */
    margin-bottom: 30px; /* Spazio tra foto e testo */
}

/* L'immagine desktop è nascosta su mobile (default) */
.bio-image-desktop {
    display: none;
}

@media (max-width: 768px) {
  /* Stili CSS per schermi larghi fino a 768 pixel (tipicamente smartphone) */
    /* LOGO VERTICALE NASCOSTO SU MOBILE */
	.logo-desktop {
		display: none; /* Nasconde il logo verticale su mobile*/
	}
	.hero-logo {
		display: none; /* Nasconde il logo verticale su mobile*/
	}
	.nav-links-center {
/*		width:285px;*/
/*		margin:auto;*/
	}
	.main-nav {
		text-align:right;
	}


/* Forza la sezione a occupare tutta la larghezza e centrare il contenuto */
/* Stile Sezione FW26 */

}

/* Stile base dell'elemento nascosto */
#scroll-element {
    /* Rendi l'elemento invisibile e gestisci la transizione */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Altri stili di posizionamento/aspetto... */
	/*left: 270px;*/
	width:120px;
	height: 40px;
	/*margin:auto;*/
    /*transform: translateX(-50%);*/
}

/* Stile dell'elemento visibile (verrà aggiunto da JavaScript) */
#scroll-element.visible {
    opacity: 1;
    visibility: visible;
/*	position: fixed;
	z-index: 1000;
	left: 270px;
	width:120px;
	margin:auto;
*/
}

}




/* Forza l'allineamento a sinistra su ogni risoluzione per questa sezione */
#fw26.page-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Allinea il contenuto a sinistra */
    justify-content: center !important;
    text-align: left !important;        /* Forza il testo a sinistra */
    padding-left: 15% !important;       /* Crea rientro simile alla BIO desktop */
}

/* Contenitore interno */
.fw26-content {
    width: 100% !important;
    max-width: 600px !important;
    text-align: left !important;
}

/* Stili specifici per i testi */
.fw26-header h3, 
.fw26-header p, 
.fw26-event h4, 
.fw26-event p {
    text-align: left !important;
    margin-left: 0 !important;
}

.fw26-event {
    margin-bottom: 25px;
}

/* Regolazione per Mobile */
@media (max-width: 768px) {
    #fw26.page-section {
        padding-left: 20px !important; /* Meno spazio sui bordi su smartphone */
        padding-right: 20px !important;
        align-items: flex-start !important;
    }
    
    .fw26-content {
        padding-left: 0 !important;
    }
}