/* ==========================================================
   COMPATIBILITÀ BLOCCHI ↔ DESIGN ORIGINALE
   ----------------------------------------------------------
   Header e footer sono "parti del template" a blocchi, quindi
   WordPress genera un markup diverso da quello dell'HTML
   originale (aggiunge wrapper come .wp-block-group,
   .wp-block-navigation__container, .wp-block-button__link).

   Questo file riaggancia quel markup al design esistente, in
   modo che l'aspetto resti identico anche modificando header e
   footer dall'editor. Nessuna regola qui cambia il design:
   servono solo a compensare i wrapper aggiuntivi.
   ========================================================== */

/* ---------- azzera gli stili di layout dei blocchi ---------- */
.page-top.wp-block-group,
.header-shell.wp-block-group,
.site-footer.wp-block-group,
.footer-main.wp-block-group,
.footer-bottom.wp-block-group{
  max-width:none;
}
.header-shell.wp-block-group{
  gap:0;
}

/* ---------- HEADER: logo ---------- */
.official-brand.wp-block-site-logo{
  width:auto;
  min-width:0;
  display:flex;
  align-items:center;
  margin:0;
}
.official-brand.wp-block-site-logo a,
.official-brand.wp-block-site-logo .custom-logo-link{
  display:block;
  line-height:0;
}
/* Il logo orizzontale ufficiale ha proporzioni 2,08:1 (più alto rispetto
   al precedente 2,97:1): va dimensionato sull'ALTEZZA, altrimenti a 190px
   di larghezza sfonderebbe l'altezza dell'header. */
.official-brand.wp-block-site-logo img{
  width:auto;
  max-width:210px;
  height:auto;
  max-height:70px;
  object-fit:contain;
  object-position:left center;
}

/* ---------- HEADER: navigazione ---------- */
/* Il blocco Navigazione annida le voci in un <ul>: il gap va messo lì,
   non sul contenitore .navlinks come nell'HTML originale. */
.navlinks.wp-block-navigation{
  flex:1 1 auto;
  justify-content:center;
  gap:0;
}
.navlinks .wp-block-navigation__container{
  display:flex;
  align-items:center;
  gap:38px;
  padding:0;
  margin:0;
  list-style:none;
}
.navlinks .wp-block-navigation-item{
  margin:0;
}
.navlinks .wp-block-navigation-item__content{
  padding:35px 0;
  position:relative;
  font-size:14px;
  font-weight:900;
  color:var(--navy);
  text-decoration:none;
}
.navlinks .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content{
  color:var(--pink);
}
.navlinks .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:22px;
  height:2px;
  background:var(--pink);
}

/* Menu mobile del blocco Navigazione: allineato ai colori del tema */
.navlinks .wp-block-navigation__responsive-container-open,
.navlinks .wp-block-navigation__responsive-container-close{
  color:var(--navy);
}
.navlinks .wp-block-navigation__responsive-container.is-menu-open{
  background:#fff;
  padding:28px;
}
.navlinks .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.navlinks .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  padding:12px 0;
  font-size:16px;
}
.navlinks .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after{
  display:none;
}

/* ---------- HEADER: pulsante CTA ---------- */
.header-cta-wrap.wp-block-buttons{
  margin:0;
  flex:0 0 auto;
  gap:0;
}
.header-cta.wp-block-button{
  margin:0;
}
.header-cta .wp-block-button__link{
  background:linear-gradient(135deg,var(--navy),#4B2E5B);
  color:#fff;
  border-radius:12px;
  padding:15px 21px;
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(43,29,65,.14);
  border:0;
}
.header-cta .wp-block-button__link:hover{
  box-shadow:0 14px 30px rgba(59,36,79,.22);
}

/* ---------- FOOTER: griglia a 5 colonne ---------- */
.footer-main.wp-block-group{
  display:grid;
  grid-template-columns:1.55fr repeat(3,1fr) .8fr;
  gap:30px;
  align-items:start;
}
.footer-main.wp-block-group > .wp-block-group{
  min-width:0;
}
.footer-col.wp-block-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.footer-brand.wp-block-group p{
  margin:15px 0 0;
  font-size:14px;
  color:rgba(255,255,255,.68);
}
.footer-social.wp-block-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

/* Menu del footer come blocco Navigazione */
.footer-nav.wp-block-navigation .wp-block-navigation__container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:0;
  margin:0;
  list-style:none;
}
.footer-nav .wp-block-navigation-item__content{
  font-size:14px;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  transition:.2s ease;
}
.footer-nav .wp-block-navigation-item__content:hover{
  color:#fff;
  transform:translateX(3px);
}

/* I paragrafi del blocco non devono ereditare le dimensioni della landing */
.footer-bottom.wp-block-group{
  display:flex;
  justify-content:space-between;
  gap:20px;
}
.footer-bottom.wp-block-group p{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,.52);
}

/* ---------- responsive, allineato all'originale ---------- */
@media(max-width:1050px){
  .footer-main.wp-block-group{grid-template-columns:1fr 1fr 1fr}
  .footer-brand.wp-block-group{grid-column:1/-1}
  .navlinks.wp-block-navigation{flex:0 0 auto}
}
@media(max-width:700px){
  .footer-main.wp-block-group{grid-template-columns:1fr 1fr}
  .footer-brand.wp-block-group{grid-column:1/-1}
  .footer-bottom.wp-block-group{flex-direction:column}
  .official-brand.wp-block-site-logo img{max-height:44px;max-width:150px}
}
@media(max-width:480px){
  .footer-main.wp-block-group{grid-template-columns:1fr}
  .footer-brand.wp-block-group{grid-column:auto}
}

/* ==========================================================
   SELETTORE LINGUA NELL'HEADER (TranslatePress)
   ----------------------------------------------------------
   Il selettore è inserito nell'header come blocco Shortcode
   ([language-switcher]): si può spostare o togliere dall'Editor
   senza toccare il codice.

   TranslatePress genera DUE switcher sovrapposti: uno segnaposto
   ("anchor") che tiene lo spazio nel flusso, e uno "overlay"
   posizionato in assoluto che al passaggio del mouse apre la
   tendina con le altre lingue.

   Qui il segnaposto viene nascosto e l'overlay reso statico e
   orizzontale, così le due lingue restano sempre visibili
   affiancate e cliccabili, come richiesto.
   ========================================================== */

.header-actions.wp-block-group{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
  margin:0;
}

/* paragrafi vuoti generati intorno alla shortcode */
.header-actions > p:empty{
  display:none;
}

.header-actions .trp-shortcode-switcher__wrapper{
  position:static;
  margin:0;
  padding:0;
  width:auto;
  min-height:0;
  line-height:1;
}

/* Lo switcher segnaposto non serve: mostriamo direttamente l'overlay */
.header-actions .trp-shortcode-anchor{
  display:none !important;
}

/* L'overlay diventa un elemento normale e orizzontale */
.header-actions .trp-shortcode-overlay{
  position:static !important;
  display:flex !important;
  flex-direction:row;
  align-items:center;
  gap:6px;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:auto !important;
}

.header-actions .trp-current-language-item__wrapper,
.header-actions .trp-switcher-dropdown-list{
  position:static !important;
  display:flex !important;
  flex-direction:row;
  align-items:center;
  gap:6px;
  width:auto !important;
  min-width:0 !important;
  max-height:none !important;
  overflow:visible !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* Freccetta della tendina: non serve più */
.header-actions .trp-shortcode-overlay > .trp-current-language-item__wrapper > svg,
.header-actions .trp-shortcode-switcher svg{
  display:none !important;
}

/* Ogni lingua: bandiera + nome in una pillola discreta */
.header-actions .trp-language-item{
  display:inline-flex !important;
  align-items:center;
  gap:0;
  padding:6px 7px !important;
  border:1px solid rgba(35,29,65,.14);
  border-radius:9px;
  background:rgba(255,255,255,.65);
  color:var(--navy) !important;
  line-height:1;
  text-decoration:none;
  width:auto !important;
  white-space:nowrap;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.header-actions a.trp-language-item:hover{
  border-color:var(--pink);
  background:#fff;
  transform:translateY(-1px);
}

/* Lingua attualmente attiva */
.header-actions .trp-language-item__current{
  border-color:var(--pink);
  background:rgba(206,55,110,.09);
  color:var(--pink) !important;
  cursor:default;
}

/* Solo bandiere: il nome della lingua occuperebbe spazio prezioso
   nell'header, che con 8 voci di menu e il pulsante CTA è già pieno.
   Il nome resta comunque leggibile dagli screen reader. */
.header-actions .trp-language-item-name{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.header-actions .trp-flag-image{
  width:18px !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
  border-radius:2px;
  max-width:none !important;
}

/* Su schermi meno larghi si stringono le voci di menu prima che
   header e selettore lingua si sovrappongano. */
@media(max-width:1500px){
  .navlinks .wp-block-navigation__container{gap:26px}
  .header-actions.wp-block-group{gap:12px}
}
@media(max-width:1250px){
  .navlinks .wp-block-navigation__container{gap:18px}
  .navlinks .wp-block-navigation-item__content{font-size:13px}
  .header-cta .wp-block-button__link{padding:13px 16px;font-size:12px}
}
/* ==========================================================
   MOBILE E TABLET: header a blocchi
   ----------------------------------------------------------
   PROBLEMA RISOLTO QUI: gli stili dei blocchi di WordPress
   (.wp-block-navigation, .wp-block-buttons) vengono caricati
   DOPO il CSS del tema e impongono display:flex. Questo
   annullava le regole del design originale che sotto i 1050px
   nascondono il pulsante CTA. Risultato: su smartphone il
   pulsante restava nel flusso, spingeva bandiere e menu fuori
   dallo schermo e veniva tagliato dall'header.
   Qui le regole vengono riaffermate con la specificità
   necessaria per vincere sugli stili dei blocchi.
   ========================================================== */
@media(max-width:1050px){
  /* Il pulsante CTA sparisce, come nel design originale */
  .header-actions .header-cta-wrap.wp-block-buttons{
    display:none !important;
  }

  /* La navigazione resta visibile: contiene il proprio hamburger */
  .navlinks.wp-block-navigation{
    display:flex !important;
    flex:0 0 auto;
  }

  .header-shell.wp-block-group{gap:12px}
  .header-actions.wp-block-group{gap:8px}

  /* IMPORTANTE — menu mobile a tutto schermo.
     L'overlay del blocco Navigazione è position:fixed, ma
     `backdrop-filter` su .header-shell e .page-top crea un
     "containing block" che lo intrappola dentro l'header, e
     `overflow:hidden` lo ritaglia: il menu si apriva alto 94px
     invece che a tutto schermo, mostrando solo una fetta delle
     voci. Sotto i 1050px la sfocatura non serve e viene tolta:
     così l'overlay torna ancorato alla finestra. */
  .page-top,
  .header-shell.wp-block-group{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Sicurezza aggiuntiva: mentre il menu è aperto niente ritaglio */
  .page-top:has(.wp-block-navigation__responsive-container.is-menu-open),
  .header-shell.wp-block-group:has(.wp-block-navigation__responsive-container.is-menu-open){
    overflow:visible !important;
  }

  /* Dentro il menu a tutto schermo le voci non devono ereditare il
     padding verticale di 35px pensato per la barra desktop: qui
     servono voci compatte e leggibili una sotto l'altra.
     Il selettore NON è annidato sotto .navlinks di proposito, per
     vincere sugli stili del blocco a prescindere dalla struttura. */
  .wp-block-navigation__responsive-container.is-menu-open{
    padding:64px 28px 32px !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    padding:11px 0 !important;
    font-size:17px !important;
    line-height:1.3 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after{
    display:none !important;
  }
  .header-actions .trp-language-item{padding:5px 7px !important}
  .header-actions .trp-flag-image{width:20px !important}
}

@media(max-width:420px){
  .header-shell.wp-block-group{gap:8px}
  .header-actions .trp-language-item{padding:4px 5px !important}
  .header-actions .trp-flag-image{width:18px !important}
  .official-brand.wp-block-site-logo img{max-height:38px;max-width:125px}
}


/* ==========================================================
   CORREZIONI MOBILE (segnalate in uso reale)
   ========================================================== */

/* --- Tremolio delle foto delle città ---------------------
   L'animazione originale `cityPhotoDrift` anima background-size
   da 100% a 108%. Animare background-size obbliga il browser a
   ridisegnare l'immagine a ogni fotogramma: su desktop passa
   quasi inosservato, su mobile si vede come vibrazione.
   Sotto i 1050px l'animazione viene disattivata: le foto
   restano ferme e nitide. */
@media(max-width:1050px){
  .city-photo{
    animation:none !important;
    background-size:cover !important;
  }
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni
   non deve vedere né il drift delle foto né gli altri movimenti. */
@media (prefers-reduced-motion: reduce){
  .city-photo,
  .countdown-bg,
  .experience::after,
  .story-section::after,
  .travel-section::after,
  .stop .dot{
    animation:none !important;
  }
  .city-photo{background-size:cover !important}
}

/* --- Footer su smartphone --------------------------------
   In colonna singola i distacchi fra le sezioni risultavano
   troppo ampi e il footer sembrava vuoto. */
@media(max-width:700px){
  .footer-main.wp-block-group{
    gap:26px;
  }
  .footer-col.wp-block-group,
  .footer-social.wp-block-group{
    gap:6px;
  }
  .footer-main.wp-block-group h4{
    margin-bottom:2px;
  }
  .footer-brand.wp-block-group p{
    margin-top:12px;
  }
  .official-footer-logo img{
    width:118px;
    height:auto;
  }
  .footer-bottom.wp-block-group{
    gap:6px;
    margin-top:22px;
  }
}

/* --- Riga credits nel footer -----------------------------
   Secondo elemento della fascia in basso: con `space-between`
   resta a destra, il copyright a sinistra. (Dalla v1.8.1 la riga
   "Hosted by Rotaract District 2101" non c'è più.) */
.footer-bottom .footer-credits{
  white-space:nowrap;
}

/* Il nome Janus è un link al sito janustech.it. Senza queste regole
   prenderebbe il blu predefinito dei link, fuori posto sul viola del
   footer: eredita il colore della riga e si distingue solo per la
   sottolineatura discreta, che si accende al passaggio del mouse. */
.footer-bottom .footer-credits a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.32);
  text-underline-offset:3px;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.footer-bottom .footer-credits a:hover,
.footer-bottom .footer-credits a:focus-visible{
  color:#fff;
  text-decoration-color:currentColor;
}