/* ================================================================
   style.css – Noviqon Brand Global Stylesheet
   Gestione automatica Light Mode / Dark Mode via CSS Variables
   Applicato su: index, chi-siamo, contattaci, faq, cookie,
                 privacy, termini
================================================================ */


/* ----------------------------------------------------------------
   SEZIONE 1 – VARIABILI COLORE (Light Mode – default)
   Identiche all'immagine originale fornita dal cliente:
   - Sfondo generale: grigio chiarissimo
   - Box form/card: bianco pulito
   - Input: bianchi con bordo grigio sottile
   - Bottone: viola pieno (#7c3aed)
---------------------------------------------------------------- */
:root {
  /* Sfondo generale della pagina */
  --background:       240 6% 97%;

  /* Colore del testo principale */
  --foreground:       220 30% 10%;

  /* Sfondo della card / grande box del form */
  --card:             0 0% 100%;
  --card-foreground:  220 30% 10%;

  /* Viola brand Noviqon (#7c3aed) – invariato in entrambi i temi */
  --primary:          262 83% 58%;
  --primary-foreground: 0 0% 100%;

  /* Colore scuro usato nell'header/footer/hero con overlay */
  --secondary:        240 5.9% 10%;
  --secondary-foreground: 0 0% 98%;

  /* Sfondo muted (sezioni alternate, tooltip) */
  --muted:            240 5% 96%;
  --muted-foreground: 240 4% 46%;

  /* Accent = stesso viola brand */
  --accent:           262 83% 58%;
  --accent-foreground: 0 0% 100%;

  /* Errori */
  --destructive:      0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  /* Bordi generali e input */
  --border:           220 13% 91%;  /* #e5e7eb – grigio leggero */
  --input:            0 0% 100%;    /* sfondo input bianco */
  --input-border:     220 13% 91%; /* bordo grigio sottile input */

  /* Colore del ring focus */
  --ring:             262 83% 58%;

  /* Raggio bordi globale */
  --radius:           0.5rem;
}


/* ----------------------------------------------------------------
   SEZIONE 2 – VARIABILI COLORE (Dark Mode – automatica)
   Si attiva quando il sistema operativo è in modalità scura.
   La struttura rimane identica; solo i valori cambiano.
---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Sfondo generale: quasi nero */
    --background:       240 10% 4%;

    /* Testo: grigio chiaro su sfondo scuro */
    --foreground:       240 5% 96%;

    /* Card/box del form: grigio scuro (non completamente nero) */
    --card:             240 6% 9%;
    --card-foreground:  240 5% 96%;

    /* Colore secondario (header/footer in dark mode) */
    --secondary:        240 4% 16%;
    --secondary-foreground: 0 0% 98%;

    /* Sfondo muted */
    --muted:            240 4% 12%;
    --muted-foreground: 240 5% 65%;

    /* Violet brand rimane identico – sempre #7c3aed */
    --accent:           262 83% 58%;
    --accent-foreground: 0 0% 100%;

    /* Bordi visibili su sfondo scuro */
    --border:           240 5% 16%;

    /* Input scuri */
    --input:            240 4% 12%;
    --input-border:     240 4% 20%;
  }

  /* ----------------------------------------------------------
     LOGO NELL'HEADER – Inversione automatica in Dark Mode
     Il file log_nov.png è scuro su sfondo trasparente.
     In dark mode l'header diventa scuro, quindi il logo
     viene invertito a bianco con CSS filter.

     NOTA: i logo nel footer e nelle sezioni hero hanno già
     style="filter: brightness(0) invert(1)" direttamente
     nell'HTML (sono sempre bianchi), quindi non servono regole
     aggiuntive per loro.
  ---------------------------------------------------------- */
  header img.logo-img {
    filter: brightness(0) invert(1);
  }

  /* Il logo nella sezione h1 di contattaci non ha inline filter */
  main img.logo-img {
    filter: brightness(0) invert(1);
  }
}


/* ----------------------------------------------------------------
   SEZIONE 3 – HEADER (sovrascrive Tailwind bg-white/95)
   La classe Tailwind hardcoda il bianco; la sovrascriviamo con
   la variabile CSS in modo che diventi scuro in dark mode.
---------------------------------------------------------------- */
header {
  background-color: hsl(var(--card) / 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ----------------------------------------------------------------
   SEZIONE 4 – CAMPI FORM (input, select, textarea)
   Usano variabili dedicate (--input, --input-border) per
   garantire sfondo bianco in light mode e scuro in dark mode.
---------------------------------------------------------------- */
.form-input,
.form-select,
textarea {
  background-color: hsl(var(--input)) !important;
  border-color:     hsl(var(--input-border)) !important;
  color:            hsl(var(--foreground)) !important;
}

.form-input:focus,
.form-select:focus,
textarea:focus {
  border-color: hsl(var(--ring)) !important;
  box-shadow:   0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

.form-input::placeholder,
textarea::placeholder {
  color:   hsl(var(--muted-foreground)) !important;
  opacity: 0.65;
}


/* ----------------------------------------------------------------
   SEZIONE 5 – OTTIMIZZAZIONE MOBILE (max-width: 768px)
---------------------------------------------------------------- */
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }

  h1 { font-size: 2.25rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.75rem !important; line-height: 1.3 !important; }
  section { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  .form-input, .form-select, textarea {
    width: 100% !important;
    font-size: 16px !important; /* previene zoom iOS su focus */
  }

  button, .btn, #submit-btn {
    min-height: 48px !important; /* area tocco minima accessibile */
  }
}