/*--------------------------------------------------------------
>>> RESPONSIVE STYLES
----------------------------------------------------------------
1.0 Mobile (320px - 767px)
2.0 Tablet (768px - 1023px)
3.0 Desktop (1024px+)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Mobile (320px - 767px) - Base styles already mobile-first
--------------------------------------------------------------*/
@media (max-width: 767px) {

    /* Ensure touch-friendly interactions */
    .btn,
    .search-input,
    .map-control-btn,
    .mobile-menu-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Stack footer on mobile */
    .footer-container {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .footer-menu {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .footer-copyright {
        text-align: center;
    }

    /* Adjust map controls for mobile */
    .map-controls {
        bottom: var(--spacing-md);
        right: var(--spacing-sm);
    }
}

/*--------------------------------------------------------------
2.0 Tablet (768px - 1023px)
--------------------------------------------------------------*/
@media (min-width: 768px) {

    /* Show header navigation */
    .header-nav {
        display: block;
    }

    /* Hide mobile menu toggle */
    .mobile-menu-toggle {
        display: none;
    }

    /* Show favorites toggle */
    .favorites-toggle {
        display: block;
    }

    /* Adjust toolbar layout */
    .toolbar-container {
        gap: var(--spacing-lg);
    }

    .search-bar {
        max-width: 400px;
    }

    /* Footer adjustments */
    .footer-container {
        padding: 0 var(--spacing-lg);
    }
}

/*--------------------------------------------------------------
3.0 Desktop (1024px+)
--------------------------------------------------------------*/
@media (min-width: 1024px) {

    /* Show header actions */
    .header-actions {
        display: flex;
        gap: var(--spacing-md);
    }

    /* Expand search bar */
    .search-bar {
        max-width: 500px;
    }

    /* Add hover states for desktop */
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .primary-menu a {
        position: relative;
    }

    .primary-menu a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-primary);
        transition: width var(--transition-base);
    }

    .primary-menu a:hover::after {
        width: 100%;
    }

    /* Larger map controls */
    .map-controls {
        bottom: var(--spacing-xl);
        right: var(--spacing-lg);
    }

    .map-control-btn {
        width: 48px;
        height: 48px;
    }

    /* Popup adjustments */
    .maplibregl-popup-content {
        min-width: 320px;
    }
}

/*--------------------------------------------------------------
Extra Large Screens (1440px+)
--------------------------------------------------------------*/
@media (min-width: 1440px) {

    .header-container,
    .toolbar-container,
    .footer-container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
}