/* Responsive Overrides & Mobile Specific Styles */

/* Mobile Menu */
@media (max-width: 991.98px) {
    .menu-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .navbar-brand svg {
        height: 35px;
    }
    
    .icons {
        gap: 15px;
    }
}

/* Tablet */
@media (max-width: 767.98px) {
    h1 {
        font-size: var(--font-size-md) !important;
    }
    
    h2 {
        font-size: var(--font-size-lg) !important;
    }
    
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .blue-banner .banner-title br {
        display: none;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    body {
        font-size: 1rem;
    }
    
    .small-header-image .wrapper {
        height: 150px !important;
    }
    
    .breadcrumbs {
        font-size: 0.75rem;
    }
    
    .filter-list {
        margin-bottom: 1.5rem;
    }
    
    .blue-banner {
        padding: 30px 0;
    }
    
    .footer-main {
        padding: 2rem 0;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Hide elements on mobile */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 767.98px) {
    .show-mobile {
        display: block !important;
    }
}

/* Offset utilities responsive */
@media (max-width: 991.98px) {
    .offset-lg-1 {
        margin-left: 0;
    }
}

/* Column stacking */
@media (max-width: 991.98px) {
    .col-lg-3,
    .col-lg-4,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9 {
        width: 100%;
        margin-bottom: 2rem;
    }
    
    .col-lg-3:last-child,
    .col-lg-4:last-child,
    .col-lg-7:last-child,
    .col-lg-8:last-child,
    .col-lg-9:last-child {
        margin-bottom: 0;
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
    .report-item:hover {
        transform: none;
    }
    
    .report-item:active {
        transform: translateY(-5px);
    }
}
