/* ==========================================================================
   Multiple Tools BD - Responsive Layouts
   ========================================================================== */

/* Large screens and Desktops (up to 1200px) */
@media (max-width: 1200px) {
    .mega-menu {
        grid-template-columns: repeat(4, 1fr);
        width: calc(100vw - 2rem);
    }
}

/* Tablets & Small Desktops (up to 992px) */
@media (max-width: 992px) {
    .mega-menu {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hero-section {
        flex-direction: column;
        text-align: center;
        padding-top: 4rem;
        gap: 2rem;
    }
    
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-heading {
        font-size: 2.6rem;
    }
    
    .hero-search {
        width: 100%;
        max-width: 480px;
    }
    
    .hero-visual {
        height: 350px;
    }
    
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    .tool-info-section {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Mobile & Small Tablets (up to 768px) */
@media (max-width: 768px) {
    header.site-header {
        padding: 0.2rem 0;
    }
    
    .hamburger-btn {
        display: block;
        order: 3;
    }
    
    .header-actions {
        order: 2;
    }
    
    .search-trigger span {
        display: none;
    }
    
    .search-trigger {
        padding: 0.5rem;
    }
    
    /* Responsive Hamburger Sidebar Navigation Drawer */
    .main-nav {
        position: fixed;
        top: 60px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 60px);
        background: var(--bg-dark-secondary);
        border-left: 1px solid var(--border-glass);
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        gap: 0.5rem;
        overflow-y: auto;
        transition: var(--transition-normal);
        z-index: 999;
    }
    
    .main-nav.active {
        right: 0;
    }
    
    .nav-link {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    
    /* Mega Menu in Mobile Drawer collapses into scrollable/list */
    .dropdown-parent:hover .dropdown-menu {
        display: none;
    }
    
    .mega-menu-trigger .mega-menu {
        display: none;
    }
    
    /* For Mobile we will let main-nav contain simpler categorised links or list them vertically */
    .mega-menu {
        position: static;
        width: 100%;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none; /* We toggle this in JS for mobile */
        grid-template-columns: 1fr;
        padding: 1rem 0;
        border: none;
        background: none;
        box-shadow: none;
        gap: 1rem;
    }
    
    .mega-menu-trigger.active .mega-menu {
        display: block;
    }
    
    .mega-list a {
        white-space: normal;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .hero-heading {
        font-size: 2.2rem;
    }
    
    .stats-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .card-panel {
        padding: 1.5rem;
    }
    
    .tool-workspace {
        padding: 1.2rem;
    }
    
    .scroll-top-btn {
        bottom: 1.5rem;
        right: 1.5rem;
    }
}

/* Tiny mobile phones (up to 480px) */
@media (max-width: 480px) {
    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-heading {
        font-size: 1.8rem;
    }
    
    .logo-link {
        font-size: 1.2rem;
    }
}