.skip-link {
    position: fixed;
    z-index: 20000;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    transform: translateY(-150%);
    border-radius: 6px;
    background: #FFD700;
    color: #0B192C;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Shared brand wordmark */
.logo {
    display: inline-flex;
    width: 220px;
    height: 42px;
    flex: 0 0 220px;
    background: url('../images/brand-logo.svg') center / contain no-repeat;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    white-space: nowrap;
}

.logo span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* WhatsApp Button */
.whatsapp-toggle {
    position: fixed;
    z-index: 40000;
    bottom: 24px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 56px;
    padding: 12px 18px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: #25D366;
    box-shadow: 0 10px 28px rgba(7, 94, 45, 0.35);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.whatsapp-toggle:hover {
    transform: translateY(-3px) scale(1.03);
    background: #1fbd5a;
    box-shadow: 0 14px 34px rgba(7, 94, 45, 0.42);
}

.whatsapp-toggle:focus-visible {
    outline-color: #0B192C;
}

.whatsapp-toggle-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    fill: currentColor;
}

/* Global Footer */
footer {
    background-color: #070e17;
    color: #8b949e;
    padding: 60px 20px 30px 20px;
    font-size: 14px;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto 40px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer-col h3 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #8b949e;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col ul li a:hover,
.footer-col ul li a:focus-visible {
    color: #ffd700;
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid #1e3e62;
    padding-top: 20px;
    font-size: 13px;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: #8b949e;
    text-decoration: none;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
    color: #ffd700;
}

/* ==========================================================================
   Global header / navigation refresh — loads on every page (base.css),
   so it overrides the older per-page nav styling consistently sitewide.
   ========================================================================== */

header {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: saturate(140%);
}

nav ul li a {
    position: relative;
    letter-spacing: 0.01em;
}

nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: #FFD700;
    transition: width 0.25s ease;
}

nav ul li a:hover::after,
nav ul li:hover > a::after {
    width: 100%;
}

.mega-menu {
    border-radius: 16px !important;
    box-shadow: 0 24px 50px rgba(11, 25, 44, 0.28) !important;
    border-top: none !important;
}

.mega-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #FFD700, #1E3E62);
}

.mega-btn {
    border-radius: 999px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mega-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 215, 0, 0.35);
}

.menu-toggle,
.email-header {
    border-radius: 999px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 215, 0, 0.32);
}

.top-bar {
    background: linear-gradient(90deg, #0B192C, #1E3E62, #0B192C) !important;
}

/* Hide the hamburger drawer button on desktop — it duplicated the
   full nav and could show alongside it at in-between window/zoom
   widths. It now only appears once the desktop nav itself hides. */
.menu-toggle {
    display: none !important;
}

/* Mega-menu: fluid width so it never overflows or clips at
   in-between viewport widths / browser zoom levels. */
.mega-menu {
    width: min(920px, calc(100vw - 48px)) !important;
    max-width: 920px;
    left: 50%;
    right: auto;
}

@media (max-width: 1200px) {
    nav ul {
        gap: 16px !important;
    }

    nav ul li a {
        font-size: 13px !important;
    }

    .email-header {
        display: none !important;
    }

    .mega-menu {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 900px) {
    .menu-toggle {
        display: flex !important;
    }
}

/* Focus Accessibility */
:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Mobile WhatsApp */
@media (max-width: 600px) {
    .whatsapp-toggle {
        bottom: 16px;
        left: 14px;
        width: 56px;
        min-height: 56px;
        padding: 0;
    }

    .whatsapp-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    footer {
        padding: 45px 18px 25px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 30px;
    }

    .footer-col h3 {
        margin-bottom: 12px;
    }

    .footer-bottom {
        font-size: 12px;
    }
}

/* ==========================================================================
   Mega menu: always centred on the screen (never cut off at the left/right edge)
   Before, each menu was centred on its own nav item, so the first ones
   ("Online Class", "Exam Help") slid off the left side on laptop screens.
   Now every menu is centred on the header, i.e. on the middle of the page.
   ========================================================================== */
header > nav > ul > li {
    position: static;
}

/* Invisible bridge so the menu doesn't close while the mouse moves down to it. */
.mega-menu::after {
    content: '';
    position: absolute;
    top: -26px;
    right: 0;
    left: 0;
    height: 26px;
}