/* Accessibility and Performance Optimizations */

/* Accessibility: Custom focus styles */
/* Use focus-visible for keyboard users, hide for mouse/touch */
*:focus:not(:focus-visible) {
  outline: none !important;
}

*:focus-visible {
  outline: 2px solid var(--color-primary, #007bff) !important;
  outline-offset: 2px !important;
}

/* Remove tap highlight on mobile (cosmetic, not accessibility) */
a, button, input, textarea, select {
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

/* Remove underline from all links */
a {
  text-decoration: none !important;
}

a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none !important;
}

/* Bootstrap button focus — use focus-visible */
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn.active:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Navigation focus — use focus-visible */
.nav a:focus:not(:focus-visible),
.navbar a:focus:not(:focus-visible),
.main-menu a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Carousel focus — use focus-visible */
.hero-slider-active *:focus:not(:focus-visible),
.product-carousel-wrapper *:focus:not(:focus-visible),
.slick-arrow:focus:not(:focus-visible),
.slick-dots button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

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

/* Touch-friendly: minimum 44px tap targets on mobile */
@media (max-width: 767.98px) {
  .slick-arrow {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
  }
  .slick-dots button {
    width: 44px !important;
    height: 44px !important;
  }
  .btn-cart, .btn-primary, .btn-lg {
    min-height: 48px;
    padding: 12px 20px !important;
  }
  .shop-categories li a {
    padding: 10px 0 !important;
    display: block;
  }
}

/* Hover effects for images — desktop only */
@media (hover: hover) {
  .img-fluid:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
  }
}

/* Hover effects for buttons — desktop only */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
  
  .btn {
    border: 2px solid currentColor !important;
  }
}

/* Reduced motion support */
@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;
  }
}

/* Screen reader only content */
.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;
}

/* Performance: Reduce layout shifts */
iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Dark mode support removed - not using dark theme */

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Loading states */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========== Responsive Mobile Fixes ========== */
/**
 * CORREÇÕES RESPONSIVAS CONSERVADORAS
 * Corrige APENAS overflow horizontal SEM espremer conteúdo
 * Mantém espaçamento e tamanhos naturais
 */

/* ========================================
   FIX 1: Prevenir overflow de imagens
   ======================================== */

/* APENAS prevenir overflow - não forçar redução */
img {
  max-width: 100%;
  height: auto;
}

/* Imagem Miele específica que estava causando overflow */
@media (max-width: 575.98px) {
  .miele-logo img,
  .announcement-content img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ========================================
   FIX 2: Off-canvas menu (menu mobile)
   ======================================== */

/* Menu mobile não deve causar overflow quando fechado */
.off-canvas-wrapper {
  max-width: 100vw;
}

.off-canvas-overlay {
  max-width: 100vw;
}

/* ========================================
   FIX 3: Product carousel
   ======================================== */

/* Carousel wrapper deve respeitar o container */
.product-carousel-wrapper {
  overflow: hidden;
}

.carousel-container {
  overflow: hidden;
}

/* ========================================
   FIX 4: Minicart
   ======================================== */

/* Minicart não deve causar overflow quando fechado */
.minicart-inner {
  max-width: 100vw;
}

/* ========================================
   FIX 5: Prevenir overflow global
   ======================================== */

/* Garantir que html e body não tenham overflow horizontal */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* Main content deve respeitar o viewport */
main {
  overflow-x: hidden;
}

/* ========================================
   FIX 6: Screen reader only elements
   ======================================== */

/* Elementos sr-only não devem causar overflow */
.sr-only {
  overflow: hidden !important;
  white-space: nowrap !important;
}