/* Custom hover effects for category, tags, and archives links */

/* Absolute color definitions for hover states */
:root {
    --hover-light-bg: rgba(59, 130, 246, 0.2);
    --hover-dark-bg: rgba(255, 255, 255, 0.15);
}

/* Tag and Category links */
.tagCloud .tagCloud-tags a {
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.tagCloud .tagCloud-tags a:hover {
    background-color: var(--hover-light-bg) !important;
    box-shadow: none !important;
}

/* Archives year headers */
.archives-date a {
    transition: background-color 0.3s ease !important;
}

.archives-date a:hover {
    background-color: var(--hover-light-bg) !important;
}

/* Archives section on homepage */
.archives-year a {
    transition: background-color 0.3s ease !important;
}

.archives-year a:hover {
    background-color: var(--hover-light-bg) !important;
}

/* Archives "View all" links */
.view-all-link {
    transition: background-color 0.3s ease !important;
}

.view-all-link:hover {
    background-color: var(--hover-light-bg) !important;
}

/* Blog cards on main page */
.article-list article {
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.article-list article:hover {
    background-color: var(--hover-light-bg) !important;
    box-shadow: none !important;
}

/* Fix white line - set header and details to same hover color, remove padding on hover */
.article-list article:hover .article-header,
.article-list article:hover .article-details {
    background-color: var(--hover-light-bg) !important;
}

/* Archive article entries (compact list) - target the link inside */
.article-list--compact article {
    transition: background-color 0.3s ease !important;
}

.article-list--compact article:hover,
.article-list--compact article > a:hover {
    background-color: var(--hover-light-bg) !important;
}

/* Dark mode hover effects - consistent light grey for all */
[data-scheme="dark"] .tagCloud .tagCloud-tags a,
[data-scheme="dark"] .tagCloud .tagCloud-tags a:hover {
    background-color: var(--hover-dark-bg) !important;
    box-shadow: var(--shadow-l1) !important;
}

[data-scheme="dark"] .archives-date a:hover,
[data-scheme="dark"] .archives-year a:hover,
[data-scheme="dark"] .view-all-link:hover,
[data-scheme="dark"] .article-list article:hover,
[data-scheme="dark"] .article-list--compact article:hover,
[data-scheme="dark"] .article-list--compact article > a:hover {
    background-color: var(--hover-dark-bg) !important;
    box-shadow: none !important;
}

[data-scheme="dark"] .article-list article:hover .article-header,
[data-scheme="dark"] .article-list article:hover .article-details {
    background-color: var(--hover-dark-bg) !important;
}

/* Make category links transparent so they inherit the card hover color */
.article-category a,
.article-category-link {
    background: transparent !important;
    color: inherit !important;
    padding: 8px 16px;
    border-radius: var(--tag-border-radius);
    display: inline-block;
}

/* Ensure category links match the card hover color on hover */
.article-list article:hover .article-details .article-category a,
.article-list article:hover .article-details .article-category-link,
.article-list article:hover .article-details .article-category a:hover,
.article-list article:hover .article-details .article-category-link:hover {
    background-color: var(--hover-light-bg) !important;
    color: inherit !important;
}

/* Dark mode counterpart */
[data-scheme="dark"] .article-list article:hover .article-details .article-category a,
[data-scheme="dark"] .article-list article:hover .article-details .article-category-link,
[data-scheme="dark"] .article-list article:hover .article-details .article-category a:hover,
[data-scheme="dark"] .article-list article:hover .article-details .article-category-link:hover {
    background-color: var(--hover-dark-bg) !important;
    color: inherit !important;
}