/*
 * Header responsive misurato sul sito Elementor originale.
 *
 * > 1024px: desktop, header 66px e navigazione orizzontale.
 * 768–1024px: tablet, header 45px e pulsante menu.
 * <= 767px: mobile, header 66px e logo da 160px.
 *
 * Questo override è caricato per ultimo su tutte le pagine.
 */

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --header: 45px;
  }

  header[data-site-header],
  .site-header {
    height: 45px;
  }

  .site-header {
    padding: 0 10px 0 30px;
  }

  .brand img {
    width: 270px;
  }

  .menu-toggle {
    display: block;
    width: 24px;
    height: 25px;
    padding: 0;
    font-size: 24px;
    line-height: 24px;
  }

  .nav {
    position: fixed;
    inset: 45px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: var(--green);
    transform: translateX(-100%);
    transition: transform .35s;
  }

  .nav.open {
    transform: none;
  }

  .nav a {
    height: auto;
    padding: 0;
    font: 700 42px/1 var(--display);
  }
}

@media (max-width: 767px) {
  :root {
    --header: 66px;
  }

  header[data-site-header],
  .site-header {
    height: 66px;
  }

  .site-header {
    padding: 0 30px;
  }

  .brand img {
    width: 160px;
  }

  .menu-toggle {
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 24px;
    line-height: 24px;
  }

  .nav {
    inset: 66px 0 0;
  }
}