/* =============================================
   CUSTOM RESPONSIVE OVERRIDES
   Keep header menu ALWAYS visible on all sizes.
   Mobile / Tablet / Desktop friendly.
============================================= */

/* ---- HEADER: Always-visible menu ---- */
@media only screen and (max-width: 992px) {

    /* Force menu wrapper to stay visible */
    header .header-col-mid,
    header .de-flex-col.header-col-mid {
        display: flex !important;
        width: 100%;
        order: 3;
    }

    /* Hide hamburger button */
    #menu-btn {
        display: none !important;
    }

    /* Header layout: wrap on mobile */
    header .de-flex {
        flex-wrap: wrap !important;
    }

    /* Logo + phone row */
    header .de-flex > .de-flex-col:first-child {
        flex: 0 0 auto;
    }

    /* Right side (phone/actions) */
    header .de-flex > .de-flex-col:last-child {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    /* Menu nav takes full row below logo */
    #mainmenu-wrapper {
        width: 100%;
    }

    #mainmenu {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 5px 0;
    }

    #mainmenu li {
        display: inline-block !important;
        width: auto !important;
        border-bottom: none !important;
        margin: 0 !important;
    }

    #mainmenu li:last-child {
        margin-bottom: 0 !important;
    }

    #mainmenu li a {
        padding: 8px 12px !important;
        font-size: 13px !important;
        display: inline-block !important;
        text-align: center !important;
    }

    #mainmenu li a:after {
        display: none !important;
    }

    /* Sub-menus: keep as dropdown */
    #mainmenu li ul {
        position: absolute !important;
        display: none !important;
        width: auto !important;
        min-width: 180px;
    }

    #mainmenu li:hover ul {
        display: block !important;
    }

    /* Hide "Need Help?" text on small screens, keep phone icon */
    .h-phone span {
        display: none;
    }

    .h-phone a {
        font-size: 14px;
    }

    /* Header background solid */
    header,
    header.fixed {
        background: #111 !important;
        position: relative !important;
        padding: 10px 0 !important;
    }

    /* Override mobile header class behaviors */
    header.header-mobile {
        overflow: visible !important;
    }

    header.header-mobile #mainmenu {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    header.header-mobile #mainmenu li {
        display: inline-block !important;
        width: auto !important;
        border-bottom: none !important;
    }

    header.header-mobile .header-col-mid,
    header.header-mobile .de-flex-col.header-col-mid {
        display: flex !important;
    }

    /* Override autoshow class */
    header.autoshow .header-col-mid {
        display: flex !important;
    }

    nav {
        height: auto !important;
    }
}

/* ---- Even narrower: shrink menu further ---- */
@media only screen and (max-width: 767px) {

    #mainmenu li a {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    .h-phone {
        display: none !important;
    }

    header .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Logo smaller */
    #logo img {
        max-height: 35px;
    }
}

@media only screen and (max-width: 480px) {
    #mainmenu li a {
        padding: 5px 6px !important;
        font-size: 11px !important;
    }
}


/* =============================================
   SECTION-SPECIFIC RESPONSIVE FIXES
============================================= */

/* ---- Hero Section (index.html) ---- */
@media (max-width: 767px) {
    #section-hero {
        min-height: 80vh !important;
        padding: 80px 0 40px !important;
    }

    #section-hero .hero-title {
        font-size: 28px !important;
    }

    .hero-description-box {
        padding: 15px 20px !important;
    }

    #section-hero .btn-main,
    #section-hero .btn-border {
        padding: 12px 25px !important;
        font-size: 13px !important;
        display: inline-block;
        margin-bottom: 10px;
    }
}

/* ---- Foundation & Expertise (index.html) ---- */
@media (max-width: 991px) {
    .expertise-grid-section .row {
        flex-direction: column;
    }

    .expertise-img-col {
        order: -1;
        margin-bottom: 30px;
    }
}

/* ---- About page ---- */
@media (max-width: 767px) {
    .about-content-wrapper {
        padding: 40px 20px !important;
    }

    .about-title {
        font-size: 1.6rem !important;
    }

    .sdg-highlight {
        flex-direction: column;
        gap: 12px;
    }

    .location-badge {
        flex-direction: column;
        gap: 10px;
    }
}

/* ---- Contact page ---- */
@media (max-width: 767px) {
    .contact-hero__left {
        padding: 40px 20px !important;
    }

    .contact-title {
        font-size: 28px !important;
    }

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

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

/* ---- Career page ---- */
@media (max-width: 767px) {
    .career-hero__left {
        padding: 40px 20px !important;
    }

    .career-hero__title {
        font-size: 28px !important;
    }

    .career-hero__stats {
        flex-wrap: wrap;
    }

    .perk-card {
        padding: 24px 20px;
    }

    .job-card__body {
        padding: 20px 16px 16px !important;
    }
}

/* ---- News/Blog page ---- */
@media (max-width: 767px) {
    .bloglist.item .post-text {
        padding: 12px 14px 16px !important;
    }

    .bloglist.item .post-text h4 {
        font-size: 16px !important;
    }

    .bloglist.item .post-text p {
        font-size: 13px !important;
    }
}

/* ---- Footer responsive ---- */
@media (max-width: 767px) {
    footer .container .row > div {
        margin-bottom: 30px;
    }

    .subfooter .de-flex {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* ---- General responsive helpers ---- */
@media (max-width: 991px) {
    .xs-hide {
        display: none;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}