/* =============================================================
   DLS PG COLLEGE — MOBILE RESPONSIVE CSS
   Complete mobile-first responsive styles for all pages
   ============================================================= */

/* ===== TABLET: max 991px ===== */
@media (max-width: 991px) {

    /* --- HEADER: Compact mobile layout --- */
    /* Hide toolbar (top contact bar with admission/fee/prospectus buttons) */
    .modern-toolbar {
        display: none !important;
    }

    /* Hide college title and NAAC badge — show only logo + hamburger */
    .college-title-section,
    .college-title-text,
    .naac-section {
        display: none !important;
    }

    /* Make header-top compact */
    .rs-header-top.header-main-section {
        padding: 8px 0 !important;
    }

    /* Logo section full width left */
    .logo-section {
        flex: 1;
    }

    .logo-area .college-logo {
        max-width: 130px !important;
        height: auto !important;
    }

    /* Header row: flex between logo and menu toggle */
    .header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Show mobile logo + toggle side by side */
    .modern-menu-area .mobile-logo {
        display: inline-block !important;
        width: 110px !important;
        height: auto !important;
        padding: 6px 0 !important;
        margin: 0 !important;
    }

    .modern-menu-area .rs-menu-toggle {
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding: 10px 16px !important;
        background: rgba(255,255,255,0.15) !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px;
    }

    /* Menu bar: flex between mobile logo and toggle */
    .modern-menu-area .main-menu .row.relative {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Breadcrumb hide on tablet */
    .rs-breadcrumbs {
        padding: 50px 0 25px !important;
    }

    /* Floating sidebar adjust */
    .floating-sidebar {
        gap: 5px;
    }
    .fab-btn {
        width: 44px;
        height: 44px;
    }
    .fab-icon {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    /* --- SLIDER --- */
    .carousel-item img.d-block {
        height: 320px !important;
    }

    /* --- ABOUT SECTION --- */
    .about-section {
        padding: 50px 0 !important;
    }
    .about-img-col {
        margin-bottom: 30px;
    }
    .about-img-main img {
        height: 280px !important;
    }
    .about-content-col {
        padding-left: 0 !important;
    }
    .about-title {
        font-size: 24px !important;
    }
    .about-experience-badge {
        bottom: -10px !important;
        right: 10px !important;
        padding: 14px 18px !important;
    }
    .about-experience-badge .exp-number {
        font-size: 28px !important;
    }

    /* --- INFO CARDS SECTION --- */
    .info-cards-section {
        padding: 40px 0 !important;
    }
    .info-card,
    .ql-card {
        height: auto !important;
        margin-bottom: 24px !important;
    }

    /* --- PAGE HERO (all inner pages) --- */
    .dls-page-hero {
        padding: 50px 0 30px !important;
    }
    .dls-page-hero h1 {
        font-size: 24px !important;
    }
    .dls-page-hero .breadcrumb a,
    .dls-page-hero .breadcrumb span {
        font-size: 12px !important;
    }

    /* --- DLS SECTION --- */
    .dls-section {
        padding: 40px 0 !important;
    }

    /* --- FOOTER --- */
    .dls-footer-main .row > div {
        margin-bottom: 20px;
    }

    /* ===== MOBILE MENU: click-toggle submenus ===== */
    .modern-menu-area .menu-item-has-children:hover > .sub-menu,
    .modern-menu-area .rs-mega-menu:hover > .mega-menu,
    .modern-menu-area .rs-mega-menu:hover .mega-menu {
        display: none !important;
    }

    .modern-menu-area .menu-item-has-children.mobile-open > .sub-menu,
    .modern-menu-area .rs-mega-menu.mobile-open > .mega-menu,
    .modern-menu-area .rs-mega-menu.mobile-open .mega-menu {
        display: block !important;
    }
}


/* ===== MOBILE: max 767px ===== */
@media (max-width: 767px) {

    /* ===== GENERAL ===== */
    body {
        overflow-x: hidden;
    }
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ===== HEADER ===== */
    /* Ensure toolbar is fully hidden */
    .rs-toolbar,
    .modern-toolbar {
        display: none !important;
    }

    /* Header top: compact single row with logo + title */
    .rs-header-top.header-main-section {
        padding: 6px 0 !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    /* Force header row to be flex, overriding Bootstrap column stacking */
    .header-content.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Logo: clean and sized for mobile */
    .logo-section {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
    }
    .logo-area .college-logo {
        max-width: 80px !important;
        max-height: 50px !important;
        height: auto !important;
        width: auto !important;
    }

    /* Hide NAAC badge on mobile */
    .naac-section,
    .naac-badge {
        display: none !important;
    }

    /* Show college title on mobile in header-top */
    .college-title-section {
        display: block !important;
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 12px !important;
    }

    .college-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    /* Menu area: slim gold bar */
    .menu-area.menu-sticky {
        padding: 0 !important;
    }

    /* Hide mobile-logo in menu bar — use header-top logo instead */
    .modern-menu-area .mobile-logo {
        display: none !important;
    }

    /* Menu toggle: full-width clean button */
    .modern-menu-area .rs-menu-toggle {
        display: block !important;
        width: 100%;
        text-align: center;
        padding: 12px 16px !important;
        background: #c97c1e !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px;
        border-radius: 0 !important;
        cursor: pointer;
    }

    .modern-menu-area .rs-menu-toggle:hover {
        background: #b56d14 !important;
    }

    .modern-menu-area .main-menu .row.relative {
        display: block !important;
    }

    /* Full-screen mobile menu overlay */
    .modern-menu-area .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        flex-direction: column !important;
        background: linear-gradient(160deg, #3d2208 0%, #2a1805 100%) !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        display: none !important;
        padding: 60px 0 30px !important;
        margin: 0 !important;
    }

    .modern-menu-area .nav-menu.active {
        display: flex !important;
    }

    .modern-menu-area .nav-menu > li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .modern-menu-area .nav-menu > li > a {
        padding: 16px 22px !important;
        height: auto !important;
        line-height: 1.5 !important;
        font-size: 14px !important;
    }

    .modern-menu-area .nav-menu > li > a::after {
        display: none !important;
    }

    .modern-menu-area .sub-menu,
    .modern-menu-area .mega-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none !important;
        min-width: 100% !important;
        max-width: 100% !important;
        background: rgba(60,40,10,0.95) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border-top: none !important;
        padding: 8px 0 8px 28px !important;
    }

    .modern-menu-area .mega-menu-innner {
        grid-template-columns: 1fr !important;
    }

    .modern-menu-area .single-magemenu {
        padding: 10px 18px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }

    .modern-menu-area .single-magemenu:not(:last-child)::after {
        display: none !important;
    }

    .modern-menu-area .mega-col-title {
        color: #f5a52d !important;
        font-size: 12px !important;
    }

    .modern-menu-area .mega-intro-text {
        color: #e0cdb5 !important;
    }

    .modern-menu-area .mega-read-more {
        color: #f5a52d !important;
    }

    .modern-menu-area .mega-links a {
        color: #e0cdb5 !important;
        font-size: 13px !important;
    }

    .modern-menu-area .mega-links a:hover {
        color: #fff !important;
    }

    .modern-menu-area .sub-menu li a {
        color: #e0cdb5 !important;
        font-size: 13px !important;
    }

    .modern-menu-area .sub-menu li a:hover {
        color: #f5a52d !important;
        background: rgba(255,255,255,0.05) !important;
    }

    /* Override hover — use .mobile-open (click toggle) */
    .modern-menu-area .menu-item-has-children:hover > .sub-menu,
    .modern-menu-area .rs-mega-menu:hover > .mega-menu,
    .modern-menu-area .rs-mega-menu:hover .mega-menu {
        display: none !important;
    }

    .modern-menu-area .menu-item-has-children.mobile-open > .sub-menu,
    .modern-menu-area .rs-mega-menu.mobile-open > .mega-menu,
    .modern-menu-area .rs-mega-menu.mobile-open .mega-menu {
        display: block !important;
    }

    /* Close button for mobile menu (added via JS) */
    .mobile-menu-close {
        position: absolute;
        top: 16px;
        right: 20px;
        color: #fff;
        font-size: 32px;
        cursor: pointer;
        z-index: 10;
        line-height: 1;
        padding: 4px 8px;
    }

    /* ===== HIDE MOBILE-ONLY BLOCKS ===== */
    /* Hide old pharmacy logo and admission buttons that were shown only on mobile */
    .mobile,
    .mobile-link {
        display: none !important;
    }

    /* ===== SLIDER ===== */
    .carousel-item img.d-block {
        height: 220px !important;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 36px !important;
        height: 36px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        opacity: 0.8;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 18px !important;
        height: 18px !important;
    }

    /* ===== BREADCRUMB ===== */
    .rs-breadcrumbs {
        display: none !important;
    }

    /* ===== ABOUT SECTION ===== */
    .about-section {
        padding: 40px 0 !important;
    }

    .about-img-main img {
        height: 220px !important;
    }

    .about-title {
        font-size: 22px !important;
    }

    .about-desc-text {
        font-size: 14px !important;
    }

    .about-highlights {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .highlight-card {
        flex: 1 1 100% !important;
        padding: 14px !important;
    }

    .about-stats {
        gap: 16px !important;
    }

    .stat-item .stat-num {
        font-size: 22px !important;
    }

    .btn-about-cta {
        padding: 12px 24px !important;
        font-size: 13px !important;
    }

    .about-experience-badge {
        bottom: -8px !important;
        right: 8px !important;
        padding: 12px 16px !important;
    }

    .about-experience-badge .exp-number {
        font-size: 24px !important;
    }

    .about-experience-badge .exp-text {
        font-size: 10px !important;
    }

    /* ===== INFO CARDS SECTION ===== */
    .info-cards-section,
    .media-section {
        padding: 30px 0 !important;
    }

    .info-card,
    .ql-card {
        height: auto !important;
        margin-bottom: 20px !important;
    }

    .info-card-header h4 {
        font-size: 14px !important;
    }

    .activity-slide .act-img {
        height: 180px !important;
    }

    .notice-scroll-inner {
        height: 300px !important;
    }

    .ql-body {
        max-height: 300px !important;
    }

    /* ===== WHY CHOOSE DLS ===== */
    .wcd-section {
        padding: 40px 0 !important;
    }

    .wcd-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .wcd-header h2 {
        font-size: 22px !important;
    }

    /* ===== AWARDS & ACHIEVEMENTS ===== */
    .aa-section {
        padding: 40px 0 !important;
    }

    .aa-section-title h2 {
        font-size: 22px !important;
    }

    .aa-tabs {
        gap: 8px !important;
    }

    .aa-tab-btn {
        padding: 10px 16px !important;
        font-size: 12px !important;
    }

    .faculty-card .fc-img,
    .award-card .ac-img,
    .story-card .sc-img {
        height: 180px !important;
    }

    /* ===== NEP / ANNOUNCEMENT ===== */
    .nep-section {
        padding: 40px 0 !important;
    }

    .nep-header h2 {
        font-size: 22px !important;
    }

    .nep-card {
        height: auto !important;
        min-height: 200px !important;
    }

    /* ===== TESTIMONIAL ===== */
    .testi-section {
        padding: 40px 0 !important;
    }

    .testi-header h2 {
        font-size: 22px !important;
    }

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

    /* ===== SOCIAL CONNECT ===== */
    .sc-section {
        padding: 40px 0 !important;
    }

    .sc-header h2 {
        font-size: 22px !important;
    }

    .sc-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .sc-card {
        padding: 0 !important;
    }

    /* ===== PAGE HERO (all inner pages) ===== */
    .dls-page-hero {
        padding: 40px 0 24px !important;
    }

    .dls-page-hero h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .dls-page-hero .subtitle {
        font-size: 13px !important;
    }

    .dls-page-hero .breadcrumb {
        gap: 6px !important;
    }

    .dls-page-hero .breadcrumb a,
    .dls-page-hero .breadcrumb span {
        font-size: 11px !important;
    }

    /* ===== DLS SECTIONS ===== */
    .dls-section {
        padding: 30px 0 !important;
    }

    .dls-section.bg-warm {
        padding: 30px 0 !important;
    }

    .dls-content {
        font-size: 14px !important;
    }

    .dls-content h2,
    .dls-content h3 {
        font-size: 20px !important;
    }

    /* DLS Tables */
    .dls-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dls-table {
        min-width: 500px;
    }

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

    /* DLS Feature cards */
    .dls-feature-card {
        padding: 20px !important;
    }

    .dls-feature-card .fc-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }

    .dls-feature-card h4 {
        font-size: 16px !important;
    }

    /* DLS Tabs */
    .dls-tabs .dls-tab {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    .dls-tab-content {
        padding: 18px !important;
    }

    /* DLS Staff grid */
    .dls-staff-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* DLS Post cards */
    .dls-post-card .post-body {
        padding: 16px !important;
    }

    .dls-post-card .post-title {
        font-size: 18px !important;
    }

    /* DLS Single post */
    .dls-single-post .post-title {
        font-size: 13px !important;
    }

    /* DLS Form card */
    .dls-form-card {
        padding: 20px !important;
    }

    /* DLS Sidebar cards */
    .dls-sidebar-card {
        margin-bottom: 20px !important;
    }

    /* DLS Info list */
    .dls-info-list li {
        font-size: 13px !important;
        padding: 8px 0 !important;
    }

    /* DLS Payment info */
    .dls-payment-info {
        padding: 20px !important;
    }

    .dls-payment-info .info-row {
        flex-direction: column !important;
        gap: 2px !important;
    }

    .dls-payment-info .info-label {
        min-width: auto !important;
    }

    /* DLS Doc links */
    .dls-doc-section h3 {
        font-size: 17px !important;
    }

    .dls-doc-links li a {
        font-size: 13px !important;
    }

    /* DLS Error page */
    .dls-error-page {
        padding: 60px 0 !important;
    }

    .dls-error-page .error-code {
        font-size: 100px !important;
    }

    /* DLS PDF button */
    .dls-pdf-btn {
        padding: 10px 22px !important;
        font-size: 13px !important;
    }

    /* DLS Affiliation cards */
    .dls-affiliation-card {
        padding: 20px !important;
    }

    /* ===== FLOATING SIDEBAR ===== */
    .floating-sidebar {
        gap: 4px !important;
    }

    .fab-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .fab-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .fab-btn:hover {
        width: 54px !important;
    }

    /* Social popup */
    .social-popup {
        width: 260px !important;
    }

    /* Enquiry modal */
    .enquiry-modal-content {
        margin: 16px !important;
    }

    /* ===== FOOTER ===== */
    .dls-footer {
        padding-top: 0 !important;
    }

    .dls-footer-main {
        padding: 40px 0 20px !important;
    }

    .dls-footer-main .row > div {
        margin-bottom: 24px !important;
    }

    .dls-footer-logo {
        max-width: 120px !important;
    }

    .dls-footer-title {
        font-size: 16px !important;
        margin-bottom: 14px !important;
    }

    .dls-footer-list li {
        font-size: 13px !important;
    }

    .dls-footer-bottom {
        padding: 16px 0 !important;
    }

    .dls-footer-bottom p {
        font-size: 12px !important;
    }
}


/* ===== OVERRIDE custom.css RESPONSIVE RULES ===== */
/* These rules use !important to beat custom.css at 768px and 576px breakpoints */

/* ===== CRITICAL: FIX LOGO + HEADER AT ALL MOBILE BREAKPOINTS ===== */
@media (max-width: 768px) {
    /* FORCE header into single row — override custom.css flex-wrap: wrap */
    .header-content {
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Logo: fixed size, never wrap */
    .logo-section {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .logo-area .college-logo {
        width: 70px !important;
        max-width: 70px !important;
        height: auto !important;
    }

    /* College title: flex-1 next to logo */
    .college-title-section {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 10px !important;
        text-align: left !important;
    }

    .college-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* NAAC + header buttons: hidden */
    .naac-section {
        display: none !important;
    }

    .header-buttons-section {
        display: none !important;
    }

    /* ===== FIX MEGA MENU: disable hover, use click-toggle ===== */
    /* Block hover-triggered submenus on touch */
    .modern-menu-list .menu-item-has-children:hover > .mega-menu,
    .modern-menu-list .menu-item-has-children:hover > .sub-menu,
    .modern-menu-list .rs-mega-menu:hover > .mega-menu {
        display: none !important;
    }

    /* Use .mobile-open class (toggled by JS click) */
    .modern-menu-list .menu-item-has-children.mobile-open > .mega-menu,
    .modern-menu-list .menu-item-has-children.mobile-open > .sub-menu,
    .modern-menu-area .rs-mega-menu.mobile-open > .mega-menu,
    .modern-menu-area .menu-item-has-children.mobile-open > .sub-menu {
        display: block !important;
    }

    /* Add tap indicator arrow on parent links */
    .modern-menu-area .nav-menu > li > a .mobile-arrow {
        display: inline-block;
        margin-left: 8px;
        font-size: 10px;
        transition: transform 0.3s;
        opacity: 0.7;
    }

    .modern-menu-area .nav-menu > li.mobile-open > a .mobile-arrow {
        transform: rotate(180deg);
        opacity: 1;
    }
}

@media (max-width: 576px) {
    /* CRITICAL: Override custom.css 576px that wraps header */
    .header-content {
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Logo: compact, no wrapping */
    .logo-section {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .logo-area .college-logo {
        width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
    }

    /* Title: show compact next to logo */
    .college-title-section {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
        padding-left: 6px !important;
        overflow: hidden;
    }

    .college-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* NAAC: hidden */
    .naac-section {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
    }

    /* Header buttons: hidden */
    .header-buttons-section {
        display: none !important;
        flex: 0 0 0 !important;
    }

    /* Menu toggle compact */
    .modern-menu-area .rs-menu-toggle {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }
}


/* ===== SMALL MOBILE: max 480px ===== */
@media (max-width: 480px) {

    /* Header even more compact */
    .logo-area .college-logo {
        max-width: 80px !important;
    }

    .modern-menu-area .rs-menu-toggle {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* Slider */
    .carousel-item img.d-block {
        height: 180px !important;
    }

    /* About */
    .about-title {
        font-size: 20px !important;
    }

    .about-img-main img {
        height: 180px !important;
    }

    .about-experience-badge {
        padding: 10px 14px !important;
    }

    .about-experience-badge .exp-number {
        font-size: 20px !important;
    }

    /* Section titles */
    .aa-section-title h2,
    .nep-header h2,
    .testi-header h2,
    .sc-header h2,
    .wcd-header h2 {
        font-size: 20px !important;
    }

    /* Page hero */
    .dls-page-hero h1 {
        font-size: 18px !important;
    }

    /* Tabs even smaller */
    .dls-tabs .dls-tab {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    /* AA tabs wrap */
    .aa-tab-btn {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }

    /* Table font */
    .dls-table th,
    .dls-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Footer */
    .dls-footer-main {
        padding: 30px 0 16px !important;
    }
}


/* ===== EXTRA SMALL: max 360px ===== */
@media (max-width: 360px) {
    .logo-area .college-logo {
        max-width: 70px !important;
    }

    .carousel-item img.d-block {
        height: 160px !important;
    }

    .about-title {
        font-size: 18px !important;
    }

    .dls-page-hero h1 {
        font-size: 13px !important;
    }
}