/* =====================================================
   Edum — Shared Site Stylesheet
   Header (navbar), Footer, base & common components
   Used by ALL pages in the www folder
   ===================================================== */

/* ---------- COLOR VARIABLES ---------- */

:root {
    --primary: #416499;
    --primary-dark: #304d78;
    --secondary: #6c8fc2;
    --dark: #172337;
    --text: #344054;
    --muted: #667085;
    --light: #f5f8fc;
    --border: #e5eaf1;
    --success: #198754;
}

/* ---------- BASE ---------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.6;
    margin: 0;
}

img {
    max-width: 100%;
}

/* =====================================================
   NAVBAR (HEADER)
===================================================== */

.navbar {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .05);
}

.navbar-brand {
    font-size: 25px;
    font-weight: 800;
    color: var(--primary) !important;
}

.navbar-brand i {
    margin-right: 8px;
}

.nav-link {
    color: #475467;
    font-weight: 500;
    margin: 0 4px;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-edum {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 11px 22px;
    font-weight: 600;
    transition: .25s ease;
}

.btn-edum:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-edum {
    border: 1px solid var(--primary);
    color: var(--primary);
    background: #fff;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 600;
}

.btn-outline-edum:hover {
    background: var(--primary);
    color: #fff;
}

.btn-white {
    background: #fff;
    color: var(--primary);
    border: 0;
    border-radius: 8px;
    padding: 12px 25px;
    font-weight: 700;
}

.btn-white:hover {
    background: #f0f3f7;
    color: var(--primary-dark);
}

/* Alias used by the transcript page */
.btn-brand {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 11px 24px;
    font-weight: 600;
    transition: .25s ease;
}

.btn-brand:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

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

section {
    scroll-margin-top: 80px;
}

.section-padding {
    padding: 95px 0;
}

.section {
    padding: 90px 0;
}

.section-light {
    background: var(--light);
}

.section-title {
    font-size: 40px;
    font-weight: 800;
    color: var(--dark);
}

.section-subtitle {
    max-width: 700px;
    margin: auto;
    color: var(--muted);
    font-size: 17px;
}

.section-badge,
.badge-edum {
    display: inline-block;
    background: #e8eef7;
    color: var(--primary);
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
}

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

.hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 90px;
    background:
        radial-gradient(circle at 85% 20%, rgba(65, 100, 153, .12), transparent 30%),
        linear-gradient(135deg, #f5f8fc 0%, #ffffff 70%);
}

.hero h1 {
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1.5px;
}

.hero h1 span {
    color: var(--primary);
}

.hero p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

/* =====================================================
   CTA
===================================================== */

.cta {
    padding: 90px 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}

.cta h2 {
    font-size: 42px;
    font-weight: 800;
}

.cta p {
    color: rgba(255, 255, 255, .82);
}

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

footer {
    background: #111c2d;
    color: #aeb7c5;
    padding: 50px 0 30px;
}

footer h5,
footer h6 {
    color: #fff;
}

footer a {
    color: #aeb7c5;
    text-decoration: none;
    transition: color .2s ease;
}

footer a:hover {
    color: #fff;
}

footer hr {
    opacity: .2;
}

/* =====================================================
   BACK TO TOP
===================================================== */

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 28px rgba(23, 35, 55, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
    z-index: 1050;
}

.back-to-top:hover {
    background: var(--primary-dark);
}

.back-to-top:focus-visible {
    outline: 3px solid rgba(65, 100, 153, .35);
    outline-offset: 3px;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .hero {
        padding: 75px 0 60px;
    }

    .hero h1 {
        letter-spacing: -.5px;
    }

    .section-padding {
        padding: 70px 0;
    }

    .section-title {
        font-size: 32px;
    }

    .cta h2 {
        font-size: 32px;
    }

}