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


/* =============================================== */
/* 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);
}
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);
}

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


/* =============================================== */
/* STILI SPECIFICI PER INDEX.PHP (PUBBLICO)        */
/* =============================================== */

/* Hero Section */
#hero {
    min-height: 70vh; 
    color: var(--white-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--nero-bit-black);
    background-image: 
        linear-gradient(rgba(26, 26, 26, 0.65), rgba(26, 26, 26, 0.75)),
        url('/images/hero-abstract-tech.avif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; 
}
#hero h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: var(--white-color); /* Sovrascrive h1 generale se necessario */
}
#hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin: 1em auto 2em auto; /* Adattato */
}

#servizi, 
#chi-siamo, 
#contatti { /* Aggiunto #chi-siamo e #contatti qui */
    background-color: var(--white-color);
}
/* Bottone Call to Action (Generico, può essere usato ovunque) */
.cta-button {
    display: inline-block;
    background: var(--nero-bit-blue);
    color: var(--white-color) !important; /* Importante per sovrascrivere colore link generico */
    padding: 12px 28px; /* Leggermente più padding */
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Rimuove underline se è un <a> */
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.cta-button:hover {
    background: #008ecc; /* Più scuro */
    transform: translateY(-2px); /* Leggero sollevamento */
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Sezioni Generiche in index.php */
section {
    padding: 60px 0; /* Aumenta un po' il padding verticale */
    /* text-align: center; Non più globale, gestito da .container o localmente */
}
section h2 { /* Titoli di sezione */
    text-align: center; /* Centra i titoli di sezione */
    font-size: 2.2rem; /* Leggermente più grandi */
    margin-bottom: 40px; /* Più spazio sotto */
    text-transform: uppercase;
    position: relative;
    display: block; /* Non più inline-block per centrare la linea sotto */
}
section h2::after { /* Linea decorativa */
    content: '';
    display: block;
    width: 70px; /* Leggermente più lunga */
    height: 4px; /* Leggermente più spessa */
    background: var(--nero-bit-blue);
    margin: 15px auto 0; /* Più spazio e centrata */
}

/* Servizi Section */
#servizi {
    background-color: var(--white-color);
}
.servizi-container {
    display: flex;
    justify-content: space-between; /* O space-around */
    flex-wrap: wrap;
    gap: 25px; /* Spazio tra i box dei servizi */
    max-width:1100px;
    margin: 0 auto;
    /* Se non usi .container per la section, aggiungi max-width e margin:auto qui */
}
.servizio-item {
    background: var(--light-color);
    padding: 30px 25px; /* Più padding */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    /* flex-basis: calc(33.333% - 20px); /* Esempio per 3 colonne con gap */
    /* Per 3 colonne: */
    width: calc((100% / 3) - (2 * 25px / 3)); /* (100% / num_colonne) - (gap * (num_colonne-1) / num_colonne) */
    min-width: 280px; /* O rimuovi flex-basis e usa questo per il wrapping */
    text-align: center; /* Centra icona e titolo */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.servizio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
.servizio-item .servizio-icon {
    width: 60px;
    height: 60px; /* Stessa altezza per uniformità se le icone variano */
    margin: 0 auto 20px auto; /* Centra e dà spazio */
}
.servizio-item h3 {
    font-size: 1.4rem;
    color: var(--nero-bit-blue);
    margin-bottom: 10px;
}
.servizio-item p {
    font-size: 0.95em;
    color: #555;
    text-align: left; /* O center se preferisci */
}


/* Punti di Forza Section */
#punti-forza {
    background-color: var(--light-color);
}
#punti-forza ul {
    list-style: none;
    padding: 0;
    max-width: 700px; /* Leggermente più largo */
    margin: 0 auto;
    text-align: left;
}
#punti-forza ul li {
    padding: 12px 0; /* Più padding */
    font-size: 1.1rem;
    border-bottom: 1px solid #ddd; /* Bordo più visibile */
}
#punti-forza ul li:last-child { border-bottom: none; }
#punti-forza ul li strong {
    color: var(--nero-bit-black);
    min-width: 120px; /* Allinea leggermente le etichette */
    display: inline-block;
}

/* Chi Siamo Section */
#chi-siamo {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9)), /* Opzionale: Overlay scuro semi-trasparente */
        url('/images/sfondo_mappa.jpg'); /* Sostituisci con il nome della tua immagine */
    background-size: cover; /* Copre l'intera area */
    background-position: center center; /* Centra l'immagine */
    background-attachment: fixed; /* Effetto parallax se lo desideri, altrimenti ometti o usa 'scroll' */
    padding: 60px 0; /* Mantieni o adatta il padding verticale */
    /* Se l'overlay scuro rende il titolo <h2> poco leggibile, potresti doverlo schiarire */
}
#chi-siamo p {
    max-width: 800px; /* Più largo per più testo */
    margin: 18px auto;
    line-height: 1.7; /* Leggermente pi interlinea */
    text-align: left; /* O center, a seconda del tuo stile */
}

/* Contatti Section */
#contatti {
    background-color: var(--light-color);
}

#contatti p {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#contact-form { /* Stili per il form di contatto (se non usi classi globali per i form) */
    max-width: 650px;
    margin: 20px auto;
    padding: 25px 30px; /* Più padding */
    background: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    text-align: left;
}
#contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Peso medio */
    color: #495057;
    font-size: 0.9em;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form select,
#contact-form textarea {
    width: 100%; /* Usa 100% e box-sizing: border-box; (già nel reset) */
    padding: 10px 12px;
    margin-bottom: 18px; /* Più spazio sotto */
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
#contact-form textarea { resize: vertical; }
#contact-form button[type="submit"].cta-button { /* Specifica se usi cta-button */
    width: 100%;
    margin-top: 10px;
}

.contact-details {
    margin-top: 30px;
    text-align: center; /* O left */
}
.contact-details p {
    font-size: 1.05rem; /* Leggermente più grande */
    margin: 8px 0;
}

/* Stili per messaggi di feedback form (esempio, adatta alle tue classi JS) */
p.form-feedback { /* Se il tuo JS crea un <p> con questa classe */
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    padding: 10px;
    border-radius: 4px;
}
p.form-feedback.success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
p.form-feedback.error { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }


/* Stili specifici per gli input del form di registrazione cliente, se necessario */
/* (quelli in /clienti/registrazione_cliente.php) */
/* Ad esempio, se hanno una classe comune */
.registration-form .form-group input[type="text"] { /* ... */ }