/* avaguard.it — correzioni di impaginazione (25/10/2026). Solo layout: testi, colori e font restano quelli della pagina. */

/* «Stanco di sistemi…»: sei schede su una riga si schiacciano sui portatili (titoli che toccano il bordo, parole
   spezzate). Fino a 1535px stanno su due righe da tre, stesse altezze e stessi spazi. */
@media (min-width: 1024px) and (max-width: 1535.98px) {
  #features .grid.lg\:grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
#features .feature-card h3 { overflow-wrap: normal; hyphens: manual; }

/* Numeri di telefono mai spezzati a metà. */
a[href^="tel:"] { white-space: nowrap; }

/* Telefono: bersagli comodi per il dito. */
@media (max-width: 767px) {
  #menu-toggle { padding: 10px; margin: -10px; }
  footer a { display: inline-block; padding-block: 0.35rem; }
}

/* Titoli: righe bilanciate, mai una parola sola sull'ultima riga (stesso testo, solo dove va a capo). */
h1, h2, h3 { text-wrap: balance; }

/* Barra in alto. Il logo non si restringe mai (prima «Videosorveglianza» finiva sopra la scritta AVAGUARD). */
.navcontainer .logotitle { flex-shrink: 0; white-space: nowrap; }
.navcontainer > .container { position: relative; }
/* Tablet (768–1023px): le quattro voci non stanno accanto al logo (andavano a capo su più righe, bianche su
   fondo bianco, quindi invisibili). Qui vale il menu a tendina del telefono: icona ☰ e voci in colonna. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #menu-toggle { display: block !important; }
  #mobile-menu {
    position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important;
    flex-direction: column !important; background: #143a4e !important; padding: 1rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
  }
  #mobile-menu.hidden { display: none !important; }
  #mobile-menu > * + * { margin-left: 0 !important; margin-top: 0.5rem !important; }
  #mobile-menu > a { padding: 0.5rem 1rem !important; font-weight: 700; }
}
/* Portatili piccoli (1024–1279px): voci su una riga sola, spaziatura un po' più stretta. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #mobile-menu > a { white-space: nowrap; font-size: 0.875rem; }
  #mobile-menu > * + * { margin-left: 1.25rem !important; }
}

/* Titolo «Le testimonianze…»: è centrato, quindi anche la lineetta sotto va al centro (era a sinistra). */
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }

/* F.A.Q.: le frecce restano sopra la fascia inclinata del titolo, sempre cliccabili. */
#faq-prev, #faq-next { z-index: 1000; }

/* Tablet e telefono: i video delle testimonianze (larghi 18rem) centrati nella loro colonna, non appoggiati a sinistra. */
@media (max-width: 768px) {
  .videorecensione, #pa-security .relative.rounded-lg.shadow-lg { margin-left: auto !important; margin-right: auto !important; }
}

/* F.A.Q. da computer: l'etichetta inclinata «F.A.Q. Videosorveglianza comune» usciva dal riquadro ed era tagliata
   («Videosorveglia…»). Stessa etichetta, ancorata in basso a destra dentro il riquadro, testo intero. */
@media (min-width: 768.1px) {
  #titolofaq {
    left: auto !important; right: 3.25rem; bottom: auto !important; top: 210px;
    width: auto !important; max-width: calc(100% - 7rem);
    transform: rotate(-8deg) !important; transform-origin: right bottom;
    font-size: 0.85rem; line-height: 1.25; text-wrap: balance;
  }
}