/* =========================================================================
   BASE.CSS
   Qui dentro trovi le regole "di base" valide per tutto il sito:
   - i colori del brand (facili da cambiare tutti insieme)
   - i font usati nei titoli e nei testi
   - il reset (per far partire tutti i browser dallo stesso punto)
   - gli stili generici di titoli, paragrafi, link, bottoni base
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) FONT (in locale, dentro assets/fonts/)
   Prima venivano caricati da Google Fonts direttamente al volo: per motivi
   di privacy (caricarli da Google invia l'indirizzo IP di chi visita il
   sito ai loro server, senza consenso) sono stati scaricati e vengono
   serviti dal sito stesso. Se in futuro arrivano i font definitivi da
   Figma, basta sostituire i file .woff2 dentro assets/fonts/ e aggiornare
   i nomi qui sotto e nelle variabili --font-heading/--font-body. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600; /* un solo file copre i pesi da 400 a 600 (font "variabile") */
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../assets/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../assets/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

/* -------------------------------------------------------------------------
   2) VARIABILI DEL BRAND
   Cambia i valori qui sotto per aggiornare colori, font e spaziature
   in TUTTO il sito in un colpo solo.
   ------------------------------------------------------------------------- */
:root {
  /* Colori principali del brand */
  --color-black: #0d0d0d;       /* nero usato per testi e sfondi scuri */
  --color-white: #ffffff;       /* bianco */
  --color-accent: #7b2881;      /* viola: colore distintivo di Vorak Studio */
  --color-gray-light: #d9d9d9;  /* grigio chiaro: sfondo delle immagini placeholder */
  --color-gray-text: #6b6b6b;   /* grigio scuro: usato per testi secondari */
  --color-border: #e6e6e6;      /* grigio chiarissimo: linee e bordi sottili */
  --color-bg-muted: #f4f4f4;    /* grigio chiarissimo: sfondo di sezioni "in evidenza" */

  /* Font */
  --font-heading: 'Space Grotesk', Arial, sans-serif; /* titoli grandi e bold */
  --font-body: 'Inter', Arial, sans-serif;             /* testi normali */
  --font-marquee: 'Syne', Arial, sans-serif;           /* font della scritta scorrevole */

  /* Larghezza massima del contenuto (per non far allargare troppo il testo su schermi enormi) */
  --container-width: 1280px;

  /* Spaziatura verticale tra una sezione e l'altra */
  --section-padding: 4rem;
}

@media (min-width: 900px) {
  :root {
    --section-padding: 7rem;
  }
}

/* -------------------------------------------------------------------------
   3) RESET
   Regole tecniche per far comportare tutti i browser allo stesso modo.
   Non serve modificare questa parte.
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Niente "scroll-behavior: smooth" qui: se messo su tutta la pagina,
   il browser anima ANCHE il ripristino automatico della posizione di
   scroll quando si torna indietro con il tasto "indietro" (es. da una
   pagina di un servizio alla home) - risultato: per un attimo si vede
   la cima della pagina, poi scorre verso il punto giusto. Lo scroll
   animato sui link con ancora (#servizi, #progetti...) è gestito invece
   in js/main.js, punto 11), solo per quel caso specifico. */

body {
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* -------------------------------------------------------------------------
   4) TITOLI E TESTI
   Stile di base per tutti i titoli (h1, h2, h3...) del sito.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

h3 {
  font-size: 1.25rem;
  text-transform: none;
}

p {
  color: var(--color-gray-text);
}

/* Etichetta piccola maiuscola e spaziata, usata sopra ai titoli (es. "CIAO!") */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

/* -------------------------------------------------------------------------
   5) CONTENITORE GENERICO
   Racchiude il contenuto e lo centra, con un margine laterale minimo
   così su smartphone il testo non tocca i bordi dello schermo.
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 900px) {
  .container {
    padding-inline: 3rem;
  }
}

/* Titolo scritto già con le maiuscole giuste: annulla l'uppercase automatico
   di h1/h2/h3/h4 qui sopra (usato nelle pagine servizio) */
.title-case {
  text-transform: none;
}

/* Colora una parola col viola del brand (es. la parola "servizi" in un titolo) */
.accent-text {
  color: var(--color-accent);
}

/* Utility per nascondere testo visivamente ma tenerlo per lettori di schermo (accessibilità/SEO) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Tiene la pagina invisibile per un attimo quando si apre già su
   un'ancora (es. tornando da una pagina servizio): la classe
   "ancora-in-attesa" viene aggiunta subito da uno script in cima alla
   pagina, e tolta da js/main.js appena la posizione di scroll è quella
   giusta - così non si vede mai un fotogramma nel punto sbagliato (es.
   la hero) prima dello scatto alla sezione corretta. */
html.ancora-in-attesa body {
  visibility: hidden;
}