/* Mobile Fixes for ESIC Website */
/* Author: Claude Code Assistant */
/* Date: 2026-02-04 */

/* ========================================
   1. GLOBAL MOBILE FIXES
   ======================================== */

/* Ensure proper text sizing on mobile */
@media (max-width: 767px) {
    body {
        font-size: 15px;
        line-height: 1.6;
    }

    h1, .h1 {
        font-size: 1.8rem;
    }

    h2, .h2 {
        font-size: 1.5rem;
    }

    h3, .h3 {
        font-size: 1.3rem;
    }

    h4, .h4 {
        font-size: 1.15rem;
    }

    h5, .h5 {
        font-size: 1.05rem;
    }

    /* Reduce section padding on mobile */
    .section-70 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-md-114 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Better spacing for shell container */
    .shell {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ========================================
   2. NAVIGATION FIXES
   ======================================== */

@media (max-width: 991px) {
    /* Mobile menu improvements */
    .rd-navbar-nav-wrap {
        max-height: 80vh;
        overflow-y: auto;
    }

    .rd-navbar-nav > li > a {
        padding: 12px 20px;
        font-size: 15px;
    }

    .rd-navbar-dropdown li > a {
        padding: 10px 25px;
        font-size: 14px;
        line-height: 1.4;
    }

    /* Fix long course names in mobile menu */
    .rd-navbar-dropdown.rd-navbar-open-right {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575px) {
    /* Smaller mobile screens */
    .rd-navbar-panel .panel-title {
        font-size: 14px !important;
    }

    .rd-navbar-brand img {
        max-width: 120px !important;
        height: auto !important;
    }
}

/* ========================================
   3. HERO/BANNER SECTION FIXES
   ======================================== */

@media (max-width: 767px) {
    .breadcrumb-modern h2 {
        font-size: 1.6rem;
        padding: 0 10px;
    }

    .breadcrumb-modern .list-inline li {
        font-size: 13px;
    }

    .parallax-content {
        padding: 20px 0 30px;
    }
}

/* ========================================
   4. TABLE FIXES (Fees, Outcomes pages)
   ======================================== */

/* Make tables scrollable on mobile */
@media (max-width: 767px) {
    .table-container,
    .fees-table-container,
    table:not(.table-responsive table) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Minimum width for table cells on mobile */
    .table th,
    .table td {
        min-width: 100px;
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Fee tables specific */
    .table-bordered td:first-child,
    .table-bordered th:first-child {
        min-width: 150px;
    }
}

/* ========================================
   5. FORM FIXES (Contacts, Apply pages)
   ======================================== */

@media (max-width: 767px) {
    .form-group {
        margin-bottom: 15px;
    }

    .form-control {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 10px 12px;
    }

    .form-label,
    .form-label-outside {
        font-size: 14px;
        margin-bottom: 5px;
    }

    /* Stacked form fields on mobile */
    .range-12 > .cell-sm-6 {
        margin-bottom: 15px;
    }

    /* Button full width on mobile */
    .btn-lg {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }

    /* PDPA consent text */
    .text-small {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* ========================================
   6. CARD/BOX FIXES
   ======================================== */

@media (max-width: 767px) {
    .box-outline {
        margin-bottom: 20px;
    }

    .box-outline-header h4 {
        font-size: 1.1rem;
    }

    /* Course cards */
    .post-boxed {
        margin-bottom: 20px;
    }

    .post-boxed-title {
        font-size: 1rem;
        line-height: 1.4;
    }
}

/* ========================================
   7. LIST FIXES
   ======================================== */

@media (max-width: 767px) {
    .list-marked li,
    .list-ordered li {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 10px;
        padding-left: 5px;
    }

    /* Policy page lists */
    .list-marked-primary li::before {
        font-size: 10px;
    }
}

/* ========================================
   8. SIDEBAR/ASIDE FIXES
   ======================================== */

@media (max-width: 767px) {
    .aside {
        margin-top: 30px;
    }

    .aside-item-2 {
        margin-bottom: 25px;
    }

    /* Emergency contacts box on student-life */
    .cell-md-4 > div[style*="background: #ff6b6b"] {
        margin-top: 30px;
    }
}

/* ========================================
   9. FOOTER FIXES
   ======================================== */

@media (max-width: 767px) {
    .page-footer .section-60 {
        padding: 30px 15px;
    }

    .page-footer .range > div,
    .page-footer .range-30 > div {
        margin-bottom: 30px;
        text-align: center;
    }

    .page-footer h6 {
        font-size: 17px;
        margin-bottom: 15px;
    }

    .page-footer .text-subline {
        margin: 0 auto 20px auto !important;
        max-width: 60px;
    }

    .page-footer .contact-info li {
        margin-bottom: 12px;
    }

    .page-footer .contact-info .unit {
        justify-content: center;
    }

    /* EduTrust section */
    .page-footer .cell-md-2,
    .page-footer .cell-lg-2 {
        margin-bottom: 25px;
    }

    /* Newsletter form - complete mobile fix */
    .page-footer .form-subscribe .form-group {
        width: 100%;
    }

    .page-footer .input-group,
    .page-footer .input-group-sm {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .page-footer .input-group .form-control,
    .page-footer .input-group-sm .form-control {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 12px !important;
        border-radius: 6px !important;
        padding: 12px 15px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        height: auto !important;
    }

    /* Keep form label as placeholder inside the input */
    .page-footer .form-group {
        position: relative;
    }

    .page-footer .input-group,
    .page-footer .input-group-sm {
        position: relative !important;
    }

    .page-footer .input-group .form-label,
    .page-footer .form-label {
        position: absolute !important;
        top: 12px !important;
        left: 15px !important;
        font-size: 14px !important;
        opacity: 0.6;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 1;
        margin: 0 !important;
    }

    /* Hide label when input-group has focus */
    .page-footer .input-group:focus-within .form-label,
    .page-footer .form-group:focus-within .form-label {
        opacity: 0;
    }

    .page-footer .input-group-btn,
    .page-footer .input-group-sm .input-group-btn {
        width: 100% !important;
        display: block !important;
    }

    .page-footer .input-group-btn .btn,
    .page-footer .input-group-sm .input-group-btn .btn {
        width: 100% !important;
        border-radius: 6px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
    }

    /* Fix newsletter text alignment */
    .page-footer .text-lg-left {
        text-align: center !important;
    }

    .page-footer .text-lg-left p {
        text-align: center !important;
    }

    /* EduTrust logo */
    .page-footer img[alt="EduTrust Certified"] {
        max-width: 120px !important;
    }
}

/* ========================================
   10. DOWNLOADS PAGE FIXES
   ======================================== */

@media (max-width: 767px) {
    .download-link {
        display: block;
        padding: 10px 0;
        font-size: 14px;
    }

    .download-link .icon {
        margin-right: 8px;
    }
}

/* ========================================
   11. POLICY PAGE FIXES
   ======================================== */

@media (max-width: 767px) {
    /* Policy sections */
    [style*="border-left: 4px"] {
        padding-left: 15px !important;
        margin-left: 0 !important;
    }

    /* Policy text */
    .offset-top-50 {
        margin-top: 30px !important;
    }

    .offset-top-30 {
        margin-top: 20px !important;
    }
}

/* ========================================
   12. COURSE PAGES FIXES
   ======================================== */

@media (max-width: 767px) {
    /* Course info boxes */
    .range-50 > div {
        margin-bottom: 20px;
    }

    /* Course highlights */
    .icon-lg {
        font-size: 2rem;
    }

    /* Intake dates table */
    .table-custom th,
    .table-custom td {
        font-size: 13px;
        padding: 8px;
    }
}

/* Course Grid Page - Comparison Table */
@media (max-width: 991px) {
    /* Course cards container */
    .course-cards-container {
        gap: 20px;
    }

    .course-cards-container .post-course {
        margin-bottom: 20px;
    }

    .course-cards-container .post-news-body {
        padding: 20px !important;
    }

    .course-cards-container h5 {
        font-size: 1rem;
        line-height: 1.4;
    }

    .course-cards-container p {
        font-size: 13px !important;
    }

    .course-cards-container ul {
        font-size: 13px !important;
    }

    /* Comparison table - make it card-style on mobile */
    .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767px) {
    /* Comparison table improvements */
    .table-responsive {
        overflow: visible !important;
        border-radius: 8px;
    }

    .table-responsive table {
        min-width: 900px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 12px 10px !important;
        font-size: 12px !important;
    }

    .table-responsive td[style*="width: 40%"] {
        min-width: 280px;
    }

    /* Add scroll hint - show above the table */
    .table-responsive::before {
        content: '👆 左右滑动查看完整表格';
        display: block;
        text-align: center;
        padding: 12px 15px;
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        color: #1565c0;
        font-size: 13px;
        font-weight: 500;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Course cards on mobile */
    .course-cards-container .col-xs-12 {
        padding: 0 10px;
        margin-bottom: 15px;
    }

    .course-cards-container .post-news-body {
        padding: 15px !important;
    }

    .course-cards-container h5 {
        font-size: 0.95rem;
    }

    .course-cards-container .icon {
        font-size: 36px !important;
    }

    /* Postgraduate section */
    .postgraduate-section p {
        font-size: 14px;
    }
}

/* ========================================
   13. LANGUAGE TOGGLE FIXES
   ======================================== */

@media (max-width: 991px) {
    /* Move language toggle to bottom right on mobile to avoid navbar overlap */
    .global-language-toggle-fixed {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 9999 !important;
    }

    .global-language-toggle {
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        border-radius: 25px !important;
        padding: 8px 16px !important;
        min-width: 80px !important;
        width: auto !important;
        height: 40px !important;
    }

    .global-language-toggle .language-icon {
        font-size: 16px;
    }

    .global-language-toggle .language-text {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    /* Smaller screens - slightly smaller button */
    .global-language-toggle-fixed {
        bottom: 15px !important;
        right: 15px !important;
    }

    .global-language-toggle {
        padding: 6px 14px !important;
        height: 36px !important;
        min-width: 70px !important;
    }

    .global-language-toggle .language-text {
        font-size: 13px;
    }
}

/* ========================================
   14. ABOUT US PAGE FIXES
   ======================================== */

@media (max-width: 767px) {
    /* Classroom images grid - make single column on mobile */
    .ei-card div[style*="grid-template-columns: repeat(3"] {
        display: block !important;
    }

    .ei-card div[style*="grid-template-columns: repeat(3"] > div {
        margin-bottom: 15px;
    }

    .ei-card div[style*="grid-template-columns: repeat(3"] img {
        height: 180px !important;
    }

    /* Vision/Mission/Values cards */
    .grid-3 {
        grid-template-columns: 1fr !important;
    }

    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    .ei-card {
        padding: 20px !important;
    }

    .ei-tag {
        font-size: 16px !important;
    }

    /* Organization chart */
    img[alt*="Organization Chart"],
    img[alt*="organization-chart"] {
        max-width: 100% !important;
    }

    /* About us content spacing */
    .ei-card .offset-top-30 h6 {
        margin-top: 20px !important;
    }
}

/* ========================================
   15. TOUCH IMPROVEMENTS
   ======================================== */

@media (max-width: 991px) {
    /* Larger touch targets */
    a, button, .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .no-touch .btn:hover {
        transform: none;
    }
}

/* ========================================
   15. PRINT STYLES (bonus)
   ======================================== */

@media print {
    .rd-navbar,
    .page-footer,
    .language-toggle,
    #language-toggle {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }
}