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

.legal-hero{
    max-width:1000px;
    margin:0 auto;
    padding:90px 20px 55px;
    text-align:center;
}

.legal-hero h1{
    margin-bottom:18px;
    color:#FFFFFF;
    font-size:50px;
    line-height:1.15;
}

.legal-hero p{
    max-width:760px;
    margin:0 auto 22px;
    color:#BDBDBD;
    font-size:18px;
    line-height:1.85;
}

.last-update{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:8px 16px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:999px;
    color:#D4AF37;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
}


/*=========================================
        LEGAL NAVIGATION
=========================================*/

.legal-nav{
    width:min(900px,90%);
    margin:0 auto 60px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    background:#121212;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
}

.legal-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:9px 15px;
    border:1px solid transparent;
    border-radius:10px;
    color:#BDBDBD;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.legal-nav a:hover,
.legal-nav a:focus-visible{
    color:#D4AF37;
    background:rgba(212,175,55,.06);
    border-color:rgba(212,175,55,.18);
}

.legal-nav a.active{
    color:#111111;
    background:#D4AF37;
    border-color:#D4AF37;
}

.legal-nav a:focus-visible{
    outline:2px solid rgba(212,175,55,.85);
    outline-offset:3px;
}


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

.legal-content{
    width:min(900px,90%);
    margin:0 auto;
    padding-bottom:90px;
}


/*=========================================
          LEGAL SECTIONS
=========================================*/

.legal-section{
    margin-bottom:55px;
}

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

.legal-section:not(:last-child){
    padding-bottom:38px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.legal-section h2{
    margin-bottom:22px;
    color:#D4AF37;
    font-size:29px;
    line-height:1.3;
    font-weight:650;
}

.legal-section h3{
    margin:28px 0 14px;
    color:#FFFFFF;
    font-size:20px;
    line-height:1.4;
    font-weight:650;
}

.legal-section p{
    margin:0 0 18px;
    color:#CFCFCF;
    font-size:17px;
    line-height:2;
}

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

.legal-section strong{
    color:#FFFFFF;
    font-weight:650;
}

.legal-section a{
    color:#D4AF37;
    text-decoration:none;
    border-bottom:1px solid rgba(212,175,55,.40);
    transition:border-color .25s ease, color .25s ease;
}

.legal-section a:hover,
.legal-section a:focus-visible{
    color:#E4C55E;
    border-bottom-color:#E4C55E;
}

.legal-section a:focus-visible{
    outline:2px solid rgba(212,175,55,.75);
    outline-offset:4px;
    border-radius:2px;
}


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

.legal-section ul,
.legal-section ol{
    margin:4px 0 20px;
    padding-left:24px;
}

.legal-section li{
    margin-bottom:10px;
    color:#CFCFCF;
    font-size:17px;
    line-height:1.85;
}

.legal-section li::marker{
    color:#D4AF37;
}


/*=========================================
        LEGAL NOTICE BOX
=========================================*/

.legal-notice{
    margin:28px 0;
    padding:22px 24px;
    background:rgba(212,175,55,.055);
    border:1px solid rgba(212,175,55,.18);
    border-left:3px solid #D4AF37;
    border-radius:12px;
}

.legal-notice p{
    margin-bottom:12px;
}

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


/*=========================================
        CONTACT DETAILS
=========================================*/

.legal-contact{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:2px;
    color:#FFFFFF;
    font-weight:600;
}

.legal-contact a{
    color:#D4AF37;
}


/*=========================================
            RESPONSIVE
=========================================*/

@media(max-width:900px){

    .legal-hero{
        padding:75px 24px 48px;
    }

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

    .legal-nav{
        margin-bottom:50px;
    }

    .legal-section h2{
        font-size:26px;
    }

}

@media(max-width:600px){

    .legal-hero{
        padding:60px 20px 42px;
    }

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

    .legal-hero p{
        font-size:16px;
        line-height:1.75;
    }

    .last-update{
        font-size:12px;
    }

    .legal-nav{
        width:calc(100% - 36px);
        margin-bottom:42px;
        padding:10px;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .legal-nav a{
        width:100%;
        padding:9px 10px;
        font-size:13px;
    }

    .legal-content{
        width:calc(100% - 36px);
        padding-bottom:70px;
    }

    .legal-section{
        margin-bottom:42px;
    }

    .legal-section:not(:last-child){
        padding-bottom:30px;
    }

    .legal-section h2{
        margin-bottom:18px;
        font-size:23px;
    }

    .legal-section h3{
        font-size:18px;
    }

    .legal-section p,
    .legal-section li{
        font-size:16px;
        line-height:1.85;
    }

    .legal-notice{
        padding:18px 18px;
    }

}

@media(max-width:380px){

    .legal-nav{
        grid-template-columns:1fr;
    }

}

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

    .legal-nav a,
    .legal-section a{
        transition:none;
    }

}