/* Stiluri custom care nu se exprimă comod în Tailwind. Restul paginii e stilizat direct în index.html cu clase Tailwind. */

/* Atributul „hidden" trebuie să învingă clasele Tailwind de afișare (flex, grid, block).
   Regula browserului, [hidden] { display: none }, are aceeași specificitate ca .flex,
   iar foaia Tailwind se încarcă după ea — deci .flex câștiga și elementul rămânea vizibil
   chiar cu hidden = true (ex.: rândurile de etichete ale barei de progres din wizard). */
[hidden] {
  display: none !important;
}

/* Header-ul sticky acoperă începutul secțiunilor la săriturile prin ancore (meniu, CTA-uri)
   și la derularea automată a wizard-ului; marginea de derulare compensează înălțimea lui.
   #faq nu e <section> (e un <div> în secțiunea comună cu testimonialele), deci îl includem explicit. */
section[id], #faq {
  scroll-margin-top: 10rem;
}

@media (min-width: 768px) {
  section[id], #faq {
    scroll-margin-top: 8rem;
  }
}

/* Apariție subtilă la scroll — clasa .fade-in-scroll e adăugată în HTML pe cardurile/listele care apar în viewport;
   JS-ul din script.js (Etapa 5) adaugă .in-view prin IntersectionObserver. */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Respectă preferința utilizatorului pentru animații reduse — elementele apar direct, fără mișcare */
@media (prefers-reduced-motion: reduce) {
  .fade-in-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}