/* ========================================================================
   Phase 4 Step 3 — "Cited N primary sources" badge

   Renders inside the Blocksy hero block, immediately after the H1 (via
   blocksy:hero:title:after). Subtle cyan-tinted pill, links to #sources.
   ======================================================================== */

.cai-cited-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: var(--cai-space-md) 0 var(--cai-space-lg);  /* 0.75rem top, 1rem bottom */
  padding: 0.32rem 0.78rem;
  font-family: var(--cai-font-sans);
  font-size: 0.81rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cai-badge-text);
  background: var(--cai-badge-bg);
  border: 1px solid var(--cai-badge-border);
  border-radius: var(--cai-radius-pill);
  text-decoration: none;
  transition: background-color var(--cai-duration-fast) var(--cai-easing),
              border-color    var(--cai-duration-fast) var(--cai-easing),
              transform       var(--cai-duration-fast) var(--cai-easing);
}
.cai-cited-badge:hover,
.cai-cited-badge:focus-visible {
  background: var(--cai-badge-hover-bg);
  border-color: var(--cai-primary);
  color: var(--cai-primary-darker);
  text-decoration: none;
}
.cai-cited-badge:active {
  transform: translateY(1px);
}
.cai-cited-badge:focus-visible {
  outline: 2px solid var(--cai-primary);
  outline-offset: 2px;
}

.cai-cited-badge__icon {
  color: var(--cai-primary-dark);
  flex-shrink: 0;
}

/* Smooth-scroll behavior on the anchor jump (browsers honour CSS scroll-behavior
   on the root html element; pair with scroll-margin-top on #sources so it doesn't
   land under the sticky header). */
#sources {
  scroll-margin-top: calc(var(--cai-sticky-top) + var(--cai-space-md));
}

@media (max-width: 599px) {
  .cai-cited-badge {
    font-size: 0.78rem;
    padding: 0.28rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cai-cited-badge { transition: none; }
}