/* =============================================================================
   Manuale e Supporto: sempre nello stesso posto, con le stesse icone (21.10.2026)
   I pulsanti li scrive strumenti/servizi-app.py; i colori restano quelli di ogni app.
   ========================================================================== */
.servizi-ico { width: 18px; height: 18px; flex: none; }

/* pagine dell'app, in cima: [App Store] [Manuale] [Supporto] */
.hero__actions .btn--ghost { padding-inline: 1.2rem; }
.site-header .nav a { white-space: nowrap; }

/* L'archiviatore e Dice World: le «pillole» della loro pagina, con l'icona in riga */
.pill .servizi-ico { display: inline-block; vertical-align: -3px; margin-right: 8px; }

/* home: nella scheda di ogni app, sotto il pulsante principale */
.servizi-riga { display: flex; flex-wrap: wrap; gap: var(--sp-2, 0.5rem); flex-basis: 100%; }
.btn--servizio { min-height: 46px; padding: 0.6rem 1.15rem; font-size: 0.95rem; }
.app-links--piccoli { flex-basis: 100%; }

@media (max-width: 560px) {
  .hero__actions .btn--primary { flex-basis: 100%; }
  .hero__actions .btn--ghost { flex: 1 1 0; padding-inline: 0.8rem; }
}

/* Le pagine col menu lungo (ora finisce con Manuale · Supporto): il pulsante a tre
   righe parte gia' sotto i 1240 px invece che sotto gli 860, altrimenti fra i due
   il menu sborda a destra. Stesse regole di base.css, solo un'altra soglia. */
@media (max-width: 1240px) {
  .site-header:has(.nav-toggle):has(.nav [data-manuale]) .nav { display: none; }
  .site-header:has(.nav-toggle):has(.nav [data-manuale]) .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
    color: var(--cream);
    background: color-mix(in oklab, var(--cream) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
  }
  .site-header:has(.nav-toggle):has(.nav [data-manuale]) .nav-toggle svg { width: 20px; height: 20px; }
  .site-header.is-open:has(.nav-toggle):has(.nav [data-manuale]) .nav {
    display: flex; flex-direction: column; gap: 0.1rem;
    position: absolute; inset-inline: 0; top: 100%;
    padding: 0.5rem clamp(1rem, 4vw, 2rem) 0.9rem;
    background: color-mix(in oklab, var(--bg-2) 97%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
  }
  .site-header.is-open:has(.nav-toggle):has(.nav [data-manuale]) .nav a {
    padding: 0.8rem 0.9rem; font-size: 1rem;
    color: color-mix(in oklab, var(--cream) 92%, transparent);
  }
}