/**
 * Hello Middleton - Mobile Component Overrides
 * Component-specific mobile styling using modern CSS
 *
 * @version 2.2.0
 * @requires tokens.css
 */

/* =========================================================================
   HEADER - Mobile Compact
   ========================================================================= */

@layer components {
    .site-header .container,
    .site-header,
    #masthead,
    header.site-header {
        padding: var(--space-2-5) var(--space-3);
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }

    /* Site branding */
    .site-branding,
    .navbar-brand,
    .site-header .site-title {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-title {
        font-size: var(--text-lg);
    }

    .custom-logo,
    .site-logo img {
        max-height: 36px;
    }

    /* Hide tagline on mobile */
    .site-description,
    .site-header p:not(.site-title),
    .navbar-brand > p:last-child {
        display: none;
    }

    /* Header buttons - touch targets */
    .site-header nav a,
    .site-header nav button,
    #masthead nav a,
    #masthead nav button,
    .navbar-nav > li > a,
    .menu-toggle,
    .search-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2);
        border-radius: var(--radius-md);
    }

    /* Header icons */
    .site-header nav a svg,
    .site-header nav a i,
    #masthead nav svg {
        width: 20px;
        height: 20px;
    }

    /* Hide text labels in header nav */
    .site-header .navbar-nav a span,
    .site-header .login-link .nav-text,
    .site-header .register-link .nav-text,
    #masthead nav a > span:not([class*="icon"]) {
        display: none;
    }
}

/* Very small screens - hide register */
@media (max-width: 380px) {
    .site-header a[href*="register"],
    #masthead a[href*="register"] {
        display: none;
    }
}

/* =========================================================================
   QUICK ACTIONS
   Note: Quick actions have their own comprehensive responsive styles
   in components/quick-actions.css. No overrides needed here.
   ========================================================================= */

/* =========================================================================
   CARDS - Mobile Optimized
   ========================================================================= */

@layer components {
    .hm-card,
    .card,
    .rss_item,
    .widget {
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .hm-card__content,
    .card-body,
    .rss_item .rss_content,
    .widget-content {
        padding: var(--space-3);
    }

    .hm-card__title,
    .rss_item .rss_title,
    .lc-card-title {
        font-size: var(--text-base);
        line-height: var(--leading-snug);
    }

    .widget {
        margin-bottom: var(--space-4);
        padding: var(--space-4);
    }

    .widget-title {
        font-size: var(--text-lg);
        margin-bottom: var(--space-3);
    }
}

/* =========================================================================
   FORMS - Touch Optimized
   ========================================================================= */

@layer components {
    /* All inputs - prevent iOS zoom with 16px font */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        min-height: 48px;
        padding: var(--space-3) var(--space-4);
        font-size: 16px;
        border-radius: var(--radius-md);
        border: 2px solid var(--hm-border);
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--hm-primary);
        outline: none;
        box-shadow: var(--shadow-glow);
    }

    textarea {
        min-height: 100px;
    }

    /* Select dropdown arrow */
    select {
        min-height: 52px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2357534E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 40px;
    }

    label {
        font-size: var(--text-base);
        font-weight: var(--font-semibold);
        margin-bottom: var(--space-1-5);
    }
}

/* =========================================================================
   BUTTONS - Touch Targets
   ========================================================================= */

@layer components {
    button,
    .button,
    .btn,
    input[type="submit"],
    input[type="button"],
    a.button,
    a.btn,
    .wp-block-button__link,
    .hm-btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-base);
        font-weight: var(--font-semibold);
        border-radius: var(--radius-md);
        touch-action: manipulation;
    }

    .btn-sm,
    .button-small {
        min-height: 36px;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }
}

/* =========================================================================
   MODALS & OVERLAYS - Bottom Sheet Style
   ========================================================================= */

@layer components {
    .modal-backdrop,
    .popup-overlay {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .modal,
    .popup {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 90vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .modal-header,
    .popup-header {
        padding: var(--space-4) var(--space-5);
    }

    .modal-close,
    .popup-close {
        min-width: 44px;
        min-height: 44px;
        border-radius: var(--radius-full);
    }

    .modal-body,
    .popup-body {
        padding: var(--space-5);
        overflow-y: auto;
        max-height: calc(90vh - 140px);
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================================
   TYPOGRAPHY - Mobile Readability
   ========================================================================= */

@layer components {
    body,
    .site,
    #page {
        font-size: 16px;
        line-height: var(--leading-relaxed);
    }

    .entry-title,
    .page-title {
        font-size: var(--text-2xl);
        line-height: var(--leading-snug);
    }

    p, li, td, th {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
    }

    .text-muted,
    [class*="-muted"],
    small {
        color: var(--hm-text-secondary);
        font-size: var(--text-sm);
    }

    .breadcrumb,
    .breadcrumbs {
        font-size: var(--text-sm);
        padding: var(--space-2-5) 0;
    }

    /* Ensure adequate contrast for muted text */
    .lc-subtitle,
    [class*="-muted"],
    [class*="-secondary"] {
        color: var(--hm-text-secondary);
    }
}

/* =========================================================================
   WEATHER WIDGET
   ========================================================================= */

@layer components {
    .weather-bar {
        padding: var(--space-3);
    }

    .weather-bar-inner {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }

    .weather-temp {
        font-size: var(--text-2xl);
    }

    .weather-details {
        border: none;
        padding: 0;
        justify-content: center;
    }
}

@media (min-width: 480px) {
    .weather-bar-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================================
   EVENTS STRIP
   ========================================================================= */

@layer components {
    .upcoming-events-strip {
        gap: var(--space-2);
    }

    .upcoming-events-strip .event-item {
        padding: var(--space-2);
    }
}