/**
 * AFA SEO Optimizer - Frontend Styles
 * These styles address HubSpot recommendations for mobile experience and accessibility
 */

/* Mobile Touch Target Optimization - MAKE_PAGE_ELEMENTS_EASILY_CLICKABLE */
@media (max-width: 768px) {
    /* Ensure all interactive elements have minimum 48x48px touch targets */
    a, button, input[type="submit"], input[type="button"], 
    input[type="reset"], .wp-block-button__link {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Specific fixes for small tap targets identified in HubSpot report */
    a[href*="raft.ai"],
    a[href*="smc3.com"],
    a[href*="airpartner.com"],
    a[href*="aircanada.com"],
    a[href*="alaskacargo.com"],
    a[href*="aacargo.com"],
    a[href*="amerijet.com"] {
        min-height: 48px;
        min-width: 48px;
        padding: 12px;
        display: inline-block;
        line-height: normal;
    }
    
    /* Add spacing between adjacent touch targets */
    a + a, button + button, 
    .wp-block-button + .wp-block-button {
        margin-left: 8px;
    }
}

/* Viewport Content Width Fix - RESTRICT_CONTENT_WIDTH_TO_VIEWPORT */
@media (max-width: 768px) {
    /* Prevent content from overflowing viewport */
    body, #page, .site {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Prevent tables from overflowing */
    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
    
    /* Handle wide containers */
    .container, .wp-block-group, .entry-content {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Fix for embedded content */
    iframe, embed, object {
        max-width: 100%;
    }
}

/* Image Aspect Ratio Fix - USE_NATURAL_IMAGE_ASPECT_RATIO */
img {
    height: auto;
    max-width: 100%;
}

img[width][height] {
    height: auto;
}

/* Accessibility improvements for fixed anchors */
a[role="button"] {
    cursor: pointer;
}

a[role="button"]:focus,
a[role="button"]:hover {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Loading state for lazy images */
img[loading="lazy"] {
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"]:not([src]) {
    opacity: 0;
}

/* Performance: Reduce layout shifts */
img, video, iframe {
    display: block;
}

/* Better focus indicators for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}