/* ==========================================================================
   TYPOGRAPHY.CSS
   Font, gerarchia dei titoli, testo body, link e micro-tipografia.
   Tutti i valori numerici provengono da variables.css: nessun valore
   hardcoded qui dentro.
   ========================================================================== */

/* --------------------------------------------------------------------
   FONT FACE — Manrope self-hosted (variable font).
   Auto-ospitato per performance (nessuna richiesta a font esterni) e per
   evitare il trasferimento di IP a servizi terzi extra-UE, rilevante per
   un sito corporate italiano soggetto a GDPR.
   File attesi in /assets/fonts/manrope/ (formato woff2, variable font
   con asse "wght" 200–800). Il fallback di sistema è già definito in
   --font-primary (variables.css) e garantisce testo leggibile anche
   prima del caricamento del font o in sua assenza.
   -------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope/Manrope-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/manrope/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------
   BASE DOCUMENTO
   -------------------------------------------------------------------- */
html {
  font-size: 100%; /* 1rem = 16px, rispetta le preferenze utente */
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text-primary);
  font-feature-settings: 'ss01' on, 'liga' on, 'kern' on;
}

::selection {
  background-color: var(--color-blue-soft);
  color: var(--color-navy);
}

/* --------------------------------------------------------------------
   TITOLI
   Gerarchia semantica (h1–h6) con dimensioni allineate alla scala
   fluida di variables.css. Le classi .h1–.h4 permettono di applicare
   una dimensione visiva diversa dal livello semantico dell'heading,
   necessario in un sito editoriale dove h1/h2 non coincidono sempre
   con "il titolo più grande della pagina".
   -------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h1, .h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
}

h2, .h2 {
  font-size: var(--fs-2xl);
}

h3, .h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
}

h4, .h4 {
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
}

h5, .h5 {
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-medium);
}

h6, .h6 {
  font-size: var(--fs-base);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-medium);
}

/* Titolo hero: dimensione dedicata, riservata a un solo elemento per
   pagina (hero full screen, sia in home che nelle pagine interne) */
.h-hero {
  font-family: var(--font-primary);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-on-dark);
}

/* Titoli su sfondo scuro (hero, CTA, footer) */
.text-on-dark h1,
.text-on-dark h2,
.text-on-dark h3,
.text-on-dark h4,
.text-on-dark h5,
.text-on-dark h6,
.text-on-dark {
  color: var(--color-text-on-dark);
}

/* --------------------------------------------------------------------
   EYEBROW / LABEL
   Micro-etichetta uppercase usata sopra i titoli di sezione, in stile
   editoriale internazionale (es. "SOLUZIONI", "CHI SIAMO").
   -------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: var(--space-5);
  height: 1px;
  background-color: currentColor;
}

.text-on-dark .eyebrow {
  color: var(--color-gold);
}

/* --------------------------------------------------------------------
   TESTO BODY
   -------------------------------------------------------------------- */
p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-secondary);
}

p + p {
  margin-top: var(--space-4);
}

/* Testo introduttivo, più grande, usato sotto gli h2 di sezione */
.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
}

small,
.text-sm {
  font-size: var(--fs-sm);
}

.text-xs {
  font-size: var(--fs-xs);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-on-dark .text-muted,
.text-on-dark p {
  color: var(--color-text-on-dark-muted);
}

strong, b {
  font-weight: var(--fw-semibold);
}

em, i {
  font-style: italic;
}

/* --------------------------------------------------------------------
   LINK
   Stile discreto e istituzionale: nessuna sottolineatura permanente,
   comparsa al hover/focus per rinforzare l'affordance senza rumore
   visivo. Stato focus sempre visibile per accessibilità da tastiera.
   -------------------------------------------------------------------- */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

/* Link testuali dentro contenuto editoriale (paragrafi): sottolineatura
   sempre visibile ma sottile, per distinguerli chiaramente dal testo */
p a,
.lead a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
}

p a:hover,
.lead a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------
   LISTE EDITORIALI
   Per contenuti testuali (pagine interne, footer). Le liste di
   navigazione azzerano questi stili puntualmente nei rispettivi
   componenti.
   -------------------------------------------------------------------- */
.list-editorial {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.list-editorial li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-secondary);
}

.list-editorial li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background-color: var(--color-gold);
}

/* --------------------------------------------------------------------
   CITAZIONE
   Usata per testimonianze/claim istituzionali.
   -------------------------------------------------------------------- */
blockquote {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  border-left: var(--border-width-md) solid var(--color-gold);
  padding-left: var(--space-5);
}

blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------
   ALLINEAMENTO E TRUNCATE — utility minime, uso puntuale
   -------------------------------------------------------------------- */
.text-center {
  text-align: center;
}

.text-balance {
  text-wrap: balance;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}