/* CUSTOM PROPERTIES */

:root {
  /*TYPOGRAPHY*/
  --header-h2-font: 700 2rem/2.5rem 'Hanken Grotesk', sans-serif;
  --header-h3-font: 700 1.5rem/1.75rem 'Hanken Grotesk', sans-serif;
  --body-l-font: 400 1.125rem/1.75rem 'Hanken Grotesk', sans-serif;
  --body-l-strong-font: 600 1.125rem/1.75rem 'Hanken Grotesk', sans-serif;
  --body-m-font: 400 1rem/1.5rem 'Hanken Grotesk', sans-serif;
  --body-m-strong-font: 600 1rem/1.5rem 'Hanken Grotesk', sans-serif;
  --label-font: 400 0.75rem/1rem 'Hanken Grotesk', sans-serif;
}

/* GENERAL */

html {
  scroll-behavior: smooth;
}

body {
  /* MODIFICA: Usiamo 'clip' invece di 'hidden'. 
     È la best practice moderna per bloccare l'overflow orizzontale senza rompere il 'position: sticky' */
  overflow-x: clip; 
  max-width: 100vw;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Hanken Grotesk", sans-serif;
  font-optical-sizing: auto;
  font: var(--body-m-font);
}

h1 {
  font: var(--body-m-font);
  color: #212121;
}

h2 {
  font: var(--header-h2-font);
  color: #212121;
}

h3 {
  font: var(--header-h3-font);
  color: #212121;
}

p {
  font: var(--body-m-font);
  color: #212121;
}

strong{
  font: var(--body-m-strong-font);
  color: #212121;
}

/* MEDIA QUERIES PER TIPOGRAFIA DESKTOP (Da 1080px in poi) */
@media (min-width: 1080px) {
  *, h1, p {
    font: var(--body-l-font);
  }
  
  strong {
    font: var(--body-l-strong-font);
  }
}

/* BOTTONI */
.button-default-m{
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: #212121;
  color: #ffffff;
  font: var(--body-m-strong-font);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
}

.button-default-m:hover{
  background: #2b2b2b;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.40);
}

.button-default-m:active{
  transform: scale(0.98);
  background: #1A1A1A;
  box-shadow: 0 1.96px 3.92px 0 rgba(0, 0, 0, 0.80);
}

.button-default-l{
  display: inline-flex;
  padding: 1.25rem 3.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: #212121;
  color: #ffffff;
  font: var(--body-m-strong-font);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
}

.button-default-l:hover{
  background: #2b2b2b;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.40);
}

.button-default-l:active{
  transform: scale(0.98);
  background: #1A1A1A;
  box-shadow: 0 1.96px 3.92px 0 rgba(0, 0, 0, 0.80);
}

.button-reverse-m{
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: #ffffff;
  color: #212121;
  font: var(--body-m-strong-font);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
}

.button-reverse-m:hover{
  background: #f7f7f7;
  box-shadow: 0 4px 12px 0 rgba(255, 255, 255, 0.15);
}

.button-reverse-m:active{
  transform: scale(0.98);
  background: #E0E0E0;
  box-shadow: 0 1.96px 3.92px 0 rgba(0, 0, 0, 0.20) inset;
}

.button-reverse-l{
  display: inline-flex;
  padding: 1.25rem 3.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: #ffffff;
  color: #212121;
  font: var(--body-m-strong-font);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
}

.button-reverse-l:hover{
  background: #f7f7f7;
  box-shadow: 0 4px 12px 0 rgba(255, 255, 255, 0.15);
}

.button-reverse-l:active{
  transform: scale(0.98);
  background: #E0E0E0;
  box-shadow: 0 1.96px 3.92px 0 rgba(0, 0, 0, 0.20) inset;
}