/* =========================
   GALASSIA SCUOLA — HEADER GRID (FSE)
   + VIDEO FRAME
   + MOBILE NAV OVERLAY FIX (robusto: niente "me", niente X in mezzo)
   + MOBILE LOGO SIZE/POS (target: gs-logo-left / gs-logo-right)
   ========================= */

:root{
  /* HEADER: larghezze colonne (desktop) */
  --gs-left: 36%;
  --gs-right: 14%;

  /* HEADER: fine tuning menu (desktop) */
  --gs-nav-x: 15px;   /* + = più a destra */
  --gs-nav-y: -6px;   /* - = più in alto */

  /* VIDEO FRAME */
  --gs-frame-color: #005bbb;
  --gs-frame-width: 5px;
  --gs-frame-gap: 5px;
  --gs-video-max: 600px;

  /* MOBILE HEADER */
  --gs-mob-pad-x: 14px;
  --gs-mob-gap: 12px;

  /* MOBILE LOGHI */
  --gs-mob-logo-left-w: 160px;   /* prova 140–190 */
  --gs-mob-logo-right-w: 110px;  /* prova 80–140 */

  /* micro-spostamenti SOLO mobile */
  --gs-mob-left-x: 0px;
  --gs-mob-left-y: 0px;
  --gs-mob-right-x: 0px;
  --gs-mob-right-y: 0px;

  /* MOBILE OVERLAY */
  --gs-mob-overlay-bg: #f7f0de;
  --gs-mob-link-color: #0b3a8a;
}

/* =========================
   HEADER: layout 3 colonne (desktop)
   ========================= */

.gs-header-grid{
  display: grid;
  grid-template-columns: var(--gs-left) minmax(0,1fr) var(--gs-right);
  align-items: center;
}

/* immagini: niente “baseline gap” */
.gs-header-grid img{
  display: block;
  height: auto;
}

/* allineamenti (metti queste classi sui 3 Group!) */
.gs-header-left{ justify-self: start; align-self: center; }
.gs-header-center{ justify-self: end; align-self: center; }
.gs-header-right{ justify-self: end; align-self: center; }

/* menu: una riga (desktop) */
.gs-header-center .wp-block-navigation__container{
  flex-wrap: nowrap;
}
.gs-header-center .wp-block-navigation-item__content{
  white-space: nowrap;
}

/* fine tuning NAV: SOLO desktop (non tocca mobile/overlay) */
@media (min-width: 783px){
  .gs-header-center .wp-block-navigation{
    transform: translate(var(--gs-nav-x), var(--gs-nav-y)) !important;
  }
}
@media (max-width: 782px){
  .gs-header-center .wp-block-navigation{
    transform: none !important;
  }
}

/* =========================
   HEADER: riallineamento mobile
   logo SX / hamburger CENTRO / logo DX
   ========================= */
@media (max-width: 782px){

  .gs-header-grid{
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--gs-mob-gap);
    padding-left: var(--gs-mob-pad-x);
    padding-right: var(--gs-mob-pad-x);
    align-items: center;
  }

  .gs-header-left{ grid-column: 1; justify-self: start; }
  .gs-header-center{ grid-column: 2; justify-self: center; min-width: 0; }
  .gs-header-right{ grid-column: 3; justify-self: end; }

  /* IMPORTANT: la nav “non deve allargare” la colonna centrale */
  .gs-header-center .wp-block-navigation.gs-nav{
    width: auto !important;
    max-width: 64px !important; /* basta per il bottone */
  }

  /* =========================
     LOGHI MOBILE
     Funziona sia se metti classi sui LOGHI (gs-logo-*)
     sia se dimentichi e vuoi “fallback” sui contenitori header-left/right
     ========================= */

  /* SINISTRA */
  .gs-logo-left,
  .gs-header-left .wp-block-image{
    width: var(--gs-mob-logo-left-w) !important;
    max-width: var(--gs-mob-logo-left-w) !important;
    flex: 0 0 auto !important;
    transform: translate(var(--gs-mob-left-x), var(--gs-mob-left-y)) !important;
  }

  /* DESTRA */
  .gs-logo-right,
  .gs-header-right .wp-block-site-logo{
    width: var(--gs-mob-logo-right-w) !important;
    max-width: var(--gs-mob-logo-right-w) !important;
    flex: 0 0 auto !important;
    transform: translate(var(--gs-mob-right-x), var(--gs-mob-right-y)) !important;
  }

  /* l’immagine deve “seguire” sempre la width del wrapper */
  .gs-logo-left img,
  .gs-logo-right img,
  .gs-header-left img,
  .gs-header-right img,
  .gs-logo-right a,
  .gs-header-right a{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .gs-logo-left figure,
  .gs-logo-right figure,
  .gs-header-left figure,
  .gs-header-right figure{
    margin: 0 !important;
  }
}

/* =========================
   VIDEO FRAME (come l’avevi — NON toccato)
   USO: classe "gs-video-frame" sul GROUP che contiene il blocco Video
   ========================= */

.gs-video-frame{
  position: relative;
  width: min(100%, var(--gs-video-max));
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  box-sizing: border-box;
}

.gs-video-frame::before{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--gs-frame-gap));
  border: var(--gs-frame-width) solid var(--gs-frame-color);
  border-radius: 0;
  pointer-events: none;
}

.gs-video-frame figure,
.gs-video-frame .wp-block-embed,
.gs-video-frame .wp-block-video{
  margin: 0 !important;
}

.gs-video-frame iframe,
.gs-video-frame video{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

.gs-video-frame .videopress-wrapper,
.gs-video-frame .videopress-player{
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================
   MOBILE NAV OVERLAY — FIX (target: Navigation con classe "gs-nav")
   ========================= */

.wp-block-navigation.gs-nav ul,
.wp-block-navigation.gs-nav li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wp-block-navigation.gs-nav li::marker{ content: "" !important; }

@media (max-width: 782px){

  /* Hamburger sempre visibile e pulito */
  .wp-block-navigation.gs-nav .wp-block-navigation__responsive-container-open{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    color: var(--gs-mob-link-color) !important;
  }

  /* nasconde qualunque label testuale del bottone */
  .wp-block-navigation.gs-nav .wp-block-navigation__responsive-container-open span,
  .wp-block-navigation.gs-nav .wp-block-navigation__responsive-container-open-label{
    display: none !important;
  }

  .wp-block-navigation.gs-nav .wp-block-navigation__responsive-container-open svg{
    width: 28px !important;
    height: 28px !important;
    display: block !important;
  }

  /* CHIUSO: il contenitore responsive non deve “stare in pagina” */
  .wp-block-navigation.gs-nav .wp-block-navigation__responsive-container{
    display: none !important;
  }

  /* APERTO: overlay full-screen */
  .wp-block-navigation.gs-nav .wp-block-navigation__responsive-container.is-menu-open{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: var(--gs-mob-overlay-bg) !important;
    overflow: auto !important;
  }

  /* X: alto a destra */
  .wp-block-navigation.gs-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close{
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 1000000 !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--gs-mob-link-color) !important;
  }

  /* contenuto overlay: centrato */
  .wp-block-navigation.gs-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100% !important;
    padding: 24px 16px !important;
    gap: 14px !important;
  }

  .wp-block-navigation.gs-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .wp-block-navigation.gs-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: var(--gs-mob-link-color) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
}

/* DEBUG (se vuoi capire subito se le classi esistono nel front-end)
@media (max-width: 782px){
  .gs-logo-left{ outline: 4px solid lime !important; }
  .gs-logo-right{ outline: 4px solid red !important; }
  .gs-header-grid{ outline: 4px solid magenta !important; }
}
*/