assets/styles.css

/* Header links: transparent background, white text, grow on hover */
.no-bg-link {
  background-color: transparent !important;
  color: #ffffff !important;
  transition: transform 0.12s ease, background-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  padding: 6px 14px; /* keep spacing consistent with inline styles */
  border-radius: 18px;
}

/* Subtle hover tint and scale for interactivity */
.no-bg-link:hover {
  transform: scale(1.06);
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Make logo images scale smoothly on hover */
.no-bg-link img {
  transition: transform 0.12s ease;
}
.no-bg-link:hover img {
  transform: scale(1.06);
}

/* Read the paper button: scale up on hover */
.paper-button {
  transition: transform 0.12s ease;
  will-change: transform;
}
.paper-button:hover {
  transform: scale(1.06);
}

/* Hugging Face brand text to use Inter and visually match HF typography */
.hf-brand-text {
  font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  font-weight: 1000;
  font-size: 14px;
  line-height: 1;
  margin-left: 8px;
  color: #FFFFFF;
  display: inline-block;
  transform-origin: center;
}

/* Paper link: position relative for arrow, overflow visible */
.paper-link {
  position: relative; /* needed for positioning the arrow */
  overflow: visible;
  background-color: #AC482A !important; /* restore previous button color */
  color: #FFFFFF !important;
  padding: 10px 20px; /* ensure spacing matches inline styles */
  border-radius: 5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1)), background-color var(--default-transition-duration, .15s);
}

/* Small arrow placed inline to the right of the text */
.paper-link::after {
  content: "↗";
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #FFFFFF;
  opacity: 0.95;
  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1));
  transform-origin: center;
  pointer-events: none;
  vertical-align: baseline;
}

/* Hover/focus states */
.paper-link:hover,
.paper-link:focus {
  transform: scale(1.06);
  background-color: #95371f !important; /* slightly darker on hover */
}
.paper-link:hover::after,
.paper-link:focus::after {
  transform: scale(1.08);
}

/* Apply same interactive behavior to leaderboard "show top" toggles and download controls */
/* Matches elements with ids like "top_countries-toggle" and download anchors like "download-top_countries" */
[id$="-toggle"],
button[id$="-toggle"],
[id^="download-"],
a[id^="download-"],
button[id^="download-"],
.leaderboard-toggle,
.download-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none !important;
  background-color: transparent;
  color: #082030;
  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1)), background-color var(--default-transition-duration, .15s);
  will-change: transform;
}

/* Hover / focus: subtle scale + tint similar to header links */
[id$="-toggle"]:hover,
[id^="download-"]:hover,
button[id$="-toggle"]:hover,
button[id^="download-"]:hover,
.leaderboard-toggle:hover,
.download-btn:hover,
[id$="-toggle"]:focus,
[id^="download-"]:focus,
button[id$="-toggle"]:focus,
button[id^="download-"]:focus {
  transform: scale(1.06);
  outline: none;
}