/**
 * Favicon Citations - Chip-style display with labels
 * Inspired by OpenEvidence's implementation
 * @version 1.3.0
 */

/* ==========================================================================
   WRAPPER - Chip/pill style container
   ========================================================================== */

.citation-favicon-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 3px;

  /* Chip appearance */
  background-color: #f0f4f8;
  border-radius: 4px;
  padding: 2px 6px 2px 4px;
  margin-right: 4px;

  /* Smooth appearance */
  opacity: 0;
  transition: opacity 0.15s ease-in;

  /* Prevent breaking across lines */
  white-space: nowrap;

  /* Subtle border for definition */
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Show wrapper once favicon loads */
.citation-favicon-wrapper.loaded {
  opacity: 1;
}

/* Hide wrapper if favicon fails */
.citation-favicon-wrapper.error {
  display: none !important;
}

/* ==========================================================================
   FAVICON IMAGE
   ========================================================================== */

.citation-favicon {
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 2px;
  flex-shrink: 0;
}

.citation-favicon.error {
  display: none !important;
}

/* ==========================================================================
   TEXT LABEL
   ========================================================================== */

.citation-favicon-label {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   LINK STYLING
   ========================================================================== */

a.has-citation-favicon {
  display: inline;
}

/* Hover effect */
a.has-citation-favicon:hover .citation-favicon-wrapper {
  background-color: #e2e8f0;
  border-color: rgba(0, 0, 0, 0.1);
}

a.has-citation-favicon:hover .citation-favicon-label {
  color: #1e293b;
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

[data-bs-theme="dark"] .citation-favicon-wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .citation-favicon-label {
  color: #cbd5e1;
}

[data-bs-theme="dark"] a.has-citation-favicon:hover .citation-favicon-wrapper {
  background-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] a.has-citation-favicon:hover .citation-favicon-label {
  color: #f1f5f9;
}

[data-bs-theme="dark"] .citation-favicon {
  filter: brightness(1.1);
}

/* ==========================================================================
   CONTEXTUAL ADJUSTMENTS
   ========================================================================== */

/* Tables - compact */
table .citation-favicon-wrapper,
.table .citation-favicon-wrapper {
  padding: 1px 4px 1px 3px;
  margin-right: 3px;
}

table .citation-favicon,
.table .citation-favicon {
  width: 12px;
  height: 12px;
}

table .citation-favicon-label,
.table .citation-favicon-label {
  font-size: 10px;
}

/* Lists */
li .citation-favicon-wrapper {
  vertical-align: middle;
}

/* Callouts - slightly smaller */
.callout .citation-favicon-wrapper {
  padding: 1px 5px 1px 3px;
}

.callout .citation-favicon {
  width: 12px;
  height: 12px;
}

.callout .citation-favicon-label {
  font-size: 10px;
}

/* ==========================================================================
   EXCLUSIONS
   ========================================================================== */

.sidebar .citation-favicon-wrapper,
.quarto-sidebar .citation-favicon-wrapper,
#quarto-sidebar .citation-favicon-wrapper,
nav .citation-favicon-wrapper,
.navbar .citation-favicon-wrapper,
.nav-link .citation-favicon-wrapper,
.dropdown-menu .citation-favicon-wrapper,
.breadcrumb .citation-favicon-wrapper {
  display: none !important;
}

footer .citation-favicon-wrapper,
.page-footer .citation-favicon-wrapper,
.quarto-footer .citation-favicon-wrapper {
  display: none !important;
}

.quarto-title-meta .citation-favicon-wrapper,
.quarto-title-banner .citation-favicon-wrapper {
  display: none !important;
}

.toc .citation-favicon-wrapper,
#TOC .citation-favicon-wrapper,
.quarto-toc .citation-favicon-wrapper {
  display: none !important;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .citation-favicon-wrapper {
    display: none !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .citation-favicon-wrapper {
    transition: none;
    opacity: 1;
  }
}

@media (prefers-contrast: high) {
  .citation-favicon-wrapper {
    border: 1px solid currentColor;
  }

  .citation-favicon-label {
    color: inherit;
  }
}