/* ============================================================
 * BT v6 — global hover behavior
 *
 * Reescrito em 1.3.3 pra refletir a DOUTRINA FINAL de hover dos
 * títulos de matéria (decisão Marcelo 2026-05-15, gravada em
 * memória/feedback_hover_titulos_materia.md):
 *
 *   Ao hover no card de uma matéria, APENAS o título reage com:
 *     (a) cor do texto → lilás (var(--bt-accent))
 *     (b) underline lilás esquerda→direita em CADA line-box
 *
 *   NADA mais reage: nem categoria, nem número (Mais Lidas),
 *   nem lide, nem autor, nem timestamp. Sem slide lateral.
 *   Sem escala. Sem cor mudando em outros elementos.
 *
 * Imagem do card mantém o zoom 1.03 (efeito separado).
 * Nav menu e footer continuam com seus próprios underlines.
 * ============================================================ */

/* Tokens — repetidos pra independência do tokens.css */
:root {
  --btv6-accent: #6F4EFF;
  --btv6-accent-dark: #5A3FE6;
  --btv6-fg: #FAFAFC;
  --btv6-fg-muted: #A8A8B5;
}

/* ============================================================
 * DOUTRINA HOVER DE TÍTULOS DE MATÉRIA (1.3.3 — FINAL)
 *
 * Estrutura HTML obrigatória em TODO .ed-title:
 *   <h_ class="ed-title ...">
 *     <span class="ed-title-fx">Texto do título</span>
 *   </h_>
 *
 * O <span class="ed-title-fx"> precisa ser INLINE pra que
 * box-decoration-break: clone funcione. Isso permite que o
 * background-image gradient apareça em CADA line-box do texto
 * quebrado, não apenas no rodapé do bbox.
 * ============================================================ */
.ed-title-fx {
  background-image: linear-gradient(var(--btv6-accent), var(--btv6-accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .5s cubic-bezier(0.22, 1, 0.36, 1),
              color .25s ease;
  color: inherit;
  /* Importante: inline pra box-decoration-break funcionar.
   * O parent (h1/h3) continua block, controla layout. */
  display: inline;
}

@media (hover: hover) and (pointer: fine) {
  /* Trigger: qualquer <a> envolvendo o card (story-link,
   * ed-title-link, a.block dentro de .ed-card). */
  a:hover .ed-title-fx,
  .story-link:hover .ed-title-fx,
  .ed-title-link:hover .ed-title-fx,
  .ed-card a:hover .ed-title-fx,
  .ed-card:hover .ed-title-fx {
    background-size: 100% 1px;
    color: var(--btv6-accent);
  }
}

/* ============================================================
 * IMAGEM DO CARD — zoom suave no hover (mantido)
 * ============================================================ */
.ed-card .ed-img {
  transition: transform .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ed-card a:hover .ed-img,
  .ed-card:hover .ed-img {
    transform: scale(1.03);
  }
}

/* ============================================================
 * STORY-LINK — wrapper de items em Mais Lidas e Últimas
 *
 * IMPORTANTE: em 1.3.3 REMOVIDO o slide lateral (padding-left)
 * e a escala do número (transform: scale). Marcelo não quer
 * mais esses efeitos secundários. Só o título reage.
 * ============================================================ */
.story-link {
  display: block;
}

/* 1.3.9: Rank-num da Mais Lidas — TRAVADO em qualquer estado.
 * Plugin legacy (provável WPBakery) estava aplicando font-weight
 * mudado no :hover dos números. Defensa explícita zerando qualquer
 * mudança de peso, transform, ou font-variation no rank-num
 * independente do estado do parent <a>. */
.rank-num,
.story-link .rank-num,
.story-link:hover .rank-num,
a:hover .rank-num,
.story-link:focus .rank-num,
.story-link:focus-visible .rank-num,
.story-link:active .rank-num {
  font-weight: 700 !important;
  font-variation-settings: 'opsz' 96, 'SOFT' 30, 'WONK' 1 !important;
  transform: none !important;
  transition: none !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

/* ============================================================
 * NAV LINKS DO HEADER — underline esq→dir + cor accent no hover
 *
 * 1.3.13: usa var(--bt-accent) que MUDA com data-bt-theme (light/dark).
 * No light é #5A3FE6 (mais escuro), no dark é #6F4EFF. Antes usava
 * --btv6-accent (hardcoded), por isso light mode não trocava cor.
 *
 * Specificity reforçada com html prefix pra vencer Tailwind utility
 * `hover:text-bt-accent` que pode ter sido sobrescrito por plugin
 * legacy.
 * ============================================================ */
html .bt-nav-link,
html a.bt-nav-link {
  position: relative;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  border-bottom: 0 !important;
  transition: color .2s ease;
}
html .bt-nav-link::after,
html a.bt-nav-link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 1px;
  background: var(--bt-accent) !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  html .bt-nav-link:hover,
  html a.bt-nav-link:hover,
  html .bt-nav-link:focus,
  html .bt-nav-link:focus-visible,
  html .bt-nav-link:active,
  html .menu-item.current-menu-item > .bt-nav-link {
    color: var(--bt-accent) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
  }
  html .bt-nav-link:hover::after,
  html a.bt-nav-link:hover::after,
  html .bt-nav-link.current-menu-item::after,
  html .menu-item.current-menu-item > .bt-nav-link::after {
    transform: scaleX(1);
  }
}

/* ============================================================
 * UTILITY UNIVERSAL — .bt-link-anim e .ulink (footer, byline, author)
 * Underline esq→dir bottom -3px. Usa em links inline pequenos.
 * ============================================================ */
.bt-link-anim,
.ulink {
  position: relative;
  text-decoration: none !important;
  display: inline-block;
}
.bt-link-anim::after,
.ulink::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .bt-link-anim:hover::after,
  .ulink:hover::after {
    transform: scaleX(1);
  }
}

/* Footer links — usam currentColor mas footer-link é cinza.
 * Override pra accent fica mais consistente com a doutrina. */
footer .bt-link-anim::after {
  background: var(--btv6-accent) !important;
}

/* ============================================================
 * LINKS INLINE EM PROSE (corpo de artigo single)
 * Underline animado from-left, cor mantida.
 * ============================================================ */
.prose-v6 a,
.btv6-link,
article.post .entry-content a:not(.button):not(.btn):not(.wp-block-button__link) {
  color: inherit;
  text-decoration: none;
  position: relative;
  background-image: linear-gradient(var(--btv6-accent), var(--btv6-accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease, color .2s ease;
  padding-bottom: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .prose-v6 a:hover,
  .btv6-link:hover,
  article.post .entry-content a:not(.button):not(.btn):not(.wp-block-button__link):hover {
    background-size: 100% 1px;
    color: var(--btv6-fg);
  }
}

/* ============================================================
 * BOTÕES E PILLS
 * ============================================================ */
.btn-pill-outline {
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-pill-outline:hover {
  background: var(--btv6-fg);
  color: #0A0A0F;
  border-color: var(--btv6-fg);
}

.pill-premium {
  transition: box-shadow .2s ease, background .2s ease;
}
.pill-premium:hover {
  background: var(--btv6-accent-dark);
  box-shadow: 0 0 0 1px rgba(111,78,255,0.5), 0 8px 32px rgba(111,78,255,0.35);
}

.v6-tag {
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.v6-tag:hover {
  background: rgba(111,78,255,0.12);
  border-color: rgba(111,78,255,0.4);
  color: var(--btv6-fg);
}

.v6-eyebrow-pill {
  transition: box-shadow .2s ease, background .2s ease;
}
.v6-eyebrow-pill:hover {
  box-shadow: 0 0 0 1px rgba(111,78,255,0.5), 0 6px 18px rgba(111,78,255,0.25);
}

/* ============================================================
 * FOCUS STATE GLOBAL — acessibilidade
 * ============================================================ */
:focus-visible {
  outline: 2px solid var(--btv6-accent);
  outline-offset: 2px;
  border-radius: 4px;
}