/* ==========================================================================
   Barra di navigazione fissa
   Sopra la hero scura parte trasparente e "galleggia"; appena si scorre
   diventa opaca e compatta, cosi' resta leggibile anche sulla sezione bianca.
   ========================================================================== */

.edil-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

.edil-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  transition: padding-block .28s ease;
}

/* Stato "scorso": fondo scuro semitrasparente, non bianco, cosi' il logo
   (nuvola blu con testo bianco) resta leggibile su qualunque sezione. */
.edil-header.e-scorso {
  background: rgba(6, 24, 43, .92);
  box-shadow: 0 6px 24px rgba(4, 16, 30, .28);
  backdrop-filter: blur(10px);
}
.edil-header.e-scorso .edil-header__barra { padding-block: 8px; }

/* --- Marchio --- */
.edil-header__marchio {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}
.edil-header__marchio img {
  height: 68px;
  width: auto;
  transition: height .28s ease;
}
.edil-header.e-scorso .edil-header__marchio img { height: 55px; }

/* --- Voci --- */
.edil-header__voci {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.edil-header__voce,
.edil-header__accedi {
  display: inline-block;
  font-family: var(--f-etichetta);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  transition: background-color .2s ease, color .2s ease;
}

.edil-header__voce {
  color: rgba(255, 255, 255, .86);
}
.edil-header__voce:hover,
.edil-header__voce:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

/* L'unico elemento azzurro della barra: e' l'azione, come vuole la regola
   di famiglia. Se ne aggiungi un secondo, questo smette di risaltare. */
.edil-header__accedi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 600;
  background: var(--azzurro);
  /* Stacco dall'ultima voce di menu, non "dal bordo sinistro": in arabo il
     bottone e' l'ultimo elemento della barra a sinistra e lo stacco deve
     restare fra lui e le voci. */
  margin-inline-start: 8px;
}
.edil-header__esterno {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: .85;
}
.edil-header__accedi:hover,
.edil-header__accedi:focus-visible {
  background: var(--blu);
  color: #fff;
}

/* --- Interruttore mobile (nascosto da desktop) --- */
.edil-header__interruttore {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .10);
  cursor: pointer;
}

/* I tre tratti sono un solo elemento: il centrale e' il fondo, gli altri due
   sono pseudo-elementi spostati. Aprendo, il centrale sparisce e gli altri
   due ruotano a X. */
.edil-header__tratti,
.edil-header__tratti::before,
.edil-header__tratti::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  margin-inline: auto;
  transition: transform .24s ease, opacity .18s ease;
}
.edil-header__tratti { position: relative; }
.edil-header__tratti::before,
.edil-header__tratti::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.edil-header__tratti::before { transform: translateY(-6px); }
.edil-header__tratti::after  { transform: translateY(6px); }

[aria-expanded="true"] .edil-header__tratti { background: transparent; }
[aria-expanded="true"] .edil-header__tratti::before { transform: rotate(45deg); }
[aria-expanded="true"] .edil-header__tratti::after  { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .edil-header__interruttore {
    display: grid;
    place-items: center;
  }

  /* Il menu chiuso non deve essere raggiungibile da tastiera: non basta
     l'altezza a zero, serve visibility (che toglie i figli dal tab order). */
  .edil-header__menu {
    position: absolute;
    inset: 100% 0 auto 0;
    background: rgba(6, 24, 43, .98);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(4, 16, 30, .34);
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height .3s ease, visibility 0s linear .3s;
  }
  .edil-header__menu.e-aperto {
    max-height: 340px;
    visibility: visible;
    transition: max-height .3s ease, visibility 0s;
  }

  .edil-header__voci {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 20px 20px;
  }

  .edil-header__voce,
  .edil-header__accedi {
    /* 48px di area di tocco: sotto questa soglia il dito sbaglia bersaglio */
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 16px;
    margin-inline-start: 0;
  }
  .edil-header__accedi { justify-content: center; margin-top: 8px; }

  .edil-header__marchio img { height: 57px; }
  .edil-header.e-scorso .edil-header__marchio img { height: 49px; }
}

/* --------------------------------------------------------------------------
   Selettore di lingua — <details> nativo, nessun JavaScript
   -------------------------------------------------------------------------- */
.edil-header__lingue { display: flex; align-items: center; }

.lingue { position: relative; }

.lingue-attiva {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 44px di area di tocco */
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  color: rgba(255, 255, 255, .86);
  font-family: var(--f-etichetta);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.lingue-attiva::-webkit-details-marker { display: none; }
.lingue-attiva:hover,
.lingue-attiva:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

.lingue-bandiera {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  /* Bandiere quasi bianche (Italia, Regno Unito) su fondo scuro: senza un
     bordo si confondono col fondale. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
  flex: 0 0 auto;
}

.lingue-freccia { width: 14px; height: 14px; transition: transform .2s ease; }
.lingue[open] .lingue-freccia { transform: rotate(180deg); }

.lingue-elenco {
  position: absolute;
  /* inset-inline-end e non right: in arabo il pannello deve aprirsi
     dall'altro lato senza una regola dedicata. */
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 120;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--r-piccolo);
  background: rgba(6, 24, 43, .98);
  box-shadow: 0 12px 30px rgba(4, 16, 30, .45);
  backdrop-filter: blur(10px);
}

.lingue-voce {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  font-family: var(--f-etichetta);
  font-size: 14.5px;
  transition: background-color .18s ease, color .18s ease;
}
.lingue-voce:hover,
.lingue-voce:focus-visible { background: rgba(255, 255, 255, .10); color: #fff; }
.lingue-voce.e-attiva { color: var(--azzurro); font-weight: 600; }

@media (max-width: 900px) {
  .edil-header__lingue { padding: 8px 20px 4px; }
  .lingue { width: 100%; }
  .lingue-attiva { width: 100%; }
  /* Nel menu mobile il pannello non deve fluttuare: non c'e' spazio e
     finirebbe fuori schermo. */
  .lingue-elenco { position: static; width: 100%; margin-top: 4px; box-shadow: none; }
}