/**
 * Panoul de accesibilitate + modurile pe care le comandă.
 *
 * De ce fișier separat: modurile stăteau amestecate în style.css (284 KB),
 * unde orice atingere a lor însemna un diff pe fișierul cel mai citit al
 * temei. Aici sunt împreună, se citesc dintr-o bucată și se pot dezactiva
 * scoțând o singură coadă din enqueue.
 *
 * Se încarcă DUPĂ style.css-ul temei-copil (prioritate 30 în
 * anpcdefp_a11y_assets), ca modurile să bată culorile Eurodesk.
 *
 * Numele claselor high-contrast / dyslexia-friendly / highlight-links /
 * large-cursor sunt cele vechi INTENȚIONAT: style.css are ~15 reguli
 * împrăștiate care depind de ele (footer__watermark, author-card,
 * hs-watermark). Redenumirea le-ar rupe în tăcere.
 *
 * @package ANPCDEFP
 */

/* ==========================================================================
   1. BUTONUL DIN HEADER
   ========================================================================== */

.header__a11y {
    position: relative;
}

/* Butonul e ancora insignei, nu învelișul lui: insigna trebuie să iasă pe
   colțul BUTONULUI, iar `.header__a11y` poate fi mai lat decât el. */
.header__a11y .header__btn {
    position: relative;
}

/* Insignă pe buton când vizitatorul are cel puțin o preferință pornită.
   Arată CÂTE sunt, nu doar „ceva e pornit": cifra e singura care spune dacă
   ai uitat un comutator aprins de acum trei pagini. Roșu cu cifră albă —
   #D92D20 cu alb dă 4,9:1, deci cifra se citește și la 9px.

   MĂRIMEA ȘI POZIȚIA CONTEAZĂ: butonul are 38×38 (style.css:361), iar o
   insignă de 21px așezată la 2px de colț se suprapunea peste glifă și o
   ascundea. Acum are 16px și atârnă în afara colțului, ca orice insignă de
   notificare — glifa rămâne întreagă. */
.header__a11y-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: #D92D20;
    border: 2px solid var(--white);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0 !important;
    pointer-events: none;
}

body.a11y-has-prefs .header__a11y-dot {
    display: flex;
}

/* Cu contrast ridicat headerul devine negru, iar chenarul alb al insignei
   se pierde în butonul alb; îl întoarcem pe fundalul lui. */
body.high-contrast .header__a11y-dot {
    border-color: #000;
}

/* ==========================================================================
   2. PANOUL (sertar lateral)
   ========================================================================== */

/* Tiparul de mai jos, repetat și pe panou, merită explicat o dată.
   `visibility` NU se poate tranziționa continuu: la deschidere rămâne
   `hidden` tot primul cadru, iar un element ascuns nu primește focus —
   exact așa se pierdea focusul pe butonul de închidere. Soluția e o
   tranziție de 0s pe visibility, ÎNTÂRZIATĂ cu durata animației doar la
   închidere: se deschide instantaneu vizibil, se închide după ce a apucat
   să alunece afară. */
.a11y-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 9998;
}

.a11y-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.a11y-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Sertarul crește odată cu textul, dar nu la nesfârșit: la treapta 5
       (200%) etichetele pastilelor ar trece pe trei rânduri într-o coloană
       de 400px. Plafonul de 620px îl ține sertar, nu jumătate de ecran. */
    width: min(calc(400px * var(--font-scale, 1)), 620px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
    z-index: 9999;
}

.a11y-panel.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.a11y-panel__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--brand-primary, var(--brand-purple));
    color: var(--white);
    flex-shrink: 0;
}

.a11y-panel__header i {
    font-size: 1.25rem;
}

.a11y-panel__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
    color: var(--white);
}

.a11y-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.a11y-panel__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.a11y-panel__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem;
    background: var(--gray-50);
}

.a11y-panel__section {
    margin-bottom: 1.5rem;
}

.a11y-panel__section:last-child {
    margin-bottom: 0;
}

.a11y-panel__legend {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 0.625rem;
    padding: 0;
}

.a11y-panel__note {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

.a11y-panel__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    background: var(--white);
}

.a11y-panel__declaration {
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
    text-decoration: underline;
}

.a11y-panel__reset {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.a11y-panel__reset:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

/* ==========================================================================
   3. PROFILURI
   ========================================================================== */

.a11y-profiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.a11y-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.a11y-profile i {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--brand-primary, var(--brand-purple));
    font-size: 0.8125rem;
}

/* Când profilurile sunt în număr impar, ultimul ocupă tot rândul —
   altfel rămâne o pastilă orfană lipită în stânga. */
.a11y-profile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.a11y-profile:hover {
    border-color: var(--brand-primary, var(--brand-purple));
}

.a11y-profile[aria-pressed="true"] {
    border-color: var(--brand-primary, var(--brand-purple));
    box-shadow: inset 0 0 0 1px var(--brand-primary, var(--brand-purple));
    background: var(--brand-primary-50, var(--brand-purple-50));
}

.a11y-profile[aria-pressed="true"] i {
    background: var(--brand-primary, var(--brand-purple));
    color: var(--white);
}

/* ==========================================================================
   4. PASTILELE DE FUNCȚII
   ========================================================================== */

.a11y-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.a11y-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    min-height: 92px;
    padding: 0.875rem 0.5rem 0.6875rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.a11y-tile i {
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.a11y-tile:hover {
    border-color: var(--brand-primary, var(--brand-purple));
}

.a11y-tile[aria-pressed="true"],
.a11y-tile.is-active {
    border-color: var(--brand-primary, var(--brand-purple));
    box-shadow: inset 0 0 0 1px var(--brand-primary, var(--brand-purple));
    background: var(--brand-primary-50, var(--brand-purple-50));
}

.a11y-tile[aria-pressed="true"] i,
.a11y-tile.is-active i {
    color: var(--brand-primary, var(--brand-purple));
}

/* Bifa de colț pe pastilele pornite */
.a11y-tile__check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--brand-primary, var(--brand-purple));
    color: var(--white);
    font-size: 0.5625rem;
    display: none;
    align-items: center;
    justify-content: center;
}

.a11y-tile[aria-pressed="true"] .a11y-tile__check,
.a11y-tile.is-active .a11y-tile__check {
    display: flex;
}

/* Indicatorul de trepte, pentru pastilele care ciclează (text, spațiere…).
   Lățimea stă pe CONTAINER, nu pe segmente: cu `flex: 1` pe segmente și
   containerul lăsat să se strângă după conținut, flex-basis 0 le colapsa
   la zero și rămâneau doar spațiile dintre ele — 12px cu totul, măsurat. */
.a11y-tile__levels {
    display: flex;
    justify-content: center;
    gap: 3px;
    width: 100%;
    max-width: 92px;
    margin-top: auto;
    padding-top: 0.375rem;
}

/* Segmentele împart lățimea containerului: la două trepte ies late, la
   cinci se subțiază singure, fără să dea pe lângă pastilă.

   Culoarea segmentului stins e scrisă pe litere, NU `var(--gray-200)`:
   modul „contrast ridicat" redefinește tokenul acela la negru, iar
   segmentele stinse ieșeau negre lângă cele aprinse, violete — adică
   indicatorul de trepte devenea ilizibil exact în modul făcut pentru
   cine vede greu (măsurat: #000000 vs #440098). */
.a11y-tile__levels span {
    flex: 1 1 auto;
    height: 3px;
    border-radius: var(--radius-full);
    background: #D4D4D8;
    transition: background 0.15s ease;
}

.a11y-tile__levels span.is-on {
    background: var(--brand-primary, var(--brand-purple));
}

/* În contrast ridicat deosebirea se face prin plin/gol, nu prin nuanță. */
body.high-contrast .a11y-tile__levels span {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #000000;
}

body.high-contrast .a11y-tile__levels span.is-on {
    background: #000000;
    box-shadow: none;
}

/* Valoarea curentă, scrisă cu litere. Barele arată CĂ mai sunt trepte,
   cifra spune LA CARE ești — fără ea trebuie să numeri segmentele. */
.a11y-tile__value {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-muted);
    letter-spacing: 0 !important;
}

.a11y-tile[aria-pressed="true"] .a11y-tile__value,
.a11y-tile.is-active .a11y-tile__value {
    color: var(--brand-primary, var(--brand-purple));
}

/* Treapta curentă, citită de cititoarele de ecran fără să ocupe spațiu */
.a11y-tile__state {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Rândul cu zoom-ul de pagină (− 100% +) */
.a11y-stepper {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.a11y-stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.a11y-stepper__btn:hover:not(:disabled) {
    background: var(--brand-primary, var(--brand-purple));
    border-color: var(--brand-primary, var(--brand-purple));
    color: var(--white);
}

.a11y-stepper__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Procentajul și butonul de readucere la 100% formează o pereche, centrată
   în rând: butonul trebuie să stea CHIAR lângă cifra pe care o schimbă, nu
   împins în dreapta, lângă „+". Grupul ia spațiul rămas între „−" și „+". */
.a11y-stepper__display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
}

.a11y-stepper__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Readucerea zoomului la 100%. Poartă și clasa .a11y-stepper__btn, deci are
   exact geometria lui „−" și „+" — un buton mai mic decât vecinii lui pare
   un buton de altă categorie, iar aici e aceeași categorie.
   Apare doar când zoomul chiar e schimbat: la 100% n-are ce reseta, iar un
   buton mereu prezent și mereu fără efect e doar o țintă în plus de nimerit.

   Atributul `hidden` singur n-ar avea efect — `display: flex` de pe
   .a11y-stepper__btn îl bate. Regula asta îi dă înapoi puterea. */
.a11y-stepper__reset[hidden] {
    display: none;
}

/* Focus vizibil peste tot în panou — panoul de accesibilitate e ultimul
   loc în care ai voie să ascunzi indicatorul de focus. */
.a11y-panel :is(button, a, [tabindex]):focus-visible {
    outline: 3px solid var(--eu-yellow, #FFCC00);
    outline-offset: 2px;
}

.a11y-panel__header :is(button, a):focus-visible {
    outline-color: var(--white);
}

/* Mobil: sertarul devine foaie pe tot ecranul */
@media (max-width: 640px) {
    .a11y-panel {
        width: 100vw;
    }

    .a11y-tiles,
    .a11y-profiles {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a11y-panel,
    .a11y-overlay {
        transition: none;
    }
}

/* ==========================================================================
   5. MODURILE — ZOOM ȘI MĂRIMEA TEXTULUI
   ========================================================================== */

/* Zoom de pagină: scalează tot, ca Ctrl +/− din browser.
   Treptele nu sunt uniforme dinadins — de la 150% în sus un pas de 10%
   aproape nu se simte, dar te costă încă o apăsare. */
body.a11y-zoom-90  { zoom: 0.9; }
body.a11y-zoom-110 { zoom: 1.1; }
body.a11y-zoom-125 { zoom: 1.25; }
body.a11y-zoom-150 { zoom: 1.5; }
body.a11y-zoom-175 { zoom: 1.75; }
body.a11y-zoom-200 { zoom: 2; }

/* Mărimea textului: --font-scale exista în :root de la prima versiune a
   temei și era consumat de `html { font-size: … }`, dar nimic nu-l schimba.
   Merge pe <html>, nu pe <body>, fiindcă regula care-l citește e pe <html>.

   ATENȚIE — două locuri trebuie să rămână înmulțite cu el, altfel scalarea
   pare că „nu face nimic":
     1. inc/dynamic-css.php, regula `html { font-size: … }` tipărită la
        wp_head cu prioritatea 100 — adică DUPĂ toate foile de stil;
     2. cele 11 `font-size: clamp(…)` din style.css, care au limite în px
        și vw și de-aia nu se mișcă după rădăcină (titlurile hero, .hs-title,
        .section__title — exact textele cele mai mari de pe prima pagină).
   Treapta 5 este ținta WCAG 1.4.4 (text redimensionabil până la 200%). */
html.a11y-text-1 { --font-scale: 1.1; }
html.a11y-text-2 { --font-scale: 1.25; }
html.a11y-text-3 { --font-scale: 1.4; }
html.a11y-text-4 { --font-scale: 1.6; }
html.a11y-text-5 { --font-scale: 2; }

/* Indicatorul de nivel care apare scurt după fiecare apăsare */
body[data-a11y-toast]::after {
    content: attr(data-a11y-toast);
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 10000;
    pointer-events: none;
    animation: a11yFadeOut 1.6s ease forwards;
}

@keyframes a11yFadeOut {
    0%, 55% { opacity: 1; }
    100%    { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   6. MODURILE — TIPOGRAFIE
   ========================================================================== */

/* Spațiere (WCAG 1.4.12). Merge pe descendenți cu !important fiindcă
   titlurile temei au letter-spacing propriu, negativ, care altfel câștigă. */
body.a11y-spacing-1 * {
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* Treapta 2 atinge pragul din WCAG 1.4.12: literă ≥ 0,12em, cuvânt ≥ 0,16em. */
body.a11y-spacing-2 * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.18em !important;
}

body.a11y-spacing-3 * {
    letter-spacing: 0.16em !important;
    word-spacing: 0.28em !important;
}

body.a11y-spacing-4 * {
    letter-spacing: 0.22em !important;
    word-spacing: 0.4em !important;
}

/* Fonturile-iconiță ies din calcul: un letter-spacing pe o glifă de
   iconiță lasă un gol după ea și o împinge din mijlocul butonului.
   Regula pune „normal" explicit, nu doar ocolește iconița — letter-spacing
   se moștenește, așa că un <i> doar exclus tot ar fi luat valoarea
   părintelui (măsurat în harness: 0,9px pe bifa pastilelor). */
body[class*="a11y-spacing-"] :is([class*="fa-"], [class*="ph-"], [class*="ri-"], [class*="bi-"]) {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* Înălțimea rândului. Ținta e textul curent, nu chiar orice element:
   pe butoane și pastile line-height ține centrarea verticală.
   `.prose` și `.article__body` sunt învelișurile reale de conținut din
   temă — .entry-content singur ar fi ratat corpul știrilor (single.php:93). */
/* Înălțimea rândului. Ținta e textul curent, nu chiar orice element:
   pe butoane și pastile line-height ține centrarea verticală. Treapta 1
   trece deja de pragul WCAG 1.4.12 (1,5× pentru paragrafe). */
body.a11y-line-1 :is(p, li, dd, dt, blockquote, figcaption, td, th, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    line-height: 1.6 !important;
}

body.a11y-line-2 :is(p, li, dd, dt, blockquote, figcaption, td, th, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    line-height: 1.8 !important;
}

body.a11y-line-3 :is(p, li, dd, dt, blockquote, figcaption, td, th, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    line-height: 2.1 !important;
}

body.a11y-line-4 :is(p, li, dd, dt, blockquote, figcaption, td, th, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    line-height: 2.5 !important;
}

/* Alinierea textului, trei variante.
   NU există „la bloc" (justify) și nu e o scăpare: WCAG 2.1, criteriul
   1.4.8, cere explicit ca textul să NU fie aliniat la ambele margini —
   râurile de spațiu alb care apar acolo îi pierd pe cititorii cu dislexie.
   Un panou de accesibilitate care oferă butonul ăla își contrazice scopul.
   Atingem doar textul curent; titlurile centrate din machetă rămân cum sunt. */
body.a11y-align-left :is(p, li, dd, blockquote, figcaption, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    text-align: left !important;
}

body.a11y-align-center :is(p, li, dd, blockquote, figcaption, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    text-align: center !important;
}

body.a11y-align-right :is(p, li, dd, blockquote, figcaption, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    text-align: right !important;
}

/* PANOUL NU E TEXT DE CITIT, e tabloul de comandă.
   Spațierea, înălțimea rândului și alinierea se aplică peste tot ÎN AFARĂ
   de el: la treptele mari eticheta unei pastile trecea pe trei rânduri,
   indicatorul de trepte era împins afară, iar sertarul ajungea să deruleze
   pe orizontală (măsurat) — adică se strica exact comanda cu care încerci
   să repari. Mărimea textului rămâne aplicată și aici: acolo controalele
   mai mari chiar ajută.
   Criteriul WCAG 1.4.12 vizează oricum textul de conținut, nu interfața.

   POZIȚIA CONTEAZĂ: regulile de mai sus au exact aceeași specificitate
   (0,2,1), deci decide ordinea în fișier. Blocul ăsta trebuie să rămână
   ULTIMUL dintre ele. */
body[class*="a11y-spacing-"] :is(.a11y-panel, .a11y-panel *, .a11y-reader-bar, .a11y-reader-bar *) {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

body[class*="a11y-line-"] :is(.a11y-panel, .a11y-panel *, .a11y-reader-bar, .a11y-reader-bar *) {
    line-height: 1.35 !important;
}

/* Doar elementele pe care le-ar prinde regula de aliniere (p, li…);
   `.a11y-stepper__value` își păstrează centrarea proprie. */
body[class*="a11y-align-"] .a11y-panel :is(p, li, dd, blockquote, figcaption) {
    text-align: left !important;
}


/* Font pentru dislexie.
   Fișierele vin din scripts/build-font-assets.py (licență OFL). Dacă nu
   au fost aduse încă, @font-face pică pe stiva de rezervă și modul tot
   face partea dovedită științific: spațiere mai mare, rânduri mai rare,
   aliniere la stânga. Nu mai e niciodată buton fără efect. */
body.dyslexia-friendly,
body.dyslexia-friendly :not([class*="fa-"]):not([class*="ph-"]):not([class*="ri-"]):not([class*="bi-"]) {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', Verdana, sans-serif !important;
}

body.dyslexia-friendly {
    letter-spacing: 0.03em;
    word-spacing: 0.12em;
}

body.dyslexia-friendly :is(p, li, dd, blockquote, .prose, .prose *, .entry-content, .entry-content *, .article__body, .article__body *) {
    line-height: 1.8 !important;
    text-align: left !important;
}

/* ==========================================================================
   7. MODURILE — CULOARE ȘI CONTRAST
   ========================================================================== */

body.high-contrast {
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-muted: #1a1a1a;
    --white: #FFFFFF;
    --gray-50: #FFFFFF;
    --gray-100: #e0e0e0;
    --gray-200: #000000;
    --border-light: #000000;
}

body.high-contrast * {
    border-color: #333 !important;
}

body.high-contrast img {
    border: 1px solid #333;
}

body.high-contrast .header,
body.high-contrast .header.is-scrolled {
    background: #000 !important;
    border-bottom: 3px solid var(--eu-yellow) !important;
}

body.high-contrast .header__link,
body.high-contrast .header__btn,
body.high-contrast .header__logo-text {
    color: #fff !important;
}

body.high-contrast .top-bar {
    background: #111 !important;
    border-bottom: 2px solid var(--eu-yellow) !important;
}

body.high-contrast .footer {
    background: #000 !important;
    border-top: 3px solid var(--eu-yellow) !important;
}

body.high-contrast a {
    text-decoration: underline !important;
}

body.high-contrast a:focus,
body.high-contrast button:focus {
    outline: 3px solid var(--eu-yellow) !important;
    outline-offset: 2px;
}

body.high-contrast .card,
body.high-contrast .news-card,
body.high-contrast .deadline-card {
    border: 2px solid #000 !important;
}

body.high-contrast .badge,
body.high-contrast .tag {
    border: 1px solid #000 !important;
}

/* Inversare de culori.
   Filtrul stă pe <html> dinadins: specificația Filter Effects scutește
   ELEMENTUL-RĂDĂCINĂ de regula prin care un filtru devine bloc-container
   pentru descendenții position:fixed. Pe <body> ar rupe headerul lipit și
   chiar sertarul acesta; pe <html> nu. */
html.a11y-invert {
    background: #ffffff;
    filter: invert(1) hue-rotate(180deg);
}

/* …iar ce e imagine se întoarce la loc, ca fotografiile să nu arate a negativ. */
html.a11y-invert :is(img, picture, video, iframe, canvas, .a11y-media, [data-a11y-bg]) {
    filter: invert(1) hue-rotate(180deg);
}

/* Hărțile Leaflet sunt dale de imagine peste care stau vectori; le
   întoarcem pe tot stratul, altfel dalele ies inversate față de restul. */
html.a11y-invert .leaflet-container {
    filter: invert(1) hue-rotate(180deg);
}

/* Saturație — pentru cine obosește repede la culori tari (migrenă,
   sensibilitate senzorială). Tot pe <html>, din același motiv ca inversarea.
   Combinațiile sunt scrise pe litere, nu compuse din variabile: `filter` nu
   se cumulează între două reguli, ultima ar câștiga și una din setări s-ar
   pierde în tăcere. Cinci reguli, zero surprize. */
html.a11y-sat-1 { filter: saturate(0.5); }
html.a11y-sat-2 { filter: saturate(1.7); }
html.a11y-sat-3 { filter: grayscale(1); }

html.a11y-invert.a11y-sat-1 { filter: invert(1) hue-rotate(180deg) saturate(0.5); }
html.a11y-invert.a11y-sat-2 { filter: invert(1) hue-rotate(180deg) saturate(1.7); }
html.a11y-invert.a11y-sat-3 { filter: invert(1) hue-rotate(180deg) grayscale(1); }

/* ==========================================================================
   8. MODURILE — MIȘCARE
   ========================================================================== */

/* „Oprește animațiile" (WCAG 2.2.2). Clasa stă pe <html>, nu pe <body>,
   fiindcă `scroll-behavior: smooth` e declarat tot pe <html> și n-am avea
   de unde să-l prindem altfel fără :has(). */
html.a11y-no-motion {
    scroll-behavior: auto !important;
}

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
}

/* CAPCANA acestui mod: `.reveal` pornește de la `opacity: 0` și devine
   vizibil printr-o tranziție. Dacă tai doar tranziția, ce nu apucase să
   fie dezvăluit rămâne invizibil PENTRU TOTDEAUNA — pagina pare goală.
   Regula de mai jos e copia exactă a blocului `prefers-reduced-motion`
   din style.css:2993, care rezolvă exact asta. */
html.a11y-no-motion .reveal,
html.a11y-no-motion .reveal-child,
html.a11y-no-motion .hero__inner .reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Indicatorul de treaptă e singura animație pe care o păstrăm: fără ea,
   apeși pe „Spațiere text" și nu afli la ce treaptă ai ajuns. */
html.a11y-no-motion body[data-a11y-toast]::after {
    animation-duration: 1.6s !important;
}

/* ==========================================================================
   9. MODURILE — LINKURI, CURSOR, IMAGINI
   ========================================================================== */

body.highlight-links a {
    background-color: rgba(255, 255, 0, 0.3) !important;
    outline: 1px dashed currentColor;
    outline-offset: 2px;
}

body.highlight-links a:hover {
    background-color: rgba(255, 255, 0, 0.6) !important;
}

body.large-cursor,
body.large-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 2 L5 28 L12 21 L20 28 L23 23 L15 16 L24 16 Z' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 5 2, auto !important;
}

body.large-cursor a,
body.large-cursor button,
body.large-cursor [role="button"],
body.large-cursor input,
body.large-cursor select,
body.large-cursor textarea {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 4 C8 4 8 28 8 28 C8 28 24 28 24 28 C24 28 24 4 24 4 Z' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='16' y1='8' x2='16' y2='24' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 16 16, pointer !important;
}

/* Ascunderea imaginilor. Elementele sunt înlocuite din JS cu un
   substitut care poartă textul alternativ — o imagine ascunsă fără
   descriere ar lăsa o gaură în înțeles. Aici e doar înfățișarea. */
.a11y-img-stub {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--gray-100);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: left;
}

.a11y-img-stub i {
    flex-shrink: 0;
    color: var(--text-muted);
}

.a11y-bg-off {
    background-image: none !important;
}

/* Ghidul și masca de citire.
   Amândouă urmăresc cursorul și focusul de la tastatură. Stau sub sertar
   (z-index 9996 față de 9999), ca panoul să rămână lizibil peste mască, și
   nu primesc evenimente de mouse — altfel ar înghiți fiecare clic. */
.a11y-guide,
.a11y-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    display: none;
    pointer-events: none;
    z-index: 9996;
}

.a11y-guide {
    height: 3px;
    background: var(--brand-primary, var(--brand-purple));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Masca e o bandă limpede peste un `box-shadow` uriaș: umbra întunecă tot
   ce e în afara benzii, fără patru elemente separate și fără să acopere
   banda însăși. */
.a11y-mask {
    height: 140px;
    box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.62);
}

body.a11y-guide-line .a11y-guide { display: block; }
body.a11y-guide-mask .a11y-mask { display: block; }

/* ==========================================================================
   9. CITIREA CU VOCE TARE
   ========================================================================== */

/* Bucata citită în clipa asta. Contrastul e verificat: #1A1A2E pe #FFE9A8
   dă 13,4:1, deci ține și cu contrast ridicat pornit. */
.a11y-read-now {
    background: #FFE9A8 !important;
    color: #1A1A2E !important;
    box-shadow: 0 0 0 3px #FFE9A8;
    border-radius: var(--radius-sm);
}

body.a11y-reading :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dd, figcaption):hover {
    outline: 2px dotted var(--brand-primary, var(--brand-purple));
    outline-offset: 3px;
    cursor: pointer;
}

.a11y-reader-bar {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--gray-900, #18181B);
    box-shadow: var(--shadow-xl);
    z-index: 9997;
}

.a11y-reader-bar.is-visible {
    display: flex;
}

.a11y-reader-bar__label {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.375rem;
}

.a11y-reader-bar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.a11y-reader-bar button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.a11y-reader-bar button:focus-visible {
    outline: 3px solid var(--eu-yellow, #FFCC00);
    outline-offset: 2px;
}

.a11y-reader-bar__rate {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 2.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .a11y-reader-bar {
        left: 0.75rem;
        right: 0.75rem;
        transform: none;
        justify-content: center;
    }
}

/* ==========================================================================
   10. LA TIPĂRIRE
   ========================================================================== */

@media print {
    .a11y-panel,
    .a11y-overlay,
    .a11y-reader-bar {
        display: none !important;
    }

    html.a11y-invert {
        filter: none;
    }
}