/*
 * Sistemul tipografic v2: Newsreader pentru titluri, Source Sans 3 pentru text.
 *
 * Nimic din foaia asta nu se aplică singur. Tot ce urmează după blocurile `@font-face` stă sub
 * `.ma-typography-v2`, clasă pusă pe `<body>` dintr-un singur loc, în `functions.php`. Fără ea,
 * site-ul rămâne exact cum era: Georgia pentru titluri și fontul de sistem pentru text.
 *
 * Comutatorul nu rescrie foile de secțiune. Tema trimitea deja aproape toate familiile prin două
 * variabile — `--wp--preset--font-family--display` și `--wp--preset--font-family--body` — sau prin
 * aliasuri locale care derivă din ele (`--ma-serif`, `--ma-c-serif`, `--ma-story-serif`,
 * `--ma-faq-serif`, `--ma-forge-serif`). Redefinite aici pe `body`, toate se schimbă odată.
 *
 * Cele câteva locuri care aveau familia scrisă direct în foaie au fost trecute pe forma
 * `var(--ma-font-display, Georgia, serif)`. Variabila nu există în varianta legacy, deci acolo se
 * folosește exact stiva dinainte, literă cu literă; sub `.ma-typography-v2` există, deci câștigă.
 * Așa nu a fost nevoie nici de selectori de forță, nici de `!important`.
 *
 * Fonturile sunt servite de pe acest domeniu, din `assets/fonts/`. Nu există niciun request către
 * Google. Proveniența, sumele de control și licențele OFL stau în `assets/fonts/README.md`.
 */

/* ------------------------------------------------------------------ Newsreader (titluri) */

/*
 * Fișiere variabile, câte unul pentru drept și unul pentru cursiv, fiecare în două subseturi.
 * `latin-ext` nu este opțional pentru română: Ă, ă, Ș, ș, Ț și ț stau acolo; Â, â, Î și î stau în
 * `latin`. Fișierele acoperă greutățile 400–800 și toată axa de mărime optică (6–72).
 *
 * Originalul de la Google Fonts mergea de la 200. Greutățile 200–399 au fost scoase din fișiere:
 * nicio regulă a temei nu cere Newsreader sub 400, iar ele cântăreau un sfert din fiecare fișier.
 * Literele, kerningul și desenul la 400–800 sunt cele de dinainte, comparate punct cu punct.
 * Intervalul declarat este intervalul real al fișierului: o greutate cerută sub 400 se desenează
 * la 400, fără subțiere sintetică. Dacă va fi vreodată nevoie de una mai subțire, fișierele
 * întregi se iau din nou de la Google Fonts și intervalul de aici revine la `200 800`.
 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ Source Sans 3 (text, controale) */

/*
 * O singură axă de greutate, 200–900, într-un singur fișier pe subset. Site-ul urcă până la 900 pe
 * etichete și butoane, deci intervalul declarat trebuie să ajungă acolo: altfel butoanele ar fi
 * fost îngroșate sintetic, ceea ce nu are voie să se întâmple.
 */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------------------ Comutatorul */

/*
 * Aici se schimbă site-ul, și numai aici.
 *
 * Cele două variabile de preset sunt declarate de WordPress pe `:root`. Redefinite pe `body`, care
 * este descendentul lui, câștigă pentru tot ce se randează, fără să fie nevoie de `!important`:
 * regula `body{font-family: var(--wp--preset--font-family--body)}` din stilurile globale rezolvă
 * variabila pe elementul unde este citită, deci vede valoarea nouă.
 *
 * `font-synthesis: none` interzice îngroșarea și înclinarea sintetică. Fișierele de mai sus acoperă
 * tot ce cere designul — serif drept și cursiv, sans drept —, deci interdicția nu lasă nimic
 * descoperit; dacă cineva va scrie vreodată cursiv într-un context sans, textul va rămâne drept, iar
 * asta este semnalul că trebuie adus fișierul cursiv al lui Source Sans 3, nu că trebuie relaxată
 * regula.
 */
.ma-typography-v2 {
  /*
   * Cele două stive stau scrise o singură dată, în `theme.json`, sub `settings.custom`. De acolo
   * WordPress le emite ca `--wp--custom--ma-font-*` și în pagină, și în pânza editorului, deci
   * foaia de față și cea a editorului citesc același adevăr, nu două copii care pot să se
   * despartă.
   */
  --ma-font-display: var(--wp--custom--ma-font-display);
  --ma-font-sans: var(--wp--custom--ma-font-sans);

  --wp--preset--font-family--display: var(--ma-font-display);
  --wp--preset--font-family--body: var(--ma-font-sans);

  font-synthesis: none;
}

/* ------------------------------------------------------------------- Ajustări punctuale */

/*
 * Cele două locuri unde metricile noi cer o corecție, și numai sub clasă. Amândouă vin din
 * aceeași cauză: Source Sans 3 este mai îngust decât fontul de sistem pe care îl înlocuiește, deci
 * textul funcțional încape altfel.
 *
 * Sub 400 px, eticheta „Descoperă povestea atelierului” stătea pe două rânduri și acum încape pe
 * unul singur. Rândul acela ajunge până la umplutura butonului, iar acolo, la 19 px de margine,
 * stă nitul: prima literă intra sub el.
 *
 * Corecția nu atinge nici dimensiunea, nici tracking-ul, nici înălțimea rândului. Umplutura
 * laterală este scrisă din chiar variabilele nitului — poziția lui plus raza —, ca legătura dintre
 * ornament și text să rămână adevărată dacă vreuna dintre ele se schimbă cândva.
 *
 * Amândouă au și valoarea de rezervă scrisă alături, fiindcă sunt declarate în `forged-cta.css`,
 * altă foaie, cu altă viață de cache. Fără ea, un browser rămas cu foaia veche ar fi primit un
 * `var()` nerezolvat, iar o declarație cu `var()` nerezolvat cade în întregime: umplutura ar fi
 * revenit la 16 px și litera sub nit, exact defectul pe care corecția îl repară.
 */
@media (max-width: 400px) {
  .ma-typography-v2 :is(
    .ma-category-showcase .ma-categories-more a,
    .ma-selected-portfolio .metalicart-portfolio-more a,
    .metalicart-difference__actions .wp-block-button__link,
    .ma-process-footer .wp-block-button__link,
    .ma-offer-form__submit
  ) {
    padding-inline: calc(var(--ma-cta-rivet-inset, 12px) + var(--ma-cta-rivet, 7px) + 2px);
  }
}

/*
 * A doua corecție, tot din aceeași cauză: la 200% zoom pe un telefon de 390 px, fereastra ajunge
 * la 195 px CSS. Acolo, „Confidențialitate” ocupa un rând întreg, iar acum,
 * mai îngust, lasă loc lui „Cookies” lângă el — adică exact în colțul din dreapta-jos, sub butonul
 * flotant „sus”. Nu litera era acoperită, ci câțiva pixeli din ținta de atingere, dar o țintă
 * ciuntită rămâne o țintă ciuntită.
 *
 * Sub 240 px linkurile juridice stau unul sub altul, cum stăteau și înainte: niciunul nu mai ajunge
 * în dreptul butonului. Peste pragul acesta — adică pe orice ecran pe care tema chiar îl susține —
 * rândul rămâne neatins.
 */
@media (max-width: 240px) {
  .ma-typography-v2 .ma-footer__legal { flex-direction: column; }
}
