/**
 * AWA Modern Optimizations 2026 — Otimizações CSS Modernas (Sem Breaking Changes)
 *
 * Aplicadas: 2026-06-05
 * Status: Safe enhancements (progressive enhancement)
 *
 * 1. font-display: swap — Previne FOIT (Flash of Invisible Text)
 * 2. content-visibility — Melhora renderização de below-fold
 * 3. contain: layout — Isola componentes para limitar reflows
 * 4. scrollbar-gutter — Previne CLS quando scrollbar aparece
 * 5. prefers-reduced-data — Respeita economia de dados do usuário
 */

/* ============================================================================
   1. FONT-DISPLAY: SWAP
   ============================================================================

   Previne que o texto fique invisível enquanto a fonte carrega.
   Fallback font é exibida imediatamente, trocando para Montserrat quando pronta.

   Impacto: Texto legível desde o primeiro paint (0ms)
   Risco: Zero — fallback automático em browsers antigos
   */

/* Montserrat — Fonte principal do tema */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  font-display: swap;
}

/* ============================================================================
   2. CONTENT-VISIBILITY: AUTO
   ============================================================================

   Browser pula layout/paint/style de elementos fora da viewport.
   Aplica-se a seções below-fold (abaixo da dobra).

   Impacto: Reduz drasticamente o trabalho de renderização inicial
   Risco: Baixo — fallback é renderização normal

   NOTA: contain-intrinsic-size define um placeholder para scrollbar
   */

/* Seções da home abaixo da dobra (marcadas em top-home.phtml) */
#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
  .page-wrapper
  .awa-home-section--below-fold {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Footer (sempre below-fold) */
#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
  .page-wrapper
  .page-footer,
#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
  .page-wrapper
  .page_footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* ============================================================================
   3. CONTAIN: LAYOUT
   ============================================================================

   Isola componentes para que mudanças internas não causem reflow externo.
   Útil para cards de produto, minicart, elementos interativos.

   Impacto: Melhora performance de interações (hover, click)
   Risco: Zero — não afeta funcionalidade
   */

/* Cards de produto — hover não causa reflow em vizinhos */
.product-item-info,
.item-product,
.product-item {
  contain: layout style;
}

/* Minicart — interações isoladas */
.minicart-wrapper,
.block-minicart {
  contain: layout;
}

/* Busca — autocomplete isolado */
.block-search,
#search_mini_form {
  contain: layout;
}

/* Botões de ação — ripple effects isolados */
.action.primary,
.action.tocart,
.btn-add-to-cart {
  contain: layout style paint;
}

/* ============================================================================
   4. SCROLLBAR-GUTTER: STABLE
   ============================================================================

   Reserva espaço para scrollbar desde o início, evitando CLS quando aparece.

   Impacto: Layout estável, sem shifts quando conteúdo cresce
   Risco: Zero — apenas adiciona gutter se necessário
   */

html {
  scrollbar-gutter: stable;
}

/* Runtime fix 64ad0b: na home, Swiper/header calculam full-bleed por innerWidth.
   Reservar gutter no html encolhia o layout em 10px após o CSS diferido carregar. */
html:has(> body.cms-index-index),
html:has(> body.cms-home),
html:has(> body.cms-homepage_ayo_home5) {
  scrollbar-gutter: auto;
}

/* Mobile: sem scrollbar gutter (viewport pequeno) */
@media (max-width: 767px) {
  html {
    scrollbar-gutter: auto;
  }
}

/* ============================================================================
   5. PREFERS-REDUCED-DATA (Respeito à Economia de Dados)
   ============================================================================

   Usuários com "economia de dados" ativada no Chrome/Android
   recebem uma experiência mais leve.

   Impacto: Acessibilidade para usuários com dados limitados
   Risco: Zero — media query não suportada = comportamento normal
   */

@media (prefers-reduced-data: reduce) {
  /* Imagens lazy não críticas: ocultar */
  img[loading="lazy"]:not(.product-item-photo) {
    display: none;
  }

  /* Carrosséis below-fold: simplificar */
  .awa-carousel-section:not(:first-of-type) {
    content-visibility: hidden;
  }

  /* Animarions: desativar */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Backgrounds complexos: simplificar */
  .awa-home-section {
    background-image: none !important;
  }
}

/* ============================================================================
   6. PREFERS-REDUCED-MOTION (Acessibilidade)
   ============================================================================

   Respeita preferência de usuários com vestibular disorders.
   Já implementado em partes, consolidado aqui.
   */

@media (prefers-reduced-motion: reduce) {
  .swiper-wrapper,
  .owl-carousel .owl-stage,
  .awa-carousel__track {
    scroll-behavior: auto !important;
  }

  .awa-hero-swiper__slide,
  .banner_item {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   7. ASPECT-RATIO NATIVO (Previne CLS em Imagens)
   ============================================================================

   Garante que imagens mantenham proporção mesmo antes de carregar.
   Fallback para browsers sem suporte nativo.
   */

.product-image-photo,
.product-item-photo img,
.category-carousel__image img {
  aspect-ratio: attr(width) / attr(height);
}

/* ============================================================================
   8. OVERSCROLL-BEHAVIOR (Melhora UX em Modais/Carrosséis)
   ============================================================================

   Previne scroll "chain" (propagação) em elementos scrolláveis.
   */

.minicart-wrapper .block-minicart,
.verticalmenu .submenu,
.awa-dropdown-panel {
  overscroll-behavior: contain;
}

/* ============================================================================
   9. TEXT-RENDERING OTIMIZAÇÃO
   ============================================================================

   Melhora legibilidade de texto em diferentes contextos.
   */

/* Corpo: legibilidade geral */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Preços e números: velocidade (não precisa de ligatures) */
.price,
.product-item-price,
.cart-price {
  text-rendering: optimizeSpeed;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   10. COLOR-SCHEME (Dark Mode Support — Future-Proof)
   ============================================================================

   Preparação para futuro suporte a dark mode.
   Atualmente apenas informa ao browser que o site é light.
   */

:root {
  color-scheme: light;
}

/* ============================================================================
   NOTAS DE IMPLEMENTAÇÃO
   ============================================================================

   Estas otimizações são PROGRESSIVE ENHANCEMENT:
   - Navegadores modernos: ganham performance
   - Navegadores antigos: fallback automático (comportamento normal)

   Testar após implementação:
   1. Layout geral permanece idêntico
   2. Scrollbar funciona normalmente
   3. Texto sempre visível (sem FOIT)
   4. Interações (hover, click) funcionam
   5. Lighthouse sem regressões

   Compatibilidade:
   - font-display: swap — Chrome 60+, Firefox 58+, Safari 11+
   - content-visibility — Chrome 85+, Edge 85+ (Firefox: skipped gracefully)
   - contain — Chrome 52+, Firefox 69+, Safari 15.4+
   - scrollbar-gutter — Chrome 94+, Firefox 97+
   - prefers-reduced-data — Chrome 86+ (experimental)
   - aspect-ratio — Chrome 88+, Firefox 89+, Safari 15+

   ============================================================================
*/