/* ==========================================
   LITTLE EXPLORERS LEARNING HUB
   Copyright Page Styles
========================================== */

.page-header{

    position:relative;

    overflow:hidden;

    padding:6rem 0;

    text-align:center;

    background:linear-gradient(
    135deg,
    #4f46e5 0%,
    #3b82f6 45%,
    #14b8a6 100%
);

    color:#ffffff;

}

.page-header::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.08;

    background-image:

        radial-gradient(circle at 20% 20%, #ffffff 2px, transparent 2px),

        radial-gradient(circle at 80% 30%, #ffffff 2px, transparent 2px),

        radial-gradient(circle at 40% 70%, #ffffff 2px, transparent 2px);

    background-size:140px 140px;

}

.page-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.15);

}

.page-header .container{

    position:relative;

    z-index:2;

}

.page-header h1{

    color:#ffffff;

    font-size:clamp(2.75rem,5vw,4.5rem);

    margin-bottom:1rem;

    text-shadow:0 3px 10px rgba(0,0,0,.25);

}

.page-header p{

    color:rgba(255,255,255,.96);

    font-size:1.2rem;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

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

.legal-page{
    
    padding:5rem 0 6rem;

    background:linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );

}

.legal-page .container{

    max-width:1000px;

}

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

.legal-card{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e7edf7;

    border-radius:28px;

    padding:3rem;

    margin-bottom:2.5rem;

    box-shadow:

        0 12px 35px rgba(0,0,0,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.legal-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.legal-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 24px 60px rgba(0,0,0,.12);

}

.legal-card h2{

    color:#243b63;

    font-size:1.9rem;

    margin-bottom:1.5rem;

    display:flex;

    align-items:center;

    gap:1rem;

}

.legal-card p{

    color:#4b5563;

    font-size:1.08rem;

    line-height:1.9;

}


.legal-card p:last-child{

    margin-bottom:0;

}

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

.legal-card ul{

    display:grid;

    gap:1rem;

    margin-top:1.5rem;

}

.legal-card li{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    color:var(--gray-700);

    line-height:1.8;

}

.legal-card li::before{

    content:"✓";

    width:34px;

    height:34px;

    border-radius:50%;

    background:#eef8ff;

    color:#2563eb;

    font-weight:800;

}

/* ==========================================
   STRONG TEXT
========================================== */

.legal-card strong{

    color:var(--heading);

}

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

.legal-card a{

    color:var(--primary);

    font-weight:700;

}

.legal-card a:hover{

    color:var(--primary-dark);

}

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

.legal-footer{

    margin-top:5rem;

    padding:3rem 0;

    background:#183153;

    border-top:4px solid var(--primary);

}

.legal-footer p{

    color:#d9e8fa;

    letter-spacing:.4px;

}

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

@media (max-width:992px){

    .page-header{

        padding:5.5rem 0;

    }

    .legal-card{

        padding:2.5rem;

    }

}

@media (max-width:768px){

    .page-header{

        padding:4.5rem 0;

    }

    .legal-page{

        padding:4rem 0;

    }

    .legal-card{

        padding:2rem;

        
        border-radius:24px;

    }

    .legal-card h2{

        font-size:1.5rem;

    }

}

@media (max-width:576px){

    .page-header h1{

        font-size:2.3rem;

    }

    .page-header p{

        font-size:1rem;

    }

    .legal-card{

        padding:1.75rem;

    }

    .legal-card li{

        gap:.75rem;

        font-size:.95rem;

    }

    .legal-card li::before{

        width:26px;

        height:26px;

        font-size:.8rem;

    }

}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin-bottom:3rem;

    color:var(--gray-500);

    font-size:.95rem;

}

.breadcrumb a{

    color:var(--gray-600);

    font-weight:600;

}

.breadcrumb a:hover{

    color:var(--primary);

}

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:.7s ease;

}

.visible{

    opacity:1;

    transform:translateY(0);

}

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

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

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    transform:translateY(-4px);

}