/* ================================================================
   KROW POLISH — UX/UI seguro (Fases 8/9). Só ADICIONA melhorias,
   não sobrescreve o layout existente. Foco em: acessibilidade (WCAG AA),
   alvos de toque, foco visível, estados de erro e motion reduzido.
   ================================================================ */

/* Foco visível consistente (teclado) — ajuda WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary, #6d28d9);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Alvo mínimo de toque de 44x44 nos ícones do header (WCAG 2.5.5) */
.header .icon-btn,
.header button,
.header a[role="button"],
.header .header__action {
  min-width: 44px;
  min-height: 44px;
}

/* Respeita quem prefere menos movimento (WCAG 2.3.3 / conforto) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skeleton utilitário reutilizável (reduz CLS ao carregar dados) */
.krow-skel {
  background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.03) 37%, rgba(0,0,0,.06) 63%);
  background-size: 400% 100%;
  animation: krowSkel 1.4s ease infinite;
  border-radius: 10px;
}
@keyframes krowSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Estado de erro amigável reutilizável (quando o Firebase falha) */
.krow-error-state {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-muted, #6b7280);
}
.krow-error-state button {
  margin-top: 12px;
  background: var(--primary, #6d28d9);
  color: #fff; border: 0; border-radius: 10px;
  padding: 10px 18px; cursor: pointer; min-height: 44px;
}

/* Reserva de altura mínima para blocos injetados via JS (anti "pulo"/CLS) */
#krow-reviews-section,
#krow-manifesto { min-height: 200px; }