/**
 * Accessibility Utilities
 * 
 * A11Y improvements for screen readers and keyboard navigation
 * Also helps with SEO by improving semantic structure
 */

/* ================================
   SKIP TO CONTENT LINK
   ================================ */

/**
 * Skip to main content link
 * - Hidden by default
 * - Visible on keyboard focus (Tab)
 * - Helps keyboard users skip navigation
 * - Improves SEO by highlighting main content
 */
.skip-to-main-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--primary-600);
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-2xl);
    transition: top var(--transition-duration-300) var(--transition-timing-function-out);
}

.skip-to-main-content:focus {
    top: var(--spacing-5);
}

.skip-to-main-content:hover {
    background: var(--primary-700);
    color: #ffffff;
    text-decoration: none;
}

/* ================================
   VISUALLY HIDDEN
   ================================ */

/**
 * Visually hidden but accessible to screen readers
 * Use for SEO-friendly labels
 */
.visually-hidden {
    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;
}

/**
 * Visually hidden but becomes visible on focus
 * Perfect for skip links
 */
.visually-hidden-focusable:not(:focus):not(:active) {
    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;
}

/* ================================
   FOCUS VISIBLE STYLES
   ================================ */

/**
 * Improved focus indicators for keyboard navigation
 * Helps SEO by showing clear navigation structure
 */
:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* Remove outline for mouse users (not keyboard) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

/* ================================
   REDUCED MOTION
   ================================ */

/**
 * Respect user's motion preferences (accessibility + performance)
 * Also helps with SEO by preventing motion sickness
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================
   HIGH CONTRAST MODE
   ================================ */

/**
 * Improve readability in high contrast mode
 * Helps with SEO by ensuring text is always readable
 */
@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-bg-primary: #ffffff;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ================================
   SCREEN READER ONLY
   ================================ */

/**
 * Content visible only to screen readers
 * Great for SEO as screen readers = search engine crawlers
 */
.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;
}

.sr-only-focusable:not(:focus):not(:active) {
    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;
}

/* ================================
   ARIA LIVE REGIONS
   ================================ */

/**
 * Polite live region for non-intrusive announcements
 * Helps with SEO by marking dynamic content
 */
[aria-live="polite"] {
    position: relative;
}

[aria-live="assertive"] {
    position: relative;
}

/* ================================
   KEYBOARD NAVIGATION HELPERS
   ================================ */

/**
 * Show focus for keyboard users
 * Hide focus for mouse users
 * Improves SEO by showing clear interactive elements
 */
.keyboard-focused {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

/* Skip links container */
.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

/* ================================
   RESPONSIVE TEXT FOR A11Y
   ================================ */

/**
 * Ensure minimum text sizes for readability
 * Google considers this for SEO (mobile-friendly)
 */
@media (max-width: 767px) {
    body {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevent zoom on focus */
    }
}

/* ================================
   LANDMARK ROLES (SEO Helper)
   ================================ */

/**
 * Style for ARIA landmarks
 * Helps search engines understand page structure
 */
[role="banner"] {
    /* Header */
}

[role="navigation"] {
    /* Navigation */
}

[role="main"] {
    /* Main content */
}

[role="complementary"] {
    /* Sidebar, related content */
}

[role="contentinfo"] {
    /* Footer */
}

[role="search"] {
    /* Search form */
}

/* ================================
   TOUCH TARGET SIZES
   ================================ */

/**
 * Ensure touch targets are large enough (A11Y + SEO)
 * Google Mobile-Friendly Test checks this
 */
@media (hover: none) and (pointer: coarse) {
    /* Mobile devices */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    label {
        min-height: 48px; /* Google's guideline (upgraded from 44px) */
        min-width: 48px;
        padding: var(--spacing-3) var(--spacing-4);
    }
    
    /* Ensure all interactive elements meet 48x48px minimum */
    .btn,
    .nav-link,
    .social-link,
    .card-link {
        min-height: 48px;
        min-width: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}