/**
 * Accessibility & Responsive Improvements - Sprint 7
 * Mercana E-commerce Platform
 *
 * Mejoras de accesibilidad, touch targets y responsive final.
 */

/* =========================================
   FOCUS STATES (ACCESIBILIDAD)
   ========================================= */

/* Focus visible para navegación por teclado */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remover outline por defecto pero mantener focus-visible */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Focus específico para botones primarios */
.btn-mercana-primary:focus-visible,
.btn-mercana-secondary:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Focus en inputs de formulario */
.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Focus en cards (cuando son clickeables) */
.card-mercana-product:focus-visible,
.card-mercana-store:focus-visible,
a.related-product-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    z-index: 10000;
    text-decoration: none;
    font-weight: 500;
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 1rem;
}

/* =========================================
   TOUCH TARGETS (MÍNIMO 44x44px)
   ========================================= */

/* Botones con tamaño mínimo para touch */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Quantity controls - touch friendly */
.quantity-btn {
    min-width: 44px;
    min-height: 44px;
}

.quantity-input {
    min-height: 44px;
    text-align: center;
}

/* Cart remove button */
.cart-item-actions button,
.cart-item-actions a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Filter chips touch targets */
.filter-chip,
.catalog-filter-chip {
    min-height: 44px;
    padding: 0.5rem 1rem;
}

/* Mobile navigation links */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        min-height: 44px;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
    }
}

/* Breadcrumb links */
.breadcrumb-item a {
    padding: 0.25rem 0;
    display: inline-block;
}

/* Social media buttons */
.social-btn,
.btn-social,
.store-hero-social-btn {
    min-width: 44px;
    min-height: 44px;
}

/* Variation selector radio buttons */
.variation-option {
    min-height: 44px;
    padding: 0.75rem 1rem;
}

/* =========================================
   RESPONSIVE SPACING IMPROVEMENTS
   ========================================= */

/* Mobile-first padding adjustments */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Reduce vertical spacing on mobile */
    .py-main {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Product grid tighter on mobile */
    .catalog-grid,
    .products-grid {
        gap: 0.75rem;
    }

    /* Card padding on mobile */
    .card-mercana-product-content {
        padding: 0.75rem;
    }

    /* Hero sections smaller on mobile */
    .store-hero-banner {
        min-height: 200px;
        padding: 1.5rem 1rem;
    }

    /* Breadcrumbs smaller on mobile */
    .breadcrumb {
        font-size: var(--text-sm);
    }

    /* Buttons full width on very small screens */
    .btn-mercana-primary,
    .btn-mercana-secondary {
        width: 100%;
    }

    /* Stack CTA buttons vertically */
    .product-cta-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .product-cta-buttons > * {
        width: 100%;
    }

    /* Cart actions vertical on mobile */
    .cart-actions-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Empty state illustrations smaller */
    .empty-state-illustration img {
        max-width: 160px !important;
    }

    /* Filter chips scrollable */
    .catalog-filter-chips {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }

    /* Hide less important text on mobile */
    .hide-on-mobile {
        display: none !important;
    }
}

/* Tablet adjustments */
@media (min-width: 576px) and (max-width: 991.98px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Two column grid on tablet */
    .catalog-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Tablet CTA buttons */
    .product-cta-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .product-cta-buttons > * {
        flex: 1 1 45%;
    }
}

/* Desktop enhancements */
@media (min-width: 992px) {
    /* Larger hover effects on desktop */
    .card-mercana-product:hover,
    .card-mercana-store:hover {
        transform: translateY(-6px);
    }

    /* Better card animations */
    .catalog-product-card {
        transition: transform var(--transition-normal),
                    box-shadow var(--transition-normal);
    }

    .catalog-product-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }
}

/* =========================================
   COLOR CONTRAST IMPROVEMENTS
   ========================================= */

/* Ensure text contrast meets WCAG AA (4.5:1) */
.text-muted {
    color: var(--color-gray-600) !important; /* Darker than default for better contrast */
}

/* Badge contrast improvements */
.badge {
    font-weight: 600;
}

.badge.bg-secondary {
    background-color: var(--color-gray-600) !important;
}

/* Link contrast in footers */
.footer-plataforma a {
    color: rgba(255, 255, 255, 0.9);
}

.footer-plataforma a:hover {
    color: white;
}

/* Price text contrast */
.product-price,
.card-mercana-product-price {
    color: var(--color-gray-900);
    font-weight: 700;
}

/* Stock indicators with better contrast */
.stock-indicator.low-stock {
    color: #b45309; /* Darker amber for better contrast */
}

.stock-indicator.out-of-stock {
    color: #b91c1c; /* Darker red for better contrast */
}

/* =========================================
   SCREEN READER UTILITIES
   ========================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

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

@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;
    }

    .hover-lift:hover,
    .hover-scale:hover,
    .card-mercana-product:hover,
    .card-mercana-store:hover {
        transform: none;
    }
}

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

@media (prefers-contrast: high) {
    :root {
        --color-primary: #4338ca; /* Darker primary */
        --color-gray-500: #374151; /* Darker gray for text */
    }

    .btn-mercana-primary,
    .btn-mercana-secondary {
        border: 2px solid currentColor;
    }

    .card-mercana,
    .card-mercana-product,
    .card-mercana-store {
        border: 2px solid var(--color-gray-300);
    }

    input,
    select,
    textarea {
        border: 2px solid var(--color-gray-400);
    }
}

/* =========================================
   DARK MODE PREPARATION (Future)
   ========================================= */

@media (prefers-color-scheme: dark) {
    /* Placeholder for future dark mode */
    /* Currently disabled - uncomment to enable */
    /*
    :root {
        --color-gray-50: #0f172a;
        --color-gray-100: #1e293b;
        --color-gray-200: #334155;
        --color-gray-800: #f1f5f9;
        --color-gray-900: #f8fafc;
    }
    */
}

/* =========================================
   FORM ACCESSIBILITY
   ========================================= */

/* Required field indicator */
label.required::after {
    content: " *";
    color: var(--color-error);
    font-weight: bold;
}

/* Error messages styling */
.invalid-feedback {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-top: 0.25rem;
}

/* Valid state */
.form-control.is-valid {
    border-color: var(--color-success);
}

/* Invalid state */
.form-control.is-invalid {
    border-color: var(--color-error);
}

/* Disabled state with better visibility */
.form-control:disabled,
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* =========================================
   IMAGE LOADING STATES
   ========================================= */

/* Image alt text fallback styling */
img {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-align: center;
}

/* Broken image placeholder */
img::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-gray-100);
}

img::after {
    content: attr(alt);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    padding: 0.5rem;
}

/* =========================================
   PRINT STYLES
   ========================================= */

@media print {
    .navbar,
    .footer-plataforma,
    .scroll-to-top,
    .whatsapp-float,
    .toast-container-mercana,
    .btn-add-to-cart,
    .filter-chips,
    .catalog-toolbar {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: black;
        background: white;
    }

    a {
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
}