/* Mobile Optimizations */

/* Remove iOS default styling */
input, select, textarea, button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
}

/* Hide mobile menu button on large screens */
@media (min-width: 1024px) {
    #menu-toggle {
        display: none !important;
    }
}

/* Improve touch feedback */
a, button, .btn, [role="button"], input[type="submit"], input[type="button"], input[type="reset"] {
    -webkit-tap-highlight-color: rgba(211, 84, 0, 0.2); /* Autumn color with opacity */
    touch-action: manipulation;
}

/* Active state for touch devices */
@media (hover: none) {
    a:active, button:active, .btn:active, [role="button"]:active,
    input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {
        transform: scale(0.98);
        opacity: 0.9;
        transition: transform 0.1s, opacity 0.1s;
    }

    /* Card touch feedback */
    .card:active, .blog-card:active, [class*="shadow"]:active {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        transition: transform 0.1s, box-shadow 0.1s;
    }
}

/* Ensure minimum tap target size */
.mobile-nav a, .mobile-menu a, .nav-link,
.footer-link, .social-link, .btn, button,
[role="button"], .pagination a, .tag {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Prevent iOS zoom on focus */
@media screen and (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Improve form controls for touch */
    input[type="checkbox"], input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
        margin-right: 8px;
    }

    /* Enhance focus visibility for accessibility */
    a:focus, button:focus, input:focus, select:focus, textarea:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(192, 160, 151, 0.3); /* Autumn color with lower opacity */
    }
}

/* Fix for position:fixed elements on iOS */
.fixed {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Smooth scrolling for iOS */
html {
    -webkit-overflow-scrolling: touch;
}

/* Prevent pull-to-refresh on mobile browsers */
body {
    overscroll-behavior-y: contain;
}