/* ============================================================
   ASEAeSTUDY - COMMON RESPONSIVE CSS
   File: css/responsive.css
   ============================================================ */

/* ------------------------------------------------------------
   GLOBAL
   ------------------------------------------------------------ */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 1024px) {

    /* Prevent oversized containers */
    .max-w-7xl {
        max-width: 100%;
    }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    /* ========================================================
       GLOBAL
       ======================================================== */

    body {
        width: 100%;
        overflow-x: hidden;
    }

    img,
    video {
        max-width: 100%;
    }

    /* ========================================================
       NAVIGATION
       ======================================================== */

    nav {
        height: 68px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px !important;
    }

    /* Logo */
    nav img {
        height: 62px !important;
        width: auto !important;
        max-width: 180px;
        object-fit: contain;
    }

    /* Hide desktop menu */
    nav > div:nth-child(2) {
        display: none !important;
    }

    /* Right navigation area */
    nav > div:last-child {
        margin-left: auto;
    }

    /* Hide welcome / referral on mobile */
    nav .text-right {
        display: none !important;
    }

    /* Remove desktop divider */
    nav > div:last-child > div {
        border-left: none !important;
        padding-left: 0 !important;
    }

    /* Navigation buttons */
    nav a[href="login.php"],
    nav a[href="register.php"],
    nav a[href="dashboard.php"] {
        padding: 7px 10px !important;
        font-size: 10px !important;
    }


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

    header {
        min-height: 520px !important;
        height: 75vh !important;
    }

    header h4 {
        font-size: 23px !important;
        line-height: 1.25 !important;
    }

    header p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Hero content */
    header > div:last-of-type {
        left: 5% !important;
        right: 5% !important;
        bottom: 30px !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* Hero buttons */
    header .flex.flex-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    header .flex.flex-wrap > a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }


    /* ========================================================
       MAIN SECTIONS
       ======================================================== */

    section {
        width: 100%;
    }

    .max-w-7xl {
        width: 100%;
        max-width: 100%;
    }


    /* ========================================================
       COURSE CATALOG
       ======================================================== */

    #explore-catalog {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    #explore-catalog h2 {
        font-size: 21px !important;
        line-height: 1.3;
    }

    #explore-catalog > div {
        width: 100%;
    }


    /* ========================================================
       SEARCH BAR
       ======================================================== */

    #explore-catalog form {
        width: 100%;
        border-radius: 12px !important;
    }

    #explore-catalog form input {
        min-width: 0 !important;
        width: 100%;
        font-size: 12px !important;
    }

    #explore-catalog form button {
        padding-left: 15px !important;
        padding-right: 15px !important;
        white-space: nowrap;
    }


    /* ========================================================
       LEVEL FILTERS
       ======================================================== */

    #explore-catalog .flex-wrap {
        gap: 6px !important;
    }

    #explore-catalog .flex-wrap a {
        font-size: 10px !important;
        padding: 6px 11px !important;
    }


    /* ========================================================
       SIDEBAR / CATEGORIES
       ======================================================== */

    aside {
        width: 100% !important;
    }

    aside > div {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }


    /* ========================================================
       MAIN COURSE AREA
       ======================================================== */

    main {
        width: 100% !important;
    }

    /* One course per row on phone */
    main .grid {
        grid-template-columns: 1fr !important;
    }

    /* Course card */
    .course-card {
        width: 100%;
    }


    /* ========================================================
       COURSE IMAGE
       ======================================================== */

    .course-card img {
        width: 100%;
        height: auto;
        min-height: 180px;
        object-fit: cover;
    }


    /* ========================================================
       COURSE CONTENT
       ======================================================== */

    .course-card h4 {
        font-size: 13px !important;
    }

    .course-card p {
        font-size: 11px !important;
    }


    /* ========================================================
       COURSE BUTTON
       ======================================================== */

    .course-card a {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* ========================================================
       WHY CHOOSE ASEAESTUDY
       ======================================================== */

    section.bg-white .grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    section.bg-white {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }


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

    footer {
        padding-top: 35px !important;
    }

    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    footer .flex {
        flex-wrap: wrap;
    }


    /* ========================================================
       TEXT
       ======================================================== */

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }


    /* ========================================================
       TABLES
       ======================================================== */

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }


    /* ========================================================
       FORMS
       ======================================================== */

    input,
    select,
    textarea {
        max-width: 100%;
    }

    button {
        max-width: 100%;
    }


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

    .px-6 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .px-10 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

}


/* ------------------------------------------------------------
   SMALL PHONES
   ------------------------------------------------------------ */

@media (max-width: 480px) {

    nav {
        height: 64px !important;
    }

    nav img {
        height: 56px !important;
        max-width: 155px;
    }

    nav a[href="login.php"],
    nav a[href="register.php"],
    nav a[href="dashboard.php"] {
        padding: 6px 8px !important;
        font-size: 9px !important;
    }

    header {
        min-height: 500px !important;
    }

    header h4 {
        font-size: 21px !important;
    }

    header p {
        font-size: 12px !important;
    }

    #explore-catalog {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}