/* =========================================================
   VIDA AI — LEGAL PAGES
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.legal-page,
.legal-page .site,
.legal-page main {
    color: var(--vida-light);
    background: var(--vida-blue);
}


/* =========================================================
   01. LEGAL HERO
   ========================================================= */

.legal-hero {
    width: 100%;

    color: var(--vida-light);
    background: var(--vida-blue);
}

.legal-hero__inner {
    width: min(100%, 1320px);

    margin-inline: auto;

    padding:
        calc(var(--nav-height) + clamp(110px, 12vw, 190px))
        var(--page-gutter)
        clamp(100px, 11vw, 170px);
}



.legal-hero__title {
    max-width: 1060px;
    margin: 0;

    color: var(--vida-light);
}


/* =========================================================
   02. CONTENT
   ========================================================= */

.legal-content {
    width: 100%;

    color: var(--vida-light);
    background: var(--vida-blue);
}

.legal-content__inner {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.28fr)
        minmax(0, 0.72fr);

    align-items: start;

    column-gap: clamp(70px, 10vw, 170px);

    width: min(100%, 1320px);

    margin-inline: auto;

    padding:
        0
        var(--page-gutter)
        clamp(160px, 18vw, 280px);
}


/* =========================================================
   03. LEGAL NAVIGATION
   ========================================================= */

.legal-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + 48px);

    padding-top: 10px;
}

.legal-sidebar nav {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.legal-sidebar a {
    width: fit-content;

    color: rgba(245, 242, 234, 0.48);

    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.5;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    transition:
        color 250ms ease,
        opacity 250ms ease;
}

.legal-sidebar a:hover,
.legal-sidebar a:focus-visible,
.legal-sidebar a.is-active {
    color: var(--vida-light);
}

.legal-sidebar a.is-active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
}


/* =========================================================
   04. DOCUMENT TYPOGRAPHY
   ========================================================= */

.legal-document {
    width: 100%;
    max-width: 780px;
}

.legal-section {
    padding:
        0
        0
        clamp(64px, 7vw, 96px);

    margin:
        0
        0
        clamp(64px, 7vw, 96px);

    border-bottom: 1px solid rgba(245, 242, 234, 0.16);
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-section h2 {
    max-width: 690px;

    margin:
        0
        0
        clamp(34px, 4vw, 48px);

    color: var(--vida-light);

    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: -0.02em;
}

.legal-section h3 {
    margin:
        clamp(34px, 4vw, 48px)
        0
        18px;

    color: var(--vida-light);

    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.legal-section p,
.legal-section address,
.legal-section li {
    color: rgba(245, 242, 234, 0.74);

    font-family: "Manrope", sans-serif;
    font-size: clamp(0.96rem, 1.15vw, 1.08rem);
    font-weight: 400;
    line-height: 1.9;

    letter-spacing: 0.03em;
}

.legal-section p {
    margin:
        0
        0
        24px;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section address {
    margin:
        0
        0
        28px;

    font-style: normal;
}

.legal-section strong {
    color: var(--vida-light);
    font-weight: 500;
}

.legal-section a {
    color: var(--vida-light);

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(245, 242, 234, 0.42);
    text-underline-offset: 5px;

    transition:
        opacity 250ms ease,
        text-decoration-color 250ms ease;
}

.legal-section a:hover,
.legal-section a:focus-visible {
    opacity: 0.68;

    text-decoration-color: var(--vida-light);
}

.legal-section ul,
.legal-section ol {
    margin:
        26px
        0;
    padding-left: 22px;
}

.legal-section li + li {
    margin-top: 10px;
}

.legal-document__date {
    margin-top: 50px;

    color: rgba(245, 242, 234, 0.44);

    font-size: 0.68rem;
    line-height: 1.5;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* =========================================================
   05. HEADER / FOOTER CONTINUITY
   ========================================================= */

.legal-page .site-header {
    color: var(--vida-light);
}

.legal-page .site-footer {
    color: var(--vida-light);
    background: var(--vida-blue);
}


/* =========================================================
   06. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .legal-content__inner {
        grid-template-columns: 1fr;

        row-gap: 70px;
    }

    .legal-sidebar {
        position: static;
    }

    .legal-sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;

        gap:
            14px
            28px;
    }

    .legal-document {
        max-width: 760px;
    }
}


/* =========================================================
   07. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .legal-hero__inner {
        padding-bottom: 82px;
    }

    .legal-content__inner {
        row-gap: 56px;

        padding-bottom: 140px;
    }

    .legal-sidebar nav {
        flex-direction: column;

        gap: 14px;
    }

    .legal-section {
        padding-bottom: 54px;
        margin-bottom: 54px;
    }

    .legal-section h2 {
        margin-bottom: 28px;
    }

    .legal-section p,
    .legal-section address,
    .legal-section li {
        line-height: 1.78;
    }
}