/**
 * Hello Middleton - Mobile Fixes (Jan 31, 2026)
 * MISSION: Beat GatorFinds on mobile UX
 *
 * Priority fixes:
 * 1. Touch targets minimum 44x44px
 * 2. Card padding increased
 * 3. Horizontal scroll eliminated
 *
 * @version 1.0.0
 */

/* =========================================================================
   FIX 1: TOUCH TARGETS - Minimum 44x44px
   ========================================================================= */

/* All interactive elements */
a:not(.hm-card a),
button,
input[type="submit"],
input[type="button"],
.hm-tab,
.hm-quick-action,
.hm-category-tabs button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
}

/* Card title links need special treatment */
.hm-card__title a,
.rss_item .rss_title a,
.entry-title a {
    min-height: 44px;
    padding: var(--space-2) 0;
    line-height: 1.4;
    display: inline-block;
}

/* Navigation items */
.main-navigation a,
.primary-menu a,
.mobile-bottom-nav a {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2) var(--space-3);
}

/* =========================================================================
   FIX 2: CARD PADDING - More breathing room
   ========================================================================= */

.hm-card__content,
.rss_item .rss_content,
.activity-item-content {
    padding: var(--space-5) var(--space-4); /* 20px vertical, 16px horizontal (was 12px) */
    min-height: 88px; /* Prevent tiny cards */
}

.hm-card__title {
    margin-bottom: var(--space-4); /* More space after title */
}

.hm-card__meta,
.rss_item .rss_meta {
    margin-top: var(--space-3); /* More space before meta */
}

/* =========================================================================
   FIX 3: HORIZONTAL SCROLL - Eliminate overflow
   ========================================================================= */

/* Category tabs and quick actions */
.hm-category-tabs,
.hm-quick-actions,
.news-tabs {
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Hide scrollbar */
}

.hm-category-tabs::-webkit-scrollbar,
.hm-quick-actions::-webkit-scrollbar {
    display: none; /* Hide scrollbar on WebKit */
}

.hm-tab,
.hm-quick-action {
    scroll-snap-align: start;
    flex-shrink: 0;
    max-width: calc(100vw - 48px); /* Never wider than screen minus padding */
    white-space: nowrap;
}

/* Prevent page-wide overflow */
.hm-container,
.site-content,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================================================
   FIX 4: IMPROVED TAP FEEDBACK
   ========================================================================= */

/* Better visual feedback on tap */
a:active,
button:active,
.hm-tab:active,
.hm-quick-action:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: opacity 0.1s, transform 0.1s;
}

/* Remove tap highlight color (we have custom feedback) */
* {
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================================
   FIX 5: LARGER TEXT ON SMALL SCREENS
   ========================================================================= */

@media (max-width: 375px) {
    /* Bump up base font size on very small screens */
    body {
        font-size: 16px; /* Never smaller than 16px to prevent zoom */
    }
    
    .hm-card__title {
        font-size: var(--text-lg);
    }
}

/* =========================================================================
   FIX 6: SMOOTH SCROLLING
   ========================================================================= */

html {
    scroll-behavior: smooth;
}

/* Smooth scroll on category tabs */
.hm-category-tabs,
.hm-quick-actions {
    scroll-behavior: smooth;
}

/* =========================================================================
   FIX 7: NEWS CARDS - Better spacing
   ========================================================================= */

.hm-news-hub .hm-card,
.rss_item {
    margin-bottom: var(--space-6); /* More space between cards */
}

/* Last card doesn't need bottom margin */
.hm-news-hub .hm-card:last-child,
.rss_item:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   PERFORMANCE: GPU ACCELERATION
   ========================================================================= */

.hm-card,
.hm-tab,
.hm-quick-action {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* =========================================================================
   NOTES
   ========================================================================= */

/*
 * Changes made:
 * - Touch targets: 12px → 44px minimum
 * - Card padding: 12px → 20px vertical
 * - Horizontal scroll: Fixed with max-width constraints
 * - Tap feedback: Added visual response
 * - Font size: Minimum 16px (prevents zoom)
 * - Smooth scrolling: Enabled
 * - GPU acceleration: Enabled for animations
 *
 * Expected improvements:
 * - Better tap accuracy
 * - More comfortable reading
 * - No accidental horizontal scrolling
 * - Smoother interactions
 * - Better performance on animations
 *
 * Target: Lighthouse Accessibility 100, Mobile UX perfect
 */