/* ===== Corso pratico di llama.cpp: stile del sito =====
   Un solo posto per colori, intestazioni di pagina, schemi e piccoli ritocchi di leggibilità. */

:root {
  --md-primary-fg-color: #0f766e;
  --md-primary-fg-color--dark: #115e59;
  --md-accent-fg-color: #ea580c;
}

/* --- Tipografia --- */
.md-typeset h1 { font-weight: 700; text-wrap: balance; }
.md-typeset h2, .md-typeset h3 { text-wrap: balance; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { scroll-margin-top: 5rem; }
.md-typeset table:not([class]) { font-size: .74rem; font-variant-numeric: tabular-nums; }
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th { vertical-align: top; }
.md-typeset code { word-break: break-word; }

/* --- Blocco meta sotto il titolo (stesso aspetto in moduli, laboratori, progetti, risorse) --- */
.md-typeset .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  margin: -.4rem 0 1.4rem; padding: .55rem .8rem;
  border-left: .2rem solid var(--md-primary-fg-color);
  background: var(--md-code-bg-color); border-radius: 0 .3rem .3rem 0;
  font-size: .72rem; line-height: 1.5;
}
.md-typeset .meta p { margin: 0; display: contents; }
.md-typeset .meta-item { white-space: nowrap; }
.md-typeset .meta a { font-weight: 600; }

/* --- Schemi (SVG e Mermaid) --- */
.md-typeset .mermaid { display: flex; justify-content: center; }
.md-typeset figure.schema { margin: 1.5em auto; text-align: center; }
.md-typeset figure.schema img {
  max-width: 100%; height: auto; aspect-ratio: 900 / 470;   /* niente salti di layout durante il caricamento */
  background: #f8fafc; border-radius: 10px; padding: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
[data-md-color-scheme="slate"] .md-typeset figure.schema img { background: #e5e7eb; }
.md-typeset figure.schema figcaption { font-size: .74rem; color: var(--md-default-fg-color--light); margin-top: .5em; text-wrap: pretty; }

/* --- Home: griglia di schede --- */
.md-typeset .grid.cards > ul > li { border-color: var(--md-default-fg-color--lightest); }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--md-primary-fg-color); }
.hero { margin: 0 0 1.5rem; }
.hero p.lead { font-size: .95rem; color: var(--md-default-fg-color--light); max-width: 46rem; text-wrap: pretty; }

/* --- Interazione e accessibilità --- */
.md-typeset a, .md-nav__link, .md-tabs__link, .md-header__button { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- Schermi piccoli --- */
@media screen and (max-width: 44.9375em) {
  .md-typeset .meta { font-size: .68rem; padding: .5rem .6rem; }
  .md-typeset .meta-item { white-space: normal; }
  .md-typeset figure.schema img { padding: 4px; border-radius: 6px; }
  .md-typeset table:not([class]) { font-size: .68rem; }
}

/* Briciole di pane: solo su schermi larghi (sul telefono rubano spazio e vanno a capo) */
@media screen and (max-width: 59.9375em) { .md-content .md-path { display: none; } }
.md-typeset .meta-icon { color: var(--md-primary-fg-color); vertical-align: -.15em; }

/* ===== Diagrammi Mermaid: cliccabili, mai schiacciati, apribili a schermo intero =====
   corso/assets/javascripts/mermaid-lightbox.js gestisce il clic; scripts/mermaid_fence.py
   scrive il codice sorgente in data-mermaid-src a tempo di build. */
.md-typeset .mermaid-figure {
  position: relative;
  margin: 1.5em 0;
  cursor: zoom-in;
  border-radius: .4rem;
}
.md-typeset .mermaid-figure:hover,
.md-typeset .mermaid-figure:focus-visible {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 4px;
}
.md-typeset .mermaid-figure::after {
  content: "⤢ Clic per ingrandire";
  position: absolute; top: .5rem; right: .5rem;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color--light);
  font-size: .68rem; line-height: 1; padding: .35em .6em; border-radius: 1em;
  border: 1px solid var(--md-default-fg-color--lightest);
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
html[lang="en"] .md-typeset .mermaid-figure::after { content: "⤢ Click to enlarge"; }
.md-typeset .mermaid-figure:hover::after,
.md-typeset .mermaid-figure:focus-visible::after { opacity: 1; }
/* rete di sicurezza: se un diagramma resta comunque più largo della colonna, scorre
   invece di rimpicciolirsi fino a diventare illeggibile (era: max-width:100%) */
.md-typeset .mermaid-figure pre.mermaid { overflow-x: auto; margin: 0; }
.md-typeset .mermaid-figure .mermaid svg { max-width: none; }

/* Finestra a schermo intero per il diagramma cliccato */
.mermaid-modal { display: none; position: fixed; inset: 0; z-index: 10000; }
.mermaid-modal.is-open { display: block; }
.mermaid-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.mermaid-modal__panel {
  position: absolute; inset: 2vh 2vw;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .6rem;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}
.mermaid-modal__close {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: none;
  background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.mermaid-modal__close:hover,
.mermaid-modal__close:focus-visible { background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); }
.mermaid-modal__scroll {
  flex: 1; overflow: auto; padding: 3.2rem 2rem 2rem;
  display: flex; align-items: safe center; justify-content: safe center;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
}
.mermaid-modal__diagram { position: relative; }
.mermaid-modal__diagram svg { display: block; margin: auto; cursor: zoom-in; }
.mermaid-modal__diagram.is-natural-size svg { cursor: zoom-out; }
.mermaid-modal__diagram[data-hint]::before {
  content: attr(data-hint);
  position: absolute; left: 50%; bottom: -1.8rem; transform: translateX(-50%);
  white-space: nowrap; font-size: .72rem; color: var(--md-default-fg-color--light);
}
html.mermaid-modal-open { overflow: hidden; }
@media screen and (max-width: 44.9375em) {
  .mermaid-modal__panel { inset: 0; border-radius: 0; }
  .md-typeset .mermaid-figure::after, html[lang="en"] .md-typeset .mermaid-figure::after { content: "⤢"; padding: .35em .5em; }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .mermaid-figure::after { transition: none; }
}
/* Home: due schede per riga (quattro schede → 2×2, mai una orfana) */
@media screen and (min-width: 45em) { .md-typeset .grid.cards > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media screen and (min-width: 45em) { .md-typeset .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Barra superiore UNICA, identica su ogni pagina, a ogni larghezza, anche scorrendo =====
   Riga 1: logo · nome del sito · tema · cerca.  Riga 2: Home · Il corso · Progetti finali · Risorse. */
.md-header__topic + .md-header__topic { display: none; }                 /* mai il titolo di pagina al posto del nome del sito */
.md-header__topic:first-child { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.md-tabs { display: block !important; pointer-events: auto !important; } /* la riga delle sezioni resta anche su tablet e telefono */
.md-tabs[hidden] .md-tabs__link { opacity: 1 !important; transform: none !important; transition: none !important; }
@media screen and (max-width: 76.1875em) {
  .md-tabs__list { margin-left: .2rem; }
  .md-tabs__item { height: 2.2rem; padding: 0 .55rem; }
  .md-tabs__link { font-size: .68rem; margin-top: .6rem; }
}

/* ===== "Prof. Giuseppe Bosi": scritta piccola sotto il titolo del corso, uguale su desktop e telefono ===== */
.md-header__title { line-height: 1.15rem; padding-top: .28rem; }
.md-header__title .md-header__topic:first-child { position: static; display: block; }
.md-header__title .md-header__topic:first-child .md-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; }
.md-header__topic .autore-header {
  display: block; width: max-content; margin: .05rem 0 0; padding: 0;
  color: var(--md-primary-bg-color); opacity: .78;
  font-size: .6rem; font-weight: 400; line-height: 1.1; letter-spacing: .01em;
  text-decoration: none; border-radius: .15rem;
}
.md-header__topic .autore-header:hover { text-decoration: underline; opacity: 1; }
.md-header__topic .autore-header:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: 2px; opacity: 1; }

/* ===== Cambio lingua con bandierina (come www.giuseppebosi.com), visibile a ogni larghezza ===== */
.md-header__option .lang {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 .4rem;
  font: 600 .6rem/1 var(--md-code-font-family, monospace); color: var(--md-primary-bg-color);
}
.md-header__option .lang svg { border-radius: 2px; box-shadow: 0 0 0 1px #0003; }
.md-header__option .lang:hover, .md-header__option .lang:focus-visible { text-decoration: underline; }
@media screen and (max-width: 44.9375em) {
  .md-header__option .lang { margin: 0 .15rem; gap: 4px; }
  .md-header__title { min-width: 0; flex-shrink: 1; }
}