/* /css/style.css */

/* Variabili CSS Globali */
:root {
    --primary-color: #007bff; /* Blu standard, puoi cambiarlo */
    --dark-color: #333;        /* Testo scuro principale */
    --light-color: #f4f4f4;     /* Sfondo chiaro per sezioni alternate o body */
    --nero-bit-blue: #00AEEF;   /* Il tuo blu brand */
    --nero-bit-black: #1a1a1a;  /* Il tuo nero/grigio scuro brand */
    --white-color: #ffffff;
    --header-height-initial: 85px; /* Altezza stimata dell'header non scrollato, ADATTA QUESTO! */
    --header-height-scrolled: 65px; /* Altezza stimata dell'header scrollato, ADATTA QUESTO! */
}

/* Reset Base e Stili Globali */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Per lo scroll alle ancore # */
    font-size: 16px; /* Base per rem */
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    background-color: var(--light-color);
    color: var(--dark-color);
    overflow-x: hidden; /* Previene scroll orizzontale se qualche elemento sfora */
}

/* Stili per i titoli e link globali */
h1, h2, h3, h4, h5, h6 {
    color: var(--nero-bit-black);
    margin-bottom: 0.75em; /* Spazio sotto i titoli */
    line-height: 1.3;
}
h1 { font-size: 2.5rem; } /* Adatta le dimensioni come preferisci */
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }

a {
    color: var(--nero-bit-blue);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: #007bbd; /* Un blu leggermente più scuro per l'hover */
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Rimuove spazio extra sotto le immagini inline */
}

/* Classe per il contenuto principale che necessita di padding per l'header fisso */
.content-under-fixed-header {
    padding-top: var(--header-height-initial); /* Usa la variabile per l'altezza header */
}

/* Container principale per centrare il contenuto delle sezioni */
.container {
    width: 100%; /* Occupa tutta la larghezza disponibile fino al max-width */
    max-width: 1100px; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; 
    padding-right: 15px;
}

.cta-button:hover {
    background: #008ecc;
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.cta-button {
    display: inline-block;
    background: var(--nero-bit-blue);
    color: var(--white-color) !important;
    padding: 12px 28px;
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* =============================================== */
/* STILI HEADER UNICO (da header_content.php)      */
/* =============================================== */
header.site-header {
    background: var(--white-color);
    border-bottom: 3px solid var(--nero-bit-blue);
    padding: 1rem 0; /* Padding verticale iniziale */
    transition: padding 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header.site-header.header-scrolled {
    padding: 0.5rem 0; /* Padding ridotto quando scrollato */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Ombra leggermente diversa se vuoi */
}

header.site-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px; /* O usa .container per la larghezza */
    margin: auto;
    padding: 0 20px; /* Padding laterale per la nav */
}

header.site-header .logo {
    display: flex;
    align-items: center;
    text-decoration: none; /* Se il logo è un link */
}

header.site-header .logo #logo-img { /* ID del logo principale */
    height: 50px; /* Altezza iniziale logo */
    width: auto;
    margin-right: 10px;
    transition: height 0.3s ease-in-out;
}
header.site-header.header-scrolled .logo #logo-img {
    height: 35px; /* Altezza ridotta logo */
}

header.site-header .logo span { /* Testo accanto al logo, es. "NeroBit - Area X" */
    font-size: 1.3rem; /* Adatta */
    font-weight: bold;
    color: var(--nero-bit-black);
}
header.site-header .logo span span { /* Per la parte "Bit" colorata */
    color: var(--nero-bit-blue);
}


/* Menu Desktop (classe usata in header_content.php) */
header.site-header nav ul.desktop-nav {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0; padding: 0; /* Resetta per ul */
}
header.site-header nav ul.desktop-nav li {
    margin-left: 25px; /* Spazio tra voci menu */
}
header.site-header nav ul.desktop-nav li a {
    color: var(--nero-bit-black);
    font-weight: 500; /* O bold se preferisci */
    padding-bottom: 5px; /* Spazio per il bordo sotto */
    border-bottom: 2px solid transparent; /* Bordo invisibile per 'active' */
    text-decoration: none;
}
header.site-header nav ul.desktop-nav li a:hover,
header.site-header nav ul.desktop-nav li a.active { /* La classe 'active' sarà gestita da PHP/JS */
    color: var(--nero-bit-blue);
    border-bottom-color: var(--nero-bit-blue);
}


/* Hamburger Menu (classe e ID usati in header_content.php) */
header.site-header nav .hamburger { /* Nascondi di default su desktop */
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Sopra il menu se si sovrappone */
}
header.site-header nav .hamburger .hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--nero-bit-black);
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Animazione Hamburger -> X (quando .hamburger ha anche classe .is-active) */
header.site-header nav .hamburger.is-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--white-color);
}
header.site-header nav .hamburger.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}
header.site-header nav .hamburger.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--white-color);
}

/* Menu Mobile (classe e ID usati in header_content.php) */
header.site-header nav ul.mobile-nav {
    display: none; /* Nascosto di default, mostrato da JS con classe .active o .open */
    list-style: none;
    padding: 0;
    margin: 0;
    position: fixed; /* O absolute rispetto all'header */
    top: 0; /* O altezza header se non copre tutto lo schermo */
    left: 0;
    width: 100%;
    height: 100vh; /* Occupa tutto lo schermo */
    background-color: rgba(26, 26, 26, 0.98); /* Sfondo scuro semi-trasparente */
    padding-top: var(--header-height-initial); /* Spazio per l'header se il menu non è sopra */
    z-index: 999; /* Sotto l'header ma sopra il contenuto */
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra le voci verticalmente */
}
header.site-header nav ul.mobile-nav.active { /* La classe aggiunta da JS per aprire */
    display: flex; 
}
header.site-header nav ul.mobile-nav li {
    margin: 15px 0;
    width: 100%;
    text-align: center;
}
header.site-header nav ul.mobile-nav li a {
    color: var(--white-color);
    font-size: 1.5rem; /* Testo più grande per mobile nav */
    padding: 10px 0;
    display: block;
    text-decoration: none;
}
header.site-header nav ul.mobile-nav li a:hover,
header.site-header nav ul.mobile-nav li a.active {
    color: var(--nero-bit-blue);
}


/* Media Query per mostrare/nascondere menu desktop/mobile */
@media (max-width: 768px) { /* O il tuo breakpoint preferito */
    header.site-header nav ul.desktop-nav {
        display: none;
    }
    header.site-header nav .hamburger { /* ID come #hamburger-button-global */
        display: block; /* O flex, a seconda del posizionamento */
    }
}
@media (min-width: 769px) {
    header.site-header nav ul.mobile-nav { /* ID come #mobile-nav-list-global */
        display: none !important; /* Assicura che sia nascosto su desktop */
    }
}

/* =============================================== */
/* STILI FOOTER UNICO (da footer_content.php)      */
/* =============================================== */
footer.site-footer { /* Aggiungi questa classe al tag <footer> in footer_content.php */
    background: var(--nero-bit-black);
    color: #aaa;
    text-align: center;
    padding: 30px 20px;
    font-size: 0.9rem;
    margin-top: 40px; /* Spazio sopra il footer */
}
footer.site-footer p {
    margin: 5px 0;
}
footer.site-footer a {
    color: var(--nero-bit-blue);
}
footer.site-footer a:hover {
    color: var(--white-color);
}