@import "header.css";
@import "footer.css";
@import "index.css";
@import "about.css";
@import "bookscredits.css";
@import "contacts.css";

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;      
}

:root {
      /* DEFINIZIONE COLORI*/
      --arancione: rgb(255, 102, 53); /*255 128 0*/
      --nero: rgb(0,0,0);
      --bianco: rgb(255, 255, 255);
      --ciano: rgb(35, 117, 255);
      --verde: rgb(63, 193, 155);
      --viola: rgb(242, 146, 248);
}

body {
      font-family: "Helvetica", sans-serif;
      background: var(--bianco);
      color: var(--nero);
      line-height: 1.6;
}



/* CONTENUTO */
.content {
    padding: 2rem;
}

.content h2 {
    margin-bottom: 0.5rem;
}

.content p {
    max-width: 700px;
    margin-bottom: 1rem;
}

/* Linea orizzontale di separazione sezioni */
hr {
    border: none;
    border-top: 1px solid var(--nero);
    margin: 2rem 0;
}





    /* HEADER */
    /* header {
      position: fixed;   /* <-- questo lo rende "incollato" in alto 
      top: 0;            /* attaccato al bordo superiore 
      left: 0;           /* attaccato al bordo sinistro 
      width: 100%;       /* occupa tutta la larghezza   
      padding: 1rem 2rem;
      background: #fff;
      z-index: 1000;     /* resta sopra gli altri elementi 
    } */

    /*header h1 {
      font-size: 1.5rem;
    }*/

main {
      margin-top: 0;
}

section {
      padding: 2rem 1rem;
      border-bottom: 1px solid var(--nero);
      position: relative;
}

    section h2 {
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
    }

    section p {
      margin-bottom: 1rem;
      max-width: 700px;
    }

    /* MENU */
    .sidebar {
        width: 220px;
        padding: 2rem 1rem;
        border-right: 1px solid #333; /* linea verticale separatrice */
    }

    .sidebar h1 {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333; /* linea sotto il titolo */
    padding-bottom: 0.5rem;
    }

    .sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    .sidebar ul li {
    margin-bottom: 1rem;
    }

    .sidebar ul li a {
    text-decoration: none;
    color: #aaa;
    font-weight: bold;
    transition: color 0.2s;
    }

    .sidebar ul li a:hover {
    color: var(--arancione);
    }

    /* Voce attiva */
    .sidebar ul li a.active {
    color: #fff;
    text-decoration: underline;
    }


    

/* --- LA SEZIONE ORIZZONTALE --- */
        .horizontal-scroll-wrapper {
            display: flex;            /* Allinea gli elementi in riga */
            overflow-x: auto;         /* Attiva lo scroll orizzontale */
            gap: 20px;                /* Spazio tra le card */
            padding: 20px 0;
            scroll-snap-type: x mandatory; /* Rende lo scroll "calamitato" */
            scrollbar-width: thin;    /* Per Firefox: barra sottile */
        }

        /* Personalizzazione barra di scorrimento (Chrome/Safari/Edge) */
        .horizontal-scroll-wrapper::-webkit-scrollbar {
            height: 8px;
        }
        .horizontal-scroll-wrapper::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }

        .card {
            flex: 0 0 300px;          /* Non restringe e fissa la larghezza a 300px */
            height: 200px;
            background-color: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            font-size: 1.5rem;
            scroll-snap-align: start; /* Punto di aggancio per lo scorrimento */
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .card:nth-child(even) {
            background-color: #2ecc71;
        }