/* Design Scuole Italia — child "Formigine 2" · f2-readaloud.css
 * Bottone "Ascolta la pagina". Stile canonico DSI: btn-outline, raggio 4px.
 * Il colore e' quello della SEZIONE in cui si trova la pagina (`--f2-acc`, definita in
 * custom.css su #main-container): verde in Novita', rosso nei documenti, viola nei servizi.
 */
.f2ra {
  display: inline-flex;
  gap: .5rem;
  margin: 1.1rem 0 .2rem;
  flex-wrap: wrap;
}
.f2ra-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--f2-acc, #d8333a);
  background: #fff;
  border: 1px solid var(--f2-acc, #d8333a);
  border-radius: 4px;
  padding: .5rem .95rem;
  cursor: pointer;
  /* transform: il ritorno morbido del movimento magnetico (reveal.js), uguale ai .btn */
  transition: transform .22s var(--f2-ease), background-color .15s ease-in-out, color .15s ease-in-out;
}
.f2ra-btn:hover,
.f2ra-btn:focus-visible {
  background: var(--f2-acc, #d8333a);
  color: #fff;
  outline: 0;
}
.f2ra-btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--f2-acc, #d8333a); }
.f2ra-btn.f2ra-on { background: var(--f2-acc, #d8333a); color: #fff; }
.f2ra-ic { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.f2ra-stop { color: #5c6f82; border-color: #d9dadb; }
.f2ra-stop:hover,
.f2ra-stop:focus-visible { background: #5c6f82; color: #fff; border-color: #5c6f82; }