/* SPDX-License-Identifier: AGPL-3.0-only — Copyright (C) 2026 Gabriele Falcinelli (https://gabrielefalcinelli.com)
   Termini aggiuntivi (attribuzione, nomi e loghi): ADDITIONAL-TERMS.md */
/* Scelta della funzione dal nome del tool (aggiunta all'interfaccia del Booklet Imposer 1.6.1) */
.site-header { position: relative; }
.logo.mode-switch { cursor: pointer; }
.logo.mode-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Menu dei tool nello stile dei menu a tendina delle impostazioni (es. "Profilo colore dei segni"):
   riquadro pieno nel colore del tool, angoli arrotondati, voci chiare che si scuriscono al passaggio;
   largo quanto il nome del tool, voci in Riottosa. */
.mode-menu {
  list-style: none;
  position: absolute;
  z-index: 50;
  left: var(--pad);
  right: 14px;
  margin-top: 12px;
  padding: 8px 0;
  border-radius: 5px;
  background: var(--accent);
  color: var(--on-accent);
  animation: fadeIn 0.2s ease-out;
}
.mode-menu[hidden] { display: none; }
.mode-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.mode-menu li[data-href]:hover { background: rgba(0, 0, 0, 0.18); }
/* Tool aperto: sottolineato a tratteggio come nel nome del tool */
.mode-menu li.current {
  cursor: default;
  text-decoration: underline dashed;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.16em;
}
.mode-menu li.soon { opacity: 0.5; cursor: default; }
.mode-menu .soon-tag {
  font-family: "Noto Sans", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 900px) { .mode-menu { right: var(--pad); } }

/* ── PAROLA DELLO STRUMENTO (BOOKLET, BOOK, N-UP) ──
   Sottolineata a tratteggio e animata a onda come "Resources" sul sito, più lenta: ogni lettera, con il
   suo pezzo di sottolineatura, passa dal colore del tool (--accent) a una sua versione più scura e torna,
   una dopo l'altra. */
:root { --tool-wave: color-mix(in srgb, var(--accent) 70%, #000000); }
/* Nel tema scuro una versione scura sparirebbe sullo sfondo: l'onda va verso una tinta più chiara */
:root[data-theme="dark"] { --tool-wave: color-mix(in srgb, var(--accent) 35%, #ffffff); }
/* Spazio sotto il logo per la sottolineatura, senza spostare il resto dell'intestazione */
.logo.mode-switch { padding-bottom: 0.24em; margin-bottom: -0.24em; }
.logo .tool-word,
.logo .tool-word span { display: inline; }
/* Ogni lettera disegna il suo tratto di linea nel proprio colore (currentColor), quindi linea e lettera si
   animano insieme. --dash-x (calcolato via script) fa proseguire il tratteggio da una lettera all'altra
   senza ripartire, come un'unica linea regolare. */
.logo .tool-word span {
  padding-bottom: 0.07em;
  background: linear-gradient(90deg, currentColor 60%, transparent 60%) var(--dash-x, 0) 100% / 0.24em 0.075em repeat-x;
  animation: tool-wave 4s infinite ease-in-out;
}
.logo .tool-word span:nth-child(2) { animation-delay: 0.2s; }
.logo .tool-word span:nth-child(3) { animation-delay: 0.4s; }
.logo .tool-word span:nth-child(4) { animation-delay: 0.6s; }
.logo .tool-word span:nth-child(5) { animation-delay: 0.8s; }
.logo .tool-word span:nth-child(6) { animation-delay: 1s; }
.logo .tool-word span:nth-child(7) { animation-delay: 1.2s; }
@keyframes tool-wave {
  0%, 100% { color: var(--accent); }
  10%, 40% { color: var(--tool-wave); }
}
@media (prefers-reduced-motion: reduce) {
  .logo .tool-word span { animation: none; }
}

/* ── DONAZIONE KO-FI (Book e Booklet) ──
   Solo la scheda di Ko-fi sopra la pagina scurita, senza cornice né intestazione: il modulo di Ko-fi ha
   attorno alla scheda un suo sfondo grigio (dentro l'iframe, non modificabile), quindi l'iframe viene
   ritagliato sulla scheda (400 × 510 px, angoli di 12 px). L'iframe è alto quanto tutta la pagina di Ko-fi,
   così non scorre e non mostra la parte nascosta sotto la scheda. La X prende il posto del pulsante della
   lingua (via script). */
.modal {
  width: min(400px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100vh - 32px);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.modal::backdrop { background: rgba(0, 0, 0, 0.72); }
.modal-head { padding: 0; border: 0; }
.modal-head h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.modal-head .tool-btn {
  position: fixed;
  z-index: 1;
  top: 36px;
  right: 8px;
  border-color: #ffffff;
  color: #ffffff;
  background: transparent;
}
.modal-head .tool-btn:hover { background: #ffffff; color: #000000; }
.modal-head .tool-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.modal iframe {
  flex: none;
  width: calc(100% + 20px);
  height: 650px;          /* tutta la pagina di Ko-fi: nell'iframe non resta nulla da scorrere */
  margin: 0 0 -140px -10px; /* lo spazio della parte nascosta non resta sotto la scheda */
  border: 0;
  background: transparent;
  clip-path: inset(0 10px 140px round 12px);
}
/* Dopo il primo clic nel modulo: spazio per la riga "Private message" che il campo del messaggio aggiunge
   (scheda di 552 px invece di 514). Se si tocca un altro campo, sotto il pulsante resta una fascia di Ko-fi. */
.modal.kofi-open iframe {
  margin-bottom: -98px;
  clip-path: inset(0 10px 98px round 12px);
}
/* Pagamento: dal secondo passaggio la scheda di Ko-fi si allunga (email, PayPal, campi della carta) e non ha
   un'altezza prevedibile. L'iframe diventa più alto e, se serve, scorre; resta nascosta solo la coda della
   pagina di Ko-fi (fascia grigia e "Powered by", sempre 94 px), così anche a fine scorrimento non compare.
   Con 720 px la scheda dell'email e dei pulsanti di pagamento (626 px) sta intera senza scorrere. */
.modal.kofi-pay iframe {
  height: min(720px, calc(100vh - 130px));
  margin-bottom: -94px;
  clip-path: inset(0 10px 94px round 12px);
}
.modal-foot { padding: 16px 0 0; border: 0; color: #ffffff; line-height: 1.6; }
.modal-foot a { color: #ffffff; }
.modal-foot .kofi-credit { display: block; font-size: 13px; }
.modal-foot .kofi-safe { display: block; margin-bottom: 4px; color: #a0a0a0; }