/**
 * CRITICAL GREY LINKS FIX
 * 
 * A high-impact visual treatment that makes links in grey sections stand out dramatically
 * Using a combination of techniques from the latest recommendation lists
 */

/* Target links specifically in grey container sections at the top of problematic pages */
.bg-gray-600 a, .bg-gray-700 a, .bg-gray-800 a, .bg-gray-900 a,
.bg-zinc-600 a, .bg-zinc-700 a, .bg-zinc-800 a, .bg-zinc-900 a,
.bg-slate-600 a, .bg-slate-700 a, .bg-slate-800 a, .bg-slate-900 a,
div[class*="header"] a:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="Header"] a:not(nav a):not(aside a):not([role="navigation"] a),
section[class*="header"] a:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="banner"] a:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="Banner"] a:not(nav a):not(aside a):not([role="navigation"] a) {
  /* Dramatic visual treatment */
  background-color: #000000 !important;
  color: #00FFFF !important; /* Bright cyan */
  
  /* Bold border treatment */
  border: 2px solid #00FFFF !important;
  border-radius: 4px !important;
  
  /* Size and spacing */
  padding: 3px 8px !important;
  margin: 3px !important;
  display: inline-block !important;
  
  /* Text styling */
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5) !important;
  
  /* Visual effects */
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.4) !important;
  
  /* Layout and z-index */
  position: relative !important;
  z-index: 1000 !important;
}

/* Hover effects for enhanced interactivity */
.bg-gray-600 a:hover, .bg-gray-700 a:hover, .bg-gray-800 a:hover, .bg-gray-900 a:hover,
.bg-zinc-600 a:hover, .bg-zinc-700 a:hover, .bg-zinc-800 a:hover, .bg-zinc-900 a:hover,
.bg-slate-600 a:hover, .bg-slate-700 a:hover, .bg-slate-800 a:hover, .bg-slate-900 a:hover,
div[class*="header"] a:hover:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="Header"] a:hover:not(nav a):not(aside a):not([role="navigation"] a),
section[class*="header"] a:hover:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="banner"] a:hover:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="Banner"] a:hover:not(nav a):not(aside a):not([role="navigation"] a) {
  background-color: #00FFFF !important;
  color: #000000 !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* Animate entry of links to grab attention */
@keyframes linkHighlight {
  0% { opacity: 0.5; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Apply animation to links */
.bg-gray-600 a, .bg-gray-700 a, .bg-gray-800 a, .bg-gray-900 a,
.bg-zinc-600 a, .bg-zinc-700 a, .bg-zinc-800 a, .bg-zinc-900 a,
.bg-slate-600 a, .bg-slate-700 a, .bg-slate-800 a, .bg-slate-900 a,
div[class*="header"] a:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="Header"] a:not(nav a):not(aside a):not([role="navigation"] a),
section[class*="header"] a:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="banner"] a:not(nav a):not(aside a):not([role="navigation"] a),
div[class*="Banner"] a:not(nav a):not(aside a):not([role="navigation"] a) {
  animation: linkHighlight 0.3s ease forwards;
}