/**
 * AAN attribution badge.
 *
 * Plain CSS on purpose: this drops into client projects with different
 * Tailwind versions, or none at all. Nothing here depends on a build step.
 *
 * The core idea — the badge has no colour of its own. It inherits the host
 * footer's `color` and derives its border and background as percentages of
 * that same colour via color-mix. AAN orange appears only on hover. That is
 * why one snippet works on a white footer, a cream one and a navy one with
 * zero per-client adjustment.
 */

.aan-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  /* Fixed font so the company name reads identically on every client site,
     whatever typeface the host footer uses. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  /* Footers are often narrow columns. Without this "Powered by" wraps onto two
     lines and the pill loses its shape. */
  white-space: nowrap;
  /* Neutral fallback first: color-mix is unsupported in older browsers, and
     without this the badge would render borderless there. */
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-color: color-mix(in srgb, currentColor 14%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.aan-badge img,
.aan-badge svg {
  display: block;
  flex: none;
}

/* "Powered by" — deliberately quieter than the name it introduces. */
.aan-badge .aan-badge__pre {
  font-size: 11px;
  opacity: 0.55;
}

.aan-badge .aan-badge__name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0.92;
}

.aan-badge:hover,
.aan-badge:focus-visible {
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.08);
  box-shadow: 0 0 24px -6px rgba(249, 115, 22, 0.35);
}

/* Saturated dark footers: orange-500 loses contrast, so lift to orange-300. */
.aan-badge--on-dark:hover,
.aan-badge--on-dark:focus-visible {
  color: #fdba74;
  border-color: rgba(253, 186, 116, 0.35);
  background: rgba(249, 115, 22, 0.1);
}

/* ---- sizes. 28px is the default; use 24 only when the footer is tight. ---- */

.aan-badge--24 {
  gap: 6px;
  padding: 5px 11px 5px 8px;
}
.aan-badge--24 img,
.aan-badge--24 svg {
  height: 13px;
  width: 17.9px;
}
.aan-badge--24 .aan-badge__pre {
  font-size: 10px;
  opacity: 0.6;
}
.aan-badge--24 .aan-badge__name {
  font-size: 10.5px;
  opacity: 0.95;
}

.aan-badge--28 img,
.aan-badge--28 svg {
  height: 16px;
  width: 22px;
}

.aan-badge--34 {
  gap: 10px;
  padding: 8px 16px 8px 12px;
}
.aan-badge--34 img,
.aan-badge--34 svg {
  height: 19px;
  width: 26.1px;
}
.aan-badge--34 .aan-badge__pre {
  font-size: 12px;
  opacity: 0.6;
}
.aan-badge--34 .aan-badge__name {
  font-size: 13.5px;
  opacity: 0.95;
}

/* Mark plus name, no "Powered by". For very tight footers. */
.aan-badge--compact {
  gap: 7px;
  padding: 6px 12px 6px 10px;
}

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