/* ==========================================================================
   NIA College – responsive.css
   Shared phone + tablet layer for EVERY page.

   Loaded LAST in <head> (after style.css and each page's own <style>), so it
   can fix small-screen problems without editing every page.

   Breakpoints follow Bootstrap:
     tablet  <= 991.98px   (the nav turns into the hamburger menu here)
     phone   <= 767.98px
     small   <= 575.98px

   The variables --top-header-h and --announcement-h are written by site.js
   (the live height of the utility bar and the announcement bar).
   ========================================================================== */

/* ---------- 1. Safe defaults for every screen ---------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Nothing may widen the page sideways (e.g. the scrolling announcement text).
   `clip` clips without turning <body> into a scroll container; `hidden` is the fallback. */
body { overflow-x: hidden; overflow-x: clip; }
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.team-avatar, .student-avatar { flex-shrink: 0; }

/* ---------- 2. Floating widgets: always sit ABOVE the announcement bar ---- */
.back-to-top {
    right: 20px;
    bottom: calc(var(--announcement-h, 0px) + 20px);
}
.whatsapp-float {
    right: 20px;
    bottom: calc(var(--announcement-h, 0px) + 86px);
}
/* The bar is fixed, so leave room for it at the very end of the page. */
body { padding-bottom: 0 !important; }
footer { padding-bottom: calc(var(--announcement-h, 0px) + 24px) !important; }

/* ---------- 3. Navbar sits directly under the utility bar ----------------- */
.navbar { top: var(--top-header-h, 60px); }
.navbar.scrolled { top: 0; }

/* ==========================================================================
   TABLET and below  (hamburger menu range)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- Opened hamburger menu: readable on any background, scrolls if tall */
    .navbar-collapse {
        background: var(--dark-blue);
        padding: 12px 20px;
        margin-top: 10px;
        border-radius: 8px;
        max-height: calc(100vh - var(--top-header-h, 0px) - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-nav .nav-link {
        margin-right: 0;
        padding: 12px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .navbar-nav .nav-link.active::after { bottom: 4px; }
    .navbar-nav .dropdown-menu {
        background: rgba(255, 255, 255, 0.08);
        border: 0;
        margin: 0 0 8px;
    }
    .navbar-nav .dropdown-item {
        color: #fff;
        padding: 10px 16px;
        white-space: normal;
    }
    /* Inside the hamburger menu a dropdown opens on tap only (hover is "sticky" on touch). */
    .nav-item.dropdown:hover .dropdown-menu { display: none; }
    .nav-item.dropdown .dropdown-menu.show { display: block; }

    /* --- Hero banners: grow with their content instead of cropping it ----- */
    .hero,
    section[class*="-hero"] {
        height: auto;
        min-height: 55vh;
        padding-top: 120px;     /* clear the navbar that overlays the banner */
        padding-bottom: 56px;
    }
    .hero { min-height: 100vh; min-height: 100svh; }
    .hero h1,
    section[class*="-hero"] h1 {
        font-size: clamp(2rem, 8vw, 3.25rem);
        line-height: 1.15;
        overflow-wrap: break-word;
    }
    .hero h3 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
    section[class*="-hero"] p { font-size: clamp(1rem, 2.6vw, 1.2rem); }
    .hero-content { margin-left: 0 !important; padding: 0 20px; }
    section[class*="-hero"] .hero-content { padding: 0; }

    /* --- Headings --------------------------------------------------------- */
    /* !important: many pages set heading sizes with more specific selectors. */
    h1:not(.error-code) { font-size: clamp(2rem, 8vw, 3.25rem) !important; }
    h2 { font-size: clamp(1.6rem, 5.5vw, 2.4rem) !important; }

    .section-subtitle { font-size: clamp(1rem, 2.8vw, 1.15rem); }

    /* --- Announcement bar: one compact row ------------------------------- */
    .announcement-container { flex-wrap: nowrap; gap: 10px; padding: 0 14px; }
    .announcement-text { min-width: 0; }
    .announcement-btn { padding: 8px 16px; font-size: 0.9rem; min-height: 40px; }
}

/* ==========================================================================
   PHONE
   ========================================================================== */
@media (max-width: 767.98px) {
    /* iOS zooms the page when a field under 16px gets focus. */
    input, select, textarea,
    .form-control, .form-select { font-size: 16px; }

    /* Utility bar (email / phone / calendar / portal): compact */
    .top-header { padding-top: 6px !important; padding-bottom: 6px !important; }
    .top-header .container { gap: 6px; }
    .contact-info { gap: 14px; font-size: 12px; flex-wrap: wrap; }
    .top-menu { gap: 14px; font-size: 13px; flex-wrap: wrap; }
    .support-btn { padding: 5px 10px; }
    .navbar-logo { width: 60px; }
}

/* ==========================================================================
   SMALL PHONE
   ========================================================================== */
@media (max-width: 575.98px) {
    .announcement-icon { display: none; }
    .marquee-text { font-size: 0.8rem; }

    .back-to-top { width: 44px; height: 44px; right: 16px; }
    .whatsapp-float {
        width: 52px; height: 52px; font-size: 26px;
        right: 16px;
        bottom: calc(var(--announcement-h, 0px) + 74px);
    }
    .whatsapp-tooltip { display: none; }

    /* Multi-column card grids become one column (they used minmax(300-320px) which
       is wider than a 320px phone). !important beats the inline style on one page. */
    .modules-grid, .benefits-grid, .requirements-grid,
    .certificate-course-grid, .diploma-course-grid, .sc-course-grid,
    .gallery-grid, .resources-grid { grid-template-columns: minmax(0, 1fr) !important; }

    .section-container { padding-top: 56px; padding-bottom: 56px; }
    .section-title::after { width: min(250px, 60%); }

    /* Page-level CTA buttons use the full width */
    .hero .btn, section[class*="-hero"] .btn { max-width: 100%; white-space: normal; }
}

/* ==========================================================================
   TOUCH DEVICES: comfortable tap targets (WCAG 2.5.5 suggests 44px)
   ========================================================================== */
@media (pointer: coarse) {
    .read-more, .view-all, .read-more-link, .pub-link, .resource-link, .learn-more,
    .footer-column a, .footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .top-menu a { display: inline-flex; align-items: center; min-height: 36px; }
    .btn { min-height: 44px; }
    .whatsapp-tooltip { display: none; }
}

/* Short landscape phones: don't let the hero fill an entire (tiny) screen */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: 0; }
    .hero, section[class*="-hero"] { padding-top: 110px; padding-bottom: 40px; }
}

/* ==========================================================================
   HOME PAGE – "Our Courses" cards and partner logos on phones
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Our Courses: one card per row, icon on the left, title beside it */
    .courses-section .container-fluid { padding: 56px 16px; }
    .courses-section .row { padding-left: 0 !important; padding-right: 0 !important; --bs-gutter-x: 0; --bs-gutter-y: 0.9rem; }
    .courses-section .row > .col { flex: 0 0 100%; width: 100%; max-width: 100%; }
    .courses-section .row .course-card {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        padding: 16px 20px;
        border-radius: 14px;
    }
    .courses-section .row .course-icon { flex: 0 0 auto; width: 56px; height: 56px; font-size: 1.9rem; margin: 0; }
    .courses-section .row .course-card h5 { font-size: 1.1rem; line-height: 1.3; margin: 0; overflow-wrap: break-word; }
    .courses-section .row .course-card::after { display: none; }   /* the hover arrow has no use on touch */

    /* Partner logos: continuous marquee. site.js duplicates the logos (.logo-clone) so the
       loop is seamless; the track slides left by exactly half its width, forever. */
    .trust-badges { padding: 28px 0; overflow: hidden; }
    .trust-badges .container { padding-left: 0; padding-right: 0; max-width: none; }
    .trust-badges .row {
        flex-wrap: nowrap;
        width: max-content;
        margin: 0;
        --bs-gutter-x: 0;
        animation: logo-marquee 28s linear infinite;
        will-change: transform;
    }
    .trust-badges .row > .col {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0 18px;             /* spacing lives in the padding so -50% is exact */
        display: flex;
        align-items: center;
    }
    .trust-badges:active .row { animation-play-state: paused; }   /* hold a finger on it to pause */
    .trust-badges img {
        height: 84px;
        width: auto;
        max-width: none;
    }
    /* these two files have a lot of empty padding around the artwork */
    .trust-badges img[src*="microsoft"] { height: 120px; }
    .trust-badges img[src*="logo-removebg"] { height: 96px; }
}

/* Touch screens have no real hover: don't leave a card "stuck" raised after a tap */
@media (hover: none) {
    .courses-section .row .course-card:hover {
        transform: none;
        background: rgba(0, 10, 61, 0.75);
        box-shadow: none;
    }
    .courses-section .row .course-card:hover .course-icon { background: rgba(255, 255, 255, 0.15); color: inherit; }
}

/* Marquee keyframes + helpers */
@keyframes logo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.trust-badges .logo-clone { display: none; }                 /* clones only exist for the phone marquee */
@media (max-width: 767.98px) {
    .trust-badges .logo-clone { display: flex; }
}
/* Reduced motion: no auto-scroll, let people swipe instead */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .trust-badges { overflow-x: auto; }
    .trust-badges .row { animation: none; }
    .trust-badges .logo-clone { display: none; }
}