/* ==========================================================================
   PVZ 3D - PREMIUM WEBSITES DESIGN SYSTEM & CORE STYLES
   Colors: Viola (Purple) & Bianco (White) - Theme: Hi-Tech / Futuristic B2B
   ========================================================================== */

/* Google Fonts (Outfit/Inter) caricati via <link> nell'HTML, non via @import:
   l'@import qui dentro obbligherebbe il browser a scaricare prima questo file
   e solo dopo scoprire di dover scaricare anche i font, in sequenza invece che in parallelo. */

/* --- CUSTOM VARIABLES --- */
:root {
  /* Brand Colors */
  --primary-rgb: 124, 58, 237;       /* Violet #7c3aed */
  --primary: rgb(var(--primary-rgb));
  --primary-dark: #5b21b6;           /* Deep Violet */
  --primary-light: #6d28d9;          /* Medium-dark violet, readable on white */
  --primary-glow: rgba(124, 58, 237, 0.12);

  --secondary: #7c3aed;
  --white: #ffffff;

  /* Light Tech Theme System */
  --bg-dark-rgb: 255, 255, 255;      /* Page background: white */
  --bg-dark: rgb(var(--bg-dark-rgb));
  --bg-card-rgb: 247, 245, 251;      /* Lightest lavender tint */
  --bg-card: rgb(var(--bg-card-rgb));
  --bg-card-hover: #efe9fb;          /* Subtle purple-lavender hover */

  /* Text colors */
  --text-primary: #1c1523;           /* Near-black violet-tinted */
  --text-secondary: #52525b;         /* Zinc 600 */
  /* Il grigio chiaro (#71717a) scendeva a 4.47:1 sullo sfondo lavanda del
     footer e delle card: sotto il minimo WCAG AA di 4.5:1. Questo e' 5.5:1. */
  --text-muted: #63636d;
  --text-light: #ffffff;

  /* Borders and UI */
  --border-color: rgba(28, 21, 35, 0.08);
  --border-hover: rgba(124, 58, 237, 0.35);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* System / Status
     Verde e rosso sono usati anche come colore del TESTO sopra i loro badge
     tenui (rgba(...,0.15)): le tinte precedenti (#059669 / #dc2626) restavano
     sotto 4.5:1 su quegli sfondi, queste stanno sopra 5:1 ovunque. */
  --success: #065f46;
  --error: #b91c1c;
  --warning: #b45309;
  --info: #2563eb;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout container */
  --container-max-width: 1280px;
}

/* --- RESET & GLOBAL SETTINGS --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

h1 {
  font-size: 3.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  position: relative;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Titoletti compatti (card, blocchi contatto, ecc.).
   Servono per usare il livello di heading corretto secondo la gerarchia della
   pagina (niente salti h2 -> h4, che gli screen reader segnalano come struttura
   incoerente) mantenendo la dimensione ridotta che avevano prima come <h4>. */
.heading-sm {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Stessa idea per i titoli della timeline in "Chi Siamo": sono <h2> perche'
   sono le sezioni principali della pagina, ma restano visivamente compatti. */
.timeline-step h2 {
  font-size: 1.5rem;
}

/* Descrizione del prodotto nello shop.
   "pre-line" mantiene esattamente gli a capo scritti al momento del
   caricamento: se dividi il testo in punti o paragrafi, nello shop si legge
   nello stesso ordine, identico su computer e su telefono. */
.product-desc {
  white-space: pre-line;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Descrizione lunga: si mostra tagliata a quattro righe, con il pulsante
   "Leggi tutto" sotto. Cosi' le schede restano compatte e leggibili anche
   quando il testo e' articolato. */
.product-desc.collassata {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.desc-toggle {
  display: none;            /* lo accende js/shop.js solo se il testo e' tagliato */
  /* La scheda e' un contenitore flessibile: senza questo il pulsante si
     allargherebbe per tutta la larghezza e la scritta finirebbe centrata,
     invece di stare a sinistra sotto la descrizione. */
  align-self: flex-start;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 1rem 0;
  color: var(--primary-dark);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.desc-toggle:hover {
  color: var(--primary);
}

/* La scheda prodotto e' una colonna: prezzo, misura e pulsante restano in
   fondo e risultano allineati fra le schede della stessa riga, anche quando
   le descrizioni hanno lunghezze diverse. */
.product-item-card {
  display: flex;
  flex-direction: column;
}

.product-item-card .product-azioni {
  margin-top: auto;   /* spinge prezzo e pulsante in fondo alla scheda */
  padding-top: 1rem;  /* lo stacco dal contenuto sopra */
}

/* Nome del prodotto nella scheda dello shop: e' un <h2> perche' nella pagina
   viene subito dopo l'<h1> (niente livelli saltati), ma dentro la card deve
   restare della misura giusta. */
.product-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Il CSS di Font Awesome viene caricato in modo asincrono (vedi js/async-css.js)
   per non bloccare il primo rendering: riservo qui lo spazio delle icone cosi'
   il testo accanto non "salta" quando il font arriva (evita layout shift).
   1.25em e' la larghezza fissa usata da Font Awesome stesso per .fa-fw. */
.fa-solid, .fa-regular, .fa-brands, .fas, .far, .fab {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
}

/* --- LAYOUT UTILITIES --- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section-padding {
  padding: 8rem 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* --- CAROSELLO RECENSIONI (scorrimento orizzontale) --- */
.reviews-carousel-wrapper {
  position: relative;
  margin: 0 auto 1.5rem auto;
  max-width: 100%;
  /* "Corridoio" riservato alle frecce ai due lati: le card del carosello
     non arrivano mai fin li', quindi le frecce non coprono mai il testo. */
  padding: 0 56px;
}

.reviews-carousel {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.25rem 1rem 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.reviews-carousel > * {
  flex: 0 0 auto;
  width: 340px;
  max-width: 100%;
  scroll-snap-align: start;
}

.reviews-carousel-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(28, 21, 35, 0.12);
  transition: var(--transition-fast);
}

.reviews-carousel-arrow:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.reviews-carousel-prev { left: 0; }
.reviews-carousel-next { right: 0; }

@media (max-width: 900px) {
  .reviews-carousel-wrapper {
    padding: 0 40px; /* corridoio piu' stretto per le frecce piu' piccole */
  }
  .reviews-carousel > * {
    width: 85%; /* lascia intravedere un pezzo della card successiva */
  }
  .reviews-carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .reviews-carousel-prev { left: 0; }
  .reviews-carousel-next { right: 0; }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-center {
  text-align: center;
}

/* --- GRADIENT TEXT --- */
.gradient-text {
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.purple-glow-text {
  text-shadow: 0 0 20px rgba(124, 58, 237, 0.35);
}

/* --- INTERACTIVE BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  border: 1px solid transparent;
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

.btn-secondary {
  background: rgba(28, 21, 35, 0.03);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: rgba(28, 21, 35, 0.06);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.btn-text {
  background: transparent;
  color: var(--primary-light);
  padding: 0.5rem 1rem;
}

.btn-text:hover {
  color: var(--primary-dark);
}

/* --- GLASSMORPHISM CARDS --- */
.glass-card {
  background: rgba(var(--bg-card-rgb), 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.15), transparent);
}

.glass-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hover);
  box-shadow: 0 10px 40px rgba(124, 58, 237, 0.12);
  background: rgba(var(--bg-card-rgb), 0.85);
}

/* --- FORMS & INPUTS --- */
.form-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Nei moduli su due colonne un menu a tendina con una voce lunga ("Parte
   meccanica soggetta ad alto stress/usura") allargava la sua colonna fino a
   farla uscire dal riquadro: cosi' le colonne restano uguali. */
.grid-2 > .form-group {
  min-width: 0;
}

.form-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.form-input, .form-textarea, .form-select {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  background: rgba(28, 21, 35, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  color: var(--text-primary);
  transition: var(--transition-fast);
  outline: none;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--primary);
  background: rgba(28, 21, 35, 0.04);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.15);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* File Upload Field */
.file-upload-container {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-normal);
  background: rgba(28, 21, 35, 0.015);
}

.file-upload-container:hover, .file-upload-container.dragover {
  border-color: var(--primary);
  background: rgba(124, 58, 237, 0.04);
}

.file-upload-icon {
  font-size: 2.5rem;
  color: var(--primary-light);
  margin-bottom: 1rem;
}

.file-upload-input {
  display: none;
}

/* --- BADGES & STATUSES --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-purple {
  background: rgba(124, 58, 237, 0.10);
  color: var(--primary-dark);
  border: 1px solid rgba(124, 58, 237, 0.3);
}

/* --- HEADER & NAVIGATION --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-normal);
}

header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  padding: 0.75rem 0;
  box-shadow: 0 10px 30px rgba(28, 21, 35, 0.08);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.logo-link img {
  height: 45px;
  width: auto;
}

/* Con la voce FAQ il menu ha 8 voci: con 1.75rem tra una e l'altra
   "Lavori e Recensioni" andava a capo anche sugli schermi grandi (il
   contenitore e' largo al massimo 1280px). */
.nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  align-items: center;
}

/* Appena sopra la soglia del menu a tendina (1200px) lo spazio e' ancora meno */
@media (max-width: 1320px) {
  .nav-links {
    gap: 1rem;
  }
}

.nav-link {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  position: relative;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-dark);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-light);
  transition: var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.menu-toggle {
  display: none;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
}

/* --- FOOTER --- */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: 5rem 0 2rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-logo img {
  height: 50px;
  margin-bottom: 1.5rem;
}

.footer-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.footer-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: var(--primary-dark);
  padding-left: 5px;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(28, 21, 35, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: var(--transition-normal);
}

.footer-social-icon:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-3px);
  border-color: var(--primary);
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-copy, .footer-legal a {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-legal a {
  margin-left: 1.5rem;
}

.footer-legal a:hover {
  color: var(--primary-dark);
}

/* --- HERO GLOW DECORATIONS --- */
.hero-glow-1 {
  position: absolute;
  top: -10%;
  left: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.10) 0%, rgba(255,255,255,0) 70%);
  z-index: -1;
  pointer-events: none;
}

.hero-glow-2 {
  position: absolute;
  bottom: 10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.07) 0%, rgba(255,255,255,0) 70%);
  z-index: -1;
  pointer-events: none;
}

/* Sul telefono gli aloni larghi 500-600px sporgevano dallo schermo: la
   pagina risultava larga 580px invece di 412 e alcuni telefoni la
   rimpicciolivano. Qui restano larghi quanto lo schermo. */
@media (max-width: 768px) {
  .hero-glow-1 { left: 0; width: 100%; }
  .hero-glow-2 { right: 0; width: 100%; }
}

/* Icone di Instagram e TikTok disegnate direttamente nella pagina (SVG).
   Con le icone "fa-brands" ogni pagina scaricava 106 KB di caratteri solo
   per queste due. Disegni di Font Awesome Free 6.4.0 (CC BY 4.0). */
.icona-social {
  display: block;
  width: 0.875em;
  height: 1em;
  fill: currentColor;
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1024px) {
  h1 { font-size: 2.75rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}

/* --- DOMANDE FREQUENTI (faq.html) ---
   <details> nativo: si apre e si chiude senza JavaScript ed e' gia'
   utilizzabile da tastiera e dai lettori di schermo. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--border-hover);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Il "+" diventa una "x" quando la risposta e' aperta */
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--primary-light);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.faq-item p {
  margin: 0;
  padding: 0 1.25rem 1.25rem 1.25rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Il menu desktop con 7 voci + CTA + selettore lingua non entra piu' comodamente
   sotto i ~1200px: sotto quella soglia si passa al menu mobile ad hamburger. */
@media (max-width: 1200px) {
  .nav-links {
    display: none; /* Mobile menu implementation in main.js */
  }
  .menu-toggle {
    display: block;
  }
}

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 2rem; }
  .section-padding { padding: 5rem 0; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal a { margin: 0 0.75rem; }
}