/*
 * Scara tipografică MetalicArt.
 *
 * Foaia se încarcă numai cu `metalicart_type_scale_enabled()` pornit, iar tot ce stabilește stă sub
 * clasa `ma-type-scale` de pe `<body>`. Mărimile din foile de secțiune sunt scrise ca
 * `var(--ma-fs-…, valoarea veche)`: aici se definesc tokenurile, deci aici se schimbă site-ul.
 * Fără foaia de față tokenurile nu există și fiecare regulă cade pe valoarea ei de dinainte.
 *
 * Treptele urmează auditul tipografic (15 septembrie 2026) și ghidurile de platformă:
 * - 12 px: etichete, supratitluri, coduri, meta — minimum pentru orice text funcțional;
 * - 13 px: butoane și linkuri de acțiune, de obicei cu majuscule și spațiere;
 * - 14 px: text secundar, note, liste de subsol;
 * - 16 px: text de bază, câmpuri de formular (sub 16 px iOS mărește pagina la focalizare);
 * - 18 px: text de lectură lungă.
 * Titlurile își păstrează mărimile fluide aprobate; aici se corectează numai ierarhia lor.
 */

/* ------------------------------------------------------------------------------ Fonturi */

/*
 * Diacriticele românești, din subseturi de câțiva kilobytes.
 *
 * Aceeași familie și aceleași axe ca fețele din `typography-v2.css`, cu `unicode-range` numai pentru
 * Ă/ă, Ș/ș, Ț/ț (cu virgulă și cu sedilă) și semnele combinabile. Fețele declarate mai târziu sunt
 * verificate primele pentru caracterele din intervalul lor, deci pentru aceste litere browserul ia
 * fișierul mic; subsetul `latin-ext` întreg rămâne pentru orice alt caracter și se descarcă numai
 * dacă un astfel de caracter apare în pagină.
 *
 * Numai pentru Newsreader. Source Sans 3 e publicat sub OFL cu „Reserved Font Name 'Source'”: un
 * subset făcut aici este o versiune modificată și nu ar avea voie să poarte numele. Sans-ul rămâne
 * pe subsetul oficial `latin-ext` (60 KB); Newsreader, fără nume rezervat, trece de la 63 la 7 KB.
 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/newsreader-ro-ext.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163, U+0326-0327;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-ro-ext.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163, U+0326-0327;
}


/* ------------------------------------------------------------------------------ Tokenuri */

.ma-type-scale {
  --ma-fs-xs: .75rem;     /* 12 px */
  --ma-fs-sm: .8125rem;   /* 13 px */
  --ma-fs-md: .875rem;    /* 14 px */
  --ma-fs-base: 1rem;     /* 16 px */
  --ma-fs-lg: 1.125rem;   /* 18 px */

  /*
   * Lungimea rândului de lectură. Source Sans 3 e îngust: un `ch` (lățimea cifrei 0) cuprinde în medie
   * 1,4 semne de text românesc, deci 52ch dă în jur de 72–75 de semne pe rând la 18 px (62ch dădea 88).
   */
  --ma-measure: 52ch;

  /*
   * Tokenurile de hero din `theme.json` (`settings.custom`) pe care le folosesc foile hero-urilor.
   * Butonul hero era scris acolo la 10 px; aici primește treapta butoanelor. WordPress le declară pe
   * `:root`, deci redefinirea de pe `<body>` câștigă pentru tot ce se randează.
   */
  --wp--custom--ma-hero-button: var(--ma-fs-sm);
}

/*
 * Safari pe iOS mărește singur textul la rotirea telefonului dacă nu i se spune altfel. Mărimile
 * de mai sus sunt deja calculate pentru ecranul îngust, deci nu mai are ce corecta.
 */
html:has(> body.ma-type-scale) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Controalele de formular nu moștenesc fontul: browserul le dă fontul lui de sistem. Așa ajunsese
 * butonul „Caută modelul” din catalog în Arial. `:where()` ține specificitatea la clasa de pe
 * `<body>`, deci orice regulă de secțiune care își alege singură familia rămâne cum este.
 */
.ma-type-scale :where(button, input, select, textarea) {
  font-family: inherit;
}

/* ---------------------------------------------------------------- Corecturi de așezare */

/*
 * Bara de sus are înălțimea fixată din administrare (24 px pe desktop). La 12 px cu rândul de 1,65,
 * iar iconițele ☎ și ✉ luate din fontul sistemului mai înalte decât literele, conținutul ajungea la
 * 23 px: un pixel de rotunjire îl tăia. Rândul barei se strânge; mărimea textului rămâne 12 px.
 */
.ma-type-scale .metalicart-topbar {
  line-height: 1.4;
}


/*
 * Hero-ul primei pagini avea înălțimea fixă (713 px) și `overflow` ascuns: la spațierea de text
 * cerută de WCAG 1.4.12 descrierea ieșea din cadru și era tăiată. Înălțimea rămâne cea minimă, iar
 * cadrul crește dacă textul are nevoie.
 */
.ma-type-scale.home .metalicart-hero {
  height: auto;
}

/*
 * Săgeata de lângă sursa recenziei era `.9em` dintr-un text de 12 px, adică 10,8 px. Ia exact mărimea
 * textului de lângă ea.
 */
.ma-type-scale .ma-review__source-arrow {
  font-size: 1em;
}

/*
 * `<small>` primește din browser o treaptă mai jos (`smaller`): în zona de încărcare, sub o etichetă de
 * 14 px, nota „Opțional · JPG, PNG…” ieșea la 11,67 px. Stă pe treapta etichetelor.
 */
.ma-type-scale .ma-upload small {
  font-size: var(--ma-fs-xs);
}

/*
 * „Detalii despre model ↗” din cardurile catalogului nu se rupea pe rânduri (`nowrap`). La 12 px și
 * pe coloana îngustă — zoom 200% pe telefon, sau înainte să sosească fontul — trecea de marginea
 * cardului cu 5–29 px și făcea pagina să se deruleze lateral. Eticheta se poate rupe; săgeata rămâne
 * lipită de ultimul cuvânt.
 */
.ma-type-scale .metalicart-whatsapp,
.ma-type-scale .metalicart-whatsapp__eticheta {
  white-space: normal;
}

/*
 * Lightboxul catalogului pe telefon: fotografia are prioritate.
 *
 * La 13 px, cu spațierea largă a majusculelor, „Solicită detalii despre model ↗” trecea pe două
 * rânduri, iar panoul de sub fotografie creștea cu 34 px: la 320 × 568 fotografia rămânea la
 * 68.305 px², sub cei 80.061 ceruți de `qa/to-top.test.js`. Butonul își păstrează mărimea și
 * ținta de 44 px; se strâng doar spațierea literelor, umplutura laterală, rândul categoriei și
 * aerul de sub descriere. Măsurat: 81.387 px².
 */
@media (max-width: 480px) {
  .ma-type-scale .metalicart-lightbox__cta {
    letter-spacing: .02em;
    padding-inline: .6rem;
  }

  .ma-type-scale .metalicart-lightbox__category {
    line-height: 1.3;
  }

  .ma-type-scale .metalicart-lightbox__description {
    margin-bottom: .45rem;
  }
}

/*
 * Paginile juridice nu mai au plafon pe paragrafe: măsura o poartă chiar coloana de lectură
 * (`--ma-legal-reader`, în `legal.css`). Cu plafonul aici și coloana de 760 acolo, textul se oprea
 * la jumătatea coloanei, iar fișele de alături mergeau până la capăt.
 */

/*
 * Același rând de lectură în textele lungi din afara paginilor juridice: manifestul de pe prima
 * pagină (98 de semne), definiția și procesul de pe Fier forjat (94–96) și cadrele de pe Despre noi
 * (82–89). Paragraful din definiția de pe Fier forjat stă într-un bloc centrat, deci rămâne la mijloc.
 */
.ma-type-scale :is(.ma-story-manifesto__body, .ma-story__text, .ma-story__closing, .ma-forge-process__intro) {
  max-width: var(--ma-measure);
}

.ma-type-scale .ma-forge-definition .ma-forge__body p {
  max-width: var(--ma-measure);
  margin-inline: auto;
}

/*
 * Despre noi, pe telefon: H1-ul deschiderii era mai mic (32 px) decât titlul cadrului „Primul foc”
 * (41 px la 390 px). H1-ul crește până la mărimea cadrelor mari, deci rămâne cel mai mare titlu al
 * paginii la orice lățime.
 */
@media (max-width: 767px) {
  .ma-type-scale .ma-story h1.ma-story__title {
    font-size: clamp(2.35rem, 11.2vw, 3.2rem);
  }
}