/* ==========================================================================
   BUTTONS - gold primary, outline, circle arrow, Drupal button mapping.
   In CKEditor, a link gets the button look with the "Button" link style.
   ========================================================================== */
.btn-epsa, a.btn-epsa, .pg .btn-epsa,
.button--primary, .btn-primary {
  --bs-btn-bg: var(--epsa-gold);
  --bs-btn-border-color: var(--epsa-gold);
  --bs-btn-color: var(--epsa-navy);
  --bs-btn-hover-bg: var(--epsa-ink);
  --bs-btn-hover-border-color: var(--epsa-ink);
  --bs-btn-hover-color: var(--epsa-navy);
  --bs-btn-active-bg: var(--epsa-ink);
  --bs-btn-active-border-color: var(--epsa-ink);
  --bs-btn-active-color: var(--epsa-navy);
}
a.btn-epsa + a.btn-epsa { margin-left: 1rem; }
@media (max-width: 767px) {
  a.btn-epsa + a.btn-epsa { margin-left: 0; margin-top: 1rem; }
}
.btn-epsa {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--epsa-gold);
  border-radius: var(--epsa-radius);
  background: var(--epsa-gold);
  color: var(--epsa-navy);
  font-size: var(--font-size-m);
  font-weight: 600;
  line-height: var(--lh-tight);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-epsa:hover, .btn-epsa:focus-visible {
  background: var(--epsa-ink);
  border-color: var(--epsa-ink);
  color: var(--epsa-navy);
}
.btn-epsa-outline {
  background: transparent;
  color: var(--epsa-gold);
}
.btn-epsa-outline:hover { background: var(--epsa-gold); color: var(--epsa-navy); }

/* Circle arrow buttons (sliders, rails). */
.btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1.5px solid var(--epsa-gold);
  border-radius: 50%;
  background: transparent;
  color: var(--epsa-gold);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.btn-circle:hover, .btn-circle:focus-visible { background: var(--epsa-gold); color: var(--epsa-navy); }
.btn-circle:disabled { opacity: 0.35; pointer-events: none; }
.btn-circle svg { width: 1.25rem; height: 1.25rem; display: block; }

/* Button group wrapper (paragraph CTAs). */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: clamp(var(--space-5), 2.6vw, var(--space-6)); }

/* Focus ring. */
:is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--epsa-gold); outline-offset: 3px; }