/*
 * Responsive overrides for the public website.
 * Loaded after style.css and style-responsive.css, so rules here win.
 */

/* ---------- global ---------- */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.logo img { max-width: none; }   /* keep original logo size (sits in a narrow column) */
.gallery .current-image, #how-to-reach img { height: auto; }
.form-control, input, select, textarea { max-width: 100%; }

/* ---------- top action bar ---------- */
.main-nav ul { width: auto; max-width: 100%; text-align: center; }

/* ---------- mobile menu (tap based, replaces hover) ---------- */
.menu-btn { display: inline-block; cursor: pointer; text-decoration: none !important; }
.mobile-nav:hover .mobile-nav-content { display: none; }
.mobile-nav.open .mobile-nav-content { display: block !important; }
.mobile-nav-content {
    left: 0 !important;
    right: 0 !important;
    width: 92% !important;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1050 !important;
    box-shadow: 0 8px 24px rgba(0, 41, 104, 0.25);
    padding: 8px 0 !important;
}
.mobile-nav-content li a {
    width: 92% !important;
    padding: 10px 16px !important;
    min-height: 44px;           /* comfortable touch target */
    line-height: 24px;
}
/* sub menus inside the mobile menu open on tap, inline */
.mobile-nav-content .sub-nav ul {
    position: static;
    border: 0;
    display: none;
    padding: 4px 0;
}
.mobile-nav-content .sub-nav:hover > ul { display: none; }
.mobile-nav-content .sub-nav.open > ul { display: block; }
.mobile-nav-content .sub-nav li { width: auto; }
.mobile-nav-content .sub-nav > a::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 6px;
}

/* ---------- desktop sub menu: keyboard / tap friendly ---------- */
.pc-nav .sub-nav:focus-within > ul { display: block; z-index: 1; }

/* ---------- hero ---------- */
#slider { background-size: cover; background-position: center; }

/* ---------- about (parallax) ---------- */
#about { background-size: cover; background-position: center; }
.about-box { max-width: 600px; width: 100%; margin: 0 auto; }

/* ---------- facilities ---------- */
.facility-row { flex-wrap: wrap; }

/* ---------- tablets & small laptops ---------- */
@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 991px) {
    /* query section: cards + form stack */
    #query .query-form-col { margin-top: 20px; }
    #query .query-form-col::after { display: none; }
    .query-facility h1 { font-size: 24px; text-align: center; }

    /* why choose us: drop the zig-zag offsets */
    #why-choose-us .why {
        margin-left: 0 !important;
        margin-top: 15px !important;
        width: 100%;
        float: none;
    }
    #why-choose-us h1 { font-size: 28px; }

    /* news cards: two per row */
    #updates .update { width: 50%; float: left; margin-bottom: 20px; }
    #updates .update:nth-child(2n+1) { clear: left; }

    #how-to-reach h1 { text-align: center; font-size: 26px; margin-top: 15px; }
    #how-to-reach .img-side { padding: 15px 0; }
}

/* ---------- phones ---------- */
@media only screen and (max-width: 767px) {
    body { font-size: 15px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }

    /* header */
    #navbar-btns .main-nav ul li { display: block; margin: 0; }
    #navbar-btns .main-nav ul li a { padding: 6px 4px; font-size: 13px; }
    #navbar-btns .main-nav ul li a::after { display: none; }

    /* hero */
    #slider { height: 240px; }
    #slider .content { width: 90%; padding: 16px; }
    #slider .content h1 { font-size: 22px; }

    /* announcements + downloads stack */
    #news .notice-board,
    #news .download-area { width: 100% !important; float: none; }
    #news .notice-board a,
    #news .download-area a { display: block; margin: 0 10px 10px; word-break: break-word; }
    #news::after { display: none; }

    /* facilities */
    .facility-row { display: block; }
    .facility-col { display: block; flex: none; width: 100%; }
    #facilities h1 { font-size: 22px; padding: 0 10px; }

    /* query cards */
    .query-facility .upper-portion { height: auto; }
    .query-facility .col-xs-12 { margin-bottom: 20px; }
    #query .query-form { padding: 20px; }

    /* news cards: one per row */
    #updates { padding: 40px 0; }
    #updates .update { width: 100%; float: none; }
    #updates .update-image { height: 200px; background-size: cover; background-position: center; }

    /* about */
    #about { padding: 30px 0; }
    .about-box { padding: 20px; }
    .about-box h1 { font-size: 24px; }

    /* asthamrut circles */
    #asthamrut { padding: 40px 0; }
    #asthamrut img { width: 80%; margin-bottom: 20px; }
    #asthamrut .circle {
        width: 140px; height: 140px;
        padding: 30px 8px;
        display: flex; align-items: center; justify-content: center;
    }
    #asthamrut .circle p { padding-top: 0; min-height: 0; margin: 0; font-size: 14px; }

    /* gallery */
    .gallery { height: auto; min-height: 180px; }


    /* modals */
    .modal-dialog { margin: 10px; width: auto; }
    .modal-body img { width: 100%; }


    /* buttons stack nicely */
    .btn { white-space: normal; margin-bottom: 6px; }
}

@media only screen and (max-width: 400px) {
    #asthamrut .col-xs-6 { width: 100%; }
    #asthamrut .circle { width: 160px; height: 160px; }
    #slider .content h1 { font-size: 18px; }
}