/*
 * Corecții proprii peste tema Clenzia recolorată.
 *
 * Stă în afara lui `public/theme/` intenționat: acolo totul e generat de
 * `tools/tema-extrage.py` și se rescrie la fiecare rulare. Ce e aici scriem noi
 * de mână și trebuie să supraviețuiască.
 *
 * Se încarcă ULTIMUL, după app.css.
 */

/*
 * Contrast pe auriu.
 *
 * Bootstrap calculează culoarea textului de pe butoane la COMPILARE, din culoarea
 * de fundal de atunci. Secundarul temei era portocaliu (#F25912), pe care alb se
 * citește, deci a fixat `--dx-btn-color: #fff`. Noi am pus auriul (#FFC300) în
 * locul portocaliului DUPĂ compilare, iar alb pe auriu are un contrast de ~1.9:1 -
 * practic ilizibil. Recalculăm noi ce n-a mai apucat Sass să recalculeze.
 */
.btn-secondary {
    --dx-btn-color: #000814;
    --dx-btn-hover-color: #000814;
    --dx-btn-active-color: #000814;
    --dx-btn-disabled-color: #000814;
}

/*
 * Același lucru pentru butonul principal al temei: `.custom-btn` crește la hover
 * un strat de culoare secundară peste buton și forța textul pe alb. Cu auriul
 * nostru dedesubt, textul trebuie să fie închis.
 */
.custom-btn:hover,
.custom-btn:hover i,
.custom-btn:focus-visible {
    color: #000814 !important;
}

/* Iconițele din butoane moștenesc culoarea textului, nu pe cea a temei. */
.btn i {
    color: inherit;
}

/*
 * Fundalul paginii „În curând".
 *
 * Tema pune acolo o fotografie cu frunze verzi (main-bg.jpg) și umple titlul cu
 * ACEEAȘI imagine, prin background-clip:text - de-aia titlul iese verde. Efectul
 * e frumos, culoarea nu e a noastră, așa că păstrăm efectul și schimbăm doar
 * imaginea cu un gradient navy. Un gradient e tot o imagine pentru CSS, deci
 * background-clip:text funcționează la fel, fără niciun fișier în plus.
 *
 * Titlul folosește un gradient înrudit, ca să se păstreze relația din design:
 * textul pare decupat din fundal.
 */
/* Acelasi fundal si pe paginile de cont (login, inregistrare): sunt pagini de
   acelasi fel, fara antet si fara subsol, deci trebuie sa arate ca o familie. */
.speciality-section,
.auth-section {
    background-image:
        radial-gradient(900px 520px at 82% -12%, rgba(0, 53, 102, .60), transparent),
        radial-gradient(760px 520px at 8% 112%, rgba(255, 195, 0, .10), transparent),
        linear-gradient(160deg, #000814, #001d3d 58%, #003566);
}

.speciality-section .speciality-section-title {
    background-image: linear-gradient(122deg, #003566 0%, #001d3d 52%, #000814 100%);
}

/*
 * Cartonașul din mijloc e `d-inline-block` în temă, adică se lățește cât cel mai
 * lung conținut care nu se rupe. La ei mergea (au doar un titlu și un formular),
 * la noi linia din subsol si textul de deasupra descărcărilor sunt propoziții
 * întregi: pe telefon cartonașul ieșea din ecran și tăia butonul formularului.
 * Limita de mai jos îl readuce în container și lasă textul să se rupă normal.
 */
.coming-soon-wrapper {
    max-width: 100%;
}

/*
 * Antetul paginilor interioare (contact).
 *
 * Tema pune acolo o fotografie cu un drum prin pădure. Acelasi tratament ca la
 * „În curând": păstrăm efectul (imagine de fundal + voal întunecat peste ea) și
 * schimbăm doar imaginea cu gradientul nostru.
 */
.custom-hero-section {
    background-image:
        radial-gradient(1100px 600px at 78% -20%, rgba(0, 53, 102, .75), transparent),
        radial-gradient(800px 500px at 5% 120%, rgba(255, 195, 0, .12), transparent),
        linear-gradient(155deg, #000814, #001d3d 60%, #003566);
}

/* Voalul de peste fotografie n-are ce întuneca peste un gradient deja închis. */
.custom-hero-section:before {
    background-color: transparent;
}

/*
 * Insigna de sub antet e `bg-secondary` (auriu la noi), dar stă într-o secțiune
 * `text-white`, deci moștenea text alb pe auriu. Aceeași problemă de contrast ca
 * la butoane, în alt loc.
 */
.custom-hero-badge,
.custom-hero-badge a {
    color: #000814 !important;
}

/*
 * Numele uriaș din spatele subsolului e croit pentru „Clenzia" (7 litere).
 * „SyncDesk" are 8 și ieșea tăiat la mijlocul cuvântului, ceea ce arată a bug,
 * nu a decor. Îl micșorăm cât să încapă întreg pe fiecare prag.
 */
.app-footer-section .app-footer-big-text {
    /* Atenție la felul în care se rupe: textul e transparent, umplut de un
       gradient care se întinde exact cât CUTIA elementului. Ce depășește cutia
       nu e doar în afara ecranului, ci NEVOPSIT - adică invizibil. De-aia un
       „SyncDesk" prea mare nu se vede tăiat la marginea paginii, ci pur și
       simplu îi lipsesc literele de la capete.
       „SyncDesk" ocupă cam 4,6 x dimensiunea fontului; containerul are ~90vw. */
    font-size: min(15vw, 18rem) !important;
    white-space: nowrap;
}

/*
 * Telefoane (sub 480px).
 *
 * Tema n-a fost gândită sub această lățime: cronometrul se rupea 3+1, cu
 * „Secunde" singur pe un rând, iar în formular butonul lăsa câmpului atât de
 * puțin loc încât nu se mai citea adresa scrisă. Aici e mai important să
 * funcționeze decât să semene cu demo-ul.
 *
 * Pragul e 480px pentru că de la ~480 în sus cele patru cifre încap pe un rând
 * și câmpul redevine confortabil - verificat pe 360, 414, 480 și 768.
 */
@media (max-width: 479.98px) {
    .coming-soon-count {
        justify-content: center !important;
        gap: .75rem 0 !important;
    }

    .coming-soon-count .coming-soon-countdown {
        flex: 0 0 50%;
        padding-right: 0 !important;
        border-right: 0 !important;
    }

    /* Formularul trece pe două rânduri: câmpul întreg, butonul sub el. */
    .coming-soon-wrapper form.d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .coming-soon-wrapper form.d-flex .form-control {
        flex: 1 0 100%;
    }

    .coming-soon-wrapper form.d-flex .btn {
        flex: 1 0 100%;
        justify-content: center;
    }
}

/* Valul alb de la baza hero-ului de pe paginile legale (terms-condition).
   Regula temei e `.terms-hero-section .terms-hero-content .terms-hero-curve
   {position:absolute;bottom:0;width:100%;height:120px}` - fara `left`. Fara el,
   SVG-ul porneste din pozitia lui statica, iar containerul e `text-center`, deci
   valul incepea de la mijlocul paginii si lasa un prag drept in stanga.
   In tema defectul nu se vede pentru ca acolo selectorul nu prinde nimic: `<svg>`
   e pus langa .terms-hero-content, nu in el. */
.terms-hero-section .terms-hero-content .terms-hero-curve {
    left: 0;
}

/* Cuprinsul lipit de pe paginile legale (resources/views/legal/_cuprins.blade.php).
   Bara aurie din stanga marcheaza sectiunea curenta: e ingusta, deci nu concureaza
   cu textul, dar se vede dintr-o privire. Bordura e rezervata si pe intrarile
   inactive, transparenta - altfel randul activ s-ar deplasa lateral cu 2px de
   fiecare data cand derulezi dintr-o sectiune in alta. */
.cuprins-legal .nav-link {
    padding: .3rem 0 .3rem .75rem;
    font-size: .95rem;
    color: var(--dx-secondary-color);
    border-left: 2px solid transparent;
}

.cuprins-legal .nav-link:hover {
    color: var(--dx-primary);
}

.cuprins-legal .nav-link.active {
    color: var(--dx-primary);
    font-weight: 600;
    border-left-color: var(--dx-warning);
}

/* Titlul sarit din cuprins ar ajunge sub navbar: `.navbar-custom` e position:fixed. */
.continut-legal > div[id] {
    scroll-margin-top: 120px;
}

/* Cardul ramane pe ecran cat derulezi. Tema are regula asta, dar scrisa
   `.privacy-policy-section .privacy-policy-tab`, deci nu prindea decat pe pagina
   ei; cuprinsul e acum partial folosit pe toate paginile legale. */
.cuprins-legal-col {
    position: sticky;
    top: 100px;
}

/* Sub `lg` coloanele se suprapun: cardul nu mai are de ce sa se lipeasca, dar are
   nevoie de aer sub el, ca sa nu para capul textului care urmeaza. */
@media (max-width: 991.98px) {
    .cuprins-legal-col {
        position: static;
        margin-bottom: 1.5rem;
    }
}

/* Tabelele din paginile legale (politica de cookie-uri). `table-responsive` le tine
   derularea in cutia lor, dar fara o latime minima coloana din mijloc se strange pe
   telefon intr-o fasie de trei cuvinte si randurile devin turnuri. Cu min-width se
   deruleaza tot tabelul, cu coloanele lizibile. */
.continut-legal .table-responsive > .table {
    min-width: 34rem;
}

/* --------------------------------------------------------------- Despre noi */

/* Cardurile de pasi au in tema o stare `active-card` (scara 1, contur si umbra),
   dar nimic n-o comuta: JS-ul temei pentru pagina „about" nu se atinge de ele.
   Fara starea asta toate cardurile raman la scale(.98), adica usor micsorate
   fara motiv. Primul e activ din markup (acolo incepi), iar restul se ridica la
   trecerea cu mausul. */
.about-v2-process-section .about-v2-process-card:hover {
    transform: scale(1);
    border-color: var(--dx-primary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* Cuvantul din titlu urca si coboara la schimbare; fara taietura, se vede cum
   iese din chenar peste randul de deasupra. */
.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-text-wrapper {
    overflow: hidden;
}

/* Linia despartitoare dintre coloana de text si cardul din dreapta apartine
   randului, nu textului: pe telefon coloanele se aseaza una sub alta si linia ar
   ramane atarnata pe marginea dreapta a paragrafului. */
@media (max-width: 991.98px) {
    .about-v2-about-section .about-v2-about-content {
        border-right: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Cele trei capturi din sectiunea cu file au inaltimi diferite (tabelele au un
   numar diferit de randuri). Fara o proportie fixa, pagina saltea la fiecare
   schimbare de fila. Taiem de jos, nu de sus: partea de sus a ecranului spune
   despre ce pagina e vorba. */
.despre-captura {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    width: 100%;
}

/* ------------------------------------------------- Meniul lateral din antet */

/* Separator intre butonul de descarcare si „Meniu", ca in tema. Bootstrap n-are
   utilitare de bordura pe puncte de rupere, iar sub xl cele doua stau pe randuri
   diferite in sertarul mobil, unde linia n-ar avea sens. */
@media (min-width: 1200px) {
    .digital-navbar-menu {
        border-left: 1px solid rgba(255, 255, 255, .4) !important;
        padding-left: 1rem !important;
    }
}

/* `nav-ambient-cubes` e scris de tema pentru un <div>; pe butonul nostru e un
   <span>, deci are nevoie de display explicit ca sa se aseze cuburile in grila. */
.digital-navbar-menu .nav-ambient-cubes {
    display: flex;
}

/* ------------------------------------------------------- Cartonasele de pret */

/* Cinci planuri intr-un rand pe ecrane foarte late: `col-xxl` imparte randul in
   parti egale, indiferent cate planuri sunt active in panou. Sub 1400px trec la
   trei, apoi doua, apoi unul. */
.saas-v1-pricing-card h2 {
    font-size: 2.25rem;
}

/* ------------------------------------------------------ Paginile de login */

/* Tema pune ca fundal o fotografie cu frunze verzi (auth-main-bg.jpg): alta
   paleta si alt mesaj decat produsul nostru. Acelasi degrade ca pe vechile
   pagini de autentificare, ca trecerea sa nu se simta. */
/* Fundalul e cel de la pagina de mentenanta (vezi `.speciality-section` mai sus);
   aici ramane doar culoarea de dedesubt, pentru cazul in care imaginea aleasa din
   panou nu se incarca. */
.auth-section {
    background-color: #000814;
    background-size: cover;
    background-position: center;
}

/* Paginile de cont n-au antet, doar doua butoane in coltul din dreapta sus.
   Sectiunea isi centreaza continutul in `min-height:100vh`, deci fara rezerva sus
   capul cartonasului ar intra sub butoane pe un ecran scund. */
.auth-section {
    padding-top: 7rem !important;
}

.antet-plutitor {
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 575.98px) {
    .antet-plutitor {
        top: 1rem;
        right: 1rem;
        gap: 1rem;
    }
}

/* Panoul din dreapta e transparent in tema, tocmai ca sa se vada fotografia
   prin el. Cu fundal propriu devine panoul de prezentare; bordura alba de 15px
   ramane a temei, ea leaga cele doua coloane. */
.auth-section .auth-wrapper .auth-side {
    background:
        radial-gradient(circle at 12% 100%, rgba(255, 195, 0, .18), transparent 55%),
        linear-gradient(160deg, #001d3d, #003566);
    overflow: hidden;
}

.auth-punct-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 195, 0, .16);
    color: var(--dx-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

/* Captura intra pe latimea panoului si e taiata de jos, iesind prin marginea
   lui: asa se vede ca panoul continua dincolo de ce arata imaginea. */
.auth-captura {
    border-radius: .75rem .75rem 0 0;
    overflow: hidden;
    max-height: 190px;
    margin-bottom: -2rem !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}

.auth-captura img {
    width: 100%;
    display: block;
}

/* Intrarile care inlocuiesc butoanele sociale. Cea activa e plina, celelalte
   sunt doar conturate: rolul lor e sa arate ca exista, nu sa concureze cu
   formularul de pe pagina curenta. */
.auth-intrare {
    border: 1px solid var(--dx-border-color);
    transition: border-color .15s, background-color .15s;
}

.auth-intrare-activa {
    border-color: var(--dx-primary);
    background-color: var(--dx-primary-bg-subtle);
}

a.auth-intrare:hover {
    border-color: var(--dx-primary);
    background-color: var(--dx-primary-bg-subtle);
}

/* Butonul secundar de pe benzile navy.

   `btn-outline-light` din tema e facut pentru fundal DESCHIS: app.css ii pune
   `--dx-btn-color: var(--dx-secondary-color)`, adica gri de text sters, iar tema
   il foloseste mereu impreuna cu `text-body`. Pe fundal navy ieseau litere gri
   la 2.2:1 - masurat, nu presupus.

   Se corecteaza variabila, nu culoarea: cu `text-white` s-ar fi stricat hover-ul,
   unde butonul se umple cu deschis si textul trebuie sa redevina inchis. */
.bg-primary > .btn-outline-light,
.bg-primary .btn-outline-light {
    --dx-btn-color: #fff;
    --dx-btn-border-color: rgba(255, 255, 255, .6);
}

/* Casuta pentru codul din doi pasi. Sase cifre lipite se citesc greu si se corecteaza
   si mai greu: distanta intre ele face diferenta cand le compari cu telefonul in mana. */
.camp-cod {
    letter-spacing: .5rem;
    text-indent: .5rem;    /* compenseaza spatiul de dupa ultima cifra, ca sa ramana centrat */
}

/* ===== Benzile care curg (marchize) =====

   Miscarea o face `public/js/banda.js`, care ia benzile inainte de main.js si le
   scrie continutul de doua ori. Aici raman doar animatia si vitezele.

   Animatia muta banda cu exact 50%: cu doua jumatati identice, la capatul ciclului a
   doua ajunge fix unde era prima, deci nu se vede nicio trecere. Durata NU se scrie
   aici - o calculeaza JS-ul din latimea masurata, ca sa iasa aceeasi viteza indiferent
   cate cuvinte sunt in banda. */
.banda {
    --banda-viteza: 100;   /* pixeli pe secunda */
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    animation: banda-curge 20s linear infinite;
}

.banda-dreapta {
    animation-direction: reverse;
}

@keyframes banda-curge {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Sta pe loc sub cursor: cine vrea sa citeasca un cuvant il poate opri. */
.banda:hover {
    animation-play-state: paused;
}

/* Cine a cerut din sistem mai putina miscare o primeste: banda nu mai curge deloc.
   Textul ramane acolo, doar ca nemiscat. */
@media (prefers-reduced-motion: reduce) {
    .banda {
        animation: none;
    }
}

/* Vitezele, pe fel de banda. Aici se regleaza, nu in JS.

   Banda mare de sub HERO. Aici socoteala nu se face in pixeli pe secunda, ci in cat
   ii ia unei litere sa treaca peste propria latime: literele au 100px, deci la viteza
   care pare cuminte pe text marunt banda pare ca fuge. Am coborat de doua ori, 340 ->
   200 -> 130. La 130 px/s un cuvant sta pe ecran vreo 15 secunde. */
.app-brand-section .app-marquee .banda {
    --banda-viteza: 130;
}

/* Banda de sigle si platforme de pe /despre: se uita omul la ea, nu o citeste. */
.about-v2-brand-section .banda {
    --banda-viteza: 120;
}

/* Eticheta de sectiune („{ 03 } Cum incepi -"): sta intr-o fereastra de 120px, langa
   un titlu. Orice mai repede de-atat fura ochiul de la titlu. */
.section-main-label .banda {
    --banda-viteza: 30;
}

/* ------------------------------------------------- Meniul de pe telefon */

/*
 * Sub xl, tema transforma bara de meniu intr-un sertar fix de 300px si toarna in el
 * meniul de desktop. Markup-ul nostru de telefon (`.meniu-telefon`, in layouts/tema)
 * inlocuieste continutul; aici e imbracamintea lui si cele doua corecturi de sertar.
 */
@media (max-width: 1199.98px) {
    /* 300px fix inseamna, pe un telefon de 400px, o sita de 268px pentru text si o
       felie din pagina ramasa la vedere in dreapta - arata a ecran neterminat, nu a
       meniu deschis. Cu `min()` sertarul creste cu ecranul, dar nu trece de 400px pe
       tablete, unde altfel ar acoperi tot. */
    .navbar-collapse {
        width: min(86vw, 400px) !important;
    }

    /* Tema ii da meniului `height: calc(100% - 135px)`, ca sa impinga butoanele la
       marginea de jos. Cu cinci randuri de meniu, intre ele si butoane ramanea o
       palma de gol. Butoanele noastre stau imediat sub lista. */
    .navbar-collapse .meniu-telefon {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        max-height: calc(100% - 70px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem 1.25rem 1.5rem;
    }
}

.meniu-telefon-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .75rem .25rem;
    border: 0;
    background: none;
    color: var(--dx-body-color);
    font-size: 1.0625rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}

/* Randul care duce la pagina pe care esti. Nu ingrosam litera: la 17px diferenta
   dintre 500 si 600 nu se vede, iar culoarea marcii se vede de la o palma. */
.meniu-telefon-link.e-aici {
    color: var(--dx-primary);
}

.meniu-telefon-link:hover,
.meniu-telefon-link:focus-visible {
    color: var(--dx-primary);
}

/* Sageata grupului: doar ea se roteste, nu tot randul. `aria-expanded` e sursa
   adevarului si pentru cititorul de ecran, deci pe el ne uitam si pentru desen. */
.meniu-telefon-grup {
    justify-content: space-between;
}

.meniu-telefon-grup i {
    transition: transform .2s ease;
}

.meniu-telefon-grup[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Subpaginile: retrase de la margine si scrise mai mic, ca sa se vada dintr-o
   privire ca tin de randul de deasupra. Iconita ramane - pe ea cade ochiul cand
   cauti „Descarca" printre opt randuri. */
.meniu-telefon-sub {
    padding-left: .75rem;
    border-left: 2px solid var(--dx-border-color);
    margin-left: .25rem;
}

.meniu-telefon-sub .meniu-telefon-link {
    padding: .5rem .25rem;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--dx-secondary-color);
}

.meniu-telefon-sub .meniu-telefon-link i {
    color: var(--dx-primary);
    font-size: 1.0625rem;
}

.meniu-telefon-jos {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dx-border-color);
}

/* Contactul: marunt si asezat, nu trei butoane in plus. Cine deschide meniul ca sa
   sune are numarul la un deget distanta, dar nu striga peste ce cauta restul. */
.meniu-telefon-contact {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .9375rem;
    color: var(--dx-secondary-color);
}

.meniu-telefon-contact i {
    color: var(--dx-primary);
    margin-right: .375rem;
}

/*
 * Fundalul de sub sertar si ce se stinge cat timp e deschis.
 *
 * Semnul de pe <body> il pune `public/js/meniu-telefon.js`: Bootstrap nu marcheaza
 * nicaieri un `collapse` deschis, iar din CSS nu se poate afla altfel.
 */
.meniu-telefon-fundal {
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 20, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

body.meniu-telefon-deschis .meniu-telefon-fundal {
    opacity: 1;
    visibility: visible;
}

/* Pagina de dedesubt sta pe loc cat timp meniul e deschis. */
body.meniu-telefon-deschis {
    overflow: hidden;
}

/* Banda de cookie-uri (99998) si butonul „sus de tot" (99999) sunt `position: fixed`
   direct in <body>, deci mai sus in teanc decat bara de meniu si tot ce e in ea:
   cardul de cookie-uri se desena PESTE sertar, exact peste butoanele de jos. Cat
   timp meniul e deschis, se dau la o parte - se intorc singure la inchidere. */
body.meniu-telefon-deschis .cookies-banda,
body.meniu-telefon-deschis .cookies-buton,
body.meniu-telefon-deschis .back-to-top-btn {
    display: none !important;
}

/*
 * Butoanele „app-showcase" (Descarca din antet, Vezi toate functiile de pe acasa).
 *
 * Tema le da un efect la trecerea cu mouse-ul: patratul alb din dreapta, cel cu
 * iconita, creste la toata latimea butonului. Efectul e bun, dar pana acum inghitea
 * butonul: valul e pozitionat absolut, deci se desena PESTE eticheta, iar butonul
 * ramanea un dreptunghi alb gol cu o sageata in mijloc.
 *
 * Doua corecturi, ca sa ramana efectul fara sa se piarda cuvintele:
 *   - eticheta e ridicata deasupra valului si trece pe culoarea marcii, ca sa se
 *     citeasca pe alb (span-ul propriu vine din blade, `.eticheta-buton`);
 *   - sageata ramane in dreapta. Centrata in valul care creste, ea ar pleca spre
 *     mijlocul butonului, adica exact peste cuvinte.
 */
.app-showcase-btn .eticheta-buton {
    position: relative;
    z-index: 1;
    /* Regula temei (`.app-showcase-btn span`) da ORICE span dinauntru alb pe alb:
       e scrisa pentru patratul cu iconita, singurul span pe care il avea butonul. */
    background: none !important;
    color: inherit !important;
    transition: color .35s ease;
}

/*
 * Ce culoare ia scrisul pe hover depinde de valul care vine peste el, iar cele doua
 * butoane sunt oglinda unul altuia (masurat in pagina, nu ghicit):
 *
 *   pe acasa   butonul e navy, valul e alb  -> scrisul trece pe navy;
 *   in antet   butonul e alb,  valul e navy -> scrisul trece pe alb.
 *
 * Al doilea se recunoaste dupa `bg-body`, clasa cu care e scris in
 * `layouts/_butoane-antet.blade.php`. Nu dupa `nav`: acelasi buton apare si pe
 * paginile de cont, unde nu exista bara de antet.
 */
.app-showcase-btn:hover .eticheta-buton {
    color: var(--dx-primary) !important;
}

.app-showcase-btn.bg-body:hover .eticheta-buton {
    color: #fff !important;
}

.app-showcase-btn:hover span:not(.eticheta-buton) {
    justify-content: flex-end !important;
    /* Cat sa ramana sageata acolo unde statea: jumatate din diferenta dintre patratul
       de 3rem si iconita de 21px. Fara asta „aluneca" spre mijloc la fiecare hover. */
    padding-right: .85rem;
}

/* ------------------------------------------------------------------ Comparatia
 *
 * Tabelul de pe paginile „Alternativa la X" se ASAZA in cartonase sub 768px, in loc
 * sa se plimbe lateral.
 *
 * Trei coloane de text n-au cum sa incapa pe un telefon. Lasat in `table-responsive`
 * gol, se taia fix la mijlocul coloanei noastre si nu spunea nicaieri ca mai e ceva
 * la dreapta - se citea a stricat, nu a glisant. (Pe panou aceeasi problema e rezolvata
 * altfel, cu masca de estompare de la `.file-glisante`: acolo sunt pastile scurte, care
 * chiar se trag cu degetul. Aici sunt fraze, si o fraza taiata nu se ghiceste.)
 *
 * Markup-ul ramane un tabel adevarat: se schimba doar afisarea, deci un cititor de
 * ecran il parcurge la fel in ambele forme.
 */
@media (max-width: 767.98px) {
    .tabel-comparatie {
        /* Nu mai are ce sa se plimbe; altfel `table-responsive` tot lasa o bara. */
        overflow-x: visible;
    }

    .tabel-comparatie table,
    .tabel-comparatie tbody,
    .tabel-comparatie tr,
    .tabel-comparatie th,
    .tabel-comparatie td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Capul de tabel se ascunde: numele coloanelor se muta la fiecare celula, mai jos. */
    .tabel-comparatie thead {
        display: none;
    }

    .tabel-comparatie tbody tr {
        border: 1px solid var(--dx-border-color);
        /* `-xl` e ce sta in spatele lui `rounded-4`, adica rotunjirea celorlalte
           cartonase de pe pagina. Tema publica NU are `--dx-border-radius-lg`. */
        border-radius: var(--dx-border-radius-xl);
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .tabel-comparatie tbody tr:last-child {
        margin-bottom: 0;
    }

    /* Bootstrap pune liniile despartitoare pe celule; in cartonas nu mai au ce desparti. */
    .tabel-comparatie tbody th,
    .tabel-comparatie tbody td {
        border: 0;
        padding: 0;
        background: none;
    }

    /* Intrebarea e titlul cartonasului. */
    .tabel-comparatie tbody th[scope="row"] {
        margin-bottom: .75rem;
    }

    .tabel-comparatie tbody td + td {
        margin-top: .625rem;
    }

    .tabel-comparatie tbody td::before {
        content: attr(data-eticheta);
        display: block;
        font-size: .8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: .125rem;
    }

    /* Coloana noastra pastreaza accentul pe care il are si pe monitor. */
    .tabel-comparatie tbody td:first-of-type::before {
        color: var(--dx-primary);
    }
}

/* ---------------------------------------------------------------- Pasii mutarii
 *
 * Cele patru cartonase de la „Se muta fara sa ramai descoperit" isi aliniaza randurile
 * intre ele: numarul cu numarul, titlul cu titlul, textul cu textul.
 *
 * Fara asta, un titlu care se scrie pe doua randuri isi impinge propriul text mai jos,
 * iar cele patru paragrafe incep la inaltimi diferite - se vede imediat, arata a
 * neingrijit. Textele sunt scrise sa incapa pe un rand (sub 24 de caractere titlul),
 * dar intre 992 si 1200px coloana e ingusta si tot se mai rupe cate unul. Iar peste
 * un an, cine schimba un text n-are de unde sa stie de bugetul asta.
 *
 * `subgrid` face fix asta si nimic altceva. E pazit cu `@supports`: unde nu exista,
 * pagina arata ca inainte, adica exact ca acum pe orice browser mai vechi.
 */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 576px) {
        .pasi-mutare {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* `row` vine cu margini negative si `g-4` pune padding pe coloane. In grid
               distanta o da `gap`, deci celelalte doua se anuleaza ca sa nu se adune. */
            margin: 0;
            gap: 1.5rem;
        }

        .pasi-mutare > [class*="col-"] {
            width: auto;
            max-width: none;
            flex: none;
            padding: 0;
            display: grid;
            grid-row: span 3;      /* numar, titlu, text */
            grid-template-rows: subgrid;
        }
    }

    @media (min-width: 992px) {
        .pasi-mutare {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

/* ------------------------------------------------- Blocuri de comenzi (ajutor)
 *
 * Paginile de ajutor sunt pline de comenzi de terminal. Tema n-are nimic pentru
 * `pre`/`code` - vin cu stilul implicit al browserului, adica Times New Roman pe
 * unele si fara niciun chenar - deci stilul e scris aici.
 *
 * Fundal inchis, ca un terminal: nu de dragul temei, ci fiindca asa se vede dintr-o
 * privire unde se termina explicatia si incepe ce trebuie tastat.
 *
 * BUTONUL NU PLUTESTE PESTE TEXT. Prima incercare l-a pus `position: absolute` in
 * coltul din dreapta, cu `padding-right` pe `pre` ca sa-i faca loc. Nu merge: cand
 * comanda e mai lata decat cutia, `padding-right` adauga spatiu la CAPATUL zonei
 * care se deruleaza, nu la marginea din dreapta a ferestrei - deci butonul ajunge
 * exact peste text. Se vedea pe telefon la `sudo nano /etc/gdm3/custom.conf`.
 * Aici sunt frati intr-un flex: comanda se deruleaza in cutia ei, butonul sta
 * alaturi, si nu se pot suprapune niciodata.
 */
.bloc-cod {
    display: flex;
    align-items: flex-start;
    /* Distanta dintre comanda si buton. Pusa din `gap`, nu din `padding-right` pe
       `pre`: acolo ar sta la capatul zonei care se deruleaza, deci ar disparea exact
       la comenzile lungi, unde e nevoie de ea. */
    gap: 0.75rem;
    background: #1c2130;
    border-radius: var(--dx-border-radius-xl);
    padding-right: 0.5rem;
    overflow: hidden;
}

.bloc-cod pre {
    order: 1;
    /* `min-width: 0` e obligatoriu: fara el, un element de flex nu se micsoreaza sub
       latimea continutului, deci cutia ar creste si ar impinge pagina lateral. */
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 1rem 0 1rem 1.25rem;
    color: #e6e9f0;
    font-size: 0.9375rem;
    line-height: 1.7;
    /* Comenzile nu se rup pe mai multe randuri: o comanda taiata la mijloc si
       copiata cu un `
` in ea nu mai e aceeasi comanda. Se deruleaza lateral. */
    overflow-x: auto;
    white-space: pre;
}

.bloc-cod code {
    color: inherit;
    background: none;
    padding: 0;
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}

.bloc-cod-copiaza {
    order: 2;
    flex: 0 0 auto;
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: #b8c0d4;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.5rem;
}

.bloc-cod-copiaza:hover,
.bloc-cod-copiaza:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.bloc-cod-copiaza.copiat {
    color: #7ee2a8;
    border-color: rgba(126, 226, 168, 0.4);
}

/* Pe telefon ramane doar iconita: cuvantul „Copiaza" ar lua o treime din latimea
   ecranului, si ar lua-o de la comanda, care e lucrul pentru care ai venit. */
@media (max-width: 575.98px) {
    .bloc-cod-copiaza-text {
        display: none;
    }
}

/* Cutia in care se repeta mesajul din aplicatie, cuvant cu cuvant. Omul vine aici
   cu mesajul in fata ochilor, pe alt ecran; primul lucru pe care trebuie sa-l
   gaseasca e exact propozitia pe care tocmai a citit-o. */
.mesaj-din-aplicatie {
    border-left: 3px solid var(--dx-warning);
    background: var(--dx-primary-bg-subtle);
    border-radius: 0 var(--dx-border-radius-xl) var(--dx-border-radius-xl) 0;
}

/* Ancorele din client duc in mijlocul paginii. Fara asta titlul sectiunii ajunge
   lipit de marginea de sus a ferestrei, si nu se vede ca e un titlu. */
.ajutor-sectiune {
    scroll-margin-top: 6rem;
}