/* ============================================================================
   1. HEADER
   ============================================================================ */

/* Logo: 250 px a 1920 px di larghezza (min 150, max 252). Stesso margine sopra e sotto, così logo e
   menu risultano centrati in verticale nella barra. margin-left 0: il logo ha dal bordo la stessa
   distanza che ha il menu dal lato opposto (il margine laterale della pagina), su desktop e su telefono. */
.site-header .wp-block-site-logo {
  flex: 0 0 auto !important;
  margin-top: clamp(12px, 1vw, 20px);
  margin-bottom: clamp(12px, 1vw, 20px);
  margin-left: 0;
}
.site-header .wp-block-site-logo img { width: clamp(150px, 13vw, 252px) !important; max-width: none !important; height: auto; }
/* le righe flex dell'header (logo + menu) allineano i loro elementi al centro */
header .wp-block-group.is-layout-flex { align-items: center; }

/* Menu in alto: voci da 15 px, rosse al passaggio del mouse (solo le voci principali) */
.header-menu-voci,
.header-menu-voci a { font-size: 15px !important; font-weight: 700; }
.header-menu-voci a { transition: color .2s; }
.header-menu-voci ul.menu > li > a:hover,
.header-menu-voci ul.menu > li > a:focus { color: var(--wp--preset--color--custom-uno) !important; }

/* Quando sei collegato come amministratore, la barra nera di WordPress sposta la pagina in giù di 32 px
   (46 px da telefono) ma l'header del tema resta a top:0 e lascia una striscia vuota sopra al logo.
   Queste due regole lo allineano. Un visitatore normale non ha la barra, quindi non le usa mai. */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header { top: 46px; }
}


/* ============================================================================
   2. UTILITÀ
   ============================================================================ */
.ggwd-br-mobile { display: none; }


/* ============================================================================
   3. FOOTER (desktop)
   ============================================================================ */

.ggwd-footer {
  background-image: url("../img/bg-footer.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: min(calc(100vw / 2.209), 869px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* contenuto in basso */
  padding-bottom: 8px;
}
/* il blocco con logo, colonne e copyright: largo fino a 1760 px (nel template è 1200) */
.ggwd-footer > .wp-block-group { width: 100%; max-width: 1760px !important; }
/* poco spazio vuoto tra il copyright e il bordo inferiore (nel template sono 40 px) */
.ggwd-footer > .wp-block-group:last-child { padding-bottom: 16px !important; }
/* tutte le colonne hanno un filetto puntinato a destra: l'ultima non ha nulla dopo, quindi niente filetto */
.ggwd-footer .colonna-footer:last-child { border-right: none !important; }


/* ============================================================================
   4. TELEFONO (sotto i 782 px)
   ============================================================================ */
@media (max-width: 781px) {

  /* Margine laterale della pagina: 20 px (il tema lo imposta al 4% della larghezza, circa 15 px).
     Il tema legge il valore da queste due variabili, quindi cambiano insieme tutti i testi e le
     sezioni a tutta larghezza di ogni pagina. Per cambiare il margine modifica "20px" qui sotto. */
  :root,
  html body {
    --wp--style--root--padding-left: 20px !important;
    --wp--style--root--padding-right: 20px !important;
  }

  .site-header > .wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* utilità: l'a capo ".ggwd-br-mobile" compare, il testo ".ggwd-solo-desktop" sparisce */
  .ggwd-br-mobile { display: inline; }
  .ggwd-solo-desktop { display: none; }

  /* FOOTER su telefono: niente immagine di sfondo, colonne una sotto l'altra, tutto a sinistra */
  .ggwd-footer { background-image: none; min-height: 0; padding-top: 27vw; }
  .ggwd-footer .wp-block-columns { row-gap: 30px !important; margin-bottom: 0; }
  .ggwd-footer .wp-block-image { margin: 0; }
  .ggwd-footer .colonna-footer { padding-left: 0 !important; padding-right: 0 !important; min-height: 0 !important; }
  .ggwd-footer .colonna-footer:first-child { padding-bottom: 34px !important; }
  .ggwd-footer .wp-block-image img { width: 175px !important; height: auto; }
  .ggwd-footer .colonna-footer p { font-size: 15px; font-weight: 300; line-height: 1.4; margin: 0; }
  .ggwd-footer .colonna-footer:last-child p { font-size: 10px; font-weight: 400; } /* PRIVACY / COOKIES */

  /* linea tratteggiata bianca sotto al logo */
  .ggwd-footer .colonna-footer:first-child .wp-block-image {
    padding-bottom: 20px;
    margin-bottom: 20px !important;
    border-bottom: 1px dashed #fff;
    width: fit-content;
  }

  /* copyright su due righe, piccolo, grigio e a sinistra */
  .ggwd-footer > .wp-block-group:last-child { padding-top: 37px !important; padding-bottom: 11px !important; }
  .ggwd-footer .has-text-align-center { text-align: left !important; font-size: 10px; line-height: 1.4; color: #8a8a8a !important; margin: 0; }
  .ggwd-footer .has-text-align-center mark { color: inherit !important; }
}