/*    base.css
===== VARIABILI E RESET ===== */

:root {

    /* ========================================
      HEADER SUPERIORE (LOGO E CONTATTI)
      ======================================== */
      /* ===== VARIABILI PER ALTEZZE HEADER ===== */
    --header-height: 115px;
    --menu-height: 48px;       /*  altezza menu */
    --header-total-height: calc(var(--header-height) + var(--menu-height)); /*  altezza totale */
      /* ===== COLORI PER HEADER ============ */
    --header-sfondo: var(--grigio-chiaro);        /* ok Sfondo header superiore */
    --header-ombra: 0 2px 10px rgba(0,0,0,0.1);   /* Ombra header */   

    /* ========================================
       TIPOGRAFIA LEGGIBILE
       ======================================== */
    --font-principale: 'Arial', 'Helvetica', sans-serif;
    --font-size-base: 18px; /* LEGGIBILITÀ MASSIMA */
    --font-size-base-mobile: 18px; /* LEGGIBILITÀ MASSIMA */
    --line-height: 1.6;

    /* ========================================
       COLORI BASE
       ======================================== */
    --bianco: #ffffff;
    --nero: #000000;
    --grigio-chiarissimo: #f7fafc;
    --grigio-chiaro: #e2e8f0;
    --grigio-medio: #4a5568;
    --grigio-scuro: #252628;
    --grigio-testo: #3a3a3b;
    --rosso: #ff0000;
    --rosso-scuro: #920606;
    --blu-scuro: #040247;
    /* ========================================
    COLORI PRIMARI - SECONDARI DEL SITO
    ======================================== */
    --primario-scuro: #1a365d;     /* Blu notte - testi importanti, header */
    --primario-medio: #2c5282;     /* Blu medio - hover, elementi intermedi */
    --primario-chiaro: #3182ce;    /* Blu chiaro - accenti, dettagli */
    --secondario-scuro: #860303;   /*Colore secondario scuro */
    --secondario-medio:  #b50202;   /*Colore secondario medio */
    --secondario-chiaro: #f40303;   /*Colore secondario chiaro */

    /* ========================================
       MENU - DESKTOP
       ======================================== */
    --menu-desk-sfondo: var(--primario-scuro);            /* Sfondo barra menu */
    --menu-desk-testo: var(--bianco);                      /* Testo voci */
    --menu-desk-testo-hover: var(--bianco);                /* Testo hover */
    --menu-desk-sfondo-hover: var(--primario-medio);       /* Sfondo hover */
    --menu-desk-testo-attivo: var(--bianco);               /* Testo pagina corrente */
    --menu-desk-sfondo-attivo: var(--primario-chiaro);      /* Sfondo pagina corrente */
    --menu-desk-padding-verticale: 12px;
    --menu-desk-padding-orizzontale: 25px;
    --menu-desk-bordo-tra-voci: 1px solid rgba(255,255,255,0.1);
    --menu-desk-attivo-sottolineatura: 3px solid var(--bianco);
    --menu-desk-attivo-sottolineatura-larghezza: 80%;
    
    /* ========================================
       MENU - MOBILE (hamburger e tendina)
       ======================================== */
    --menu-mobile-sfondo-barra: var(--primario-scuro);    /* Sfondo barra hamburger */
    --menu-mobile-colore-hamburger: var(--bianco);         /* Colore icona ☰ */
    --menu-mobile-sfondo-tendina: var(--primario-medio);   /* Sfondo menu a tendina */
    --menu-mobile-bordo-superiore: 2px solid var(--primario-chiaro);
    --menu-mobile-testo: var(--bianco);                    /* Testo voci */
    --menu-mobile-testo-hover: var(--bianco);
    --menu-mobile-sfondo-hover: var(--primario-scuro);     /* Sfondo hover/tocco */
    --menu-mobile-padding-verticale: 15px;
    --menu-mobile-padding-orizzontale: 25px;
    --menu-mobile-bordo-tra-voci: 1px solid var(--primario-chiaro);
    --menu-mobile-attivo-sfondo: var(--primario-scuro);    /* Voce attiva */
    --menu-mobile-attivo-bordo-sinistro: 5px solid var(--bianco);
    --menu-mobile-ombra: 0 5px 25px rgba(0,0,0,0.3);
    --menu-mobile-altezza-massima: 80vh;
    
    /* ========================================
       DROPDOWN (sottomenu)
       ======================================== */
    --dropdown-sfondo: var(--primario-scuro);
    --dropdown-testo: var(--bianco);
    --dropdown-testo-hover: var(--bianco);
    --dropdown-sfondo-hover: var(--primario-medio);
    --dropdown-ombra: 0 8px 16px rgba(0,0,0,0.2);
    --dropdown-min-width: 220px;

    /* ========================================
       FOOTER
       ======================================== */
    --footer-backgruond: #8d0303;           /* Backgruond footer */
    --footer-border: #5b0202;               /* Border footer */
    --footer-border-bottom: #ff4747;        /* Border-bottom footer */
    --footer-testo: #ffffff;                /* Testo footer */
    --footer-link: #cccccc;                 /* Link nel footer */

    /* ========================================
       COOKIE BANNER COOKIES
       ======================================== */
    --cookie-testo-cliccabile: #3182ce;    
    --cookie-testo: #ffffff;     
    --cookie-rosso: #ff0000; 
    --cookie-rosso-chiaro: #f33333; 
    --cookie-verde: #29ba05;   
    --cookie-verde-chiaro: #52b739;   
    --cookie-background: #032f4f;   
     
       
    /* ========================================
       ACCORDION (tabelle e voci)
       ======================================== */
    --accordion-intestazione-sfondo: #2C3E50;  
    --accordion-intestazione-testo: #ffffff;       /* Testo intestazione */
    --accordion-background: #ffffff;               /* background */
    --accordion-bordo: #e2e8f0;                    /* Colore bordi */
    --accordion-riga-pari: #bcdaee;                /* Righe alternate pari */
    --accordion-riga-dispari: #d9f1f5;             /* Righe alternate dispari */
    --accordion-riga-hover: #5dcceb;               /* Hover righe */

    /* ========================================
       ACCORDION - INTESTAZIONE BLOCCO TESTATE
       colore testo e sfondo sono decisi dall'utente 
       quamdo inserisce i record delle righe
       ======================================== */
    --accordion-border-bottom:  #5aa1f8;        /* Riga separazione fra i titoli delle voci */
    
    /* ========================================
       ACCORDION - VOCI (righe)
       ======================================== */
    /* Contenuto espanso */
    --accordion-contenuto-sfondo: #ffffff;           /* Sfondo area testo espanso */
    --accordion-contenuto-testo: #044789;            /* -Colore testo delle righe */

    --accordion-voce-sfondo-default: #F8F9FA;       /* Sfondo titolo voce (default) */
    --accordion-voce-testo-default: #383737;         /* Colore testo voce (default) */
    --accordion-voce-sfondo-hover: #7bcbf6;          /* TITOLO ACCORDION Sfondo al passaggio mouse */
    
    /* Liste puntate */
    --lista-pallino: disc;                  /* Stile pallino (disc, circle, square) */
    --lista-colore: inherit;                 /* Colore testo liste */

    /* ========================================
       BORDI E OMBRE
       ======================================== */
    --bordo-raggio: 6px;                             /* Arrotondamento bordi */
    --ombra-leggera: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombra leggera */
    --ombra-media: 0 4px 12px rgba(0, 0, 0, 0.15);    /* Ombra media */
    
}

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

/* variabili valide per tutto il sito */
body {
    font-family: var(--font-principale);  /* Imposta il tipo di carattere per tutto il sito */
    font-size: var(--font-size-base);      /* Imposta la dimensione base del testo (18px) */
    line-height: var(--line-height);       /* Imposta l'interlinea (1.6 = 60% più spazio del normale) */
    color: var(--grigio-testo);            /* Colore del testo principale (grigio #4a5568) */
    background: var(--bianco);              /* Colore di sfondo dell'intera pagina */
}

/* ===== ACCESSIBILITÀ ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Contrasto alto per leggibilità */
a {
    color: var(--primario-medio);
    text-decoration: underline;
}

a:hover {
    color: var(--primario-scuro);
}

/* ===== UTILITY CLASSI ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center { text-align: center; }
.text-large { font-size: 1.2em; }
.text-xlarge { font-size: 1.4em; }

/* Responsive per vecchi smartphone */
@media (max-width: 320px) {
    body {
        font-size: 16px; /* Leggermente più piccolo per schermi piccolissimi */
    }
    
    .container {
        padding: 0 10px;
    }
}

/* BOTTONE Effetto Lucido con linea trasversale obliqua */
/* ---------- BOTTONI OTTIMIZZATI ---------- */
.btn {
  display: inline-block;
  width: 100%;
  max-width: 300px; 
  padding: 12px 20px;
  margin: 10px 0;
}

/* ---------- TOUCH AI BOTTONI ---------- */
@media (hover: none) {
  .btn-1:hover {
    background: linear-gradient(135deg, #0a0131, #350a8b); 
  }
}

  /* bordo rosso ai paragrafi */
  .p_border_arancio {
    font-size: 15px;
    text-align: justify;
    border: solid 3px #f90303;
    width: 100%;
    padding: 10px;
    border-radius: 20px; 
    -webkit-box-shadow: 5px 5px 10px 0px #ff4500; 
    -moz-box-shadow: 5px 5px 10px 0px #ff4500;
    -o-box-shadow: 5px 5px 10px 0px #ff4500;
    box-shadow: 5px 5px 10px 0px #ff4500;
  }
    /* bordo blu ai paragrafi */
  .p_border_blu {
    font-size: 15px;
    text-align: justify;
    border: solid 1px #4c0101;
    width: 100%;
    padding: 10px;
    border-radius: 20px; 
    -webkit-box-shadow: 5px 5px 10px 0px #0f014c; 
    -moz-box-shadow: 5px 5px 10px 0px #0f014c;
    -o-box-shadow: 5px 5px 10px 0px #0f014c;
    box-shadow: 5px 5px 10px 0px #0f014c;
  }
      /* bordo blu ai paragrafi */
  .p_border_rosso {
    font-size: 15px;
    text-align: justify;
    border: solid 1px #4c0101;
    width: 100%;
    padding: 10px;
    border-radius: 20px; 
    -webkit-box-shadow: 5px 5px 10px 0px #fb0000; 
    -moz-box-shadow: 5px 5px 10px 0px #fb0000;
    -o-box-shadow: 5px 5px 10px 0px #fb0000;
    box-shadow: 5px 5px 10px 0px #fb0000;
  }

/*  bottoni */
.btn {
      text-align: center; 
      text-decoration: none; 
      cursor: pointer; 
      transition: all 0.3s ease;
      font-weight: 600; 
      border-radius: 8px; 
      }

/*  BOTTONE 1 arancio gradiente  btn-1  */
  .btn-1 {
      background: linear-gradient(135deg, #0a0131, #350a8b); 
      color: white; 
      border: none; 
      padding: 12px 52px; 
      position: relative; 
      overflow: hidden; 
      box-shadow: 0 4px 12px rgba(255, 125, 51, 0.3); 
      font-size: 16px; 
  }
  /* Effetto riflesso lucido sul bottone primario */
  .btn-1::after {
      content: ''; 
      position: absolute; 
      top: -10%; 
      left: -20%; 
      width: 150%; 
      height: 40%;
      background: rgba(255, 255, 255, 0.25); 
      transform: rotate(15deg); 
      transition: opacity 0.3s; 
  }
  /* Cambiamento al passaggio del mouse (hover) sul bottone primario */
  .btn-1:hover {
      background: linear-gradient(135deg, #31cf20, #296e04); 
      box-shadow: 0 6px 16px rgba(255, 125, 51, 0.4); 
  }
  /* Quando il mouse passa sopra il bottone primario, il riflesso diventa visibile */
  .btn-1:hover::after {
      opacity: 0.5; 
  }
  /* Effetto quando il bottone primario è premuto (active) */
  .btn-1:active {
      transform: scale(0.98);
  }
/*  FINE BOTTONE 1 blu gradiente  btn-1  */
/* FINE BOTTONE Effetto Lucido con linea trasversale obliqua */