/* =========================================================================
   Studio de Narda — Componente "Domande frequenti"
   File:  faq-studio-denarda.css
   Namespace: tutte le regole sono prefissate .sd-faq per non entrare mai
   in conflitto con il CSS globale del sito (Tailwind compilato in
   /css/styles.css). Nessuna regola qui tocca elementi fuori da .sd-faq.

   Palette, font e raggi sono stati ricavati direttamente dal sito
   (vedi report di consegna): Outfit per i titoli, Inter per il testo,
   blu navy #0A192F, accento verde acqua #02C39A/#00A896, superfici
   "glass-card" con bordo chiaro e leggero blur, come nelle card dei
   trattamenti in Home.
   ========================================================================= */

.sd-faq {
  /* --- Design tokens: valori ripresi da studiodenarda.com --- */
  --sd-navy: #0A192F;
  --sd-navy-2: #172A45;
  --sd-teal: #02C39A;
  --sd-teal-2: #00A896;
  --sd-white: #ffffff;
  --sd-surface: rgba(255, 255, 255, 0.95);
  --sd-surface-border: rgba(226, 232, 240, 0.8);
  --sd-section-bg: #F8FAFC;      /* slate-50, come nelle sezioni alterne del sito */
  --sd-text-heading: var(--sd-navy);
  --sd-text-body: #4B5563;       /* gray-600 */
  --sd-text-muted: #64748B;      /* slate-500 */

  /* Varianti dell'accento teal del sito, scurite dove necessario per
     garantire un contrasto AA (>=4.5:1) su testo piccolo: il colore
     #00A896 usato per badge/icone in Home scende sotto 3:1 su sfondo
     chiaro se applicato a testo, quindi qui viene usata una versione
     più scura solo in light mode (vedi media query sotto). */
  --sd-accent-text: #02735F;
  --sd-icon-open-fg: var(--sd-navy);
  --sd-focus-color: var(--sd-navy);

  --sd-radius-lg: 1rem;          /* 16px, rounded-2xl */
  --sd-radius-md: 0.75rem;       /* 12px, rounded-xl */
  --sd-radius-full: 9999px;

  --sd-shadow-hover: 0 10px 15px -3px rgba(10, 25, 47, 0.10), 0 4px 6px -4px rgba(10, 25, 47, 0.10);
  --sd-font-heading: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --sd-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  font-family: var(--sd-font-body);
  background: var(--sd-section-bg);
  color: var(--sd-text-body);
  padding: 5rem 0;
  border-top: 1px solid #F1F5F9;
}

/* Dark mode: il sito non usa un toggle manuale ma la preferenza di
   sistema (media query), quindi il componente fa lo stesso. */
@media (prefers-color-scheme: dark) {
  .sd-faq {
    --sd-surface: rgba(22, 27, 34, 0.95);
    --sd-surface-border: rgba(51, 65, 85, 0.6);
    --sd-section-bg: #111827;    /* gray-900, come le sezioni scure del sito */
    --sd-text-heading: #ffffff;
    --sd-text-body: #9CA3AF;     /* gray-400 */
    --sd-text-muted: #94A3B8;
    border-top-color: #1e293b;

    /* Su sfondo scuro il teal chiaro del sito torna leggibile: qui si
       riporta al colore originale #00A896 (contrasto verificato). */
    --sd-accent-text: var(--sd-teal-2);
    --sd-focus-color: var(--sd-teal);
  }
}

.sd-faq__container {
  max-width: 80rem; /* 1280px, come .max-w-7xl del sito */
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .sd-faq__container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
  .sd-faq__container { padding: 0 2rem; }
}

.sd-faq__header {
  max-width: 48rem;
  margin: 0 auto 3rem auto;
  text-align: center;
}

.sd-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--sd-radius-full);
  background: rgba(2, 195, 154, 0.1);
  border: 1px solid rgba(2, 195, 154, 0.3);
  color: var(--sd-accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.sd-faq__title {
  font-family: var(--sd-font-heading);
  font-weight: 800;
  color: var(--sd-text-heading);
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem 0;
}
@media (min-width: 640px) {
  .sd-faq__title { font-size: 2.25rem; }
}

.sd-faq__subtitle {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sd-text-body);
  margin: 0;
}
@media (min-width: 640px) {
  .sd-faq__subtitle { font-size: 1.0625rem; }
}

/* --- Lista accordion --- */
.sd-faq__list {
  max-width: 52rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sd-faq__item {
  background: var(--sd-surface);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--sd-surface-border);
  border-radius: var(--sd-radius-lg);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.sd-faq__item:hover {
  box-shadow: var(--sd-shadow-hover);
}

/* Stato aperto: leggero accento sul bordo, coerente con l'accento del sito */
.sd-faq__item[open] {
  border-color: rgba(2, 195, 154, 0.4);
}

/* Rimuove il triangolo di default del browser su <summary> */
.sd-faq__question::-webkit-details-marker {
  display: none;
}
.sd-faq__question {
  list-style: none;
}

.sd-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-family: var(--sd-font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--sd-text-heading);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
  .sd-faq__question { font-size: 1.0625rem; padding: 1.375rem 1.75rem; }
}

.sd-faq__question:focus-visible {
  outline: 2px solid var(--sd-focus-color);
  outline-offset: -2px;
  border-radius: var(--sd-radius-md);
}

.sd-faq__q-text {
  flex: 1 1 auto;
}

.sd-faq__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sd-radius-md);
  background: rgba(2, 195, 154, 0.1);
  color: var(--sd-accent-text);
  transition: transform 0.25s ease, background 0.25s ease;
}

.sd-faq__icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s ease;
}

.sd-faq__item[open] .sd-faq__icon {
  /* Sfondo teal pieno con icona blu navy: contrasto verificato (7.7:1),
     contro il bianco puro (2.3:1) che non sarebbe sufficiente. */
  background: var(--sd-teal);
  color: var(--sd-icon-open-fg);
}
.sd-faq__item[open] .sd-faq__icon svg {
  transform: rotate(45deg);
}

/* Pannello risposta: altezza animata via JS (progressive enhancement).
   Senza JavaScript il componente resta pienamente funzionante grazie a
   <details>/<summary>, semplicemente senza la transizione morbida. */
.sd-faq__answer-wrap {
  overflow: hidden;
  height: 0;
}
.sd-faq__item:not([open]) .sd-faq__answer-wrap {
  display: none;
}
.sd-faq__item[open] .sd-faq__answer-wrap {
  height: auto;
}

.sd-faq__answer {
  padding: 0 1.5rem 1.375rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--sd-text-body);
}
@media (min-width: 640px) {
  .sd-faq__answer { padding: 0 1.75rem 1.5rem 1.75rem; }
}

.sd-faq__answer p {
  margin: 0;
}

/* --- CTA finale, coerente con i bottoni del sito --- */
.sd-faq__cta {
  max-width: 52rem;
  margin: 2.5rem auto 0 auto;
  text-align: center;
}

.sd-faq__cta-text {
  font-size: 0.9375rem;
  color: var(--sd-text-muted);
  margin: 0 0 1rem 0;
}

.sd-faq__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--sd-radius-md);
  /* Il verde emerald-600 (#059669) usato dal sito per il bottone WhatsApp
     dà solo 3.8:1 di contrasto con il testo bianco: qui si usa la
     tonalità emerald-700, della stessa famiglia, che raggiunge 5.5:1. */
  background: #047857;
  color: #fff;
  font-family: var(--sd-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgba(4, 120, 87, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}
.sd-faq__cta-button:hover {
  background: #065F46;
  transform: translateY(-1px);
}
.sd-faq__cta-button:focus-visible {
  outline: 2px solid var(--sd-focus-color);
  outline-offset: 2px;
}

/* Rispetta la preferenza utente per la riduzione delle animazioni */
@media (prefers-reduced-motion: reduce) {
  .sd-faq__item,
  .sd-faq__icon,
  .sd-faq__icon svg,
  .sd-faq__cta-button {
    transition: none !important;
  }
}