/* ===================================================
   COMPREHENSIVE RESPONSIVE FIXES
   =================================================== */

/* Prevent Body Horizontal Scroll Global */
html, body {
    overflow-x: clip; /* clip prevents scroll but doesn't break sticky */
    width: 100%;
}

/* Fix global z-index layering */
.header-sticky-wrapper {
    z-index: 100005 !important;
}
.floating-actions {
    z-index: 9990 !important;
}

/* --------------------------------------
   1. Header & Navigation (Mobile/Tablet)
   -------------------------------------- */
@media (max-width: 992px) {
    /* Top Bar Scaling */
    .header-top-inner {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 10px;
        padding: 10px 5px;
    }
    
    .college-info h1 {
        font-size: 1.1rem !important;
    }
    .college-info p {
        display: none !important; /* Hiding extra text on mobile */
    }
    .brand-logo-new {
        margin-bottom: 5px;
    }

    .header-contact-info {
        display: none !important; /* Hiding contacts on mobile */
    }

    /* Mobile Toggle Button */
    .mobile-toggle {
        display: block !important;
        color: #1b5e20 !important; /* Green icon to show on white navbar */
        font-size: 2rem !important;
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100001;
        cursor: pointer;
    }

    .navbar {
        position: relative;
        min-height: 60px;
        background: #fff;
    }

    /* Dropdown Navigation */
    .nav-links {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 120px) !important;
        background: #1b5e20 !important; /* Green matching header */
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 10px 20px 30px !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
        z-index: 100000 !important;
        overflow-y: auto;
        
        /* Hidden state */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
    }

    .nav-links.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-link {
        color: #fff !important;
        font-size: 1.1rem !important;
        padding: 15px 10px !important;
        justify-content: space-between;
        width: 100%;
    }

    /* Dropdowns in Mobile Menu */
    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(0,0,0,0.15) !important;
        display: none; /* Hide by default on mobile */
        padding: 0 !important;
    }

    /* Allow toggle by JS class on mobile */
    .nav-item.menu-open > .dropdown-menu {
        display: block; 
    }

    .dropdown-menu a {
        color: #e0e0e0 !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    .submenu {
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(0,0,0,0.2) !important;
        display: none;
        padding-left: 15px;
    }
    
    .has-submenu.menu-open > .submenu {
        display: block;
    }
}

/* --------------------------------------
   2. Hero Slider & Banners
   -------------------------------------- */
@media (max-width: 992px) {
    .hero-slider, .slider-container, .slide, .slide img {
        height: auto !important;
    }
    .about-title { font-size: 2.5rem !important; }
}

@media (max-width: 576px) {
    .hero-slider, .slider-container, .slide, .slide img {
        height: auto !important;
    }
    .banner-title {
        font-size: 2rem !important;
    }
    .about-title { font-size: 1.8rem !important; }
}

/* --------------------------------------
   3. Grids & Layouts
   -------------------------------------- */
@media (max-width: 992px) {
    .features-grid, 
    .course-grid,
    .gallery-container,
    .quick-links-grid,
    .notice-board-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .footer-grid-new {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .about-hero-container {
        flex-direction: column;
    }
    .about-hero-img {
        margin-top: 30px;
    }
    
    /* Ensure flex wrappers wrap */
    .flex-wrap-mobile {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 768px) {
    .features-grid, 
    .course-grid,
    .notice-board-grid {
        grid-template-columns: 1fr !important;
    }
    
    .footer-grid-new {
        grid-template-columns: 1fr !important;
    }
    
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .gallery-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .bscc-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    .quick-links-grid,
    .gallery-container {
        grid-template-columns: 1fr !important;
    }
    
    .gallery-slide {
        flex: 0 0 280px !important;
        height: 350px !important;
    }
    
    .action-buttons-bar {
        flex-direction: column;
        padding: 15px !important;
        height: auto !important;
    }
    
    .action-buttons-bar .btn, .btn-premium-top {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        justify-content: center;
    }
}

/* --------------------------------------
   4. Tables & Forms 
   -------------------------------------- */
/* Automatic Table Responsiveness */
table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

td, th {
    white-space: nowrap; /* Prevent ugly squishing */
}

@media (max-width: 768px) {
    form {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    
    input, select, textarea, button {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    .chairman-card {
        flex-direction: column;
    }
    .chairman-sidebar {
        width: 100% !important;
        margin-bottom: 30px;
    }
    .chairman-content {
        padding-left: 0 !important;
    }
    
    /* Login Box constraints */
    .sl-container, .student-login-wrapper {
        padding: 15px !important;
        width: 100% !important;
        overflow: hidden;
    }
}

/* --------------------------------------
   5. Padding & Sizing Utilities
   -------------------------------------- */
@media (max-width: 768px) {
    section {
        padding: 40px 0 !important; /* Reduce large vertical padding */
    }
    
    .page-banner {
        padding: 60px 0 !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }
    
    .vision-banner {
        padding: 60px 20px !important;
    }
    
    .motto {
        font-size: 1.8rem !important;
    }
}

/* Fix floating actions on mobile so they don't cover content */
@media (max-width: 576px) {
    .floating-actions {
        bottom: 20px !important;
        right: 20px !important;
        transform: scale(0.85);
        transform-origin: bottom right;
    }
}