/* Override applicato per ultimo (vedi header.html del tema archie).
   Non tocca themes/archie/: solo aggiunte mirate, discusse con l'utente
   il 2026-09-04, per la resa su tablet/smartphone. Vedi memoria di
   progetto [[project_hugo_blog_comments]] / [[project_hugo_blog_mobile]]. */

/* ==========================================================================
   TOC del post: sotto i 760px passa da colonna laterale (max-width 300px,
   sticky) a blocco pieno sopra il testo. Oggi nessun post usa `toc: true`,
   ma senza questa regola la sidebar da 300px schiaccerebbe il testo in una
   colonna illeggibile appena si attiva su un post letto da telefono.
   Sopra i 760px: zero differenze rispetto al CSS originale del tema.
   ========================================================================== */
@media screen and (max-width: 760px) {
  .post-container {
    flex-direction: column;
  }
  .toc {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 1.5em;
    position: static;
    /* Nella pagina l'indice viene DOPO il testo: senza order finirebbe in
       fondo all'articolo, dove non serve a nessuno (corretto il 2026-10-15,
       quando l'indice è diventato automatico). */
    order: -1;
    align-self: stretch; /* a tutta larghezza, come il testo */
  }
}

/* ==========================================================================
   Box commenti Isso: il tema del blog è scuro fisso (params.mode = "dark"),
   ma il CSS di Isso di default è pensato per sfondo chiaro. Isso espone
   apposta queste custom property sotto #isso-thread (vedi il suo isso.css
   installato in blog-comments/venv) per essere ritemizzato senza toccare
   le sue regole di layout/responsive, che restano quelle originali (incluso
   lo stacking dei campi del form già presente sotto i 600px).
   ========================================================================== */
#isso-thread {
  --isso-primary-text-color: #ddd;
  --isso-secondary-text-color: #999;

  --isso-border: 1px solid #333;
  --isso-box-shadow-color: rgba(0, 0, 0, 0.4);
  --isso-hover-color: var(--darkMaincolor);

  --isso-link-hover-color: var(--darkMaincolor);
  --isso-link-text-shadow-color: transparent;

  --isso-input-background-color: #272822;
  --isso-input-outline-color: var(--darkMaincolor);

  --isso-button-background-color: #333;
  --isso-button-border: 1px solid #444;
  --isso-button-hover-background-color: #444;
  --isso-button-active-background-color: #555;

  --isso-preview-border-color: #333;
  --isso-preview-box-shadow-color: rgba(0, 0, 0, 0.4);
  --isso-preview-background: repeating-linear-gradient(
      -45deg, #272822, #272822 10px, #202124 10px, #202124 20px
  );

  --isso-pre-color: #ddd;
  --isso-pre-background-color: #272822;
  --isso-pre-border-color: #333;

  --isso-comment-divider-color: #333;
  --isso-page-author-suffix-color: var(--darkMaincolor);
  /* colore consigliato dallo stesso isso.css per sfondi scuri */
  --isso-target-fade-background-color: #3f3c1c;
}
h4.isso-thread-heading {
  color: #ddd;
}

/* Isso non definisce un colore testo per questi campi (solo sfondo/bordo
   via le variabili sopra): con sfondo scuro, senza questa regola il testo
   digitato resta nero-di-default del browser su sfondo scuro, illeggibile.
   Riscontrato dall'utente il 2026-09-04. */
#isso-thread .isso-textarea,
#isso-thread .isso-preview,
#isso-thread .isso-input-wrapper input,
#isso-thread .isso-post-action > input {
  color: var(--isso-primary-text-color);
}
#isso-thread .isso-input-wrapper input::placeholder {
  color: var(--isso-secondary-text-color);
  opacity: 1; /* Firefox abbassa di default l'opacità dei placeholder */
}

/* ==========================================================================
   Immagini negli articoli (shortcode "foto", inserite dal bot Telegram).
   Il tema archie dà già max-width:100% a img e figure; qui solo spaziatura e
   didascalia. L'altezza automatica preserva le proporzioni con width/height
   espliciti (che evitano lo "scatto" della pagina mentre l'immagine carica).
   ========================================================================== */
figure.foto {
  margin: 1.8em 0;
  padding: 0;
}
figure.foto img {
  display: block;
  margin: 0 auto;
  height: auto;
}
figure.foto figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  text-align: center;
  opacity: 0.75;
}

/* ==========================================================================
   Ricerca (pagina /blog/cerca/, Pagefind). L'interfaccia di Pagefind si
   ritemizza con queste variabili: qui la palette scura di archie/dark.css,
   come per i commenti Isso.
   ========================================================================== */
/* Le variabili vanno sull'elemento .pagefind-ui creato da Pagefind DENTRO
   #ricerca: lì il suo foglio le ridefinisce, e quelle sul solo contenitore
   verrebbero ignorate. */
#ricerca .pagefind-ui {
  --pagefind-ui-scale: 0.95;
  --pagefind-ui-primary: var(--darkMaincolor);
  --pagefind-ui-text: #ddd;
  --pagefind-ui-background: #272822;
  --pagefind-ui-border: #444;
  --pagefind-ui-tag: #333;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-font: inherit;
}
#ricerca { margin-top: 1.5em; }
/* Le parole trovate negli estratti: il giallo di default stona sul fondo scuro. */
#ricerca mark {
  background: rgba(80, 250, 123, 0.22);
  color: inherit;
  padding: 0 0.1em;
}

/* ==========================================================================
   «Leggi anche» (layouts/partials/leggi-anche.html): articoli correlati in
   fondo al post, separati dai commenti con la stessa linea punteggiata del
   footer del tema.
   ========================================================================== */
.leggi-anche {
  margin-top: 2.5em;
  padding-top: 1em;
  border-top: 3px dotted var(--bordercl);
}
.leggi-anche h2 { font-size: 1.25em; margin: 0 0 0.6em; }
.leggi-anche ul { margin: 0; padding-left: 1.2em; }
.leggi-anche li { margin: 0.35em 0; }
.leggi-anche-data { font-size: 0.85em; opacity: 0.65; white-space: nowrap; }

/* ==========================================================================
   Archivio cronologico (pagina «Articoli», layouts/posts/list.html) e
   pagine dei singoli tag: riepilogo, anni, mesi con il numero di articoli.
   Le liste restano quelle del tema (ul.posts).
   ========================================================================== */
.archivio-sommario { opacity: 0.7; margin-top: -0.3em; }
.archivio-anno { margin-top: 1.6em; }
.archivio-mese { margin: 1.3em 0 0.4em; text-transform: capitalize; }
.archivio-conta { font-size: 0.75em; font-weight: normal; opacity: 0.6; }
.archivio-conta::before { content: "("; }
.archivio-conta::after { content: ")"; }

/* ==========================================================================
   Fascia delle anteprime (anteprima_post.sh): compare solo nelle copie
   d'anteprima, mai sul blog pubblicato.
   ========================================================================== */
.anteprima-avviso {
  background: #ffb86c;
  color: #202124;
  font-weight: bold;
  padding: 0.6em 0.9em;
  border-radius: 4px;
  margin: 1em 0;
}

/* ==========================================================================
   «[archivio]» accanto alle fonti archiviate con Snapper
   (layouts/_default/_markup/render-link.html): presente ma discreto.
   ========================================================================== */
.fonte-archivio { font-size: 0.8em; opacity: 0.7; white-space: nowrap; }
.fonte-archivio a { border-bottom-width: 1px; }