/* ============================================================
   Camada de Polimento Visual Compartilhada — Jorge Alvim
   ------------------------------------------------------------
   CSS moderno, zero dependências, compatível com o CSP.
   Aplicada em todas as páginas (site, painel, portais).
   Objetivo: refinar sem alterar a identidade (navy/gold) nem o
   HTML/lógica existentes. Regras ADITIVAS e de baixo risco.
   ============================================================ */

:root {
  --ja-navy-950: #0F172A;
  --ja-navy-900: #1E293B;
  --ja-gold-600: #B0842B;
  --ja-gold-500: #C59B3F;
  --ja-gold-400: #D4B86A;
  --ja-gold-300: #E1CB8F;
  --ja-focus-ring: rgba(197, 155, 63, 0.45);
  --ja-shadow-soft: 0 4px 25px -4px rgba(15, 23, 42, 0.07),
    0 2px 10px -2px rgba(15, 23, 42, 0.04);
  --ja-shadow-lift: 0 24px 45px -12px rgba(15, 23, 42, 0.18),
    0 12px 20px -8px rgba(15, 23, 42, 0.08);
}

/* 1. Renderização de texto mais nítida ------------------------------ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 2. Tipografia mais elegante (quebras equilibradas) ---------------- */
h1, h2, h3, h4, .font-serif {
  text-wrap: balance;                 /* evita "viúvas" nos títulos */
  letter-spacing: -0.012em;
}
p, li, blockquote {
  text-wrap: pretty;                  /* últimas linhas mais harmônicas */
}

/* 3. Âncoras internas não ficam sob o cabeçalho fixo ---------------- */
:where([id]) {
  scroll-margin-top: 6rem;
}

/* 4. Seleção de texto com a cor da marca ---------------------------- */
::selection {
  background-color: var(--ja-gold-300);
  color: var(--ja-navy-950);
}

/* 5. Foco acessível e elegante (teclado) --------------------------- */
:focus-visible {
  outline: 2px solid var(--ja-gold-500);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* 6. Sem "flash" cinza ao tocar em links no mobile ----------------- */
a, button, [role="button"], summary, label {
  -webkit-tap-highlight-color: transparent;
}

/* 7. Transições suaves em elementos interativos -------------------- */
a,
button,
[role="button"],
input,
select,
textarea,
.transition,
[class*="hover:"] {
  transition-property: color, background-color, border-color, box-shadow,
    transform, opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 8. Feedback tátil ao pressionar botões --------------------------- */
button:active,
[role="button"]:active,
a[href]:active {
  transform: translateY(0.5px) scale(0.995);
}

/* 9. Cards com sombra da marca ganham elevação suave no hover ------ */
/*    (aplica sobre as classes já usadas, sem mexer no HTML)         */
.shadow-card-light,
.shadow-card-hover {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.shadow-card-light:hover {
  transform: translateY(-4px);
  box-shadow: var(--ja-shadow-lift);
}

/* 10. Botões dourados (interativos) — brilho e leve elevação ------- */
a.bg-gold-500, button.bg-gold-500,
a.bg-gold-600, button.bg-gold-600,
a.bg-gold-500:hover, button.bg-gold-500:hover {
  will-change: transform, box-shadow;
}
a.bg-gold-500:hover, button.bg-gold-500:hover,
a.bg-gold-600:hover, button.bg-gold-600:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(184, 134, 11, 0.45);
}

/* 11. Imagens: renderização mais nítida ---------------------------- */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* 12. Detalhes tipográficos: marcadores, citações, régua ----------- */
::marker {
  color: var(--ja-gold-600);
}
blockquote {
  border-inline-start: 3px solid var(--ja-gold-400);
  padding-inline-start: 1rem;
  font-style: italic;
  color: var(--ja-navy-900);
}
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--ja-gold-400),
    transparent
  );
  opacity: 0.5;
}

/* 13. Scrollbars refinadas com a cor da marca ---------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ja-gold-400) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--ja-gold-400);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--ja-gold-600);
  background-clip: content-box;
}

/* 14. Utilitários opt-in (elevação e brilho) ----------------------- */
.ja-lift {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ja-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--ja-shadow-lift);
}
.ja-glow:hover {
  box-shadow: 0 6px 24px -4px var(--ja-focus-ring);
}

/* 15. Revelar ao rolar — À PROVA DE FALHA -------------------------- */
/*    Por padrão o conteúdo é SEMPRE visível. O efeito só liga quando
      o JS confirma suporte e adiciona .ja-anim-ready ao <html>.
      Se o JS falhar, nada fica escondido.                           */
.ja-reveal {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.ja-anim-ready .ja-reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
html.ja-anim-ready .ja-reveal.ja-reveal--in {
  opacity: 1;
  transform: none;
}

/* 16. Skeleton / shimmer de carregamento --------------------------- */
.ja-skeleton {
  background: linear-gradient(
    100deg,
    rgba(226, 232, 240, 0.6) 30%,
    rgba(241, 245, 249, 0.9) 50%,
    rgba(226, 232, 240, 0.6) 70%
  );
  background-size: 200% 100%;
  animation: ja-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes ja-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 17. Respeitar quem prefere menos movimento (acessibilidade) ------ */
@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;
  }
  html.ja-anim-ready .ja-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .shadow-card-light:hover,
  a.bg-gold-500:hover, button.bg-gold-500:hover,
  a.bg-gold-600:hover, button.bg-gold-600:hover {
    transform: none;
  }
}