/*
 * ============================================================
 *  TERMS.CSS — Terms and Conditions Page Styles
 *  Contains: Typography, spacing, and legal content layout
 *            specifically optimized for readability.
 * ============================================================
 */

/* -------------------------------------------------------
 * 1. PAGE LAYOUT
 * ------------------------------------------------------- */
.terms-page {
    background: transparent;
}

/* Enable vertical scrolling within the container */
.terms-page .container {
    overflow-y: auto;
    height: 100vh;
    padding-top: 110px;             /* Space for fixed navbar */
}

/* -------------------------------------------------------
 * 2. CONTENT STYLING
 * ------------------------------------------------------- */
.terms-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 40px 120px 40px;
    color: #141412;
}

/* Main Heading — uses Monument Extended for impact */
.terms-title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;                      /* Restored standard gap */
    margin-bottom: 0.5rem;
}

.terms-content h1 {
    font-family: "Monument Extended", sans-serif !important;
    font-size: clamp(2.5rem, 6vw, 4rem);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 0;                /* Handled by wrapper margin */
    letter-spacing: -0.02em;
}

.heading-sprite {
    width: clamp(120px, 15vw, 220px); /* Even larger size */
    height: auto;
    display: block;
    flex-shrink: 0;
}

/* Metadata style */
.last-updated {
    font-family: "Monument Extended", sans-serif !important;
    font-size: 0.8rem;
    opacity: 0.6;
    margin-bottom: 4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section Headings — also Monument Extended */
.terms-content h2 {
    font-family: "Monument Extended", sans-serif !important;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* Body Text */
.terms-content p, 
.terms-content li {
    font-family: "Gabarito", sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    opacity: 0.9;
}

/* Lists formatting */
.terms-content ul {
    margin-left: 1.5rem;
    margin-bottom: 2rem;
    list-style-type: square;
}

/* Team questions / Internal notes (Highlighted as requested) */
.note {
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
    padding: 10px 15px;
    border-left: 3px solid #ff4444;
    font-size: 0.95rem !important;
    margin: 20px 0;
    font-style: italic;
}

/* Final closing statement */
.closing {
    margin-top: 5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(20, 20, 18, 0.1);
    font-weight: 700;
    font-style: italic;
}

/* -------------------------------------------------------
 * 3. RESPONSIVE ADJUSTMENTS
 * ------------------------------------------------------- */
@media (max-width: 768px) {
    .terms-content {
        padding: 40px 25px 80px 25px;
    }

    .terms-content h1 {
        font-size: 2.5rem;
    }

    .terms-title-wrapper {
        gap: 15px;
    }

    .heading-sprite {
        width: clamp(90px, 12vw, 120px); /* Larger tablet size */
    }

    .terms-content h2 {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .terms-content h1 {
        font-size: 1.8rem;
    }
    
    .terms-title-wrapper {
        gap: 10px;
    }

    .heading-sprite {
        width: clamp(70px, 20vw, 100px); /* Larger mobile size */
    }

    .terms-content p, 
    .terms-content li {
        font-size: 1.05rem;
    }
}