/* ========================================
   CSS para Links em Destaque - Página do Guia
   ======================================== */

/* 
   Classe específica para links internos de destaque
   Use: <a href="/link" class="link-destaque">texto do link</a>
*/

.link-destaque {
  color: #0066cc !important; /* Azul vibrante */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

.link-destaque:hover {
  color: #004999 !important; /* Azul mais escuro no hover */
  text-decoration-color: #004999;
  text-decoration-thickness: 2.5px;
}

.link-destaque:active {
  color: #003366 !important;
}

/* Variação para links em fundos coloridos (como as caixas azuis claras) */
.link-destaque-light {
  color: #0052a3 !important; /* Azul mais escuro para contraste */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #0052a3;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

.link-destaque-light:hover {
  color: #003d7a !important;
  text-decoration-color: #003d7a;
  text-decoration-thickness: 2.5px;
}

/* ========================================
   Links de CTA (Call-to-Action)
   ======================================== */

/* Para links de CTA em texto corrido */
.link-cta {
  color: #0066cc !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.link-cta:hover {
  color: #004999 !important;
  border-bottom-color: #004999;
  border-bottom-width: 3px;
}

/* Ícone de seta para links de CTA */
.link-cta::after {
  content: " →";
  font-weight: 700;
  transition: transform 0.3s ease;
  display: inline-block;
}

.link-cta:hover::after {
  transform: translateX(4px);
}

/* ========================================
   Links Externos (ANS, SUSEP, etc.)
   ======================================== */

.link-externo {
  color: #0066cc !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-style: dotted; /* Pontilhado para diferenciar */
  text-decoration-color: #0066cc;
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

.link-externo:hover {
  color: #004999 !important;
  text-decoration-style: solid;
  text-decoration-color: #004999;
}

/* Ícone de link externo */
.link-externo::after {
  content: " ↗";
  font-size: 0.85em;
  vertical-align: super;
  opacity: 0.7;
}

/* ========================================
   Aplicação Específica no Conteúdo do Guia
   ======================================== */

/* Links dentro de parágrafos do conteúdo principal */
.conteudo-guia p a:not(.btn):not(.button) {
  color: #0066cc !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

.conteudo-guia p a:not(.btn):not(.button):hover {
  color: #004999 !important;
  text-decoration-color: #004999;
  text-decoration-thickness: 2.5px;
}

/* Links dentro de listas */
.conteudo-guia ul a,
.conteudo-guia ol a {
  color: #0066cc !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

.conteudo-guia ul a:hover,
.conteudo-guia ol a:hover {
  color: #004999 !important;
  text-decoration-color: #004999;
}

/* Links dentro de caixas de destaque (background azul claro) */
.caixa-destaque a,
.box-info a,
.observacao a {
  color: #0052a3 !important; /* Azul mais escuro para contraste */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #0052a3;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.caixa-destaque a:hover,
.box-info a:hover,
.observacao a:hover {
  color: #003d7a !important;
  text-decoration-color: #003d7a;
}

/* ========================================
   Responsividade Mobile
   ======================================== */

@media (max-width: 768px) {
  .link-destaque,
  .link-destaque-light,
  .link-cta,
  .link-externo,
  .conteudo-guia p a:not(.btn):not(.button) {
    /* Links mais grossos e visíveis em mobile */
    text-decoration-thickness: 2.5px;
    text-underline-offset: 4px;
  }
  
  .link-destaque:hover,
  .link-destaque-light:hover,
  .link-cta:hover,
  .conteudo-guia p a:not(.btn):not(.button):hover {
    text-decoration-thickness: 3px;
  }
}

/* ========================================
   Acessibilidade
   ======================================== */

/* Foco visível para navegação por teclado */
.link-destaque:focus,
.link-destaque-light:focus,
.link-cta:focus,
.link-externo:focus,
.conteudo-guia p a:focus {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Alto contraste para leitores de tela */
@media (prefers-contrast: high) {
  .link-destaque,
  .link-destaque-light,
  .link-cta,
  .conteudo-guia p a:not(.btn):not(.button) {
    color: #0000ff !important;
    text-decoration-thickness: 3px;
  }
}

/* ========================================
   Variações de Cor (Opcionais)
   ======================================== */

/* Azul mais vibrante (alternativa 1) */
.link-destaque-vibrant {
  color: #0073e6 !important;
  text-decoration-color: #0073e6;
}

.link-destaque-vibrant:hover {
  color: #005bb5 !important;
  text-decoration-color: #005bb5;
}

/* Azul royal (alternativa 2) */
.link-destaque-royal {
  color: #2563eb !important;
  text-decoration-color: #2563eb;
}

.link-destaque-royal:hover {
  color: #1d4ed8 !important;
  text-decoration-color: #1d4ed8;
}

/* Azul turquesa (alternativa 3) */
.link-destaque-turquesa {
  color: #0891b2 !important;
  text-decoration-color: #0891b2;
}

.link-destaque-turquesa:hover {
  color: #0e7490 !important;
  text-decoration-color: #0e7490;
}