/* ============================= */
/* HEADER LOGO & NAV              */
/* ============================= */
header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo a sinistra, nav a destra */
  padding: 10px 20px;
  background-color: var(--bg-header);
  position: relative;
  z-index: 2; /* sopra cimosa */
}

/* Stato: NASCOSTO (quando scrolli giù) */
header.nav-hidden {
  transform: translateY(-100%);
}

/* Stato: RICHIAMATO (quando clicchi il dot) */
/* Usiamo la doppia classe per vincere sulla precedente */
header.nav-hidden.nav-visible {
  transform: translateY(0) !important;
}

header nav.active {
  display: flex !important; /* Mostra i link */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Il DOT che compare allo scroll */
#dot-menu-trigger {
  position: fixed;
  top: 20px;
  right: 20px;
  /* Rimpicciolito: 18px invece di 22-25px */
  width: 18px;
  height: 18px;
  background-color: var(--accent);
  border-radius: 50%;
  z-index: 10000;
  cursor: pointer;
  
  /* Stato Default */
  opacity: 0;
  visibility: hidden;
  /* Aggiunta transizione per il transform per l'hover */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease-in-out, background-color 0.2s ease;
}

#dot-menu-trigger.active {
  opacity: 1;
  visibility: visible;
}

#dot-menu-trigger:active {
  transform: scale(0.9);
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

.whatsapp-float img,
.social-float img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

/* Comportamento visivo condiviso: WhatsApp + icone social */
.whatsapp-float,
.social-float {
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.whatsapp-float:hover,
.social-float:hover {
  opacity: 1;
  transform: scale(1.05);
}

#social-float-container {
  position: fixed;
  right: 20px;
  bottom: 72px; /* 20px bottom + 44px whatsapp + 8px gap */
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.social-float {
  display: block;
  text-decoration: none;
}

.whatsapp-float.is-hidden,
#social-float-container.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

@media (max-width: 768px) {
  .whatsapp-float img,
  .social-float img {
    width: 52px;
    height: 52px;
  }

  #social-float-container {
    bottom: 80px; /* 20px bottom + 52px whatsapp + 8px gap */
  }
}

/* FOOTER SOCIAL ICONS */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.footer-icon {
  display: inline-flex;
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
}

.footer-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.footer-icon:hover {
  opacity: 1;
  transform: scale(1.08);
}

footer p,
footer nav {
  margin: 0;
  line-height: 1.2;
}

footer nav a {
  line-height: inherit;
}

footer p + p,
footer p + nav {
  margin-top: 2px;
}

@media (min-width: 1024px) {
  footer {
    text-align: right;
    min-height: 112px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    column-gap: 18px;
    row-gap: 0;
  }

  .footer-social {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 0;
  }

  footer p {
    grid-column: 1;
    line-height: 1.0;
    margin: 0 !important;
    padding: 0;
  }

  footer p:first-of-type {
    grid-row: 1;
  }

  footer p:nth-of-type(2) {
    grid-row: 2;
  }

  footer nav {
    grid-column: 1;
    grid-row: 3;
    line-height: 1.0;
    margin: 0 !important;
    padding: 0;
  }

  footer p + p,
  footer p + nav {
    margin-top: 0;
  }

  footer nav a {
    line-height: 1.0;
    margin: 0;
    padding: 0;
  }

  .footer-icon img {
    width: 60px;
    height: 60px;
  }
}

/* LOGO ANCHOR */
header a.logo {
  display: block;
  width: var(--logo-width);      /* dimensione logo controllata da root */
  height: auto;
}

/* LOGO theascoreloom IMG */
header a.logo img {
  width: 100%;  /* prende tutta la larghezza dell'anchor */
  height: auto;
  display: block;
}

#dot-menu-trigger:hover {
    /* Si ingrandisce leggermente e cambia colore o luminosità */
    transform: scale(1.2);
    background-color: var(--accent-hover, #d4753d); /* Se non hai la variabile, usa un colore leggermente più chiaro/scuro */
    box-shadow: 0 0 12px var(--accent); /* Un leggero bagliore */
  }

/* Loghi bande */
.band-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0;
}

.band-logos .band-logo-container {
  width: 70px;             /* diametro cerchio */
  height: 70px;
  border-radius: 50%;      /* forma circolare */
  overflow: hidden;        /* taglia l'immagine dentro il cerchio */
  border: 2px solid var(--border-color); /* bordo opzionale */
  margin-left: -15px;      /* sovrapposizione leggermente negativa */
  transition: transform 0.3s ease;
  background-color: var(--bg-body); /* sfondo se l'immagine ha trasparenza */
  display: flex;
  justify-content: center;
  align-items: center;
}

.band-logos .band-logo-container:first-child {
  margin-left: 0;          /* primo logo allineato senza sovrapposizione */
}

.band-logos .band-logo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* riempie il cerchio senza deformarsi */
  display: block;
}

.band-logos .band-logo-container:hover {
  transform: scale(1.1);   /* leggero zoom al passaggio del mouse */
  z-index: 2;              /* porta il logo sopra gli altri */
}
/* NAV */


/* ============================= */
/* SIDEBAR                       */
/* ============================= */
aside.sidebar {
  padding: 10px;
}

aside.sidebar .cookie-banner {
  background-color: var(--bg-cookie-banner);
  color: var(--text-main);
  padding: 10px;
  text-align: center;
  margin-bottom: 15px;
}

aside.sidebar iframe.youtube-preview {
  width: 100%;
  height: 180px;
  border: none;
  margin-bottom: 15px;
}


/* ============================= */
/* CONTINUE NAV                  */
/* ============================= */

.continue-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;        /* distanza tra pulsanti */
  margin-top: 20px;
  flex-wrap: wrap;  /* passa su più righe se necessario */
}

/* PULSANTI ADATTIVI */
.continue-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  flex: 1 1 clamp(150px, 20vw, 300px); /* base mobile 150px, cresce fino a max 300px con viewport */
  padding: 12px 24px;

  background-color: var(--accent);
  color: var(--text-main);
  font-weight: 600;
  border-radius: 4px;

  transition: all 0.25s ease;
  text-align: center;
}

/* HOVER */
.continue-btn:hover {
  background-color: var(--accent-hover);
  transform: translateX(3px);
}

/* VERSIONE BACK */
.continue-btn.back:hover {
  transform: translateX(-3px);
}




/* ============================= */
/* LINK GENERICI                  */
/* ============================= */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

/* ============================= */
/* CARDS / CAPITOLI               */
/* ============================= */
.card {
  background-color: var(--bg-main);
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}

.home-chapter {
  flex-direction: column !important; /* forza verticale anche su desktop */
  align-items: center !important;    /* centra tutto orizzontalmente */
  text-align: center;
}



/* ============================= */
/* LINKS MICRO-ILLUMINAZIONE     */
/* ============================= */
header nav a,
a {
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

header nav a:hover,
a:hover {
  color: var(--accent-hover); /* colore più acceso */
  text-shadow: 0 0 4px var(--accent-hover); /* piccolo bagliore */
}

/* ============================= */
/* CHAPTER MICRO-ANIMATION       */
/* ============================= */
.chapter {
  transition: transform 0.2s ease-out; /* movimento fluido ma minimo */
}

.chapter:hover {
  transform: translateY(-2px); /* micro sollevamento */
  
}

#quoteForm {
    display: flex;
    flex-direction: column;
    max-width: 280px;      /* larghezza contenuta */
    gap: 0.5em;            /* spazio verticale ridotto */
    font-family: sans-serif;
    font-size: 0.95em;
}

#quoteForm label {
    display: flex;
    flex-direction: column;
    margin: 0;              /* niente margini extra */
}

#quoteForm input[type="number"] {
    padding: 0.25em;        /* input più compatto */
    font-size: 0.95em;
    width: 100%;            /* occupa tutta la larghezza del form */
    box-sizing: border-box;
}

#quoteForm input[type="checkbox"] {
    margin-top: 0.2em;      /* spazio minimo sopra il checkbox */
}

#quoteForm div {
    margin-top: 0.5em;
    font-size: 1em;
}

#contactForm textarea {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  width: 100%;            /* riempie tutto il contenitore */
  max-width: 500px;       /* larghezza massima */
  min-width: 250px;       /* larghezza minima */
  padding: 10px 12px;     /* padding interno per leggibilità */
  box-sizing: border-box; /* include padding e border nella larghezza */
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: var(--fs-body);
  background-color: var(--text-main);
  color: var(--text-contrast);
  margin-bottom: 1rem;    /* spazio tra i campi */
}

#contactForm input,
#contactForm select,
#contactForm textarea {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  width: 100%;            /* riempie tutto il contenitore */
  max-width: 500px;       /* larghezza massima */
  min-width: 250px;       /* larghezza minima */
  padding: 10px 12px;     /* padding interno per leggibilità */
  box-sizing: border-box; /* include padding e border nella larghezza */
  border: 1px solid var(--border-color);
  background-color: var(--text-main);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: var(--fs-body);
  
  color: var(--text-contrast);
  margin-bottom: 1rem;    /* spazio tra i campi */
}