/* CoffeeSpecs — Tipografia: classi semantiche riusabili (design guide v2.0 §1) */

/* Eyebrow / microlabel — Plex Mono uppercase tracking-wider. Il registro del dato. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Targa — Archivo espanso, maiuscolo. Il registro del nome (catalogo auto). */
.targa {
  font-family: var(--font-display);
  font-stretch: var(--stretch-nameplate);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* Titoli display — Archivo semi-espanso, stretto in crenatura */
.display {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* Il punto rosso: chiude i titoli come il punto di una targa. Solo nei titoli h1. */
.punto {
  color: var(--color-accent);
}

/* Link con colore accento — azioni secondarie */
.link-accent {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.link-accent:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Quota — la riga di quotatura del disegno tecnico: linea con tacche alle
   estremità, etichetta in mono. È il separatore di sezione del brand. */
.quota {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  --l: var(--color-border-strong);
}

.quota::before,
.quota::after {
  content: "";
  flex: 1;
  height: 7px;
  background:
    linear-gradient(var(--l), var(--l)) center / 100% 1px,
    linear-gradient(var(--l), var(--l)) left center / 1px 7px,
    linear-gradient(var(--l), var(--l)) right center / 1px 7px;
  background-repeat: no-repeat;
}

/* Variante: etichetta a sinistra, la linea corre a destra */
.quota--start::before { display: none; }

.quota__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Header di sezione (quota + heading + cta opzionale) */
.sezione-header {
  margin-bottom: var(--space-6);
}

.sezione-header__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.sezione-header__heading {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.sezione-header__cta {
  font-size: var(--text-sm);
  flex-shrink: 0;
  padding-bottom: 4px;
}

/* Numerazione da libretto: «01», «02» davanti alle sezioni */
.numero {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

/* Numeri sempre tabulari quando affiancati */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Rete di sicurezza: un titolo di pagina senza classe eredita comunque il registro display */
main h1:not([class]) {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* Tabelle dentro la prosa Markdown (guide, confronti, categorie, ricette).
   `markdownify` avvolge ogni <table> in questo div: su schermo stretto la
   tabella scorre dentro il suo contenitore invece di sfondare la pagina (R6). */
.tabella-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}