/* Pagina CSS per il tema generale del sito. Contiene variabili per i colori, stili di base, classi per bottoni e utility, e animazioni. */

/* ---- FONT ---- */
@font-face {
  font-family: 'din-2014';
  src: url('font/din-2014.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* ---- VARIABILI CSS ---- */
:root {
  --bg: #000000; /* Sfondo nero */
  --text: #f5f5f5;
  --muted: #cfcfcf;
  --line: rgba(241, 241, 241, 0.14);
  
  /* Palette Brasile */
  --verde: #009C3B;      
  --giallo: #FFDF00;      
  --blu: #002776;         
  
  /* Accent e varianti */
  /* Accent sono i colori principali usati per bottoni, link e elementi interattivi. Accent-2 è una variante più chiara per gli stati hover. */
  --accent: var(--verde);
  --accent-2: #00b345;    /* Verde più chiaro per hover */
  --panel: var(--blu);
  --panel2: var(--giallo);
  --panelText: #111111;
  
  /* Altri colori */
  --hover-gray: rgba(255, 255, 255, 0.651);
  --overlay-grad: linear-gradient(90deg, 
    rgba(0, 39, 118, 0.3) 0%,    /* Blu con trasparenza */
    rgba(0, 156, 59, 0.15) 40%,   /* Verde con trasparenza */
    rgba(255, 223, 0, 0.1) 60%,   /* Giallo con trasparenza */
    rgba(0, 0, 0, 0.3) 100%
  );
  
  /* Layout */
  --header-h: 100px;
  --header-h-mobile: 64px;
  --radius: 14px;
  --max: 1200px;
  --pad: clamp(18px, 4vw, 56px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg); /* #000000 */
  color: var(--text);
  font-family: 'din-2014', sans-serif;
  color: #fff;
}

/* Classe per nascondere elementi visivamente ma mantenerli accessibili agli screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- BOTTONI ---- */
.btn {
  --ring: rgba(255, 223, 0, 0.35); /* Giallo per l'ombra */
  appearance: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 18px;
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--accent-2);
  box-shadow: 0 10px 30px var(--ring);
}

/* Bottoni ghost: trasparenti con bordo sottile, che diventano più evidenti al passaggio del mouse */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.btn-ghost:hover {
  background: rgba(255, 223, 0, 0.1); /* Giallo tenue */
  border-color: var(--giallo);
}

/* ---- UTILITY CLASSI ---- */
.text-verde { color: var(--verde); }
.text-giallo { color: var(--giallo); }
.text-blu { color: var(--blu); }

.bg-verde { background: var(--verde); }
.bg-giallo { background: var(--giallo); }
.bg-blu { background: var(--blu); }

.border-verde { border-color: var(--verde); }
.border-giallo { border-color: var(--giallo); }
.border-blu { border-color: var(--blu); }

/* ---- STILI PER IMMAGINI ---- */
/* Migliora la visualizzazione di tutte le immagini */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Overlay gradient con i colori del Brasile per le hero section */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(0, 39, 118, 0.4) 0%,
    rgba(0, 156, 59, 0.3) 50%,
    rgba(255, 223, 0, 0.2) 100%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}

/* Effetto glow per i testi */
.text-glow-verde {
  text-shadow: 0 0 30px rgba(0, 156, 59, 0.5);
}

.text-glow-giallo {
  text-shadow: 0 0 30px rgba(255, 223, 0, 0.5);
}

.text-glow-blu {
  text-shadow: 0 0 30px rgba(0, 39, 118, 0.5);
}

/* ---- ANIMAZIONI ---- */
/* Animazione per far apparire gli elementi con un effetto di fade-in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Classi per applicare le animazioni */
.fade-in {
  animation: fadeIn 1s ease forwards;
}

/* La classe .slide-up applica un'animazione che fa scorrere l'elemento verso l'alto mentre appare */
.slide-up {
  animation: slideUp 0.8s ease forwards;
}