/*
Theme Name: Lorenzo Rovati
Theme URI:
Description: Tema Lorenzo Rovati (violinista).
Template: vex
Version: 1.0.0
Author: zk
Author URI:
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: four-columns, custom-background, custom-colors, featured-images, full-width-template, theme-options
Text Domain: lorenzo-rovati
*/

/*------------------------------------------------------------------
  Add here your own styles
-------------------------------------------------------------------*/

/**********************************************************
 * VEX – TYPOGRAPHY OVERRIDES (Child Theme)
 * Titoli + Menu: Bodoni Moda
 * Testi: EB Garamond (più grande e leggibile)
 * Form/UI: Montserrat
 **********************************************************/

/* ---------- 1) TESTI (BODY) ---------- */
body {
  font-family: "EB Garamond", serif !important;
  font-size: 18px; /* con un serif 16px sembra piccolo */
  line-height: 1.75;
  font-weight: 400;
}

/* Rende coerenti i testi nei contenuti (tema/Elementor) */
p,
li,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: "EB Garamond", serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
}

/* Mobile: leggermente più piccolo */
@media (max-width: 767px) {
  body,
  p,
  li,
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p {
    font-size: 19px !important;
    line-height: 1.75 !important;
  }
}

/* ---------- 2) TITOLI (H1–H6) ---------- */
h1,
h2,
h3,
h4,
h5,
h6,
.title {
  font-family: "Bodoni Moda", serif !important;
  font-weight: 600;
  letter-spacing: 0.02em; /* poco: più elegante sui titoli */
}

/* ---------- 3) MENU TOP (header: BIO/AGENDA/...) ---------- */
nav.menu-top ul.primary > li > a,
nav.menu-top ul#menu-main-menu.primary > li > a,
nav.menu-top ul.sub-menu a {
  font-family: "Bodoni Moda", serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px; /* menu “pulito” e leggibile */
}

/* ---------- 4) MENU OVERLAY (clic su menu / hamburger) ---------- */
/* Vex di default lo mette in Red Hat Display: lo sostituiamo */
.menu-main ul li a,
.menu-main ul.sub-menu li a {
  font-family: "Bodoni Moda", serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- 5) HOME: slider + menu grande ---------- */
.glitch-slider__text,
.custom-menu ul li a {
  font-family: "Bodoni Moda", serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dimensione menu grande (home fullscreen): responsive e “teatrale” */
.content--fullscreen .custom-menu {
  font-size: clamp(28px, 3.8vw, 52px) !important;
}

/* Se vuoi forzare SOLO home (utile se il selettore fullscreen non aggancia):
.page-id-374 .custom-menu{
  font-size: clamp(28px, 3.8vw, 52px) !important;
}
*/

/* ---------- 6) FORM / UI: meglio sans per massima leggibilità ---------- */
input,
textarea,
select,
button {
  font-family: "Montserrat", sans-serif !important;
}

/* (opzionale) elementi UI del tema che spesso ereditano il font titoli */
.nav-direction,
.paging-navigation .page-numbers {
  font-family: "Bodoni Moda", serif !important;
}

/* Fix footer fullscreen: usa il comportamento "full" e non il max-width della .container */
.is-fullscreen #footer.container.container--full,
.elementor-template-full-width #footer.container.container--full {
  max-width: 1920px !important;
  width: 100% !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .is-fullscreen #footer.container.container--full,
  .elementor-template-full-width #footer.container.container--full {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Home (IT + EN): immagine diversa su mobile */
@media (max-width: 767px) {
  body.home .fs__image {
    background-image: url("https://lorenzorovati.com/wp-content/uploads/2025/12/Rovati_040-scaled.webp") !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}

.container--narrow {
  max-width: 1030px !important;
}

/* Nasconde il menu grande sovrapposto (solo mobile) */
@media (max-width: 767px) {
  .page-id-374 .custom-menu {
    display: none !important;
  }
}

/* Header logo: su mobile usa le iniziali (proporzioni 600x366) */
@media (max-width: 767px) {
  .site-logo img,
  .header__logo img,
  .logo img {
    opacity: 0 !important;
  }

  .site-logo a,
  .header__logo a,
  .logo a {
    display: block;
    height: 40px; /* regola solo questa se lo vuoi più grande/piccolo */
    width: 66px; /* 40px * 600/366 ≈ 65.6 */
    background-image: url("https://lorenzorovati.com/wp-content/uploads/2025/12/LorenzoRovati_logo_mobile_bianco.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

/* Sempre: tolgo la scritta "Menu" */
.menu-button__text,
.menu-button__text * {
  display: none !important;
}

/* Base: preparo il contenitore per l'icona */
.menu-button__inner {
  position: relative;
}

/* Hamburger (default: menu chiuso) */
.menu-button:not(.menu-button--open) .menu-button__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
}

/* Mostro la X solo quando è open */
.menu-button__close {
  opacity: 0;
  pointer-events: none;
}

/* X più armonica: più corta e (se vuoi) un filo più sottile */
.menu-button__close i {
  height: 80% !important; /* prova 55%–65% */
  width: 2px !important;  /* se vuoi più leggera: 1px */
}

.menu-button.menu-button--open .menu-button__close {
  opacity: 1;
  pointer-events: auto;
  z-index: 6;
}

/* E quando è open, niente hamburger */
.menu-button.menu-button--open .menu-button__inner::after {
  opacity: 0;
}

/* Disattiva SEMPRE il cerchio/animazione del bottone menu */
.menu-button .anim-border {
  display: none !important;
}

/* =========================================================
   POLYLANG – switcher IT/EN nel menu top (Vex) – FIX separatore
   ========================================================= */

/* 1) I due LI lingua: compatti e allineati */
nav.menu-top ul.primary > li.lang-item,
nav.menu-top ul.primary > li.menu-item-object-language {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  vertical-align: middle;
  transform: translateY(15px); /* tuo micro-allineamento */
  white-space: nowrap;
}

/* 2) Link lingua: togli il margin “20px” del tema e comprimi */
nav.menu-top ul.primary > li.lang-item > a,
nav.menu-top ul.primary > li.menu-item-object-language > a {
  display: inline-block !important;
  width: auto !important;
  margin: 0 2px !important; /* <<< IT/EN vicinissimi */
  padding: 0 2px !important;
  font-style: italic !important;
  font-size: 0.92em !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  opacity: 0.85;
}

/* 3) Separatore: mettilo su EN (prima di EN), così NON va mai sotto */
nav.menu-top ul.primary > li.lang-item-en {
  position: relative;
  margin-left: 14px !important; /* spazio per il separatore */
}

nav.menu-top ul.primary > li.lang-item-en::before {
  content: "|";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  line-height: 1;
}

/* 4) Lingua corrente (Polylang mette .current-lang sul <li>) */
nav.menu-top ul.primary > li.lang-item.current-lang > a {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* 5) Hover */
nav.menu-top ul.primary > li.lang-item > a:hover,
nav.menu-top ul.primary > li.menu-item-object-language > a:hover {
  opacity: 1;
}

/* 6) Se il tema aggiunge decorazioni alle voci, disattivale SOLO sullo switcher */
nav.menu-top ul.primary > li.lang-item > a::before,
nav.menu-top ul.primary > li.menu-item-object-language > a::before {
  content: none !important;
}

/* 7) Spazio extra prima del blocco lingue (IT/EN) */
nav.menu-top ul.primary > li.lang-item-first {
  margin-left: 18px !important; /* aumenta/diminuisci */
}

/* =========================================================
   POLYLANG – switcher IT/EN nel MENU OVERLAY (Vex)
   markup: .menu-layer nav.menu-main ul.primary > li.lang-item
   ========================================================= */

/* Reset eventuali vecchi separatori a pseudo-elemento */
.menu-layer nav.menu-main ul.primary > li.lang-item-en::before,
.menu-layer nav.menu-main ul.primary > li.lang-item-en > a::before {
  content: none !important;
}

/* 1) LI lingua: compatti, stessa riga, allineati */
.menu-layer nav.menu-main ul.primary > li.lang-item,
.menu-layer nav.menu-main ul.primary > li.menu-item-object-language {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important; /* allinea IT/EN */
  vertical-align: baseline !important;
  white-space: nowrap !important;
  margin-top: 22px !important; /* distanza dal menu sopra */
  padding: 0 !important;
  line-height: 1 !important;
  transform: translateY(0px); /* se serve: 1px / -1px */
}

/* 2) Link lingua: compatti + più grandi */
.menu-layer nav.menu-main ul.primary > li.lang-item > a,
.menu-layer nav.menu-main ul.primary > li.menu-item-object-language > a {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important; /* niente “gap strani” */
  padding: 0 4px !important;
  font-style: italic !important;
  font-size: 1.18em !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  opacity: 0.75 !important;
  text-decoration: none !important;
}

/* 3) BARRETTA perfettamente centrata tra IT e EN */
.menu-layer nav.menu-main ul.primary > li.lang-item-en {
  margin-left: 12px !important;   /* spazio tra IT e linea */
  padding-left: 12px !important;  /* spazio tra linea e EN */
  border-left: 1px solid rgba(255, 255, 255, 0.40) !important;
}

/* 4) Lingua corrente */
.menu-layer nav.menu-main ul.primary > li.lang-item.current-lang > a,
.menu-layer nav.menu-main ul.primary > li.current-lang > a {
  opacity: 1 !important;
  font-weight: 600 !important;
  text-decoration-line: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 2px !important;
}

/* 5) Hover */
.menu-layer nav.menu-main ul.primary > li.lang-item > a:hover {
  opacity: 1 !important;
}

/* =========================================================
   AGENDA / EVENTS (Vex) — Custom child theme
   ========================================================= */

.events-list .mod-event-1 .mod__click {
  cursor: default;
  padding-bottom: 0 !important;
}

/* (Opzionale) Disattiva eventuale "effetto scheda" ereditato */
.events-list .mod-event-1 .mod__inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Meta: data / orario / luogo */
.events-list .mod-event-1 .mod__event-date,
.events-list .mod-event-1 .mod__event-time,
.events-list .mod-event-1 .mod__event-location {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 750;
  opacity: 0.94;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Maiuscole solo su data e luogo */
.events-list .mod-event-1 .mod__event-date,
.events-list .mod-event-1 .mod__event-location {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Orario: niente uppercase e tracking più leggero */
.events-list .mod-event-1 .mod__event-time {
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Riga meta: layout pulito */
.events-list .mod-event-1 .mod__event-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Elimina padding/margini ereditati dal tema sui singoli span */
.events-list .mod-event-1 .mod__event-meta > span {
  padding: 0 !important;
  margin: 0 !important;
}

/* Separatore elegante tra gli elementi */
.events-list .mod-event-1 .mod__event-meta > span + span::before {
  content: "|";
  display: inline-block;
  margin: 0 14px;
  opacity: 0.55;
}

/* Titolo evento */
.events-list .mod-event-1 .mod__event-name {
  font-size: 42px;
  line-height: 1.05;
  margin-top: 8px;
  margin-bottom: 6px;
}

/* Excerpt sotto il titolo — COMPLETO (NO puntini) */
.events-list .mod-event-1 .mod__event-excerpt {
  margin-top: 6px;
  max-width: 72ch;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  opacity: 0.94;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);

  /* disattiva qualunque clamp/ellipsis precedente */
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
}

/* Bottone Biglietti */
.events-list .mod-event-1 .mod__event-tickets .buttons-holder {
  margin-top: 14px;
}

.events-list .mod-event-1 .mod__event-tickets .btn {
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 750;
}

/* Separatore mese */
.events-list .lr-events-month-sep {
  margin: 26px 0 34px;
  padding: 12px 0;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.events-list .lr-events-month-sep:first-child {
  margin-top: 0;
}

/* Separatore tra eventi */
.events-list .mod-event-1 {
  padding-bottom: 22px;
  margin-bottom: 32px;
}

.events-list .mod-event-1:not(:last-child)::after {
  content: "";
  display: block;
  margin-top: 22px;
  height: 1px;
  width: 56%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0)
  );
}

/* Mobile */
@media (max-width: 768px) {
  .events-list .mod-event-1 .mod__event-date,
  .events-list .mod-event-1 .mod__event-time,
  .events-list .mod-event-1 .mod__event-location {
    font-size: 15px;
  }

  .events-list .mod-event-1 .mod__event-name {
    font-size: 30px;
  }

  .events-list .mod-event-1 .mod__event-excerpt {
    font-size: 17px;
  }

  /* data + ora in riga, luogo sotto */
  .events-list .mod-event-1 .mod__event-meta {
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 6px;
  }

  .events-list .mod-event-1 .mod__event-location {
    flex-basis: 100%;
  }

  .events-list .mod-event-1 .mod__event-location::before {
    content: "" !important;
    margin: 0 !important;
  }

  .events-list .mod-event-1:not(:last-child)::after {
    width: 75%;
  }
}

/* === ROVATI: Rimuove il cerchio/sfondo animato dietro il bottone Menu (hamburger) su mobile === */
@media only screen and (max-width: 479px) {
  /* micro posizione/testo (ok) */
  a.menu-button {
    /*top: -10px;*/
    top: -4px;
    font-size: 11px;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* elimina il cerchio animato dietro */
  a.menu-button .anim-border {
    display: none !important;
  }

  /* assicura che l’icona resti sopra */
  a.menu-button .menu-button__close {
    position: relative;
    z-index: 2;
  }
}

.menu-layer {
  padding-top: 160px;
}

/* MOBILE: meta su 2 righe “logiche” (data+ora / teatro) + no puntini */
@media (max-width: 768px) {
  .events-list .mod-event-1 .mod__event-meta {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    white-space: normal;
  }

  /* Data + ora: non spezzare mai */
  .events-list .mod-event-1 .mod__event-date,
  .events-list .mod-event-1 .mod__event-time {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Teatro: sempre a capo e va a capo tra parole */
  .events-list .mod-event-1 .mod__event-location {
    flex-basis: 100%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0;              /* utile in flex */
    overflow-wrap: break-word; /* se c’è una parola lunghissima */
  }

  /* Se hai il separatore | via ::before, su mobile non mostrarlo prima del teatro */
  .events-list .mod-event-1 .mod__event-location::before {
    content: "" !important;
    margin: 0 !important;
  }
}



/* Mobile: evita che il footer fullscreen finisca sotto la barra del telefono */
@media only screen and (max-width: 479px) {

  .is-fullscreen #footer,
  .elementor-template-full-width #footer {
    bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .is-fullscreen #footer .footer__inner,
  .elementor-template-full-width #footer .footer__inner {
    min-height: 44px !important; /* override del min-height:0 del tema */
  }

  #footer .footer__note{
    line-height: 1.35;
    padding: 0 16px;
  }
}


/* iOS Safari + browser in-app: footer sempre visibile nelle pagine fullscreen */
@media only screen and (max-width: 768px){
  @supports (-webkit-overflow-scrolling: touch){

    html.is-fullscreen #footer,
    body.is-fullscreen #footer{
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;

      /* FALLBACK (funziona anche se env/constant non sono supportati) */
      bottom: 90px !important; /* <-- regola questo valore */

      /* iOS più vecchi */
      bottom: calc(90px + constant(safe-area-inset-bottom)) !important;

      /* iOS recenti */
      bottom: calc(90px + env(safe-area-inset-bottom)) !important;

      z-index: 99999 !important;
      pointer-events: all !important;
    }

    html.is-fullscreen #footer .footer__inner,
    body.is-fullscreen #footer .footer__inner{
      min-height: 44px !important;
    }
  }
}