/* =====================================================
   GLOBALINK MENTORS + ONLINE CLASSES INTEGRATION
   Add this at the END of online-classes.css
===================================================== */

/* Map Online Classes variables to Globalink brand colours */
:root {
    --primary: var(--green, #0E6B37);
    --primary-dark: var(--green-dark, #084F27);
    --primary-light: var(--green-tint, #E4EFE2);
    --accent: var(--gold, #F0AC3A);

    --text: var(--ink, #1C1712);
    --muted: #66756b;
    --white: #ffffff;
    --light-bg: var(--paper, #FBF6EC);
    --border: #dfe9e1;
    --shadow: 0 10px 30px rgba(20, 70, 43, 0.08);
}

/* Keep Online Classes content within its own layout */
body {
    overflow-x: hidden;
    overflow-wrap: break-word;
}

.container {
    width: min(1140px, 92%);
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 0;
}

/* Use Globalink typography on the Online Classes page */
body {
    font-family: var(--font-body, "Inter", Arial, sans-serif);
}

.online-classes-page h1,
.online-classes-page h2,
.online-classes-page h3,
.online-classes-page h4 {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-weight: 600;
    line-height: 1.2;
}

/* Keep the Online Classes heading alignment intentional */
.online-classes-page .section-heading h2 {
    text-align: center;
    font-weight: 600;
}

.online-classes-page .section-heading p {
    text-align: center;
}

/* Prevent the main site's hero overlay from affecting
   the Online Classes hero */
.online-classes-page .hero::before {
    display: none;
}

/* Preserve the Online Classes hero colours */
.online-classes-page .hero {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(240, 172, 58, 0.13),
            transparent 30%
        ),
        linear-gradient(135deg, #f2f9f3, #ffffff);
    color: var(--text);
}

/* Keep Online Classes hero text readable */
.online-classes-page .hero-text h1 {
    color: var(--primary-dark);
}

.online-classes-page .hero-text h1 span {
    color: var(--primary);
}

.online-classes-page .hero-text > p {
    color: var(--muted);
}

/* Online Classes buttons should not inherit pill buttons */
.online-classes-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 23px;
    border: 2px solid transparent;
    border-radius: 7px;
    font-family: var(--font-body, Arial, sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: normal;
    text-align: center;
    transition: 0.25s ease;
}

.online-classes-page .btn-primary {
    color: var(--white);
    background: var(--primary);
}

.online-classes-page .btn-primary:hover {
    color: var(--white);
    background: var(--primary-dark);
}

.online-classes-page .btn-outline {
    color: var(--primary);
    background: transparent;
    border-color: var(--primary);
}

.online-classes-page .btn-outline:hover {
    color: var(--white);
    background: var(--primary);
}

/* Cards */
.online-classes-page .level-card,
.online-classes-page .subject-card,
.online-classes-page .step-card,
.online-classes-page .timetable-wrapper,
.online-classes-page .form-card,
.online-classes-page .fees-card {
    min-width: 0;
    background: var(--white);
}

/* Online Classes section backgrounds */
.online-classes-page .audience-section,
.online-classes-page .timetable-section,
.online-classes-page .registration-section {
    background: var(--white);
}

.online-classes-page .subjects-section,
.online-classes-page .how-section,
.online-classes-page .fees-section,
.online-classes-page .faq-section {
    background: var(--light-bg);
}

/* Keep embedded registration forms responsive */
.online-classes-page .registration-content > *,
.online-classes-page .mentorship-content > *,
.online-classes-page .hero-content > * {
    min-width: 0;
}

.online-classes-page .form-card iframe {
    width: 100%;
    max-width: 100%;
}

/* Prevent tables from breaking the page width */
.online-classes-page .table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

/* Mobile adjustments */
@media (max-width: 700px) {
    .online-classes-page .container {
        width: 92%;
    }

    .online-classes-page .hero-content,
    .online-classes-page .level-grid,
    .online-classes-page .subject-grid,
    .online-classes-page .steps-grid,
    .online-classes-page .mentorship-content,
    .online-classes-page .registration-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .online-classes-page .hero-visual {
        min-width: 0;
    }

    .online-classes-page .volunteer-content {
        align-items: flex-start;
        flex-direction: column;
    }
}