﻿/**
 * ACCESSIBILITY & MOTION PREFERENCES
 * ===================================
 * 
 * Accessibility improvements and motion preference support
 * Ensures the design works for all users regardless of abilities
 */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .page-header-enhanced,
    .title-accent-circle,
    .summary-badge-enhanced,
    .header-action-btn,
    .bottom-actions-content,
    .status-toast,
    .card-link,
    .card-button,
    .profile-card,
    .bookmark-link,
    .quick-action,
    .quick-action-icon,
    .section-number {
        transition: none;
    }

        .page-header-enhanced:hover,
        .summary-badge-enhanced:hover,
        .header-action-btn:hover,
        .bottom-actions-content:hover,
        .profile-card:hover,
        .bookmark-link:hover,
        .quick-action:hover,
        .card-link:hover,
        .card-button:hover {
            transform: none;
        }

    .carousel-slide {
        transition: opacity 0.2s ease;
    }

    .carousel-image,
    .carousel-nav,
    .carousel-caption {
        transition: none;
    }

    .carousel-slide:hover .carousel-image {
        transform: none;
    }

    .carousel-nav:hover {
        transform: none;
    }

    .book-cover {
        transition: box-shadow 0.2s ease;
    }

        .book-cover:hover {
            transform: none;
        }

    .book-lightbox-close,
    .book-lightbox-nav,
    .lightbox-nav,
    .lightbox-close {
        transition: background-color 0.2s ease;
    }

        .book-lightbox-close:hover,
        .book-lightbox-nav:hover,
        .lightbox-nav:hover,
        .lightbox-close:hover {
            transform: none;
        }

        .book-lightbox-nav:hover {
            transform: translateY(-50%);
        }

    .audio-spinner {
        animation: none;
    }

    .audio-close-btn:hover,
    .audio-action-btn:hover {
        transform: none;
    }

    .header-action-btn.processing {
        animation: none;
    }

    .form-loading::after {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .page-header-enhanced,
    .title-accent-circle {
        border-width: 3px;
        box-shadow: none;
    }

    .summary-badge-enhanced {
        border-width: 3px;
        box-shadow: none;
    }

    .top-nav {
        background: rgba(0, 0, 0, 0.95);
        border-bottom: 2px solid var(--primary);
    }

    .top-nav-link {
        border: 1px solid transparent;
    }

        .top-nav-link:hover {
            border-color: var(--primary);
            background: transparent;
        }

    .top-nav-logout:hover {
        border-color: #ef4444;
        background: transparent;
    }

    .header-action-btn {
        border-width: 3px;
        background: white;
    }

        .header-action-btn:hover {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
        }

    .bottom-actions-content {
        background: white;
        border: 2px solid var(--primary);
    }

    .status-toast {
        background: white;
        border: 2px solid var(--primary);
    }

    .section-number {
        border-width: 4px;
        box-shadow: none;
    }

    .section-number-nature {
        background: #2e7d32;
        border-color: white;
    }

    .section-number-sky {
        background: #1565c0;
        border-color: white;
    }

    .section-number-mystical {
        background: #512da8;
        border-color: white;
    }

    .section-number-sunset {
        background: #d84315;
        border-color: white;
    }

    .profile-card {
        border: 2px solid var(--primary);
        background: white;
    }

    .form-input[readonly],
    .form-input[disabled] {
        background: #f0f0f0;
        border: 2px solid #666;
    }

    .bookmark-link,
    .quick-action {
        border: 1px solid #666;
    }

        .bookmark-link:hover,
        .quick-action:hover {
            border: 2px solid var(--primary);
        }

    .book-lightbox-nav,
    .book-lightbox-close,
    .lightbox-nav,
    .lightbox-close {
        border-width: 3px;
        background: rgba(0,0,0,0.8);
    }

    .book-lightbox-caption,
    .lightbox-caption {
        background: rgba(0,0,0,0.95);
        border: 2px solid white;
    }

    .book-lightbox-counter,
    .lightbox-counter {
        background: rgba(0,0,0,0.9);
        border: 1px solid white;
    }

    .audio-close-btn,
    .audio-action-btn {
        border: 2px solid white;
    }

    .audio-select {
        border: 2px solid white;
    }
}

/* Enhanced text readability */
@media (max-width: 768px) {
    .book-lightbox-caption {
        background: rgba(0,0,0,0.92);
        backdrop-filter: blur(8px);
    }

        .book-lightbox-caption h4,
        .book-lightbox-caption p {
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
}

@media (max-width: 768px) and (prefers-contrast: high) {
    .book-lightbox-caption {
        background: black;
        border: 3px solid white;
    }

        .book-lightbox-caption h4,
        .book-lightbox-caption p {
            color: white;
            text-shadow: none;
        }
}

/* Focus styles for keyboard navigation */
.carousel-nav:focus,
.carousel-dot:focus,
.lightbox-nav:focus,
.lightbox-close:focus,
.book-cover:focus,
.book-lightbox-close:focus,
.book-lightbox-nav:focus,
.bookmark-link:focus,
.quick-action:focus,
.header-action-btn:focus-visible,
.nav-section .header-action-btn:focus,
.nav-section .btn-outline:focus,
.nav-section .btn-primary:focus {
    outline: 3px solid rgba(var(--primary-rgb), 0.5);
    outline-offset: 2px;
}

/* Enhanced touch targets for mobile */
@media (max-width: 768px) {
    .nav-section .header-action-btn,
    .book-cover,
    .header-action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-section .btn-outline,
    .nav-section .btn-primary {
        min-height: 44px;
    }
}

/* Loading state consistency */
.nav-section .header-action-btn.processing {
    pointer-events: none;
}

@media (max-width: 768px) {
    .nav-section .header-action-btn.processing {
        width: 3rem;
        height: 3rem;
    }
}

@media (max-width: 480px) {
    .nav-section .header-action-btn.processing {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (max-width: 375px) {
    .nav-section .header-action-btn.processing {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Screen reader support */
.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;
}

/* Focus within support for panels */
.audio-panel:focus-within {
    transform: translateY(0);
}

/* Ensure keyboard accessibility for book covers */
.book-cover {
    -webkit-tap-highlight-color: transparent;
}

    .book-cover:focus {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

/* Improved color contrast for better readability */
@media (prefers-contrast: more) {
    .text-themed,
    .heading-secondary,
    .section-label {
        color: var(--primary-dark);
    }

    .page-subtitle,
    .section-subtitle-enhanced {
        color: var(--primary-dark);
    }
}
