/* ============================================================
   legal.css — cele trei documente juridice
   ----
   Politica de confidențialitate, politica de cookie-uri, termeni și condiții. Toate trei
   folosesc _Layout.cshtml, deci antetul și subsolul vin de la el; aici e numai coloana de
   text.

   MOBILE-FIRST, ca restul foilor: baza e pentru ecran mic, iar pragurile de la sfârșit
   adaugă pe măsură ce ecranul crește. Vezi nota din layout.css.

   Folosește variabilele din _tokens.css, care se încarcă înaintea acestei foi.
   ============================================================ */


/* ============================================================
   COLOANA DE TEXT

   Lățimea nu e „cât încape", ci cât se citește. Un rând de text lung obosește ochiul,
   care pierde începutul rândului următor — de aici plafonul, mult sub cei 1280px ai
   containerului obișnuit. 68 de caractere pe rând e măsura cu care se lucrează în
   tipografie, iar la mărimea literei de aici iese în jur de 70ch.
   ============================================================ */

.er-legal {
    max-width: 70ch;
    margin: 0 auto;
    padding: 28px 18px 56px;
    color: var(--er-text-main);

    /* Puțin mai mare decât textul obișnuit al sitului: paginile astea se citesc pe
       îndelete, nu se scanează. */
    font-size: 1rem;
    line-height: 1.7;
}


/* CAPUL PAGINII */
.er-legal-cap {
    padding-bottom: 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--er-border);
}

    .er-legal-cap h1 {
        margin: 0 0 10px;
        color: var(--er-text-heading);
        font-size: 1.75rem;
        line-height: 1.25;
    }

.er-legal-data {
    margin: 0 0 16px;
    color: var(--er-text-muted);
    font-size: 0.85rem;

    /* Cifrele pe mono, ca în restul platformei: o dată se citește mai ușor când cifrele
       au toate aceeași lățime. */
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.er-legal-intro {
    margin: 0;
    color: var(--er-text-soft);
    font-size: 1.05rem;
}


/* SECȚIUNILE */
.er-legal-sectiune {
    margin-top: 34px;
}

    .er-legal-sectiune h2 {
        margin: 0 0 12px;
        color: var(--er-text-heading);
        font-size: 1.2rem;
        line-height: 1.3;

        /* „balance" împarte un titlu de două rânduri în două jumătăți apropiate, în loc
           să lase un singur cuvânt pe rândul al doilea. Browserele care nu-l cunosc îl
           lasă la o parte și titlul arată ca înainte. */
        text-wrap: balance;
    }

    .er-legal-sectiune h3 {
        margin: 24px 0 8px;
        color: var(--er-text-main);
        font-size: 1rem;
    }

    .er-legal-sectiune p {
        margin: 0 0 12px;
    }

    .er-legal-sectiune ul {
        margin: 0 0 14px;
        padding-left: 22px;
    }

    .er-legal-sectiune li {
        margin-bottom: 8px;
    }

    .er-legal-sectiune a {
        color: var(--er-color-primary);
    }

/* SECȚIUNEA CARE TREBUIE CITITĂ, nu parcursă: datele copiilor, obligațiile școlii, ce nu
   folosim. Marcate cu o dungă și un fundal abia simțit — destul ca ochiul să se
   oprească, nu atât cât să pară o casetă de avertisment. */
.er-legal-sectiune-atentie {
    padding: 18px 18px 6px;
    border-left: 3px solid var(--er-color-primary);
    border-radius: 0 var(--er-radius-sm) var(--er-radius-sm) 0;
    background: var(--er-info-surface-soft);
}

/* Notă la piciorul unei secțiuni: mai mică și mai stinsă, dar nu ascunsă. */
.er-legal-nota {
    margin-top: 14px;
    color: var(--er-text-soft);
    font-size: 0.9rem;
}


/* ============================================================
   TABELUL DE COOKIE-URI

   SE DERULEAZĂ ÎN ÎNVELIȘUL LUI, nu lățește pagina. Trei coloane, dintre care una ține
   nume ca „EducatieReala.Autentificare", nu încap pe un telefon de 360px. Fără învelișul
   cu overflow, tot corpul paginii s-ar fi mișcat lateral — iar aceea se simte ca o pagină
   ruptă, nu ca un tabel lat.
   ============================================================ */

.er-legal-tabel-invelis {
    margin: 0 0 14px;
    overflow-x: auto;

    /* Chenarul stă pe înveliș, nu pe tabel: așa marginea rămâne pe loc cât tabelul
       alunecă pe dedesubt. */
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
}

.er-legal-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;

    /* Sub atât, coloana cu numele cookie-ului s-ar rupe litera cu litera. */
    min-width: 34rem;
}

    .er-legal-tabel th,
    .er-legal-tabel td {
        padding: 10px 12px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--er-border);
    }

    .er-legal-tabel tbody tr:last-child th,
    .er-legal-tabel tbody tr:last-child td {
        border-bottom: 0;
    }

    .er-legal-tabel thead th {
        background: var(--er-bg-muted-soft);
        color: var(--er-text-soft);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .er-legal-tabel code {
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-size: 0.84rem;

        /* Numele nu se rupe în mijloc: unul rupt nu se mai recunoaște în lista de
           cookie-uri a browserului, care e chiar locul unde omul îl caută. */
        white-space: nowrap;
        color: var(--er-text-heading);
    }


/* Lista de legături către instrucțiunile browserelor: rânduri, nu bulini. */
.er-legal-lista-browsere {
    list-style: none;
    padding-left: 0;
}


/* ============================================================
   TRECEREA LA CELELALTE DOUĂ DOCUMENTE

   La piciorul fiecărei pagini. Cele trei se citesc împreună — politica de cookie-uri
   trimite la cea de confidențialitate pentru serviciile externe, termenii le cuprind pe
   amândouă — iar cine a ajuns la sfârșitul unuia nu trebuie să se întoarcă în subsol
   pentru următorul.
   ============================================================ */

.er-legal-vecine {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--er-border);
}

    .er-legal-vecine a {
        color: var(--er-color-primary);
        font-weight: 600;
        font-size: 0.92rem;
        text-decoration: none;
    }

        .er-legal-vecine a:hover {
            text-decoration: underline;
        }


/* ============================================================
   PRAGURILE, MOBILE-FIRST
   ============================================================ */

@media (min-width: 600.02px) {

    .er-legal {
        padding: 40px 24px 72px;
        font-size: 1.02rem;
    }

    .er-legal-cap h1 {
        font-size: 2.1rem;
    }

    .er-legal-sectiune {
        margin-top: 42px;
    }

    .er-legal-sectiune h2 {
        font-size: 1.35rem;
    }

    .er-legal-sectiune-atentie {
        padding: 22px 24px 10px;
    }
}

@media (min-width: 992.02px) {

    .er-legal {
        padding: 56px 32px 88px;
    }
}