/* Article Citations Styles - Compact Wikipedia-style */

.article-citations {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.article-citations__header {
    margin-bottom: 20px;
}

.article-citations__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 4px 0;
}

.article-citations__description {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
}

.article-citations__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.article-citation {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    transition: background 0.2s ease;
}

.article-citation:last-child {
    border-bottom: none;
}

.article-citation:hover {
    background: var(--color-bg-hover, #f9fafb);
    margin: 0 -8px;
    padding: 8px 8px;
}

.article-citation:target {
    background: var(--color-primary-light, #dbeafe);
    margin: 0 -8px;
    padding: 8px 8px;
    animation: highlight-citation 1s ease;
}

@keyframes highlight-citation {
    0%, 100% {
        background: var(--color-primary-light, #dbeafe);
    }
    50% {
        background: var(--color-primary-lighter, #eff6ff);
    }
}

.article-citation__number {
    flex-shrink: 0;
    color: var(--color-primary, #3b82f6);
    font-weight: 600;
    min-width: 24px;
}

.article-citation__content {
    flex: 1;
    min-width: 0;
}

.article-citation__title {
    display: inline;
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-citation__title:hover {
    color: var(--color-primary, #3b82f6);
}

.article-citation__external-icon {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 2px;
    opacity: 0.4;
    vertical-align: baseline;
}

.article-citation__author {
    display: inline;
    color: var(--color-text-secondary, #6b7280);
    font-style: italic;
}

.article-citation__author::before {
    content: " — ";
}

.article-citation__meta {
    display: inline;
    color: var(--color-text-tertiary, #9ca3af);
    font-size: 12px;
}

.article-citation__meta::before {
    content: " (";
}

.article-citation__meta::after {
    content: ")";
}

.article-citation__date,
.article-citation__domain {
    display: inline;
}

.article-citation__date::after {
    content: ", ";
}

.article-citation__domain {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
}

/* Citation links in article content */
.citation-link {
    display: inline-block;
    color: var(--color-primary, #3b82f6);
    text-decoration: none;
    font-size: 0.75em;
    vertical-align: super;
    font-weight: 600;
    padding: 0 2px;
    transition: color 0.2s ease;
}

.citation-link:hover {
    color: var(--color-primary-dark, #2563eb);
    text-decoration: underline;
}

.citation-link::before {
    content: "[";
}

.citation-link::after {
    content: "]";
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-citations {
        margin-top: 32px;
        padding-top: 24px;
    }
    
    .article-citations__title {
        font-size: 18px;
    }
    
    .article-citations__list {
        font-size: 12px;
    }
    
    .article-citation {
        flex-direction: row;
        gap: 6px;
    }
    
    .article-citation__number {
        min-width: 20px;
    }
}

/* Dark Mode Support */
[data-theme="dark"] {
    .article-citations {
        border-top-color: var(--color-border-dark, #374151);
    }
    
    .article-citations__title {
        color: var(--color-text-primary-dark, #f9fafb);
    }
    
    .article-citations__description {
        color: var(--color-text-secondary-dark, #d1d5db);
    }
    
    .article-citation {
        border-bottom-color: var(--color-border-dark, #374151);
    }
    
    .article-citation:hover {
        background: var(--color-bg-hover-dark, #1f2937);
    }
    
    .article-citation__title {
        color: var(--color-text-primary-dark, #f9fafb);
    }
    
    .article-citation__author {
        color: var(--color-text-secondary-dark, #9ca3af);
    }
}