/* Sai Quanto — sezioni apribili per il testo di approfondimento.
   Componente <details>/<summary> nativo, niente JavaScript: lo stato aperto/
   chiuso lo gestisce il browser. Usa solo i token di sito.css, quindi segue
   automaticamente chiaro/scuro. Foglio caricato solo dalle pagine che hanno
   testo lungo (metodo, città, settimana, insights): non serve altrove. */

.approfondimento {
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--carta-alta);
  margin: 14px 0 20px;
}
.approfondimento + .approfondimento { margin-top: 10px; }

.approfondimento summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: .95rem;
  color: var(--inchiostro-2);
}
/* Nasconde il triangolo nativo: Chrome/Safari usano lo pseudo-elemento
   webkit, Firefox segue semplicemente list-style sul summary. */
.approfondimento summary::-webkit-details-marker { display: none; }
.approfondimento summary::marker { content: ""; }

.approfondimento summary:hover { color: var(--inchiostro); }
.approfondimento summary:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Segno di apertura: un cerchietto con + che diventa – quando il dettaglio
   è aperto, coerente con i pallini/segni pieni usati altrove nel sito. */
.approfondimento .segno-apri {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--filo);
  border-radius: 50%;
  color: var(--accento);
  font-size: 1rem;
  line-height: 1;
}
.approfondimento .segno-apri::before { content: "+"; }
.approfondimento[open] .segno-apri::before { content: "\2013"; } /* – */

.approfondimento[open] summary {
  border-bottom: 1px solid var(--filo-tenue);
}

.approfondimento-corpo {
  padding: 14px 18px 18px;
}
.approfondimento-corpo > :last-child { margin-bottom: 0; }

@media print {
  /* In stampa il contenuto va leggibile senza dover cliccare: forziamo la
     visibilità anche quando <details> non è aperto, e togliamo il segno
     interattivo che in carta non significa nulla. */
  .approfondimento { border-color: #bbb; break-inside: avoid; }
  .approfondimento:not([open]) .approfondimento-corpo { display: block !important; }
  .approfondimento .segno-apri { display: none; }
  .approfondimento summary { cursor: default; }
}