/* playonsol/static/css/legal.css */
/* ==========================================================
   PLAYONSOL LEGAL
   Mobile First
========================================================== */

:root {

    --legal-bg:
        #020617;

    --legal-surface:
        rgba(15,23,42,.92);

    --legal-card:
        rgba(30,41,59,.95);

    --legal-border:
        rgba(255,255,255,.08);

    --legal-primary:
        #38bdf8;

    --legal-text:
        #f8fafc;

    --legal-muted:
        #94a3b8;

    --legal-shadow:
        0 18px 40px rgba(0,0,0,.35);

    --legal-radius:
        22px;

    --legal-transition:
        .25s ease;
}

/* ==========================================================
   BODY
========================================================== */

body{

    margin:0;

    min-height:100vh;

    background:
        radial-gradient(
            circle at top,
            #1e293b,
            #020617 70%
        );

    color:
        var(--legal-text);

    font-family:
        "Poppins",
        sans-serif;
}

/* ==========================================================
   LINK
========================================================== */

a{

    color:
        var(--legal-primary);

    text-decoration:none;

    transition:
        var(--legal-transition);
}

a:hover{

    color:#7dd3fc;

    text-decoration:none;
}

/* ==========================================================
   HEADER
========================================================== */

.legal-header{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(12px);

    background:
        rgba(2,6,23,.85);

    border-bottom:
        1px solid var(--legal-border);

    padding:
        18px 0;
}

.brand{

    font-size:1.4rem;

    font-weight:700;

    color:white;
}

.brand:hover{

    color:white;
}

.legal-header nav{

    display:flex;

    gap:22px;

    flex-wrap:wrap;
}

.legal-header nav a{

    color:
        var(--legal-muted);

    font-weight:500;
}

.legal-header nav a:hover{

    color:white;
}

/* ==========================================================
   MAIN
========================================================== */

.legal-container{

    padding:
        60px 0;
}

/* ==========================================================
   CARD
========================================================== */

.legal-card{

    background:
        var(--legal-card);

    border:
        1px solid var(--legal-border);

    border-radius:
        var(--legal-radius);

    padding:
        40px;

    box-shadow:
        var(--legal-shadow);

    backdrop-filter:
        blur(14px);
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.legal-card h1{

    font-size:
        clamp(2rem,4vw,2.8rem);

    font-weight:700;

    margin-bottom:14px;
}

.legal-card h2{

    margin-top:40px;

    margin-bottom:18px;

    font-size:1.5rem;

    font-weight:600;
}

.legal-card h3{

    margin-top:30px;

    margin-bottom:12px;

    font-size:1.2rem;

    font-weight:600;
}

.legal-card p{

    color:
        var(--legal-muted);

    line-height:1.9;

    margin-bottom:18px;
}

.legal-card ul{

    color:
        var(--legal-muted);

    padding-left:24px;

    margin-bottom:24px;
}

.legal-card li{

    margin-bottom:10px;

    line-height:1.8;
}

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

.legal-updated{

    color:
        var(--legal-muted);

    font-size:.95rem;

    margin-bottom:20px;
}

/* ==========================================================
   HR
========================================================== */

hr{

    border-color:
        var(--legal-border);

    opacity:1;

    margin:
        30px 0;
}

/* ==========================================================
   SECTION
========================================================== */

.legal-section{

    margin-bottom:42px;
}

/* ==========================================================
   TABLE
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin:24px 0;
}

table th{

    background:
        rgba(255,255,255,.05);

    padding:14px;

    border:
        1px solid var(--legal-border);
}

table td{

    padding:14px;

    border:
        1px solid var(--legal-border);

    color:
        var(--legal-muted);
}

/* ==========================================================
   BLOCKQUOTE
========================================================== */

blockquote{

    border-left:
        4px solid var(--legal-primary);

    padding:
        12px 20px;

    margin:
        24px 0;

    background:
        rgba(255,255,255,.04);

    color:
        var(--legal-muted);

    border-radius:8px;
}

/* ==========================================================
   CODE
========================================================== */

code{

    background:
        rgba(255,255,255,.08);

    padding:
        2px 6px;

    border-radius:6px;

    color:#7dd3fc;
}

/* ==========================================================
   FOOTER
========================================================== */

.legal-footer{

    margin-top:80px;

    padding:
        50px 0;

    background:
        rgba(15,23,42,.85);

    border-top:
        1px solid var(--legal-border);
}

.legal-footer h5,
.legal-footer h6{

    color:white;

    margin-bottom:18px;
}

.legal-footer p{

    color:
        var(--legal-muted);
}

.legal-footer ul{

    margin:0;

    padding:0;
}

.legal-footer li{

    margin-bottom:10px;
}

.legal-footer a{

    color:
        var(--legal-muted);
}

.legal-footer a:hover{

    color:white;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#0f172a;
}

::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{

    background:#475569;
}

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

@media (max-width:768px){

    .legal-header nav{

        margin-top:15px;

        gap:14px;
    }

    .legal-header .d-flex{

        flex-direction:column;

        align-items:flex-start !important;
    }

    .legal-card{

        padding:24px;
    }

    .legal-card h1{

        font-size:2rem;
    }

    .legal-container{

        padding:35px 0;
    }

}

/* ==========================================================
   ACTIVE NAVIGATION
========================================================== */

.legal-header nav a.active{

    color:#ffffff;

    font-weight:600;
}

/* ==========================================================
   HEADING LINK
========================================================== */

.heading-anchor{

    opacity:0;

    font-size:.8rem;

    margin-left:8px;

    transition:.25s;
}

h2:hover .heading-anchor,
h3:hover .heading-anchor{

    opacity:1;
}

/* ==========================================================
   SCROLL TOP
========================================================== */

#scrollTopButton{

    position:fixed;

    right:24px;

    bottom:24px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:999;

    background:#38bdf8;

    color:#fff;

    box-shadow:0 8px 24px rgba(0,0,0,.3);
}

#scrollTopButton.show{

    opacity:1;

    visibility:visible;
}

/* ==========================================================
   REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(20px);

    transition:

        opacity .45s ease,

        transform .45s ease;
}

.reveal.visible{

    opacity:1;

    transform:none;
}