/* FAQ AI · regole della pagina che non fanno parte dei componenti riusabili (components.css). */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Barra superiore con selettore di lingua ---------- */
.fa-topbar {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hair) solid var(--ink);
}
.fa-topbar__inner {
  max-width: var(--measure-page);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
@media (min-width: 48rem) { .fa-topbar { padding-inline: var(--space-6); } }

/* Dropdown nativo con details/summary: funziona senza JavaScript e da tastiera. */
.fa-lang { position: relative; }
.fa-lang > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-bold) solid var(--ink);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fa-lang > summary::-webkit-details-marker { display: none; }
.fa-lang > summary::after { content: "+"; color: var(--riso-red); font-weight: 800; }
.fa-lang[open] > summary::after { content: "\2212"; }
.fa-lang > summary:hover { background: var(--paper-2); }
.fa-lang > ul {
  position: absolute;
  z-index: 10;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-bold) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-offset);
}
.fa-lang li + li { border-top: var(--border-hair) solid var(--rule-soft); }
.fa-lang li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.fa-lang li a:hover { background: var(--paper-2); }
/* La lingua attiva non si distingue solo dal colore: porta anche l'asterisco. */
.fa-lang li a[aria-current="true"] { background: var(--highlight); }
.fa-lang li a[aria-current="true"]::after { content: "*"; color: var(--riso-red); font-weight: 800; margin-left: var(--space-2); }

@media print { .fa-topbar { display: none; } }