/*
 * Paginile legale: confidentialitate.html, cookies.html, termeni.html.
 *
 * Se incarca dupa acasa.css, deci culorile, fonturile, antetul si subsolul vin
 * de acolo. Aici e doar asezarea unui text lung de citit: o coloana ingusta,
 * cuprinsul lipit in stanga pe ecrane late, tabelul de cookie-uri care se
 * deruleaza orizontal pe telefon in loc sa iasa din pagina.
 *
 * Tot ce e specific acestor pagini are prefixul `lg-`.
 */

.lg-pagina {
    position: relative;
    z-index: 1;
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: 72px 24px 96px;
}

/* ==================== capul paginii ==================== */

.lg-cap {
    max-width: 820px;
    margin-bottom: 64px;
}

.lg-file {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.lg-file a {
    padding: 8px 16px;
    border: 1px solid var(--cc-chenar);
    border-radius: 999px;
    font-size: 14px;
    color: var(--cc-text-2);
    transition: border-color .3s, color .3s;
}

.lg-file a:hover {
    color: var(--cc-text);
    border-color: rgba(255, 255, 255, .25);
}

.lg-file a[aria-current="page"] {
    color: var(--cc-text);
    border-color: var(--cc-chenar-hover);
    background: rgba(124, 233, 224, .06);
}

.lg-titlu {
    font-family: var(--cc-font-titlu);
    font-size: clamp(38px, 6.4vw, 76px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.lg-actualizat {
    margin: 20px 0 0;
    font-family: var(--cc-font-mono);
    font-size: 13px;
    color: var(--cc-text-slab);
}

.lg-intro {
    max-width: 62ch;
    margin: 28px 0 0;
    font-size: 19px;
    line-height: 1.65;
    color: var(--cc-text-2);
}

/* ==================== cuprins + text ==================== */

.lg-corp {
    display: grid;
    grid-template-columns: 230px minmax(0, 720px);
    gap: 72px;
    align-items: start;
}

.lg-cuprins {
    position: sticky;
    top: calc(var(--nav-height) + 32px);
}

.lg-cuprins-titlu {
    margin: 0 0 14px;
    font-family: var(--cc-font-mono);
    font-size: 12px;
    color: var(--cc-text-slab);
}

.lg-cuprins ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: lg;
    border-left: 1px solid var(--cc-chenar);
}

.lg-cuprins li {
    counter-increment: lg;
}

.lg-cuprins a {
    display: flex;
    gap: 10px;
    padding: 7px 0 7px 16px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cc-text-2);
    transition: color .3s, border-color .3s;
}

.lg-cuprins a::before {
    content: counter(lg);
    flex: none;
    width: 1.2em;
    font-family: var(--cc-font-mono);
    color: var(--cc-text-slab);
}

.lg-cuprins a:hover {
    color: var(--cc-text);
    border-left-color: var(--cc-turcoaz);
}

.lg-sectiune {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.lg-sectiune:first-child {
    padding-top: 0;
    border-top: 0;
}

.lg-text h2 {
    margin-bottom: 18px;
    font-family: var(--cc-font-titlu);
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.lg-text h3 {
    margin: 28px 0 8px;
    font-family: var(--cc-font-titlu);
    font-size: 18px;
    font-weight: 600;
    color: var(--cc-text);
}

.lg-text p,
.lg-text li {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--cc-text-2);
}

.lg-text p {
    margin: 0 0 14px;
}

.lg-text ul {
    margin: 0 0 14px;
    padding-left: 1.2em;
}

.lg-text li {
    margin-bottom: 6px;
}

.lg-text li::marker {
    color: var(--cc-turcoaz);
}

.lg-text strong {
    color: var(--cc-text);
    font-weight: 500;
}

.lg-text a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(124, 233, 224, .4);
}

.lg-text code {
    font-family: var(--cc-font-mono);
    font-size: .88em;
    color: var(--cc-text);
}

/* Datele firmei: eticheta deasupra valorii pe telefon, alaturi pe desktop. */
.lg-date {
    list-style: none;
    padding: 0 !important;
    margin: 0 0 18px;
    border: 1px solid var(--cc-chenar);
    border-radius: 14px;
    background: var(--cc-suprafata);
}

.lg-date li {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 4px 16px;
    margin: 0;
    padding: 12px 18px;
    color: var(--cc-text);
}

.lg-date li + li {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.lg-date span {
    font-size: 14px;
    color: var(--cc-text-slab);
}

/* Tabelul de cookie-uri. Pe ecrane inguste se deruleaza in cadrul lui. */
.lg-tabel {
    overflow-x: auto;
    margin: 0 0 18px;
    border: 1px solid var(--cc-chenar);
    border-radius: 14px;
}

.lg-tabel table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.lg-tabel th,
.lg-tabel td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    font-size: 14.5px;
    line-height: 1.55;
}

.lg-tabel th {
    font-weight: 500;
    color: var(--cc-text);
    background: var(--cc-suprafata);
}

.lg-tabel td {
    color: var(--cc-text-2);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.lg-tabel td:first-child {
    white-space: nowrap;
}

/* ==================== ecrane mici ==================== */

@media (max-width: 900px) {
    .lg-pagina {
        padding: 48px 20px 72px;
    }

    .lg-cap {
        margin-bottom: 40px;
    }

    /* minmax(0, ...): altfel tabelul de cookie-uri (min 600px) lateste coloana
       si tot textul iese din ecran in loc sa se deruleze doar tabelul. */
    .lg-corp {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .lg-cuprins {
        position: static;
        padding: 18px 20px;
        border: 1px solid var(--cc-chenar);
        border-radius: 14px;
        background: var(--cc-suprafata);
    }

    .lg-cuprins ol {
        border-left: 0;
    }

    .lg-cuprins a {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 620px) {
    .lg-file {
        margin-bottom: 28px;
    }

    .lg-intro {
        font-size: 17px;
    }

    .lg-date li {
        grid-template-columns: 1fr;
    }

    .lg-text p,
    .lg-text li {
        font-size: 16px;
    }
}

@media print {
    .navbar,
    .cc-stele,
    .cc-vigneta,
    .cc-progres,
    .lg-file,
    .lg-cuprins,
    .cc-subsol {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    .lg-titlu,
    .lg-text h2,
    .lg-text h3,
    .lg-text strong,
    .lg-date li {
        color: #000;
    }

    .lg-intro,
    .lg-text p,
    .lg-text li,
    .lg-date span {
        color: #222;
    }

    .lg-corp {
        display: block;
    }
}