/**
 * Responsive Styles (Mobile First)
 * 
 * @package Hastika_Docs
 * @since 1.0.0
 */

/* Tablet: 768px and up */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-xl);
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .header-search {
        max-width: 400px;
    }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
    .header-search {
        max-width: 500px;
    }
}

/* Large Desktop: 1280px and up */
@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-2xl);
    }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .main-nav {
        display: none;
    }
    
    .header-search {
        flex: 1;
        max-width: none;
    }
    
    .site-branding .site-title {
        font-size: 14px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-menu {
        flex-direction: column;
        gap: var(--space-md);
    }
}

/* Small mobile: below 480px */
@media (max-width: 479px) {
    :root {
        --font-body: 14px;
    }
    
    .header-inner {
        gap: var(--space-sm);
    }
    
    .site-branding {
        display: none;
    }
}