/**
 * Comprehensive Mobile Fixes
 * Addresses all mobile UI/UX issues identified
 * Version: 1.0.0
 */

/* =================================================
   1. MOBILE MENU BUTTON FIX
   ================================================= */
@media (max-width: 768px) {
    /* Fix the dark green rectangle - ensure hamburger icon shows */
    .wp-block-navigation__responsive-container-open {
        background-color: transparent !important;
        border: 2px solid #2d5f3f !important;
        color: #2d5f3f !important;
        padding: 10px !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Hide any default SVG and text */
    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-open span {
        display: none !important;
    }

    /* Add hamburger icon */
    .wp-block-navigation__responsive-container-open::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 2px;
        background-color: #2d5f3f;
        box-shadow: 0 8px 0 0 #2d5f3f, 0 16px 0 0 #2d5f3f;
        transition: all 0.3s ease;
    }

    /* Hover state */
    .wp-block-navigation__responsive-container-open:hover {
        background-color: #2d5f3f !important;
        border-color: #2d5f3f !important;
    }

    .wp-block-navigation__responsive-container-open:hover::after {
        background-color: #ffffff;
        box-shadow: 0 8px 0 0 #ffffff, 0 16px 0 0 #ffffff;
    }
}

/* =================================================
   2. HERO IMAGE MOBILE FIX
   ================================================= */
@media (max-width: 768px) {
    /* Ensure hero images display on mobile */
    .hero-section img,
    .wp-block-cover img,
    .hero-image-wrapper img,
    [class*="hero"] img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        min-height: 200px !important;
    }

    /* Fix any lazy loading issues on mobile */
    .hero-section img[loading="lazy"] {
        loading: eager !important;
    }

    /* Ensure featured image sections show on mobile */
    .featured-trails-section img,
    .trail-image img,
    .trek-card-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =================================================
   3. VIEW ALL TRAILS BUTTON FIX
   ================================================= */
@media (max-width: 768px) {
    /* Fix button extending too far right */
    .view-all-trails-button,
    .hero-cta a,
    .wp-block-button__link,
    a.wp-element-button {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 12px 24px !important;
        margin: 10px auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Center align button containers */
    .hero-cta,
    .button-container,
    .wp-block-button,
    .wp-block-buttons {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* Specific fix for View All Trails button */
    a[href*="/treks"],
    a[href*="post_type=trek"] {
        display: inline-block !important;
        max-width: calc(100% - 30px) !important;
        margin: 10px 15px !important;
    }
}

/* =================================================
   4. FILTER BUTTONS & FORM ELEMENTS
   ================================================= */
@media (max-width: 768px) {
    /* Fix filter container spacing */
    .trek-filters-container,
    .filter-form,
    .active-filters {
        padding: 15px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix select dropdowns */
    .trek-filter-group select,
    .filter-select,
    select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
    }

    /* Fix filter buttons */
    .trek-filter-button,
    .filter-button,
    button[type="submit"] {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        margin-bottom: 15px !important;
        border-radius: 8px !important;
        border: none !important;
        background-color: #2d5f3f !important;
        color: white !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Reset button styling */
    .trek-filter-reset,
    .reset-button,
    button[type="reset"] {
        width: 100% !important;
        padding: 14px 20px !important;
        background-color: #f0f0f0 !important;
        color: #333 !important;
        border: 2px solid #ddd !important;
    }

    /* Active filter tags */
    .active-filter-tag {
        display: inline-block !important;
        padding: 6px 12px !important;
        margin: 5px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        background-color: #e8f5e9 !important;
        color: #2d5f3f !important;
        border: 1px solid #2d5f3f !important;
    }

    /* Search input field */
    .trek-search-input,
    input[type="search"],
    input[type="text"] {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        -webkit-appearance: none !important;
    }
}

/* =================================================
   5. GENERAL MOBILE IMPROVEMENTS
   ================================================= */
@media (max-width: 768px) {
    /* Improve overall spacing */
    .site-main,
    .entry-content {
        padding: 0 15px !important;
    }

    /* Fix trek cards on mobile */
    .trek-card,
    .trail-card {
        margin-bottom: 20px !important;
        width: 100% !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Improve grid layouts */
    .trek-grid,
    .trails-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }

    /* Fix text overflow */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Improve touch targets */
    a, button, input, select, textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Fix horizontal scrolling issues */
    body {
        overflow-x: hidden !important;
    }

    * {
        max-width: 100% !important;
    }
}

/* =================================================
   6. SPECIFIC TREK FILTER PAGE FIXES
   ================================================= */
@media (max-width: 768px) {
    /* Fix the filter labels */
    .trek-filter-label {
        display: block !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        color: #2d5f3f !important;
        font-size: 16px !important;
    }

    /* Orange highlight for active difficulty */
    .trek-filter-group.active-filter select[name="difficulty"] {
        border-color: #ff6f00 !important;
        box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.2) !important;
    }

    /* Fix spacing between filter groups */
    .trek-filter-group {
        margin-bottom: 20px !important;
    }

    /* Improve results count display */
    .trek-results-count {
        text-align: center !important;
        padding: 15px !important;
        background-color: #f5f5f5 !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        font-weight: 600 !important;
    }
}

/* =================================================
   7. iOS SPECIFIC FIXES
   ================================================= */
@supports (-webkit-touch-callout: none) {
    /* iOS only styles */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom */
        -webkit-text-size-adjust: 100%;
    }
    
    /* Fix iOS button appearance */
    button, 
    input[type="submit"], 
    input[type="button"] {
        -webkit-appearance: none !important;
        appearance: none !important;
    }
}

/* =================================================
   8. LANDSCAPE MOBILE FIXES
   ================================================= */
@media (max-width: 768px) and (orientation: landscape) {
    /* Adjust heights for landscape */
    .hero-section {
        min-height: 50vh !important;
    }
    
    /* Reduce padding in landscape */
    .trek-filters-container {
        padding: 10px !important;
    }
}