/**
 * grapesjs.css — stili del contenuto generato dal page builder GrapeJS, sul sito PUBBLICO.
 *
 * Estratti da assets_app/css/sharevents2025.css. Riguardano SOLO il contenuto costruito col
 * page builder (wrapper .se-gjs-page, layout .gjs-row/.gjs-cell): NON il chrome dell'editor
 * (quello vive nel gestionale, manage.gogoagenda.com/web/_assets/css/grapesjs.css).
 *
 * ORDINE DI CARICAMENTO — incluso in views/templates/shared/_head.tpl DOPO main.css e
 * sharevents2025.css, così vince a parità di specificità sulle regole legacy #custom_page.
 *
 * ⚠ SEZIONE "CONTENUTO" CONDIVISA — da tenere allineata con la sezione 6 di
 *   manage.gogoagenda.com/web/_assets/css/grapesjs.css (quella caricata nel canvas dell'editor).
 *   Le stesse .gjs-row/.gjs-cell descrivono il layout che l'autore vede nell'editor e che viene
 *   pubblicato qui: se le due copie divergono, l'editor mostra un layout diverso dal pubblicato.
 *
 * La logica di layout (flex:1 1 0 base + flex-basis:auto/column a ≤767px) è ora IDENTICA a
 * quella del canvas dell'editor → l'autore vede lo stesso layout che viene pubblicato.
 *
 * ⚠ DIVERGENZE RESIDUE rispetto alla copia del canvas (manage) — intenzionali, non bug:
 *     A. gap: 10px su .gjs-row      → nel canvas SÌ, qui NO. Solo spaziatura tra colonne in
 *                                      editing; aggiungerlo qui cambierebbe le pagine già
 *                                      pubblicate → lasciato fuori di proposito.
 *     B. se-staff-avatar !important  → qui SÌ, nel canvas NO. Serve a battere
 *                                      "#custom_page img{max-width:100% !important}" di main.css,
 *                                      che nel canvas non esiste.
 *     C. scope #custom_page          → nel canvas .gjs-row è nudo; qui è #custom_page .gjs-row
 *                                      (specificità per battere le regole legacy #custom_page).
 *
 * Storico: in origine qui mancava flex:1 1 0 (celle dimensionate al contenuto) e il breakpoint
 * mobile era a 878px senza flex-direction:column → le celle con sola immagine collassavano a 0
 * in modalità riga (immagini sparite, footer sovrapposto). Riconciliato col canvas dell'editor.
 */

/* ==========================================================================
   Helper di coesistenza — neutralizzano le regole legacy sul contenuto grape
   ========================================================================== */

/* main.css ha una regola globale `h1, h2 { text-align: center }` (design legacy) che, essendo
   DIRETTA sull'h2, batte l'allineamento ereditato dalla cella → i titoli delle Sezioni grape
   (Staff, Feature, ecc.) risultavano centrati anche quando la loro colonna è a sinistra.
   Qui i titoli grape tornano a SEGUIRE la loro cella/sezione (`inherit`): quelli con allineamento
   esplicito dal design (regola per-id `.se-gjs-page #id{text-align:…}`, specificità maggiore)
   restano come sono; le pagine legacy non-grape non vengono toccate. */
.se-gjs-page h1,
.se-gjs-page h2,
.se-gjs-page h3,
.se-gjs-page h4,
.se-gjs-page h5,
.se-gjs-page h6 {
    text-align: inherit;
}

/* Contenuto del page builder GrapeJS: ogni blocco (_game/_numbers/_countdown/…) si avvolge in
   <div class="container">, il cui senso è centrarsi (max-width + margini automatici). Ma su z la
   .container base (main.css) ha SOLO il padding e la max-width, NON i margini auto → i blocchi
   restavano incollati a sinistra. Qui ripristiniamo l'auto-centratura della .container SOLO dentro
   il contenuto grape (.se-gjs-page), senza toccare le pagine legacy (Unlayer/.u_row). */
.se-gjs-page .container {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   6. CSS DEL CONTENUTO GENERATO — ⚠ allineare con la sezione 6 di manage (vedi header)
   ========================================================================== */

/* Righe/colonne del page builder (GrapeJS .gjs-row/.gjs-cell): mantieni le colonne
   affiancate. min-width:0 permette alle celle flex di restringersi e img responsive
   evita che un'immagine larga forzi il wrap (colonne impilate). */
#custom_page .gjs-row {
    display: flex;
    flex-wrap: wrap;
}

/* flex: 1 1 0 → le celle DIVIDONO lo spazio in parti uguali (come nel canvas dell'editor),
   invece di dimensionarsi al contenuto. Senza, una cella che contiene SOLO un'immagine a
   rapporto d'aspetto (background-image / padding-top%, con l'eventuale testo in overlay
   position:absolute) non riceve larghezza dal contenuto e COLLASSA a 0 in modalità riga
   (≥768px) → l'immagine sparisce e le sezioni sottostanti risalgono (es. footer che si
   sovrappone). Le regole per-id esportate dal design (.se-gjs-page #id{flex:…}, stessa
   specificità ma nel <style> inline della pagina → vincono per ordine) restano prioritarie. */
#custom_page .gjs-cell {
    flex: 1 1 0;
    min-width: 0;
}

#custom_page .gjs-cell img {
    max-width: 100%;
    height: auto;
}

/* Widget in una colonna (es. Live su due colonne): i blocchi si avvolgono in un
   <div class="container"> di Bootstrap, che sopra i 768px ha una LARGHEZZA FISSA calcolata
   sulla finestra (750/970/1170px), non sulla cella → dentro una colonna stretta sborda.
   max-width:100% lo fa restringere alla cella senza cambiare le sezioni a tutta larghezza
   (lì la cella è più larga del container e il limite non scatta).
   !important: main.css a ≥1340px mette ".container { max-width:1270px !important }".
   ⚠ Allineata alla sezione 6 di manage (lì senza !important: nel canvas main.css non c'è). */
#custom_page .gjs-cell .container {
    max-width: 100% !important;
}

/* Avatar del blocco Staff/bio: dimensioni FISSE 120x120. Due regole del frontend lo
   sovrascrivono: "#custom_page .gjs-cell img { height:auto }" (qui sopra, 1,1,1) e soprattutto
   "#custom_page img { max-width:100% !important }" in main.css. La classe marcatore
   se-staff-avatar (1,2,1) + !important vince su entrambe e blocca le dimensioni. */
#custom_page .gjs-cell img.se-staff-avatar {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    object-fit: cover;
    border-radius: 50%;
}

/* Mobile: una colonna per riga. IMPORTANTE — si impila tenendo la riga in FLEX-ROW + wrap
   e forzando ogni cella a larghezza 100%, NON con flex-direction:column. Motivo: in column
   l'altezza della cella è l'asse PRINCIPALE e Chromium NON conta il padding-% del figlio
   (un blocco a rapporto d'aspetto: background-image o .embed_16_9-container con padding-top%),
   così la cella collassa a 0 e le immagini spariscono / le sezioni sotto risalgono (footer
   sovrapposto). In row mode l'altezza è l'asse TRASVERSALE e conta il padding del figlio.
   !important batte il flex per-id esportato dal design (.se-gjs-page #id{flex:…}, stessa
   specificità → altrimenti vincerebbe lui per ordine sorgente). */
@media (max-width: 767px) {
    #custom_page .gjs-cell {
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    /* .reverse: inverti l'ordine visivo con wrap-reverse (le celle 100% restano impilate) */
    #custom_page .gjs-row.reverse {
        flex-wrap: wrap-reverse;
    }
}

/* ==========================================================================
   7. LAYOUT PRONTI DELL'HEADER (#nav.se-gjs-header)
   --------------------------------------------------------------------------
   Solo per gli eventi con events.header_editor = 'centered' (shared/_nav_builder.tpl): la classe
   .se-gjs-header non esiste sull'header standard, quindi nessuna di queste regole lo tocca.
   Struttura: righe (.se-nav-row) → gruppi (.se-nav-col) → widget (.se-nav-w-<tipo>), riempiti
   lato server con i partial di shared/nav/. Colori e dimensione del logo restano quelli di
   Settings (regole #nav in _head.tpl).
   ========================================================================== */
/* In colonna per centrare le righe in verticale quando Menu Height supera il loro contenuto */
#nav.se-gjs-header {
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
/* Il limite di default sta qui e non sulle righe: Menu Width (stile inline in _nav_builder.tpl) deve
   poterlo alzare o togliere. */
#nav.se-gjs-header .se-nav-body {
  width: 100%;
  max-width: 1670px;
  margin: 0 auto;
}
#nav.se-gjs-header .se-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  margin: 0 auto;
  padding: 12px 24px;
  box-sizing: border-box;
}
#nav.se-gjs-header .se-nav-col {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
#nav.se-gjs-header [data-justify="start"] { justify-content: flex-start; }
#nav.se-gjs-header [data-justify="center"] { justify-content: center; }
#nav.se-gjs-header [data-justify="end"] { justify-content: flex-end; }
#nav.se-gjs-header .se-nav-col[data-direction="column"] { flex-direction: column; align-items: flex-start; }
#nav.se-gjs-header .se-nav-w {
  display: flex;
  align-items: center;
}
/* Widget che per questo utente non mostrano nulla (area utente da anonimo, bottone nascosto):
   senza questa regola occuperebbero comunque uno spazio del gap. */
#nav.se-gjs-header .se-nav-w:not(:has(*)) {
  display: none;
}
/* La dimensione del testo si eredita dal widget (default da Settings, sostituibile nell'editor). */
#nav.se-gjs-header .se-nav-w a {
  font-size: inherit;
}
/* Voci di menu */
#nav.se-gjs-header ul.se-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav.se-gjs-header ul.se-nav-list > li {
  position: relative;
  list-style: none;
}

/* Bottoni Register / Sign in (fuori da #main-menu: replicano l'aspetto dell'header standard) */
#nav.se-gjs-header .se-nav-w-register a.bu,
#nav.se-gjs-header .se-nav-w-signin a.bu {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}

/* Area utente */
#nav.se-gjs-header .container_user_ui,
#nav.se-gjs-header .user_ui {
  display: flex;
  align-items: center;
  gap: 3px;
}
#nav.se-gjs-header .user_ui a {
  position: relative;
  display: flex;
  padding: 5px;
  font-size: 1.5rem;
  color: var(--gray-600);
}
#nav.se-gjs-header .user_ui a .num {
  position: absolute;
  top: -1px;
  left: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff0000;
  color: #fff;
  font-size: .8rem !important;
  font-style: normal;
}
#nav.se-gjs-header ul.user_wrapper_menu,
#nav.se-gjs-header ul.lang_switcher {
  margin: 0;
  list-style: none;
}

/* Hamburger e drawer */
#nav.se-gjs-header .se-nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
#nav.se-gjs-header.se-burger-mobile .se-nav-w-hamburger {
  display: none;
}
@media (max-width: 1199px) {
  #nav.se-gjs-header.se-burger-mobile .se-nav-collapsible {
    display: none !important;
  }
  #nav.se-gjs-header.se-burger-mobile .se-nav-w-hamburger {
    display: flex;
    grid-column: 3;
    justify-self: end;
  }
  /* Hamburger sempre a destra, logo al centro della barra: le due colonne laterali uguali evitano
     che il logo si sposti o finisca sotto l'hamburger */
  #nav.se-gjs-header.se-burger-mobile .se-nav-row:has(> .se-nav-w-hamburger) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  #nav.se-gjs-header.se-burger-mobile .se-nav-w-logo {
    grid-column: 2;
    justify-self: center;
  }
  /* una riga che conteneva solo widget finiti nel drawer resterebbe una striscia vuota */
  #nav.se-gjs-header.se-burger-mobile .se-nav-row:not(:has(> :not(.se-nav-collapsible))) {
    display: none;
  }
}
/* Hamburger non attivo (drawer vuoto per questo visitatore, o hide_menu): niente contenitore */
#nav.se-gjs-header:not(.se-burger-mobile) .se-nav-w-hamburger {
  display: none;
}
/* Riga rimasta senza nulla da mostrare: senza se-burger-* la regola sopra non la nasconde piu' */
#nav.se-gjs-header .se-nav-row:not(:has(.se-nav-w > :not(ul.se-nav-list), .se-nav-list > li, .se-nav-text)) {
  display: none;
}
#nav.se-gjs-header .se-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(380px, 100vw);
  /* Niente riga riservata alla X: la prima voce le sta a fianco */
  padding: 24px 24px 24px;
  box-sizing: border-box;
  overflow-y: auto;
  background: #fff;
  text-align: left;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .25s ease, visibility 0s linear .25s;
}
#nav.se-gjs-header .se-nav-drawer:has(> .se-nav-drawer-logo) {
  padding-top: 16px;
}
#nav.se-gjs-header.se-drawer-open .se-nav-drawer {
  visibility: visible;
  transform: none;
  /* velo scuro sul resto della pagina */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4);
  transition: transform .25s ease;
}
/* Spazio a destra per la X; min-height per allinearla anche con un logo basso */
#nav.se-gjs-header .se-nav-drawer-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 40px;
  padding-right: 44px;
}
/* Nome dell'evento al posto del logo: su piu' righe il padding laterale sposta solo la prima */
#nav.se-gjs-header .se-nav-drawer-logo .navbar-brand a {
  padding: 0;
}
#nav.se-gjs-header .se-nav-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: #222;
  font-size: 26px;
  cursor: pointer;
}
/* Contenuto del drawer = zona "Menu mobile" del builder (.se-nav-drawer-zone). Le stesse regole
   valgono nel canvas dell'editor, dove la zona si vede sotto le righe dell'header. */
#nav.se-gjs-header .se-nav-drawer .se-nav-body {
  background: none;
}
#nav.se-gjs-header .se-nav-drawer-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  text-align: left;
}
#nav.se-gjs-header .se-nav-drawer-zone a {
  color: #222;
}
/* Testo piu' grande nel drawer, a specificita' bassa: uno stile dato al widget nell'editor vince. */
.se-gjs-header .se-nav-drawer-zone .se-nav-w {
  font-size: 18px;
}
#nav.se-gjs-header .se-nav-drawer-zone ul.se-nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
#nav.se-gjs-header .se-nav-drawer-zone ul.se-nav-list > li {
  width: 100%;
}
/* Anche la variante con #main-menu: le regole legacy "#nav ul#main-menu>li>a" hanno due id. */
#nav.se-gjs-header .se-nav-drawer-zone ul.se-nav-list > li > a,
#nav.se-gjs-header .se-nav-drawer-zone ul#main-menu.se-nav-list > li > a {
  display: block;
  padding: 8px 0;
  text-align: left;
}
#nav.se-gjs-header .se-nav-drawer-zone .dropdown-menu {
  position: static;
  top: auto;
  left: auto;
  float: none;
  min-width: 0;
  padding: 0 0 0 12px;
  border: 0;
  box-shadow: none;
}
#nav.se-gjs-header .se-nav-drawer-zone .se-nav-col {
  gap: .75rem;
}
#nav.se-gjs-header .se-nav-drawer-zone ul.lang_switcher {
  padding: 0;
  border: 0;
}
html.se-nav-drawer-lock {
  overflow: hidden;
}