/* Touch-Friendly Interface CSS - Minimum 44px Touch Targets */
/* Ensures all interactive elements meet WCAG 2.1 AA touch target requirements */

/* ==========================================================================
   BUTTON TOUCH TARGETS - Minimum 44px Height
   ========================================================================== */

/* Primary buttons - Ensure 44px minimum */
.btn-primary,
.btn-secondary,
.btn-outline {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    
    /* Enhanced touch feedback */
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(151, 107, 221, 0.3) !important;
    touch-action: manipulation !important;
}

/* Large buttons for better touch experience */
.btn-large {
    min-height: 56px !important;
    padding: 16px 32px !important;
    font-size: 1.2rem !important;
}

/* Extra large buttons for primary CTAs */
.btn-xl {
    min-height: 64px !important;
    padding: 20px 40px !important;
    font-size: 1.3rem !important;
}

/* Small buttons - still meet 44px minimum */
.btn-small,
.btn-outline-small,
.btn-primary-small {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
}

/* ==========================================================================
   NAVIGATION TOUCH TARGETS
   ========================================================================== */

/* Navigation links - 44px minimum touch target */
nav a,
nav button,
.nav-link {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
    touch-action: manipulation !important;
}

/* Mobile hamburger menu - larger touch target */
.mobile-menu-toggle {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 8px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

/* Mobile quick access button */
.mobile-quick-btn {
    min-height: 56px !important;
    min-width: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    -webkit-tap-highlight-color: rgba(151, 107, 221, 0.3) !important;
}

/* ==========================================================================
   FORM ELEMENTS TOUCH TARGETS
   ========================================================================== */

/* Input fields - comfortable touch targets */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    min-height: 44px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    -webkit-tap-highlight-color: transparent !important;
}

/* Checkbox and radio buttons - larger touch targets */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 12px !important; /* Creates 44px total touch area */
    cursor: pointer !important;
}

/* Labels for form elements - clickable touch targets */
label {
    cursor: pointer !important;
    padding: 8px 4px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Submit buttons in forms */
form input[type="submit"],
form button[type="submit"] {
    min-height: 48px !important;
    min-width: 120px !important;
    padding: 14px 28px !important;
    cursor: pointer !important;
}

/* ==========================================================================
   INTERACTIVE ELEMENTS
   ========================================================================== */

/* Links - ensure adequate touch targets */
a {
    min-height: 24px !important;
    display: inline-block !important;
    padding: 4px 2px !important;
    -webkit-tap-highlight-color: rgba(151, 107, 221, 0.2) !important;
}

/* Links in content - larger touch targets */
.content a,
.post-content a,
article a {
    padding: 6px 4px !important;
    margin: 2px 0 !important;
    border-radius: 4px !important;
}

/* Breadcrumb links - touch friendly spacing */
.breadcrumb a {
    min-height: 32px !important;
    padding: 8px 12px !important;
    margin: 0 4px !important;
}

/* Card click areas - full card clickable */
.card-clickable,
.testimonial-card,
.product-card {
    cursor: pointer !important;
    min-height: 120px !important;
    padding: 16px !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    touch-action: manipulation !important;
}

/* ==========================================================================
   SOCIAL MEDIA & SHARING BUTTONS
   ========================================================================== */

/* Social sharing buttons */
.social-share-btn,
.social-icon {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px !important;
    cursor: pointer !important;
}

/* Social media links in footer */
.social-links a {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 10px !important;
    margin: 4px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   ACCORDION & DROPDOWN TOUCH TARGETS
   ========================================================================== */

/* Accordion headers - clickable touch targets */
.accordion-header,
.faq-question,
.expandable-header {
    min-height: 56px !important;
    padding: 16px 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    touch-action: manipulation !important;
}

/* Dropdown toggle buttons */
.dropdown-toggle,
.menu-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   MOBILE-SPECIFIC ENHANCEMENTS
   ========================================================================== */

/* Mobile breakpoint - enhanced touch targets */
@media (max-width: 767px) {
    /* Larger buttons on mobile */
    .btn-primary,
    .btn-secondary {
        min-height: 48px !important;
        padding: 14px 28px !important;
        font-size: 1.05rem !important;
    }
    
    /* Navigation items - larger on mobile */
    nav a {
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 1rem !important;
    }
    
    /* Form elements - larger for easier tapping */
    input[type="text"],
    input[type="email"],
    textarea {
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
    }
    
    /* Card elements - easier to tap */
    .card-clickable,
    .testimonial-card {
        min-height: 140px !important;
        padding: 20px !important;
    }
    
    /* Social icons - larger on mobile */
    .social-share-btn,
    .social-icon {
        min-height: 48px !important;
        min-width: 48px !important;
        margin: 6px !important;
    }
}

/* ==========================================================================
   TOUCH FEEDBACK ENHANCEMENTS
   ========================================================================== */

/* Enhanced touch feedback for all interactive elements */
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"] {
    /* Smooth touch feedback */
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: rgba(151, 107, 221, 0.3) !important;
    touch-action: manipulation !important;
}

/* Active state feedback */
button:active,
.btn:active,
[role="button"]:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

/* Focus states for keyboard navigation */
button:focus,
.btn:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #976bdd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(151, 107, 221, 0.2) !important;
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Screen reader only text for better touch target context */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip links for keyboard navigation */
.skip-link {
    position: absolute !important;
    top: -40px !important;
    left: 6px !important;
    background: #976bdd !important;
    color: white !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    min-height: 44px !important;
    z-index: 10000 !important;
}

.skip-link:focus {
    top: 6px !important;
}

/* ==========================================================================
   SPACING FOR TOUCH TARGETS
   ========================================================================== */

/* Ensure adequate spacing between touch targets */
.touch-spacing button + button,
.touch-spacing .btn + .btn,
.touch-spacing a + a {
    margin-left: 8px !important;
}

.touch-spacing-vertical button,
.touch-spacing-vertical .btn,
.touch-spacing-vertical a {
    margin-bottom: 8px !important;
}

/* Grid of touch targets */
.touch-grid {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Reduce paint and layout thrashing on touch devices */
*,
*::before,
*::after {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* Hardware acceleration for smooth interactions */
.btn,
button,
[role="button"] {
    transform: translateZ(0) !important;
    will-change: transform !important;
}