@charset "UTF-8";
/* CSS Document */

/* imposta l'altezza dell'header */
:root {
  --header-height: 132px; /* la tua altezza reale dell’header */
}

/* Se l'header è fixed in alto */
header {
  height: var(--header-height);
}

/* Se hai un <main> sotto l'header */
main {
  padding-top: var(--header-height);
}

/* SEZIONE VIDEO */
.video-section {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height)); /* sta nella prima schermata sotto l'header */
  overflow: hidden;
  
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; /* per evitare bande bianche attorno al video */
}

/* VIDEO: sempre tutto visibile (no tagli) */
.video-section video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* contiene tutto il video, anche se compaiono bande nere */
}

/* Pulsante audio - FISSO rispetto alla viewport */
.mute-btn {
  position: fixed;  /* <- prima era absolute */
  top: calc(var(--header-height) + 16px); /* appena sotto l’header */
  right: 20px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 8px 14px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s ease;
}

.mute-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.audio-label {
  font-size: 14px;
  white-space: nowrap;
}

/* (opzionale) leggero aggiustamento su schermi molto bassi o piccoli */
@media (max-width: 768px) {
  .mute-btn {
    top: calc(var(--header-height) + 8px);
    right: 10px;
    font-size: 14px;
    padding: 6px 10px;
  }

  .audio-label {
    font-size: 12px;
  }

  .video-section {
    height: calc(100dvh - var(--header-height)); /* usa unità dinamica sui mobile moderni */
  }
}