/* =====================================================
   FGS Header - Responsive fixes
   Load this LAST (after style.css, fgs-custom.css, fgs-menu-fix.css)
   ===================================================== */

/* ---------- Tablet landscape / small laptops (992px - 1199px) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-main .navbar-nav .nav-link {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 13px;
    }
    .header-main .fgs-portal-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    .header-main .fgs-uor-logo,
    .header-main .fgs-fac-logo {
        max-height: 46px;
        width: auto;
    }
    /* Mega menus must never be wider than the screen */
    .header-main .dropdown-menu.max {
        width: calc(100vw - 40px) !important;
        max-width: 1040px;
    }
}

/* ---------- Mobile & tablet portrait (below 992px) ---------- */
@media (max-width: 991.98px) {

    .header-main {
        background: #fff;
        position: relative;
    }

    .header-main .fgs-header-container > .d-flex {
        flex-wrap: nowrap;
        align-items: center;
    }

    /* The <nav> just holds the toggler on the right of the logos.
       It must NOT be positioned, so the menu panel below can anchor
       to .header-main and span the full width. */
    .header-main nav.navbar {
        position: static !important;
        flex: 1 1 auto;
        width: auto !important;        /* template sets .header .navbar { width:100% } */
        min-width: 0;
        justify-content: flex-end !important;
        padding: 0 !important;
    }

    /* keep the logos from being squeezed by the nav */
    .header-main .fgs-header-container > .d-flex > div:first-child {
        flex: 0 0 auto;
    }

    /* Hamburger button: always visible below 992px */
    .header-main .navbar-toggler,
    .header .navbar .navbar-toggler {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* undo any absolute/float positioning the template may apply */
        position: static !important;
        float: none !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 44px;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        padding: 6px 10px;
        border: 1px solid rgba(10, 28, 54, 0.25);
        border-radius: 6px;
        background: #fff;
        line-height: 1;
        flex-shrink: 0;
    }

    /* The icon is a Font Awesome <i>; drop Bootstrap's own background icon
       so you don't get two hamburgers drawn on top of each other */
    .header-main .navbar-toggler-icon {
        background-image: none !important;
        width: auto;
        height: auto;
        display: inline-flex;
    }

    .header-main .navbar-toggler:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.25);
    }

    .header-main .fgs-uor-logo {
        height: 38px;
        width: auto;
    }

    /* Full-width collapsible menu */
    /* Menu opens as a full-width panel directly under the header bar */
    .header-main .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 12px;
        border-top: 1px solid #e5e9f0;
        background: #fff;
        box-shadow: 0 14px 24px rgba(10, 28, 54, 0.15);
        z-index: 1000;
    }

    .header-main .navbar-nav {
        width: 100%;
        align-items: stretch !important;
        padding: 6px 0;
    }

    .header-main .navbar-nav > .nav-item {
        width: 100%;
        border-bottom: 1px solid #f0f2f6;
    }

    .header-main .navbar-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 8px !important;
        font-size: 15px;
        white-space: normal;
    }

    /* Mega dropdowns become simple stacked accordions */
    .header-main .dropdown-menu,
    .header-main .dropdown-menu.max {
        position: static !important;
        float: none;
        width: 100% !important;       /* beats the inline 1040px / 760px */
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 8px 12px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f8fafc;
        transform: none !important;
    }

    .header-main .dropdown-menu .container-fluid,
    .header-main .dropdown-menu .row {
        margin: 0;
        padding: 0;
    }

    .header-main .dropdown-menu [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 12px !important;
    }

    .header-main .dropdown-menu .nav-link {
        padding: 8px 6px;
        font-size: 14px;
        white-space: normal;      /* long names like "Faculty Quality Assurance Cell" wrap */
        line-height: 1.35;
    }

    .header-main .fgs-menu-col-title {
        margin: 6px 0 4px;
        font-size: 13px;
    }

    .header-main .fgs-menu-promo-box {
        margin-top: 8px !important;
        padding: 14px;
        height: auto !important;
    }

    /* Portal button full width */
    .header-main .navbar-nav > .nav-item:last-child {
        border-bottom: 0;
        margin: 10px 0 6px !important;
    }
    .header-main .fgs-portal-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }

    /* Optional: quick links shown only inside the mobile menu
       (the top bar with LMS / MIS / Payment Slips is hidden on phones) */
    .fgs-mobile-quick {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 8px;
    }
    .fgs-mobile-quick a {
        flex: 1 1 auto;
        text-align: center;
        padding: 8px 12px;
        border-radius: 20px;
        background: #0a1c36;
        color: #fff;
        font-size: 13px;
        text-decoration: none;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 575.98px) {
    .fgs-header-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .header-main .fgs-uor-logo {
        height: 34px;
    }
    .header-main a.navbar-brand img[alt="FGS Logo"] {
        height: 32px !important;
    }
}

/* ---------- Overrides for rules in fgs-custom.css / fgs-menu-fix.css ----------
   fgs-custom.css forces `white-space: nowrap !important` on every .nav-link and
   gives dropdown links hover transforms and fixed paddings with !important,
   so these need matching specificity + !important to win on phones. */
@media (max-width: 991.98px) {
    .header .header-main .navbar-nav .nav-link,
    .header .header-main .dropdown-menu.max .nav-link {
        white-space: normal !important;
    }

    .header .header-main .dropdown-menu.max .nav-link {
        padding: 9px 8px !important;
        min-height: 40px;
        transform: none !important;     /* no sideways hover shift on touch */
    }

    .header .header-main .dropdown-menu.max .nav-link i {
        flex-shrink: 0;
    }

    .header .header-main .dropdown-menu.max {
        animation: none;
        margin-top: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .header .header-main .navbar-nav .nav-item {
        margin: 0;
    }
}

/* Never allow horizontal page scroll because of the header */
.header,
.header-main {
    max-width: 100%;
}