:root {
    /* da usare con color-mix(in srgb, var(--colore) 70%, transparent) */
    --viola-profondo: #2e0a43;
    --viola-ametista: #6a1b9a;
    --viola-chiaro: #9c4dcc;
    --viola-lavanda: #f3e5f5;
    --oro-ricamo: #d4af37;

    /* da usare con rgb(var(--colore) / 70%) */
    --shadow: black;
    --highlight: white;
    --failure: red;
    --success: green;
}

body { 
    background-image: linear-gradient(color-mix(in srgb, var(--viola-lavanda) 75%, transparent), color-mix(in srgb, var(--viola-lavanda) 75%, transparent)), url('/images/background.png');
    background-attachment: fixed; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0; 
    padding: 0; 
    color: var(--viola-profondo);
    font-family: 'Montserrat', sans-serif; 
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif; 
}

/* HEADER */
header { 
    background: var(--viola-profondo);
    border-bottom: 0.125rem solid var(--oro-ricamo);
    padding: 1.25rem 1.25rem;
    text-align: center;
}

header img {
    max-width: 12.5rem;
}

/* MENU */
.menu-checkbox {
    display:none;
}

nav { 
    position: sticky; 
    top: 0; 
    background: var(--viola-ametista); 
    z-index: 8000;
}

nav ul { 
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    list-style: none;
}

nav ul li a {
    position: relative;                         /* Fondamentale: fa da ancora per il teschio */
    padding: 0.9375rem 1.5rem 0.9375rem 1.5rem; /* Crea uno spazio fisso a sinistra di OGNI link, già pronto per il teschio (15 20 15 24 px)*/
    color: var(--viola-lavanda); 
    font-size: 0.85em;
    font-weight: bold;
    display: inline-block;
    text-decoration: none; 
    text-transform: uppercase;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    background: var(--viola-profondo);
    color: var(--oro-ricamo);
}

nav ul li a.active::before {     /* Facciamo apparire il teschio SOLO sul link attivo del menu principale */
    position: absolute;          /* Esce dal flusso del testo e non sposta più nulla! */
    top: 50%;
    left: 0;                     /* Si posiziona perfettamente nello spazio vuoto che abbiamo creato con il padding-left */
    font-size: 1rem;
    content: "\1F480";           /* Il codice CSS per l'emoji del teschio 💀 */
    transform: translateY(-50%); /* Lo centra verticalmente rispetto al testo */
}

.menu-icon{
    font-size: 1.4rem;      /* Lo rende leggermente più grande e visibile */
    line-height: 1;         /* Evita che crei spazi strani sopra o sotto */
    vertical-align: middle; /* Lo allinea perfettamente al testo "Menu" */
}

.menu-button{
    width: 100%;
    box-sizing: border-box;
    padding: 0.9375rem;
    color: var(--viola-lavanda);
    display: none;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

/* BODY */
main{
    max-width: 1100px;
    margin: 1.875rem auto;
    display: flex;
 }

/* HOME */
main.home {
    padding: 0 1.25rem;
    flex-direction: row;
    align-items: center;
    gap: 1.875rem;
}

.home-pic {
    position: relative;
    flex: 1;
}

.home-pic img { 
    width: 100%;
    box-shadow: 1.25rem 1.25rem 1.25rem var(--shadow); /*var(--viola-lavanda);*/
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.9375rem; 
} 

.home-txt {
    text-align: center;
    flex: 1.5;
}

.home-txt h1 {
    color: var(--viola-profondo);
    font-size: 2.5rem;
}

.home-txt p {
    font-weight: 500;
}

.home-license {
    font-size: 0.8rem; /* Più piccolo rispetto al testo della poesia */
}

.home-sign {
    width: 25rem;                  /* Allineato alla larghezza del blocco poesia */
    margin: 0.9375rem auto 0 auto; /* Staccato di 15px dalla fine della poesia e centrato nella pagina */
    padding-right: 0.625rem;       /* Un filo di margine interno sulla destra */
    color: var(--viola-chiaro);    /* Usiamo il tuo viola chiaro per renderlo delicato */
    font-family: 'Georgia', serif; /* Un font graziato, perfetto per la letteratura */
    font-size: 0.8rem;             /* Più piccolo rispetto al testo della poesia */
    font-style: italic;            /* Il corsivo classico delle firme */
    letter-spacing: 0.0625rem;     /* Lettere leggermente spaziate per dare respiro */
    text-align: right;             /* Allineato a destra, tipico delle chiuse poetiche */
    opacity: 0.8;                  /* Un pizzico di trasparenza per farlo fare un passo indietro */
}

/* ATELIER */
main.atelier {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

.atelier-page {
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 5rem;
}

.atelier-pic {
    flex: 1;
}

.atelier-pic img { 
    width: 100%;
    box-shadow: 1.25rem 1.25rem 1.25rem var(--shadow); /*var(--viola-lavanda);*/
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.9375rem; 
} 

.atelier-txt {
    text-align: justify;
    flex: 1;
}

.atelier-txt h1 {
    color: var(--viola-profondo);
    font-size: 2.5rem;
}

.atelier-txt p {
    font-weight: 500;
}

.share-pannel{
    text-align: right;
}

.share-button {
    background: transparent;
    border: 0.125rem solid var(--viola-ametista);
    border-radius: 3.125rem;
    padding: 0.5rem 1rem;
    color: var(--viola-ametista);
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Spazio tra l'icona SVG e la parola Condividi */
    cursor: pointer;
    transition: 0.3s;
}

.share-button:hover { /* Icona cambia colore insieme al testo quando ci passi sopra */
    background: var(--viola-ametista);
    color: var(--highlight);
}

.share-icon {
    vertical-align: middle;
    display: inline-block;
}

/* ATELIER-MAP */
.atelier-map {
    width: 90%;
    margin: 3.125rem auto;
    padding: 0 1.25rem;
    text-align: center;
}

.address-txt {
    margin-bottom: 1.5625rem;
    color: var(--viola-profondo);
    font-style: italic;
}

.map-box {                                                                            /* Il box che racchiude la mappa */
    box-shadow: 0 0.375rem 1.25rem rgb(var(--shadow) / 6%);                           /* Un'ombra delicata per dare profondità */
    border: 0.125rem solid color-mix(in srgb, var(--viola-lavanda) 60%, transparent); /* Un leggero bordo viola lavanda */
    border-radius: 0.75rem;                                                           /* Angoli smussati moderni */
    overflow: hidden;                                                                 /* Serve per non far uscire la mappa dagli angoli smussati */
    line-height: 0;                                                                   /* Elimina piccoli spazi bianchi sotto l'iframe */
}

.map-box iframe {
    filter: grayscale(20%) contrast(110%); /* Desatura leggermente la mappa per farla sposare meglio con l'estetica del sito */
    transition: filter 0.3s ease;
}

.map-box iframe:hover { /* Quando l'utente ci passa sopra con il mouse, la mappa torna a colori vivi */
    filter: grayscale(0%) contrast(100%);
}

/* ARTIST */
main.artist {
    padding: 0 1.25rem;
    flex-direction: row;
    align-items: center;
    gap: 5rem;
}

.artist-pic {
    position: relative;
    flex: 1;
}

.artist-pic img { 
    width: 100%;
    box-shadow: 1.25rem 1.25rem 1.25rem var(--shadow); /*var(--viola-lavanda);*/
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.9375rem; 
} 

.artist-txt {
    text-align: justify;
    flex: 1.5;
}

.artist-txt h1 {
    color: var(--viola-profondo);
    font-size: 2.5rem;
}

.artist-txt p {
    font-weight: 500;
}

/* WORKS */
main.works {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

/* WORKS-FILTERS */
.works-filter {
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.75rem;
    margin-bottom: 3.125rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.works-filter h1 {
    margin-bottom: 1.25rem;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
}
        
.filter-array {
    margin-bottom: 1.25rem;
    flex-wrap: nowrap; /* aggiunto di iniziativa ma non funziona RIVEDERE */
}

.filter-button {
    margin: 0.3125rem;
    padding: 0.625rem 1.5625rem;
    background: transparent;
    border: 0.125rem solid var(--viola-ametista);
    border-radius: 3.125rem;
    color: var(--viola-ametista);
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.3s;
    cursor: pointer;
}

.filter-button:hover, .filter-button.active {
    background: var(--viola-ametista);
    color: var(--highlight);
}

/* WORKS-GALLERY */
.works-gallery {
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
}

.gallery-item {
    position: relative;
    height: 18.75rem;
    box-shadow: 0 0.3125rem 0.9375rem rgb(var(--shadow) / 10%);
    border-radius: 0.325rem;
    margin: 0.625rem;
    overflow: hidden;
    display: none; /* Nascondiamo tutto all'inizio, lo gestisce il JS */
    flex: 0 0 30%; /* Tre colonne */
}

.gallery-item img {
    height: 100%;
    width: 100%;
    filter: grayscale(100%) sepia(50%) hue-rotate(250deg); /* Effetto viola istituzionale */
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    filter: grayscale(0%); /* Torna a colori al passaggio del mouse */
    transform: scale(1.1);
}

/* WORKS-GALLERY-CAPTION */
.item-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: color-mix(in srgb, var(--viola-profondo) 80%, transparent);
    padding: 0.625rem;
    color: var(--oro-ricamo);
    font-size: 0.9rem;
    text-align: center;
    transform: translateY(100%);
    transition: 0.3s;
}

.gallery-item:hover .item-caption {
    transform: translateY(0);
}

.show { /* Classe per mostrare gli elementi filtrati */
    display: block;
    animation: fadeIn 0.5s;
}

.works-overlay { /* Il contenitore totale che copre lo schermo */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--viola-profondo) 70%, transparent); /* Sfondo scuro semitrasparente per far intravedere il sotto */
    border: none;  /* Rimuove il bordo nativo del browser */
    padding: 0;
    display: none; /* Inizialmente nascosto */
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.works-overlay-content { /* Finestra di contenuto (90% del viewport) */
    position: relative;
    width: 90vw;
    height: 90vh;
    max-width: 1100px; /* larghezza massima content non supera larghezza massima intero sito */
    background-color: color-mix(in srgb, var(--viola-lavanda) 80%, transparent);
    box-shadow: 0 0.625rem 1.875rem rgb(var(--shadow) / 50%);
    border-radius: 0.5rem;
    padding: 1.875rem;
    overflow-y: auto; /* Se il testo è lungo, appare la riga di scorrimento interna */
}

/* PUBLICATIONS */
main.books {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

.books-intro {
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.75rem;
    margin-bottom: 3.125rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.books-grid {
    width: 100%;
    max-width: 56.25rem;
    margin-bottom: 3.75rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.book-card {
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.75rem;
    padding: 1.875rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.1875rem;
    transition: box-shadow 0.3s;
}

.book-card:hover {
    box-shadow: 0 0.625rem 1.5625rem color-mix(in srgb, var(--viola-profondo) 10%, transparent);
}

.book-cover {
    position: relative;
    flex: 0 0 11.25rem; /* Larghezza fissa per la copertina su desktop */
}

.book-cover img {
    width: 100%;                                                                                                        /* in overlay riempie lo schermo RIVEDERE */
    height: auto;                                                                                                       /* in overlay riempie lo schermo RIVEDERE */
    /*box-shadow: 0.3125rem 0.3125rem 0.9375rem rgb(var(--shadow) / 80%), -0.0625rem 0 0.125rem rgb(var(--shadow) / 50%); /* Effetto ombra stile libro tridimensionale */
    box-shadow: 
        -0.125rem 0 0 0 color-mix(in srgb,var(--highlight) 60%, transparent),   /* Spessore pagina interna (bianca) */
        -0.25rem 0 0 0 var(--shadow),                                           /* Spessore cartonato sinistro */
         0.5rem 0.5rem 1rem var(--shadow);                                      /* Ombra morbida a terra */    
    border-radius: 0.25rem;
    display: block;
}

.book-cover p {
    font-size: 0.95rem;
}

.book-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
}

.book-details h3 {
    margin: 0;
    color: var(--viola-profondo);
    font-size: 1.6rem;
    line-height: 1.3;
}

.book-meta {
    color: var(--viola-chiaro);
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
}

.book-description {
    margin: 0;
    color: var(--viola-profondo);
    font-size: 0.95rem;
    line-height: 1.6;
}

.book-action {
    margin-top: 0.625rem;
}

.button-buy { /* Bottone personalizzato coerente con la palette */
    background: transparent;
    border: 0.125rem solid var(--oro-ricamo);
    border-radius: 3.125rem;
    padding: 0.625rem 1.5625rem;
    color: var(--viola-profondo);
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
}

.button-buy:hover {
    background: var(--oro-ricamo);
    color: var(--viola-profondo);
}

.book-overlay {                                                                   /* Il contenitore totale che copre lo schermo */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--viola-profondo) 70%, transparent); /* Sfondo scuro semitrasparente per far intravedere il sotto */
    border: none;                                                                 /* Rimuove il bordo nativo del browser */
    padding: 0;
    display: none;                                                                /* Inizialmente nascosto */
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.book-overlay-content { /* Finestra di contenuto (90% del viewport) */
    position: relative;
    width: 90vw;
    height: 90vh;
    max-width: 1100px; /* larghezza massima content non supera larghezza massima intero sito */
    background-color: color-mix(in srgb, var(--viola-lavanda) 80%, transparent);
    box-shadow: 0 0.625rem 1.875rem rgb(var(--shadow) / 50%);
    border-radius: 0.5rem;
    padding: 1.875rem;
    overflow-y: auto; /* Se il testo è lungo, appare la riga di scorrimento interna */
}

#overlayBody .book-card {   /* Stili specifici per la card clonata dentro il popup */
    display: flex;
    flex-direction: column; /* Mette copertina a sinistra e testi a destra su schermi grandi */
    gap: 1.875rem;
}

#overlayBody .book-cover img {
    height: auto;
    max-width: 18.75rem; /* Rende la copertina più importante nel dettaglio */
    cursor: default;     /* Nel popup la copertina non deve sembrare di nuovo cliccabile */
}

/* EVENTS */
main.events {
    padding: 2.5rem 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

.events-intro {
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.75rem;
    margin-bottom: 3.125rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.events-intro h1 {
    margin-bottom: 0.625rem;
    color: var(--viola-profondo);
}

.events-intro p {
    color: var(--viola-chiaro);
    font-style: italic;
}

.events-type {
    border-bottom: 0.0625rem solid color-mix(in srgb, var(--viola-lavanda) 80%, transparent);
    margin: 2.5rem 0 1.25rem 0;
    padding-bottom: 0.5rem;
    color: var(--viola-chiaro);
    font-size: 1.1rem;
    letter-spacing: 0.009375rem;
    text-transform: uppercase;
}

.events-planned{
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

.events-current{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.events-archive{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.event-card {
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.9375rem rgb(var(--shadow) / 4%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.full{
    flex: 0 0 100%;
}

.half{
    flex: 0 0 45%;
}

.third{
    flex: 0 0 30%;
}

.fourth{
    flex: 0 0 25%;
}

.event-cover {
    position:relative;                 /* Essenziale per bloccare lo sfondo sfocato all'interno */
    width: 100%;
    height: 25rem;
    background: var(--viola-lavanda);  /* Un fondo chiaro per sfondo filigrana */
    /*background: var(--viola-profondo); /* Un fondo scuro  per sfondo marcato */
    overflow: hidden;                  /* Taglia via i bordi dell'immagine sfocata che "sbordano" */
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-cover::before {                                                 /* PRIMO STRATO: Il background deformato e fuori fuoco */
    position: absolute;
    top: -1.25rem;                                                     /* "Allarghiamo" i bordi per nascondere gli aloni bianchi del blur */
    bottom: -1.25rem;
    left: -1.25rem;
    right: -1.25rem;
    background-image: var(--bg-img);                                   /* Prende l'immagine dalla variabile HTML */
    background-size: cover;                                            /* Riempie COMPLETAMENTE il box, deformandosi se serve */
    background-position: center;
    content: "";
    filter: blur(1.25rem) brightness(110%) contrast(80%) opacity(80%); /*brightness(60%); /* Sfocatura e leggero scurimento per dare contrasto */
    transform: scale(1.1);                                             /* Evita bordi netti sfocati */
    z-index: 1;                                                        /* Sta sotto */
}

.event-cover img {                                 /* SECONDO STRATO: La locandina reale in primo piano */
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: auto;                                   /* width: 100%; */
    height: auto;                                  /* height: 100%; */
    box-shadow: 0 0 1.875rem rgba(0, 0, 0, 0.3); /* Un'ombra per staccarla dallo sfondo */
    object-fit: contain;                           /* Conserva aspetto *//*cover; /* Adatta la locandina senza deformarla */
    transition: transform 0.4s ease;
    z-index: 2;                                    /* Sta sopra allo sfondo sfocato */
}

.event-info {
    padding: 1.25rem;
}

.event-date {
    margin-bottom: 0.3125rem;
    color: var(--oro-ricamo);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.event-title {
    margin: 0 0 0.3125rem 0;
    color: var(--viola-profondo);
    font-size: 1.2rem;
}

.event-text {
    margin: 0.625rem 0 0 0;
    color: var(--viola-chiaro);
    font-size: 0.95rem;
    line-height: 1.5;
}

.event-card:hover .event-cover img {
    transform: scale(1.03); /* Leggero effetto zoom al passaggio del mouse */
}

/* FAQ */
main.faq {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

.faq-intro {
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.75rem;
    margin-bottom: 3.125rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.faq-intro h1 {
    margin-bottom: 0.625rem;
    color: var(--viola-profondo);
}

.faq-intro p {
    color: var(--viola-chiaro);
    font-style: italic;
}

.faq-wrapper { /* Struttura dell'Accordion */
    margin-bottom: 3.75rem;
}

.faq-item {
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgb(var(--shadow) / 4%);
    overflow: hidden;
}

.faq-checkbox { /* Nasconde il checkbox segreto */
    display: none;
}

.faq-request { /* La Domanda (Etichetta cliccabile) */
    background: var(--viola-lavanda);
    padding: 1.25rem;
    color: var(--viola-profondo);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.3s ease;
}

.faq-icona::before {       /* L'icona della manina che punta */
    font-size: 1.4rem;
    display: inline-block;
    content: "\1F449";
    transition: transform 0.3s ease, color 0.3s ease;
    transform: scaleX(-1); /* La specchiamo sull'asse orizzontale per farla puntare a sinistra! */
}

.faq-request:hover {
    background: color-mix(in rgb, var(--viola-chiaro) 20%, transparent);
}

.faq-request:hover .faq-icona::before { /* Quando passi il mouse sulla domanda, la manina pulsa leggermente verso sinistra */
    transform: scaleX(-1) translateX(0.25rem);
}

.faq-answer { /* La Risposta (Inizialmente nascosta) */
    max-height: 0;
    padding: 0 1.25rem;
    background: var(--viola-lavanda);
    border-top: 0 solid transparent;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.faq-answer p {
    margin: 0.9375rem 0;
    color:  var(--viola-chiaro);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-checkbox:checked + .faq-request .faq-icona::before { /* Quando il checkbox è selezionato: */
    content: "\1F590";                                    /* Cambiamo il simbolo in mano aperta */
    transform: rotate(180deg) scaleX(-1);                 /* Ruota la mano di 180 gradi per girare le dita verso il basso e la rispecchia per mantenere il pollice dal lato corretto */
}

.faq-checkbox:checked ~ .faq-answer { /* Mostra la risposta aprendo l'altezza massima */
    max-height: 28.125rem;            /* Abbastanza alta da contenere il testo */
    padding: 0.3125rem 1.25rem 1.25rem 1.25rem;
    border-top: 0.0625rem solid color-mix(in srgb, var(--viola-lavanda) 80%);
}

/* CONTACT */
main.contact {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

.contact-intro {
    max-width: 37.5rem;
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.75rem;
    margin-bottom: 3.125rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.contact-form {
    width: 100%;
    max-width: 37.5rem;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.75rem;
    padding: 1.875rem;
}

.form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    color: var(--viola-profondo);
    font-weight: bold;
}

.form-group input, .form-group textarea {
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-family: inherit;
    font-size: 1rem;
}

.form-group input:focus, .form-group textarea:focus {
    outline: 0.125rem solid var(--oro-ricamo);
}

.form-button {
    background: transparent;
    border: 0.125rem solid var(--viola-ametista);
    border-radius: 3.125rem;
    margin: 0.325rem;
    padding: 0.625rem 1.5625rem;
    color: var(--viola-ametista);
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.form-button:hover {
    background: var(--viola-ametista);
    color: var(--highlight);
}

.error-message {
    margin-top: 0.3125rem;
    color: var(--failure);
    font-size: 0.85rem;
    display: none;
}

.success-message {
    margin-bottom: 0.9375rem;
    color: var(--success);
    font-weight: bold;
    text-align: center;
    display: hidden;
}

.contact-list {
    width: 100%;
    max-width: 37.5rem;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--viola-lavanda) 60%, transparent);
    border: 0.0625rem solid var(--viola-ametista);
    border-radius: 0.975rem;
    padding: 1.875rem;
    line-height: 1.8;
}

.contact-list a {
    margin: 0 0.9375rem; 
    color: var(--viola-profondo);
    text-decoration: none;
}

.contact-list a  img{
    max-height: 2rem;
}

.aligned-link{
    text-decoration: none; /* Rimuove la sottolineatura del link */
    display: inline-flex;  /* Mantiene il link in linea col testo circostante */
    align-items: center;   /* Allinea verticalmente al centro tutti i figli */
    gap: 0.5rem;           /* Opzionale: aggiunge uno spazio regolare tra immagine e testo */
}

/* PRIVACY */

main.privacy {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
}

main.privacy h2 {
    margin-top: 1.875rem;
    color: var(--viola-ametista);
}

main.privacy p, main.privacy ul {
    font-size: 0.95rem;
    text-align: justify;
}

/* COPYRIGHT */
main.copyright {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
}

main.copyright h1 {
    margin-bottom: 0.625rem;
    color: var(--viola-profondo);
}

.data-aggiornamento {
    margin-bottom: 1.875rem;
    color: var(--viola-chiaro);
    font-size: 0.85em;
    font-style: italic;
}

.legal-section {
    max-width: 50rem;
    margin-bottom: 1.875rem;
    text-align: justify;
}

.legal-section h2 {
    border-bottom: 0.0625rem solid var(--viola-lavanda);
    margin-bottom: 0.75rem;
    padding-bottom: 0.3125rem;
    color: var(--viola-ametista);
    font-size: 1.4rem;
}

.legal-section ul {
    line-height: 1.6;
}

.legal-section ul li {
    margin-bottom: 0.625rem;
    font-size: 0.95rem;
}

.legal-section ul li a {
    color: var(--viola-profondo);
    text-decoration: none;
}

.legal-section ul li a:hover {
    color: var(--viola-ametista);
    text-decoration: none;
}

.box-condivisione { /* Box evidenziato per le eccezioni della galleria */
    background: mix-color(in srgb, var(--viola-lavanda) 50%, transparent);
    border-left: 0.25rem solid var(--oro-ricamo);
    border-radius: 0 0.5rem 0.5rem 0;
    margin-top: 0.9375rem;
    padding: 1.25rem;
}

.box-condivisione ul {
    margin: 0.625rem 0 0 0;
    padding-left: 1.25rem;
}

.box-condivisione ul li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.box-condivisione p a {
    color: var(--viola-profondo);
    text-decoration: none;
}

/* RULES */
main.rules {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
}

main.rules h2 {
    margin-top: 1.875rem;
    color: var(--viola-ametista);
}

main.rules p, main.rules ul {
    font-size: 0.95rem;
    text-align: justify;
}

/* ADVICE */
main.advice {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
}

main.advice h2 {
    margin-top: 1.875rem;
    color: var(--viola-ametista);
}

main.advice p, main.advice ul {
    font-size: 0.95rem;
    text-align: justify;
}

/* FOOTER */
footer { 
    background: var(--viola-profondo);
    border-top: 0.25rem solid var(--viola-ametista);
    margin-top: 0; 
    padding: 0.9375rem 1.25rem;
    color: var(--viola-lavanda);
    line-height: 1.8;
    text-align: center;
}

.footer-links a {
    margin: 0 0.9375rem; 
    color: var(--viola-lavanda);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--oro-ricamo);
}

.footer-credits a {
    margin-top: 0.9375rem;
    color: var(--viola-lavanda);
    text-decoration: none;
}

.footer-credits a:hover {
    color: var(--oro-ricamo);
}

/* OVERLAY */
.close-overlay { /* Il pulsante di chiusura (una X in alto a destra) */
    position: absolute;
    top: 0.9375rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--viola-profondo);
    font-size: 2.1875rem;
    line-height: 1;
    cursor: pointer;
}

.close-overlay:hover {
    color: var(--viola-chiaro);
}

/* COOKIE BANNER */
.cookie-shield {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(var(--shadow) / 70%);
    display: none; /* Nascosto di default, mostrato via JS */
    z-index: 9050;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: mix-color(in srgb, var(--viola-profondo) 98%, transparent); /* Viola profondo leggermente trasparente */
    border-top: 0.125rem solid var(--oro-ricamo);
    box-shadow: 0 -0.3125rem 1.25rem rgb(var(--shadow) / 30%);
    padding: 1.25rem 0;
    display: none; /* Nascosto di default, mostrato via JS */
    z-index: 9999;
}

.cookie-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.cookie-text {
    color: var(--viola-lavanda);
    font-size: 0.9em;
    line-height: 1.4;
}

.cookie-text a {
    color: var(--oro-ricamo);
    text-decoration: underline;
}

.cookie-btns {
    display: flex;
    gap: 0.625rem;
}

.btn-accept {
    background: var(--oro-ricamo);
    border: none;
    border-radius: 0.3125rem;
    padding: 0.625rem 1.25rem;
    color: var(--viola-profondo);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.btn-accept:hover {
    background: var(--highlight);
}

/* ANIMATIONS */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(0.625rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* MEDIA QUERY */
@media (orientation: landscape){
    nav ul{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .menu-button{
        display: none;
    }

    main.home, main.artist, .atelier-page, .works-gallery, .book-card, .events-planned, .events-archive{
        flex-direction: row;
    }

    .gallery-item{
        flex: 0 0 30%;
    }
}

@media (orientation: portrait){
    nav ul{
        width: 100%;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
    }

    .menu-button{
        display: flex;
    }

    .menu-checkbox:checked ~ nav ul{ /* Usa la tilde (~) per trovare nav, e poi seleziona l'ul al suo interno */
        display: flex;
    }

    main.home, main.artist, .atelier-page, .works-gallery, .book-card, .events-planned, .events-archive{
        flex-direction: column;
    }

    .gallery-item{
        flex: 0 0 100%;
    }
}
    
@media screen and (min-width: 2561px) { /* Extra large devices (desktops UHD) */
    html {
        font-size: 1.375rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 1900px;
    }

    main.home, main.artist, .atelier-page, .works-gallery, .book-card, .events-planned, .events-archive{
        flex-direction: row;
    }

    .gallery-item{
        flex: 0 0 30%;
    }
}

@media screen and (min-width: 1921px) and (max-width: 2560px) { /* Medium Large devices (desktops QHD) */
    html {
        font-size: 1.125rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 1400px;
    }
}    

@media screen and (min-width: 1441px) and (max-width: 1920px) { /* Large devices (desktops FHD) */
    html {
        font-size: 1rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 1100px;
    }

    main.home, main.artist, .atelier-page, .works-gallery, .book-card, .events-planned, .events-archive{
        flex-direction: row;
    }

    .gallery-item{
        flex: 0 0 30%;
    }
}

@media screen and (min-width: 1367px) and (max-width: 1440px) { /* Old or uncommon devices (old desktops or big laptop) */
    html {
        font-size: 0.9375rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 1000px;
    }

    main.home, main.artist, .atelier-page, .works-gallery, .book-card, .events-planned, .events-archive{
        flex-direction: row;
    }

    .gallery-item{
        flex: 0 0 30%;
    }
}

@media screen and (min-width: 1281px) and (max-width: 1366px) { /* Medium devices (desktops and laptops HD Ready) */
    html {
        font-size: 0.9375rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 900px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) { /* Small devices (tablets) landscape oriented*/
    html {
        font-size: 0.875rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 900px;
    }
}

@media screen and (min-width: 981px) and (max-width: 1024px) { /* Uncommon devices (small tablets or big smartphones) */
    html {
        font-size: 0.875rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 900px;
    }
}

@media screen and (min-width: 801px) and (max-width: 980px) { /* Very small devices (smartphones) */
    html {
        font-size: 0.8125rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 800px;
    }
}

@media screen and (min-width: 769px) and (max-width: 800px) { /* Small devices (tablets) portrait oriented*/
    html {
        font-size: 0.75rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 700px;
    }
}

@media screen and (min-width: 361px) and (max-width: 768px) { /* Old Very small devices (old smartphones) */
    html {
        font-size: 0.75rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 300px;
    }

    main.home, main.artist, .atelier-page, .works-gallery, .book-card, .events-planned, .events-archive{
        flex-direction: column;
    }

    .gallery-item{
        flex: 1 0 100%;
    }
}

@media screen and (max-width: 360px) { /* Micro devices (smartwatch or IoT) */
    html {
        font-size: 0.6875rem;
    }

    main, .works-overlay-content, .book-overlay-content, .cookie-container{
        max-width: 300px;
    }

    main.home, main.artist, .atelier-page, .works-gallery, .book-card, .events-planned, .events-archive{
        flex-direction: column;
    }

    .gallery-item{
        flex: 0 0 100%;
    }
}

@media (pointer: fine){ /* Only not touch devices (laptops o desktop) */
    .share-button{
        display: none; /* Di base è nascosto */
    }
}

@media (pointer: coarse){ /* Only touch devices (smartphone o tablet) */
    .share-button{
        display: inline-flex; /* Lo mostriamo usando il flusso flex */
    }
}

@media (prefers-color-scheme: light){ /* preferenze schema colori chiaro */
    :root{
        --viola-profondo: #2e0a43; /* Sfondo scuro per header/footer, testi in light mode */
        --viola-ametista: #6a1b9a; /* Colore intermedio per bottoni/navigazione */
        --viola-chiaro: #9c4dcc;   /* Colore di accento */
        --viola-lavanda: #f3e5f5;  /* Sfondo chiarissimo del sito */
        --oro-ricamo: #d4af37;     /* Dettagli preziosi */
    }
}

@media (prefers-color-scheme: dark){ /* preferenze schema colori scuro */
    :root{
        --viola-profondo: #f3e5f5; /* Sfondo chiaro per header/footer, testi in dark mode (per invertirsi diventa lavanda chiaro) */
        --viola-ametista: #9c4dcc; /* Colore intermedio per bottoni/navigazione (per illuminarsi diventa viola chiaro */
        --viola-chiaro: #b388ff;   /* Colore di accento (diventa ancora più luminoso di prima) */
        --viola-lavanda: #160421;  /* Sfondo scuro del sito (un viola ancora più scuro del "profondo") */
        --oro-ricamo: #ffd700;     /* L'oro brilla magnificamente sul buio, possiamo tenerlo o accenderlo leggermente */
        }
}