/* ==============================================================
   LEGAL PAGES
   Terms / Privacy / Cookies
   Uses the existing site design system
================================================================ */


/* ==============================================================
   LEGAL HERO
================================================================ */

.legal-hero {
    position: relative;

    min-height: 55vh;

    display: flex;

    align-items: center;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(169, 105, 59, .16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #160d09 0%,
            #21110b 55%,
            #100805 100%
        );
}


.legal-hero::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -250px;
    right: -180px;

    border-radius: 50%;

    background:
        rgba(201, 154, 99, .07);

    pointer-events: none;
}


.legal-hero .container {
    position: relative;

    z-index: 1;
}


.legal-hero .eyebrow {
    display: block;

    margin-bottom: 25px;

    color: #c99a63;
}


.legal-hero h1 {
    max-width: 850px;

    color: #f8ead8;

    font-size:
        clamp(
            55px,
            8vw,
            105px
        );

    line-height: .92;

    letter-spacing: -2px;
}


.legal-hero p {
    max-width: 650px;

    margin-top: 30px;

    color: #d6c2ae;

    font-size: 16px;

    line-height: 1.8;
}


/* ==============================================================
   LEGAL CONTENT
================================================================ */

.legal-content {
    padding: 110px 0 130px;

    background: #efe0cc;

    color: #28140c;
}


.legal-document {
    width: min(820px, 100%);

    margin: 0 auto;
}


/* ==============================================================
   LAST UPDATED
================================================================ */

.legal-updated {
    margin-bottom: 60px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(40, 20, 12, .15);

    color: #8a6750;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* ==============================================================
   HEADINGS
================================================================ */

.legal-document h2 {
    margin-top: 55px;
    margin-bottom: 18px;

    color: #28140c;

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -1px;
}


.legal-document h2:first-of-type {
    margin-top: 0;
}


/* ==============================================================
   PARAGRAPHS
================================================================ */

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

    margin-bottom: 20px;

    color: #684b39;

    font-size: 16px;

    line-height: 1.9;
}


.legal-document p:last-of-type {
    margin-bottom: 0;
}


/* ==============================================================
   LISTS
================================================================ */

.legal-document ul,
.legal-document ol {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin:
        20px 0
        25px;

    padding-left: 22px;
}


.legal-document li {
    padding-left: 5px;

    color: #684b39;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    line-height: 1.8;
}


.legal-document li::marker {
    color: #a9693b;
}


/* ==============================================================
   LINKS
================================================================ */

.legal-document a:not(.button) {
    color: #9a6035;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(154, 96, 53, .35);

    text-underline-offset: 3px;

    transition:
        color .2s ease,
        text-decoration-color .2s ease;
}


.legal-document a:not(.button):hover {
    color: #68401f;

    text-decoration-color:
        #68401f;
}


/* ==============================================================
   CONTACT / CTA BUTTON
================================================================ */

.legal-document .button {
    margin-top: 35px;

    color: #28140c;

    border-color: #a9693b;

    background: transparent;
}


.legal-document .button:hover {
    color: #f4dfc6;

    background: #a9693b;

    border-color: #a9693b;
}


/* ==============================================================
   OPTIONAL INFORMATION BOX
================================================================ */

.legal-note {
    position: relative;

    margin:
        35px 0
        45px;

    padding: 25px 28px;

    background:
        rgba(169, 105, 59, .07);

    border-left:
        3px solid
        #a9693b;
}


.legal-note p {
    margin: 0;

    font-size: 14px;
}


/* ==============================================================
   LEGAL PAGE DIVIDERS
================================================================ */

.legal-document h2 + p {
    margin-top: 0;
}


/* ==============================================================
   ACCESSIBILITY
================================================================ */

.legal-document a:focus-visible {
    outline:
        2px solid
        #a9693b;

    outline-offset: 4px;

    border-radius: 2px;
}


/* ==============================================================
   TABLET
================================================================ */

@media (max-width: 800px) {

    .legal-hero {
        min-height: 50vh;

        padding: 95px 0;
    }


    .legal-hero h1 {
        font-size:
            clamp(
                50px,
                12vw,
                80px
            );
    }


    .legal-content {
        padding:
            85px 0
            100px;
    }


    .legal-updated {
        margin-bottom: 45px;
    }


    .legal-document h2 {
        margin-top: 45px;
    }


    .legal-document p {
        font-size: 15px;

        line-height: 1.85;
    }

}


/* ==============================================================
   SMALL PHONES
================================================================ */

@media (max-width: 480px) {

    .legal-hero {
        min-height: 48vh;

        padding: 75px 0;
    }


    .legal-hero .eyebrow {
        margin-bottom: 18px;

        letter-spacing: 4px;
    }


    .legal-hero h1 {
        font-size:
            clamp(
                45px,
                14vw,
                68px
            );

        letter-spacing: -1.5px;
    }


    .legal-hero p {
        margin-top: 24px;

        font-size: 15px;
    }


    .legal-content {
        padding:
            70px 0
            80px;
    }


    .legal-updated {
        margin-bottom: 38px;

        font-size: 10px;
    }


    .legal-document h2 {
        margin-top: 40px;

        font-size: 30px;
    }


    .legal-document p {
        font-size: 14px;

        line-height: 1.8;
    }


    .legal-document ul,
    .legal-document ol {
        padding-left: 20px;
    }


    .legal-document li {
        font-size: 14px;
    }


    .legal-note {
        padding:
            20px;
    }


    .legal-document .button {
        width: 100%;

        text-align: center;
    }

}


/* ==============================================================
   VERY SMALL PHONES
================================================================ */

@media (max-width: 360px) {

    .legal-hero h1 {
        font-size: 44px;
    }


    .legal-content {
        padding:
            60px 0
            70px;
    }


    .legal-document h2 {
        font-size: 27px;
    }

}


/* ==============================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion: reduce) {

    .legal-document a {
        transition: none;
    }

}