/*
 * MarketDomain — pagina delle domande frequenti.
 *
 * Usa i token del tema e la fisarmonica .md-faq già definita in layout.css:
 * qui c'è solo ciò che riguarda l'impaginazione della pagina.
 */

/* ===== Testata ============================================================ */

.mdq-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}
.mdq-hero h1 { font-size: var(--step-4); margin-top: var(--space-xs); }
.mdq-hero .md-lead { max-width: 56ch; margin-top: var(--space-2xs); }

/* ---- Filtro ---- */

.mdq-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  max-width: 520px;
  margin-top: var(--space-m);
  padding-inline: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.mdq-filter:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.mdq-filter > svg { width: 1.05rem; height: 1.05rem; color: var(--text-faint); flex: none; }

.mdq-filter input {
  flex: 1;
  min-width: 0;
  padding-block: 0.75rem;
  border: 0;
  background: none;
  font-size: var(--step-0);
  color: var(--text-strong);
}
.mdq-filter input:focus { outline: none; }
.mdq-filter input::-webkit-search-cancel-button { display: none; }

.mdq-filter__clear {
  display: grid;
  place-content: center;
  width: 1.5rem; height: 1.5rem;
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
  cursor: pointer;
}
.mdq-filter__clear:hover { color: var(--text-strong); }
.mdq-filter__clear svg { width: 0.8rem; height: 0.8rem; }

.mdq-count { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--text-muted); }

/* ===== Impianto =========================================================== */

.mdq__layout {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  padding-block: var(--space-xl);
}
@media (max-width: 900px) {
  .mdq__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
}

/* ---- Indice degli argomenti ---- */

.mdq-nav { position: sticky; top: calc(var(--header-h) + var(--space-s)); }
@media (max-width: 900px) { .mdq-nav { position: static; } }

.mdq-nav__title {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2xs);
}
.mdq-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }

.mdq-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: 0.45em 0.7em;
  border-radius: var(--radius-s);
  color: var(--text-muted);
  font-size: var(--step--1);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mdq-nav a:hover { background: var(--surface-2); color: var(--text-strong); }
.mdq-nav a.is-current { background: var(--surface-3); color: var(--text-strong); font-weight: 600; }
.mdq-nav a span { color: var(--text-faint); font-size: var(--step--2); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  /* Su schermo stretto l'indice diventa una fila di pastiglie scorrevoli:
     una colonna verticale prima del contenuto sarebbe solo un muro da
     scorrere per arrivare alle risposte. */
  .mdq-nav__title { display: none; }
  .mdq-nav ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--space-3xs);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-2xs);
  }
  .mdq-nav ul::-webkit-scrollbar { display: none; }
  .mdq-nav a {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    white-space: nowrap;
    background: var(--surface);
  }
}

/* ---- Gruppi ---- */

.mdq__main { display: grid; gap: var(--space-2xl); }

.mdq-group { scroll-margin-top: calc(var(--header-h) + var(--space-m)); }
.mdq-group h2 { font-size: var(--step-2); }
.mdq-group__intro {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin: var(--space-3xs) 0 var(--space-s);
  max-width: 60ch;
}
.mdq-group .md-faq { margin-top: var(--space-s); }

.mdq-group[hidden] { display: none; }

.mdq-empty {
  padding: var(--space-l);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-l);
  color: var(--text-muted);
  text-align: center;
}

/* La parola cercata evidenziata dentro la domanda. */
.mdq-group mark {
  background: var(--warning-soft);
  color: inherit;
  border-radius: 2px;
  padding: 0 0.1em;
}

/* ===== Blocco finale ====================================================== */

.mdq-help__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}
.mdq-help h2 { font-size: var(--step-2); max-width: 20ch; }
.mdq-help p { color: var(--text-muted); margin-top: var(--space-2xs); max-width: 52ch; }
.mdq-help__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }