/**
 * Hello Middleton - Responsive Breakpoints
 * Progressive enhancement from mobile-first base styles
 *
 * Breakpoint System:
 * - Base: < 480px (small phones) - no media query needed
 * - sm: 480px+ (large phones)
 * - md: 768px+ (tablets) - primary tablet breakpoint
 * - lg: 1024px+ (laptops)
 * - xl: 1280px+ (desktops)
 *
 * @version 2.2.0
 * @requires tokens.css
 */

/* =========================================================================
   SMALL PHONES (480px+)
   Slightly larger screens, still single column but more breathing room
   ========================================================================= */

@media (min-width: 480px) {
    /* Spacing adjustments */
    .site-content,
    .content-area,
    main {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    /* Typography scale up */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    /* Two-column card grid where appropriate */
    .hm-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Weather horizontal layout */
    .weather-bar-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Section headers inline */
    .hm-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Quick actions can fit 4 columns */
    .hm-quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Tabs can show labels */
    .unh-tab-label,
    .wnh-tab-label {
        display: inline;
    }
}

/* =========================================================================
   LANDSCAPE PHONE OPTIMIZATIONS
   ========================================================================= */

@media (max-width: 900px) and (orientation: landscape) {
    /* Compact header */
    .site-header,
    #masthead {
        padding: var(--space-1-5) var(--space-3);
    }

    /* Compact bottom nav */
    .mobile-bottom-nav {
        padding: var(--space-1-5) var(--space-3);
        height: 48px;
    }

    /* Body padding adjustment */
    body {
        padding-bottom: 60px;
    }

    /* Modals don't take full height */
    .modal,
    .popup {
        max-height: 85vh;
    }

    /* News grids can be 2 columns */
    .unh-grid,
    .wnh-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================================
   POINTER/TOUCH MEDIA QUERIES
   Device-specific sizing based on input method
   ========================================================================= */

/* Coarse pointer = touch device */
@media (pointer: coarse) {
    /* Ensure all interactive elements meet 48px touch target */
    button,
    a.button,
    .btn,
    input[type="submit"],
    .hm-btn {
        min-height: 48px;
    }

    /* Larger tap targets for links in content */
    .entry-content a,
    .post-content a {
        display: inline-block;
        padding: var(--space-0-5) 0;
    }
}

/* Fine pointer = mouse/trackpad */
@media (pointer: fine) {
    /* Can use slightly smaller targets */
    button,
    a.button,
    .btn {
        min-height: 40px;
    }
}

/* Hover capable devices */
@media (hover: hover) {
    /* Enable hover effects */
    .hm-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .mobile-nav-item:hover {
        color: var(--hm-primary);
        background: var(--hm-bg-subtle);
    }
}

/* Touch-only devices (no hover) */
@media (hover: none) {
    /* Disable hover transforms to prevent stuck states */
    .hm-card:hover {
        transform: none;
    }
}

/* =========================================================================
   REDUCED MOTION - Accessibility
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }

    /* Keep essential state changes instant but visible */
    .mobile-menu-sheet {
        transition: none;
    }

    .mobile-menu-backdrop {
        transition: none;
    }
}

/* =========================================================================
   HIGH CONTRAST MODE
   ========================================================================= */

@media (prefers-contrast: more) {
    :root {
        --hm-border: var(--hm-neutral-700);
        --hm-text-muted: var(--hm-neutral-600);
    }

    button,
    .btn,
    input,
    select,
    textarea {
        border-width: 2px;
    }
}

/* =========================================================================
   SAFE AREAS - iOS Notch & Home Indicator
   ========================================================================= */

@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    }

    body {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    }

    .modal,
    .popup {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Full-width elements need side safe areas */
    .site-header,
    .site-footer {
        padding-left: max(var(--space-3), env(safe-area-inset-left));
        padding-right: max(var(--space-3), env(safe-area-inset-right));
    }
}