/* ==========================================================================
   Onda 8 — Performance + Acessibilidade
   Focus visivel, skip links, reduced motion, contraste, touch targets.
   ========================================================================== */

/* ---------- Skip Link ---------- */
.lobo-skip-link {
  position: absolute;
  top: 0;
  left: var(--lobo-space-4);
  transform: translateY(-110%);
  background: var(--lobo-primary);
  color: #ffffff;
  padding: var(--lobo-space-3) var(--lobo-space-6);
  border-radius: 0 0 var(--lobo-radius-md) var(--lobo-radius-md);
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-semibold);
  font-size: var(--lobo-text-sm);
  z-index: 999;
  text-decoration: none;
  transition: transform 0.2s;
}

.lobo-skip-link:focus {
  transform: translateY(0);
  color: var(--lobo-secondary);
}

/* ---------- Focus Visivel ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lobo-secondary-text);
  outline-offset: 2px;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .lobo-js .lobo-nav-inner {
    transform: none !important;
    transition: none !important;
  }

  .single-product .woocommerce-Tabs-panel.lobo-panel-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lobo-btn-primary:not(:disabled):not(.disabled),
  .lobo-btn-secondary:not(:disabled):not(.disabled),
  .single_add_to_cart_button:not(:disabled):not(.disabled),
  .checkout-button:not(:disabled):not(.disabled),
  #place_order:not(:disabled):not(.disabled) {
    transition: background-color var(--lobo-transition-base) !important;
  }

  .lobo-btn-primary:not(:disabled):not(.disabled):active,
  .lobo-btn-secondary:not(:disabled):not(.disabled):active,
  .single_add_to_cart_button:not(:disabled):not(.disabled):active,
  .checkout-button:not(:disabled):not(.disabled):active {
    transform: none;
    transition: background-color var(--lobo-transition-base) !important;
  }

  #place_order:not(:disabled):not(.disabled):active {
    transform: none;
    transition: background-color var(--lobo-transition-base) !important;
  }
}

/* ---------- Touch Targets (minimo 44x44px) ---------- */
.lobo-nav a,
.lobo-nav-toggle,
.lobo-action,
.lobo-btn-primary,
.lobo-btn-secondary,
.single_add_to_cart_button,
.button,
.woocommerce-ordering select,
.home .wp-block-button__link,
.carousel button {
  min-height: 44px;
  min-width: 44px;
}

/* ---------- Contraste ---------- */
/* Garante contraste WCAG AA para textos muted */
.lobo-text-muted {
  color: #595959; /* Ratio 7:1 sobre branco */
}

/* Links com sublinhado para distincao alem da cor */
/* NÃO acrescente `:not()` aqui. Cada um sobe a especificidade desta regra e
   derruba as correções que dependem dela: em 30/08/2026 um `:not(.lobo-card-link)`
   levou de 0,4,1 para 0,5,1 e voltou a sublinhar título, marca e botão dos cards
   na home, passando por cima de `.home .entry-content ul.products li.product a`
   (0,4,3). Para tirar o sublinhado de um bloco novo, escreva a regra no CSS
   daquele bloco. */
.entry-content a:not(.lobo-btn-primary):not(.lobo-btn-secondary):not(.lobo-action) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Imagens ---------- */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- Formularios ---------- */
/* Labels sempre visiveis */
.form-row label {
  display: block;
  margin-bottom: var(--lobo-space-1);
}

/* Campos obrigatorios com indicador visual alem do * */
.form-row .required {
  font-weight: var(--lobo-font-bold);
}

/* ---------- Performance CSS ---------- */
/* Evita layout shift em imagens de produto */
ul.products li.product a img {
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* Contem o layout para evitar reflow */
.lobo-header,
.lobo-nav {
  contain: layout style;
}

/* ---------- Screen Reader ---------- */
.screen-reader-text,
.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;
}

/* ---------- Print ---------- */
@media print {
  .lobo-header,
  .lobo-nav,
  .lobo-topbar,
  .lobo-whatsapp-cta,
  .single_add_to_cart_button {
    display: none !important;
  }
}