/*=====COPY ONTO ALL NEW PAGES START MOBILE CSS=====*/

@media (max-width: 768px) {

    /* PAGE */
    .page {
        margin: 0;
        padding-top: 140px;
        border-radius: 0;
    }

    /*hide brand menu*/
    .brand-menu {
        display: none;
    }

    /* BRAND BAR */
    .brand-bar {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        gap: 10px;
        text-align: center;
    }

    .brand-container {
        flex-direction: column;
        text-align: center;
    }

    .brand-logo {
        height: 80px;
        width: 70px;
    }

    .brand-text h1 {
        font-size: 18px;
    }

    .brand-tagline {
        font-size: 12px;
    }

    .brand-motto {
        font-size: 20px;
    }

    /*display hamburger*/
    .hamburger {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 10001;
    }

    /* MOBILE MENU PANEL */
    .top-links {
        display: none;
        position: fixed;
        top: 0;
        left: -260px; /* hide off screen */
        width: 260px;
        height: 100vh;
        background: #fef9f0;
        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
        z-index: 10000;
        transition: left 0.3s ease;
        /*display: block;  IMPORTANT: always block */
        padding-top: 80px; /* space below header */
    }

        /* WHEN ACTIVE → SLIDE IN */
        .top-links.active {
            display: block;
            right: 0;
        }

        /* Hide menu by default
            .top-links {
                display: none;
                width: 100%;


            }*/


        /* TOP MENU (MOBILE STYLE) */
        .top-links .menu {
            flex-direction: column;
            width: 100%; /*watch this*/
            background: #fef9f0;
            border-radius: 8px;
            overflow: hidden;
        }

    .menu > li > a {
        padding: 14px;
        font-size: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: #fff;
    }

    /* MOBILE DROPDOWN FIX */
    .dropdown {
        position: static;
        box-shadow: none;
        border: none;
        display: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

        .dropdown.active {
            display: block;
        }


        /* DROPDOWN MOBILE
            .dropdown {
                position: static;
                box-shadow: none;
                border: none;
                display: none;
                padding: 0;
            }*/

        .dropdown li a {
            padding: 10px 20px;
            background: #f4f4f4;
        }

    /* SEARCH BOX */
    .search-box {
        width: 100%;
        margin-top: 10px;
    }

        .search-box input {
            width: 100%;
        }

    /* HERO */
    .hero {
        height: auto;
        min-height: 70vh;
    }

    .hero-overlay {
        padding: 20px;
        justify-content: center;
        text-align: center;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-cta {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* STATS */
    .stats {
        flex-direction: column;
        gap: 30px;
    }

    /* QUICK LINKS */
    .quick-links {
        flex-direction: column;
        gap: 40px;
        padding: 60px 20px;
    }

    .link-item {
        width: 100%;
    }

    /* ACADEMICS */
    .academics {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .academic-card {
        max-width: 100%;
    }

    /* FOOTER */
    .footer {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .footer-content {
        text-align: center;
    }
}

/*====END MOBILE CSS=====*/