/* ==========================================================================
   Le stelle più affascinanti del cielo — custom.css
   Palette ispirata alla sequenza spettrale stellare OBAFGKM:
   blu-bianco (stelle calde, tipo B) come colore primario dei link,
   oro (stelle tipo G, come il Sole) come accento di enfasi/stato attivo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Palette */
  --night:         #0a0e1a;  /* sfondo primario: blu-notte, non nero puro */
  --night-deep:     #171e3c; /* sfondo pannelli laterali (menu, toc) */
  --starlight:      #e9e6dc; /* testo principale: bianco caldo */
  --muted:          #8c93ab; /* testo secondario, didascalie */
  --nebula-blue:    #8fb8ff; /* accento primario — stella calda tipo B */
  --stellar-gold:   #f0b84f; /* accento di enfasi — stella tipo G, come il Sole */
  --stellar-red:    #e0483f; /* accento freddo — stella tipo M */
  --stellar-orange: #ea8d4d; /* colore dei titoli — stella tipo K, tra oro (G) e rosso (M) */
  --line:           #1e2740; /* bordi e separatori sottili */
  --surface:        #1c2542; /* sfondo elementi interattivi, più chiaro del pannello laterale */
  --surface-line:   #34406e; /* bordo ben visibile per gli elementi su --surface */
  --halpha-pink:    #ff6fa8; /* colore delle formule KaTeX nel testo — emissione H-alfa */

  /* Override delle variabili del tema Hugo Book */
  --body-background:       var(--night);
  --body-background-tint:  none;
  --body-font-color:       var(--starlight);
  --color-link:            var(--nebula-blue);
  --color-visited-link:    var(--nebula-blue);
  --gray-100:               var(--night-deep);
  --gray-200:               var(--line);
  --border-radius:         8px;
  --icon-filter:            invert(1) brightness(1.6);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Tipografia di base
   ========================================================================== */

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--stellar-orange);
}

/* Prova: titoli di terzo livello in azzurro (stesso tono dei link),
   1.4rem invece del default 1.25rem del tema */
.markdown h3 {
  color: var(--nebula-blue);
  font-size: 1.4rem;
}

/* Prova: titoli di secondo livello in oro/giallo, 1.65rem invece
   del default 1.5rem del tema */
.markdown h2 {
  color: var(--stellar-gold);
  font-size: 1.65rem;
}

.markdown h1 {
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.015em;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-16);
}

/* Il grassetto viene usato di rado nel testo: quando compare, deve
   distinguersi dal bianco caldo del corpo del testo, ma anche dall'oro
   netto dei richiami di nota, per non confondere i due elementi.
   Una miscela oro/arancio (stessi toni caldi dei titoli e dell'enfasi)
   dà al grassetto una tonalità più scura e calda, riconoscibile a
   colpo d'occhio come un accento diverso da quello delle note. */
.markdown strong,
.markdown b {
  color: color-mix(in srgb, var(--stellar-gold) 65%, var(--stellar-orange) 35%);
}

/* Sottotitolo della sezione Stelle */
.book-subtitle {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--color-link);
  margin-top: -1rem !important;
  margin-bottom: 1.5rem;
}

/* Triangolo-freccia che punta verso il titolo, con gradiente blu→oro:
   un richiamo discreto alle righe spettrali */
.markdown h2,
.markdown h3 {
  position: relative;
  padding-left: 1.15em;
}

.markdown h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.8em;
  background: linear-gradient(90deg, var(--stellar-red), var(--stellar-gold));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Ai titoli di terzo livello un quadratino al posto della freccia, per
   marcare ulteriormente la differenza rispetto al secondo livello */
.markdown h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.55em;
  height: 0.55em;
  background: linear-gradient(90deg, var(--nebula-blue), var(--starlight));
}

/* Selezione testo */
::selection {
  background: color-mix(in srgb, var(--nebula-blue) 35%, transparent);
  color: var(--starlight);
}

/* ==========================================================================
   Formule matematiche (KaTeX) — necessario su sfondo scuro,
   altrimenti il testo delle formule resta nero e illeggibile
   ========================================================================== */

.katex {
  color: var(--halpha-pink);
}

/* Nelle note a piè di pagina il contrasto attuale (chiaro su testo smorzato)
   va già bene così: qui si mantiene il colore originale, non quello nuovo */
.markdown .footnotes .katex {
  color: var(--starlight);
}

/* ==========================================================================
   Link nel testo
   ========================================================================== */

.book-page a {
  color: var(--color-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nebula-blue) 45%, transparent);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.book-page a:visited {
  color: var(--nebula-blue);
}

.book-page a:hover {
  color: var(--stellar-gold);
  text-decoration-color: var(--stellar-gold);
}

/* Piccolo quadratino automatico sui link esterni nel testo dei contenuti */
.markdown a[href^="http"]:not([href*="diodatiastro.github.io"])::after {
  content: "▫";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 1.05em;
  transform: translateY(-0.05em);
}

/* ==========================================================================
   Tabelle (usate spesso nelle voci del dizionario)
   ========================================================================== */

.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.markdown th,
.markdown td {
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--line);
}

.markdown th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--nebula-blue);
  border-bottom: 2px solid var(--line);
  text-align: left;
}

.markdown tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* ==========================================================================
   Citazioni e note a piè di pagina
   ========================================================================== */

.markdown blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--stellar-gold);
  background: rgba(240, 184, 79, 0.06);
  color: var(--muted);
  font-style: italic;
}

.markdown .footnote-ref,
.markdown sup a {
  /* Un giallo un po' più chiaro dell'oro standard, per distinguersi
     più nettamente dal grassetto (che usa una miscela oro/arancio
     più scura). Resta comunque un derivato dello stesso --stellar-gold,
     non un colore nuovo estraneo alla palette. */
  color: color-mix(in srgb, var(--stellar-gold) 82%, white 18%);
  font-weight: 600;
  text-decoration: none;
}

.markdown .footnotes {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
  /* Grigio-azzurro schiarito: 60% del colore smorzato (--muted, #8c93ab)
     e 40% del testo principale (--starlight), circa #b1b4bf */
  color: color-mix(in srgb, var(--muted) 60%, var(--starlight) 40%);
}

/* ==========================================================================
   Figure scientifiche (regole originali, ricolorate)
   ========================================================================== */

.markdown figure.scientific-figure {
  text-align: center;
  margin: 1.8rem auto;
}

.scientific-figure img,
.scientific-figure video {
  display: block;
  margin: 0 auto;
  max-width: 90%;
  height: auto;
  border-radius: var(--border-radius);
}

/* Video embeddati da sorgenti esterne (YouTube, Vimeo, altro iframe):
   contenitore responsive 16:9, stessi margini/arrotondamento delle figure */
.scientific-figure .video-embed {
  position: relative;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.scientific-figure .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.markdown figure.scientific-figure figcaption {
  margin-top: 0.6rem;
  margin-left: 1.5em;
  margin-right: 1.5em;
  font-size: 0.90rem;
  line-height: 1.4;
  font-style: normal;
  text-align: center;
  color: var(--muted);
}

/* L'etichetta "Figura N" non deve seguire il colore oro/arancio
   del grassetto generico: usa l'azzurro dei link, con una spaziatura
   dei caratteri leggermente più ampia del normale. */
.markdown figure.scientific-figure figcaption strong {
  color: var(--color-link);
  letter-spacing: 0.09em;
}

/* Foto dell'autore: piccola, ancorata in alto a destra,
   testo che scorre a fianco — a differenza delle figure
   scientifiche, grandi e centrate */
.markdown .author-photo {
  float: right;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  margin: -30px 0 1rem 1.5rem;
  border: 2px solid var(--line);
}

/* ==========================================================================
   Tag degli articoli (sotto la data, in fondo ai metadati)
   ========================================================================== */

.book-post-tags {
  margin-top: 0.35em;
}

.book-post-tags__label {
  color: var(--stellar-gold);
  font-weight: 600;
  margin-right: 0.35em;
}

/* ==========================================================================
   Menu laterale
   ========================================================================== */

.book-menu {
  min-height: 100vh;
  background-color: var(--night-deep);
  border-right: 1px solid var(--line);
}

.book-menu a.active {
  position: relative;
  color: var(--stellar-gold);
}

/* Puntino dorato luminoso accanto alla voce di menu attiva */
.book-menu a.active::before {
  content: "";
  position: absolute;
  left: -0.7em;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--stellar-gold);
  box-shadow: 0 0 6px 1px rgba(240, 184, 79, 0.6);
}

.book-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-align: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.book-brand img {
  height: 2.4em;
  width: auto;
}

/* ==========================================================================
   Ricerca
   ========================================================================== */

.book-search input {
  background-color: var(--surface);
  border: 1px solid var(--surface-line);
  color: var(--starlight);
}

.book-search input::placeholder {
  color: var(--muted);
}

.book-search input:focus {
  outline: none;
  border-color: var(--nebula-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nebula-blue) 25%, transparent);
}

/* ==========================================================================
   Piè di pagina
   ========================================================================== */

.book-footer {
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Link "torna all'inizio" a fine pagina
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

.back-to-top {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--line);
  text-align: center;
}

.back-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--stellar-gold);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.back-to-top a:visited {
  color: var(--stellar-gold);
}

.back-to-top a:hover {
  color: var(--nebula-blue);
  transform: translateY(-3px);
}

.back-to-top a span {
  font-size: 1.15em;
  line-height: 1;
}

/* ==========================================================================
   Struttura di base (regole originali, invariate)
   ========================================================================== */

html, body {
  height: 100%;
}

.book-page {
  min-height: 100vh;
}


/* ==========================================================================
   Box informativi (definizione rapida / approfondimento)
   ========================================================================== */

.info-box {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, var(--nebula-blue));
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--accent, var(--nebula-blue)) 7%, var(--surface));
}

.info-box__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, var(--nebula-blue));
}

.info-box__label::before {
  content: "●";
  font-size: 0.9em;
}

.info-box__body {
  color: var(--starlight);
}

.info-box__body p:first-child { margin-top: 0; }
.info-box__body p:last-child { margin-bottom: 0; }

/* Variante: definizione rapida, in apertura d'articolo — oro,
   lo stesso accento riservato al Sole (stella tipo G) nella palette */
.info-box--definizione {
  --accent: var(--stellar-gold);
}

.info-box--definizione .info-box__label::before {
  content: "☉";
}

/* Variante: approfondimento, nel corpo del testo — blu, lo stesso
   accento dei link, per un effetto "nota" riconoscibile ma non invasivo */
.info-box--approfondimento {
  --accent: var(--nebula-blue);
}

.info-box--approfondimento .info-box__label::before {
  content: "✦";
}
/* ==========================================================================
   Correzione sommario (TOC) — voci con corsivo/grassetto spezzate
   ========================================================================== */
/* Il tema hugo-book imposta "display: flex" su tutti i link dentro <nav><ul>
   (regola "nav ul a" in _main.scss), pensato per allineare icona + testo nei
   menu. Se il testo del link contiene un elemento inline come <em> (corsivo),
   <strong> o <code>, il browser lo tratta come un "flex item" separato dal
   testo prima e dopo di esso: i tre pezzi vengono impaginati e mandati a capo
   in modo indipendente, invece di scorrere come un unico paragrafo, dando
   l'effetto "spezzettato/giustificato" visto nel sommario laterale.
   I link del TOC sono solo testo (nessuna icona), quindi possiamo
   riportarli a un normale flusso a blocco, che avvolge il testo in modo
   uniforme indipendentemente dal corsivo. */
.book-toc a {
  display: block;
}

/* Capitoli di un saggio diviso in più pagine (sezioni con ordinePerPeso):
   caratteri un po' più piccoli delle voci del catalogo, per mostrare
   che appartengono a un livello inferiore */
.book-menu .menu-saggio > ul a {
  font-size: 0.85em;
}


/* ── Commenti (Waline) caricati su richiesta ─────────────────────────── */
.commenti {
  text-align: left;
  margin: 3rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.commenti-titolo {
  text-align: center;
  margin-top: 0.75rem;
  margin-bottom: 0.9rem;
  color: var(--stellar-orange);
}
.commenti-consenso {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--border-radius);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--starlight);
}
.commenti-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0;
}
.commenti-pulsante {
  font: inherit;
  font-weight: 600;
  color: var(--night);
  background: var(--stellar-gold);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.55rem 1.2rem;
  cursor: pointer;
}
.commenti-pulsante:hover,
.commenti-pulsante:focus-visible {
  background: var(--nebula-blue);
}
.commenti-ricorda {
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

/* Colori di Waline adattati al tema scuro del sito */
#waline {
  --waline-theme-color: var(--nebula-blue);
  --waline-active-color: var(--stellar-gold);
  --waline-color: var(--starlight);
  --waline-light-grey: var(--muted);
  --waline-dark-grey: var(--muted);
  --waline-white: var(--night);
  --waline-bg-color: transparent;
  --waline-bg-color-light: var(--surface);
  --waline-bg-color-hover: var(--surface);
  --waline-border-color: var(--surface-line);
  --waline-info-bg-color: var(--surface);
  --waline-info-color: var(--muted);
  --waline-font-size: 1rem;
  text-align: left;
}

/* Waline: nome dell'autore nei commenti pubblicati più grande e in grassetto,
   e campi Nome/Email del modulo leggibili (di serie erano a 10 px) */
#waline .wl-card .wl-nick {
  font-size: 1.05rem;
  font-weight: 600;
}
#waline .wl-header input {
  font-size: 0.95rem;
}
#waline .wl-header label {
  font-size: 0.85rem;
}


/* ==========================================================================
   Home page — riquadri con gli ultimi contenuti pubblicati
   (shortcode ultimi-contenuti: colonna del catalogo e colonna del dizionario)
   ========================================================================== */

.hc-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 1rem;
  margin: 1.25rem 0 2.5rem;
}

/* Le due colonne condividono le righe della griglia (subgrid):
   i riquadri affiancati hanno sempre la stessa altezza */
.hc-colonna {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 1rem;
}

.hc-colonna--catalogo   { --accento-colonna: var(--stellar-gold); }
.hc-colonna--dizionario { --accento-colonna: var(--nebula-blue); }

.markdown .hc-intestazione {
  margin: 0;
  padding: 0 0 0.5rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  border-bottom: 2px solid var(--accento-colonna);
  color: var(--accento-colonna);
}

/* Niente quadratino dei titoli di terzo livello sulle intestazioni delle colonne */
.markdown .hc-intestazione::before {
  content: none;
}

/* Riquadro */
.book-page a.hc-card,
.book-page a.hc-card:visited {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-height: 9.5rem;
  padding: 0.75rem;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--night-deep);
  color: var(--starlight);
  font-weight: 400;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.book-page a.hc-card:hover {
  color: var(--starlight);
  text-decoration: none;
  border-color: var(--accento-colonna);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Miniatura degli articoli */
.hc-thumb {
  position: relative;
  flex: 0 0 34%;
  align-self: stretch;
  min-height: 8rem;
  overflow: hidden;
  border-radius: 6px;
  background: radial-gradient(circle at 35% 35%, #3a4a86 0%, var(--surface) 45%, var(--night) 100%);
}

.markdown .hc-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.35s ease;
}

.hc-card:hover .hc-thumb img {
  transform: scale(1.05);
}

/* Iniziale delle voci del dizionario */
.hc-iniziale {
  flex: 0 0 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  background: var(--surface);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--nebula-blue);
}

/* Al passaggio del mouse l'unica sottolineatura è quella dell'iniziale
   delle voci del dizionario */
.hc-card:hover .hc-iniziale {
  text-decoration: underline;
  text-decoration-color: var(--stellar-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* Testi del riquadro */
.hc-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.hc-data {
  font-size: 0.85rem;
  color: var(--muted);
}

.hc-titolo {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--stellar-orange);
}

.hc-sottotitolo {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-link);
}

.hc-testo {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--starlight);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.hc-card--articolo .hc-testo {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.hc-testo strong {
  color: inherit;
  font-weight: 600;
}

/* Link all'indice completo della sezione */
.book-page a.hc-tutti,
.book-page a.hc-tutti:visited {
  justify-self: end;
  align-self: start;
  font-size: 1rem;
  text-decoration: none;
  color: var(--accento-colonna);
}

.book-page a.hc-tutti:hover {
  text-decoration: underline;
}

/* Schermi stretti: una colonna sola, prima il catalogo poi il dizionario */
@media screen and (max-width: 44rem) {
  .hc-griglia {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .hc-colonna {
    grid-row: auto !important;
    grid-template-rows: none;
  }
}


/* ==========================================================================
   Indice del catalogo delle stelle — tutti gli articoli a riquadri
   (shortcode indice-catalogo, stessi riquadri della home)
   ========================================================================== */

.hc-elenco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

.hc-elenco--catalogo {
  --accento-colonna: var(--stellar-gold);
}

@media screen and (max-width: 44rem) {
  .hc-elenco {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Indice del dizionario — voci raggruppate per lettera iniziale
   (shortcode indice-dizionario)
   ========================================================================== */

/* Fila di lettere cliccabili in cima alla pagina */
.dz-lettere {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
}

.book-page a.dz-salto,
.book-page a.dz-salto:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  background: var(--surface);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--nebula-blue);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.book-page a.dz-salto:hover {
  border-color: var(--stellar-gold);
  color: var(--stellar-gold);
  text-decoration: none;
}

/* Gruppo di una lettera */
.dz-gruppo {
  margin: 2rem 0 0;
  scroll-margin-top: 1rem;
}

.dz-intestazione {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Linea sottile dopo la lettera */
.dz-intestazione::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--surface-line);
}

.dz-voci {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}

/* Voce */
.book-page a.dz-voce,
.book-page a.dz-voce:visited {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: stretch;
  padding: 0.7rem 0.9rem;
  text-align: left;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--night-deep);
  color: var(--starlight);
  font-weight: 400;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.book-page a.dz-voce:hover {
  color: var(--starlight);
  text-decoration: none;
  border-color: var(--nebula-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.dz-titolo {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--stellar-orange);
}

.dz-testo {
  font-size: 0.95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.dz-testo strong {
  color: inherit;
  font-weight: 600;
}

@media screen and (max-width: 44rem) {
  .dz-voci {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Titolo degli indici del catalogo e del dizionario: stesso stile
   del titolo della home (h1 nel testo, .markdown h1)
   ========================================================================== */

h1.titolo-sezione {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.015em;
  color: var(--stellar-orange);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-16);
}


/* ==========================================================================
   Paginazione dell'indice del catalogo
   ========================================================================== */

.hc-paginazione {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
}

.hc-pag-lato--destra {
  justify-self: end;
}

.hc-pag-numeri {
  display: flex;
  gap: 0.5rem;
}

.book-page .hc-paginazione a,
.book-page .hc-paginazione a:visited {
  color: var(--stellar-gold);
  text-decoration: none;
}

.book-page .hc-paginazione a:hover {
  text-decoration: underline;
}

.hc-pag-numeri a,
.hc-pag-corrente {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.hc-pag-corrente {
  background: var(--stellar-gold);
  border-color: var(--stellar-gold);
  color: var(--night);
}

/* Freccina per tornare all'inizio della pagina alla fine di ogni lettera
   del dizionario: stesso simbolo e stile del ritorno dalle note */
.markdown .dz-su {
  margin: 0.5rem 0 0;
  text-align: right;
}