/**
 * COBERMINAS — Performance & Accessibility Boost
 * Corrige: contraste (WCAG AA), aspect-ratio de imagens,
 *          CLS, headings, proporção de imagens no portfólio.
 * Incluído em index.html com media="print" onload="this.media='all'"
 */

/* ══════════════════════════════════════════════════
   1. CONTRASTE — Corrige textos com baixo contraste
   Problema: rgba(255,255,255,0.4) e similares em fundos escuros
   ficam abaixo de 4.5:1 (WCAG AA)
══════════════════════════════════════════════════ */

/* Nav links — de 0.82 para 0.92 opacity (ratio ~9:1 em fundo escuro) */
.nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Footer copy — de 0.4 para 0.7 (garante WCAG AA em fundo #0a2d52) */
.footer-copy {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Service arrow — de 0.4 para 0.65 */
.service-arrow {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Service desc — de 0.6 para 0.80 */
.service-desc {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Hero kicker — textos informativos secundários */
.hero-clean-kicker {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Subtítulos de seção que usam opacity baixa */
.section-subtitle {
  color: var(--gray-600, #475569) !important;
}

/* Textos em fundos claros que podem ter contraste baixo */
.card-text-muted,
.text-muted-light {
  color: #4b5563 !important;   /* ≈ 7:1 em fundo #fff */
}

/* ══════════════════════════════════════════════════
   2. PROPORÇÃO DE IMAGENS — Previne CLS
   Garante que o browser reserve espaço correto antes do load
══════════════════════════════════════════════════ */

/* Grid do portfólio — evita shift ao carregar */
.portfolio-photos-grid > div {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  contain: layout style;
}

.portfolio-photos-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo no hero — proporção fixa para não gerar CLS */
.hero-logo-fullwidth img {
  aspect-ratio: 15 / 4;
  width: 100%;
  max-width: 620px;
  height: auto;
  object-fit: contain;
}

/* ══════════════════════════════════════════════════
   3. IMAGENS — Proporção correta nos service cards
══════════════════════════════════════════════════ */
.slide-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  display: block;
}

.service-card-img,
.service-thumb {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* ══════════════════════════════════════════════════
   4. CLS — Reservas de espaço para elementos dinâmicos
══════════════════════════════════════════════════ */

/* Skeleton para cards enquanto JS carrega */
.skeleton-pulse {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════
   5. FONT DISPLAY — Previne FOIT/FOUT
══════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}

/* ══════════════════════════════════════════════════
   6. PERFORMANCE — Otimizações de renderização
══════════════════════════════════════════════════ */

/* Imagens lazy: evita layout shift com min-height */
img[loading="lazy"] {
  min-height: 1px;
}

/* Hero slideshow: evita CLS ao mudar slides */
.hbs-slide {
  will-change: opacity;
  /* contain:strict causaria clipping em Ken Burns; usar paint+layout */
  contain: layout paint;
}

/* Slide 1 = <img> LCP real: garante cobertura total igual aos bg-slides */
.hbs-img-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hbs-img-slide img {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  /* Não usar will-change na img: browser já trata como raster */
}

/* Animações: respeitar preferência do usuário */
@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;
  }
}

/* ══════════════════════════════════════════════════
   7. ACESSIBILIDADE — Focus visível, ARIA
══════════════════════════════════════════════════ */

/* Focus ring visível para navegação por teclado */
:focus-visible {
  outline: 3px solid #e85d04;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Buttons e links sem outline padrão: garantir foco visível */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #e85d04 !important;
  outline-offset: 3px !important;
}

/* Skip link para leitores de tela */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #e85d04;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: 0.875rem;
  z-index: 10000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* ══════════════════════════════════════════════════
   8. MOBILE — Melhorias específicas para celular
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Touch targets mínimos 48×48px (Material Design / WCAG 2.5.5) */
  button,
  a.btn,
  .btn,
  .mobile-menu-btn,
  nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Grid do portfólio: 2 colunas no mobile com aspect-ratio preservado */
  .portfolio-photos-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .portfolio-photos-grid > div {
    aspect-ratio: 4 / 3;
  }

  /* Hero logo menor no mobile */
  .hero-logo-fullwidth img {
    max-width: 280px;
  }

  /* Evitar texto muito pequeno no mobile */
  .service-desc,
  .porto-label,
  .footer-copy {
    font-size: max(0.75rem, 12px) !important;
  }
}

@media (max-width: 480px) {
  /* Portfólio: 1 coluna em telas muito pequenas */
  .portfolio-photos-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════
   9. PRINT — Melhorias para impressão
══════════════════════════════════════════════════ */
@media print {
  .hero-bg-slideshow,
  .scroll-indicator,
  .toast-container,
  .leo-bubble,
  #leo-fab,
  .mobile-menu-btn,
  .header-cta { display: none !important; }

  body { background: white !important; color: black !important; }
  a { color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}