/* =========================================================
   ZERLAB STUDIO — HEADER
   ========================================================= */

.site-header {
  position: relative;
  z-index: 100;

  width: 100%;
  height: 84px;

  padding: 0 var(--page-padding);

  display: grid;

  grid-template-columns:
    210px
    1fr
    auto;

  align-items: center;

  gap: 32px;

  background:
    rgba(251, 249, 245, 0.96);

  border-bottom:
    1px solid
    rgba(7, 24, 44, 0.06);
}


/* =========================================================
   LOGO
   ========================================================= */

.brand {
  width: max-content;

  display: flex;

  flex-direction: column;
  align-items: center;

  line-height: 1;
}


.brand-name {
  color: var(--ink);

  font-size: 31px;
  font-weight: 800;

  letter-spacing: -1.5px;
}


.brand-studio {
  margin-top: 6px;

  padding-left: 7px;

  color: var(--ink);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 7px;
}


/* =========================================================
   NAV
   ========================================================= */

.main-nav {
  display: flex;

  align-items: center;
  justify-content: center;

  gap:
    clamp(18px, 2vw, 36px);
}


.main-nav a {
  position: relative;

  color: var(--ink);

  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;
}


.main-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 1px;

  background: var(--blue);

  transition:
    width 0.25s ease;
}


.main-nav a:hover::after {
  width: 100%;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
  display: flex;

  align-items: center;

  gap: 11px;
}


/* =========================================================
   CTA CONFIGURATORE
   ========================================================= */

.header-cta {
  height: 48px;

  padding:
    0
    24px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 13px;

  border-radius: 16px;

  background: var(--blue);

  color: var(--white);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.35px;

  text-transform: uppercase;

  white-space: nowrap;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.header-cta span {
  font-size: 17px;

  transition:
    transform 0.25s ease;
}


.header-cta:hover {
  background: var(--blue-hover);

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(7, 73, 132, 0.16);
}


.header-cta:hover span {
  transform:
    translateX(4px);
}


/* =========================================================
   WHATSAPP HEADER
   ========================================================= */

.header-whatsapp {
  height: 48px;

  padding:
    0
    17px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  border:
    1px solid
    rgba(7, 24, 44, 0.14);

  border-radius: 16px;

  color: var(--ink);

  background:
    rgba(255, 255, 255, 0.42);

  font-size: 9px;
  font-weight: 750;

  letter-spacing: 0.6px;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}


.header-whatsapp svg {
  width: 20px;
  height: 20px;

  flex-shrink: 0;

  fill: #25d366;
}


.header-whatsapp:hover {
  border-color:
    rgba(37, 211, 102, 0.50);

  background:
    rgba(37, 211, 102, 0.06);

  transform:
    translateY(-2px);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-button {
  width: 32px;
  height: 30px;

  display: none;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;
}


.menu-button span {
  display: block;

  width: 27px;
  height: 1.5px;

  background: var(--ink);

  transition:
    transform 0.25s ease;
}


/* =========================================================
   WHATSAPP FLOTTANTE
   ========================================================= */

.whatsapp-floating {
  position: fixed;

  z-index: 999;

  right: 28px;
  bottom: 28px;

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;
}


/* =========================================================
   ETICHETTA FLOATING
   ========================================================= */

.whatsapp-floating-label {
  padding:
    10px
    14px;

  border:
    1px solid
    rgba(7, 24, 44, 0.08);

  border-radius: 10px;

  color: var(--ink);

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 8px 28px
    rgba(7, 24, 44, 0.10);

  font-size: 10px;
  font-weight: 650;

  white-space: nowrap;

  opacity: 0;

  transform:
    translateX(8px);

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}


.whatsapp-floating:hover
.whatsapp-floating-label {
  opacity: 1;

  transform:
    translateX(0);
}


/* =========================================================
   ICONA FLOATING
   ========================================================= */

.whatsapp-floating-icon {
  width: 56px;
  height: 56px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #25d366;

  box-shadow:
    0 10px 30px
    rgba(7, 24, 44, 0.18);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.whatsapp-floating-icon svg {
  width: 29px;
  height: 29px;

  fill: #ffffff;
}


.whatsapp-floating:hover
.whatsapp-floating-icon {
  transform:
    translateY(-3px)
    scale(1.03);

  box-shadow:
    0 15px 35px
    rgba(7, 24, 44, 0.22);
}


/* =========================================================
   DESKTOP MEDIO
   ========================================================= */

@media (max-width: 1280px) {

  .site-header {
    grid-template-columns:
      185px
      1fr
      auto;

    gap: 22px;
  }


  .main-nav {
    gap: 19px;
  }


  .main-nav a {
    font-size: 12px;
  }


  .header-cta {
    padding:
      0
      19px;

    font-size: 9px;
  }


  .header-whatsapp {
    width: 48px;

    padding: 0;
  }


  .header-whatsapp span {
    display: none;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .site-header {
    grid-template-columns:
      1fr
      auto;
  }


  .main-nav {
    display: none;
  }


  .header-cta {
    display: none;
  }


  .header-whatsapp {
    width: 44px;
    height: 44px;

    padding: 0;
  }


  .header-whatsapp span {
    display: none;
  }


  .menu-button {
    display: flex;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .site-header {
    height: 70px;

    padding-left: 20px;
    padding-right: 20px;
  }


  .brand-name {
    font-size: 25px;
  }


  .brand-studio {
    margin-top: 5px;

    font-size: 7px;

    letter-spacing: 5px;
  }


  .header-actions {
    gap: 10px;
  }


  .header-whatsapp {
    width: 40px;
    height: 40px;

    border-radius: 13px;
  }


  .header-whatsapp svg {
    width: 19px;
    height: 19px;
  }


  /* FLOATING */

  .whatsapp-floating {
    right: 18px;
    bottom: 18px;
  }


  .whatsapp-floating-icon {
    width: 54px;
    height: 54px;
  }


  .whatsapp-floating-icon svg {
    width: 28px;
    height: 28px;
  }


  .whatsapp-floating-label {
    display: none;
  }

}


/* =========================================================
   RIDUZIONE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .header-cta,
  .header-cta span,
  .header-whatsapp,
  .main-nav a::after,
  .whatsapp-floating-label,
  .whatsapp-floating-icon {
    transition: none;
  }

}