/* Custom CSS for specific elements and effects */
.skip-link {
    /* Hide the link by default */
    position: absolute;
    top: -9999px; 
    left: -9999px;
    z-index: 9999;
    
    /* Add styling for when the link is focused */
    background: #1f2937;
    color: white;
    padding: 8px;
}

.skip-link:focus {
    /* Bring the link back into view when it is focused */
    top: 0;
    left: 0;
}

.article-card.shadow-md {
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.2);
}

.article-card.shadow-md:hover {
  /* This rule is now more specific and will take precedence on hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.bg-accent-500-transparent {
    background-color: rgba(239, 68, 68, 0.5); /* This is an example, you would need the exact RGBA for your color */
}
.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #ef4444, #991b1b);
}

@media (prefers-reduced-motion: reduce) {
    .article-card {
        transition: none;
    }
}