/* ═══════════════════════════════════════════════════════════════════════════
   Links no meio do texto — 27/10/2026

   Pedido do usuário: os links espalhados pelos textos saíam num vinho/rosa
   (#c36, a cor padrão de link do tema Hello, reset.css) e azul-marinho no
   hover (#336), cores fora da paleta. Agora seguem a paleta da Velaplast,
   de acordo com o lugar. Só o visual do link muda; o texto não.

     · fundo claro (a maioria): laranja da marca num tom mais fechado,
       #A9501A (5,5:1 no branco, 4,7:1 no cinza #EEE), peso médio e
       sublinhado laranja suave; no hover/foco o sublinhado fica cheio e
       aparece uma faixa laranja bem leve atrás;
     · sobre fundo escuro, laranja ou âmbar (texto branco): link branco,
       mais forte, sublinhado branco (.vp-lk--claro);
     · frase que é só o link ("Veja as embalagens..."): vira chamada, com
       seta → (.vp-lk--cta);
     · PDF: etiqueta "PDF" ao lado (.vp-lk--pdf).

   As classes vêm do js/vp-links.js, que só marca links que estariam na cor
   do tema: botões, menu, rodapé e o que já tem cor própria ficam como estão.
   A regra sem classe logo abaixo (especificidade igual à do tema) só troca a
   COR nos textos do Elementor antes do script rodar, para não piscar o vinho.
   ═══════════════════════════════════════════════════════════════════════════ */

/* só a cor, antes do script: evita piscar o vinho nos textos do Elementor */
:where(.elementor-widget-text-editor, .elementor-widget-theme-post-content) a:where(:not(.elementor-button)) { color: #A9501A; }

a.vp-lk {
  color: #A9501A;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(227, 122, 54, .45);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  border-radius: 3px;
  overflow-wrap: anywhere;            /* e-mail comprido não estoura a tela no celular */
  -webkit-tap-highlight-color: rgba(227, 122, 54, .18);
  transition: color .15s ease, text-decoration-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
a.vp-lk:is(:hover, :focus-visible) {
  color: #8C4315;
  text-decoration-color: #E37A36;
  background-color: rgba(227, 122, 54, .10);
  box-shadow: 0 0 0 2px rgba(227, 122, 54, .10);   /* a faixa passa um pouco das letras */
}
a.vp-lk:focus-visible { outline: 2px solid #E37A36; outline-offset: 2px; }

/* No celular não há hover: o sublinhado já vem mais forte para mostrar que é link. */
@media (hover: none) {
  a.vp-lk { text-decoration-color: rgba(227, 122, 54, .75); }
  a.vp-lk:active { background-color: rgba(227, 122, 54, .14); }
}

/* Sobre fundo escuro, laranja ou âmbar (o texto em volta é branco) */
a.vp-lk.vp-lk--claro { color: #fff; font-weight: 600; text-decoration-color: rgba(255, 255, 255, .6); }
a.vp-lk.vp-lk--claro:is(:hover, :focus-visible) {
  color: #fff; text-decoration-color: #fff; background-color: rgba(255, 255, 255, .16); box-shadow: 0 0 0 2px rgba(255, 255, 255, .16);
}
a.vp-lk.vp-lk--claro:focus-visible { outline-color: #fff; }
@media (hover: none) { a.vp-lk.vp-lk--claro { text-decoration-color: rgba(255, 255, 255, .85); } }

/* Frase que é só o link: chamada com seta */
a.vp-lk.vp-lk--cta {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; text-decoration-line: none; padding: 2px 4px; margin: 0 -4px;
}
a.vp-lk.vp-lk--cta::after {
  content: ""; flex: none; width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
a.vp-lk.vp-lk--cta:is(:hover, :focus-visible) { text-decoration-line: underline; }
a.vp-lk.vp-lk--cta:is(:hover, :focus-visible)::after { transform: translateX(3px); }

/* PDF */
a.vp-lk.vp-lk--pdf::after {
  content: "PDF"; display: inline-block; margin-left: .45em; padding: 1px 5px 0;
  border-radius: 4px; background: #fdf1e8; color: #A9501A;
  font-size: .68em; font-weight: 700; letter-spacing: .04em; line-height: 1.5; vertical-align: .12em;
  text-decoration: none;
}
a.vp-lk.vp-lk--claro.vp-lk--pdf::after { background: rgba(255, 255, 255, .2); color: #fff; }

/* Telefone não quebra no meio ("3159-" numa linha, "2323" na outra) */
a.vp-lk[href^="tel:"] { white-space: nowrap; }

/* "Ir para o conteúdo" (só aparece ao navegar com o Tab) */
.skip-link:focus { color: #A9501A; }

@media (prefers-reduced-motion: reduce) {
  a.vp-lk, a.vp-lk::after { transition: none !important; }
}