/* ==========================
   FONT (solo DaDaDu)
   ========================== */
@font-face {
  font-family: 'fre';
  src: local('fredoka-one'),
       url('../../../assets/font/fredoka-one/FredokaOne-Regular.ttf') format("truetype");
}

/* Tipografia: limitiamola al contenuto DaDaDu (non al menu sito) */
.dadadu-content h2,
.dadadu-content h3{
  font-family: 'fre';
}

.dadadu-content p,
.dadadu-content li{
  font-family: 'MyGaramond';
}

.dadadu-content ul{
  text-align: left;
}

/* ==========================
   ACCENT PER SEZIONE
   (serve per bottoni, bordi, titoli)
   ========================== */
.dadadu-about   { --accent: #2a9d8f; } /* verde */
.dadadu-current { --accent: #f4a261; } /* arancio */
.dadadu-archive { --accent: #457b9d; } /* azzurro */
.dadadu-call    { --accent: #e9c46a; } /* giallo */

/* ==========================
   FESTIVAL NAV (sticky)
   ========================== */
.festival-nav{
  position: sticky;
  top: var(--nav-h);
  z-index: 900;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;

  background: #fff;
  border-bottom: 2px solid #000;
  font-family: 'fre';
}


.festival-nav a{
  display: block;
  text-align: center;
  padding: 12px 8px;
  text-decoration: none;
  color: #000;
  border-right: 1px solid #000;
}

.festival-nav a:last-child{
  border-right: none;
}

/* Hover diversi per ciascun link (ordine: Home / Programma / Archivio / Bando) */
.festival-nav a:nth-child(1):hover{ background:#2a9d8f; color:#fff; }
.festival-nav a:nth-child(2):hover{ background:#f4a261; color:#fff; }
.festival-nav a:nth-child(3):hover{ background:#457b9d; color:#fff; }
.festival-nav a:nth-child(4):hover{ background:#e9c46a; color:#000; }

/* Accessibilità: focus da tastiera (senza rovinare gli hover colorati) */
.festival-nav a:focus-visible{
  outline: 3px solid #000;
  outline-offset: -3px;
}

/* Mobile: 4 colonne */
@media (max-width: 700px){
  .festival-nav{
    grid-template-columns: repeat(4, 1fr);
  }
   .festival-nav a{
    padding: 10px 6px;     /* riduce altezza */
    font-size: 13px;       /* aiuta a stare in riga */
    white-space: nowrap;   /* evita a capo nel singolo link */
  }
}

/* ==========================
   SFONDO + OVERLAY (solo sotto le section)
   ========================== */
.dadadu-sections{
  position: relative;
  min-height:100vh;
  background-image: url("sfondo.png");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  text-align: center;

   
 
}

/* overlay: IMPORTANTISSIMO pointer-events none, così NON blocca click */
.dadadu-sections::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.10);
  z-index: 0;
  pointer-events: none;
}

/* contenuto sopra overlay */
.dadadu-content{
  position: relative;
  z-index: 1;
  padding: 24px 0;
  background: transparent; /* niente secondo velo (evita “impasto”) */
}

/* mobile: fixed spesso buggato */
@media (max-width: 700px){
  .dadadu-sections{
    background-attachment: fixed;
    background-position: center;
  }
}

/* ==========================
   HERO (dentro lo sfondo, ma compatto)
   ========================== */
.festival-hero-dadadu{
  text-align: center;
  padding: 14px 12px;
  margin: 0 auto;
}

.festival-logo{
  width: 480px;     /* desktop */
  max-width: 100%;  /* mobile safe */
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

@media (max-width: 700px){
  .festival-logo{
    width: 280px;
    max-width: 100%;
  }
}

/* ==========================
   CARD BASE (le tue section)
   NOTA: tu usi .ombra, quindi lavoriamo su .ombra
   ========================== */
.ombra{
  border: 2px solid transparent;
  transition: transform 0.25s ease;

  background-color: white;
  padding: 2rem;
  margin: 2rem auto 8px;
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
}

.dadadu-sections .ombra:hover{
  transform: translateY(-3px);
}

/* bordo + ombra colorata + titolo colorato */
.dadadu-about{
  border-color: #2a9d8f;
  box-shadow: 0 10px 24px rgba(42, 157, 143, 0.32);
}
.dadadu-about > h2{ color: #2a9d8f; }

.dadadu-current{
  border-color: #f4a261;
  box-shadow: 0 10px 24px rgba(244, 162, 97, 0.32);
}
.dadadu-current > h2{ color: #f4a261; }

.dadadu-archive{
  border-color: #457b9d;
  box-shadow: 0 10px 24px rgba(69, 123, 157, 0.32);
}
.dadadu-archive > h2{ color: #457b9d; }

.dadadu-call{
  border-color: #e9c46a;
  box-shadow: 0 10px 24px rgba(233, 196, 106, 0.32);
}
.dadadu-call > h2{ color: #e9c46a; }

/* ==========================
   BOTTONI SPECIALI DaDaDu
   - stessa forma .btn globale (styles.css)
   - font fre
   - hover col colore della sezione (accent)
   ========================== */
.dadadu-sections .ombra .btn{
  font-family: 'fre';
  border-color: var(--accent);
}

.dadadu-sections .ombra .btn:hover{
  background: var(--accent);
  color: #fff;
}

/* sul giallo meglio testo scuro per leggibilità */
.dadadu-call .btn:hover{
  color: #000;
}