/* Button: .btn (primary), .btn--ghost, .btn--lg, .btn--on-band (for the call-to-action band).
   Works on <a> and <button>. States: :disabled / [aria-disabled="true"], and [aria-busy="true"] shows a spinner.
   Hover, focus and press are the same for every variant: the button pops up 2 px with a shadow (--shadow-btn), and presses back down.
   This is deliberately solid; the see-through raised look belongs to menu items (.glass-lift in glass.css). */

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 2px solid var(--accent); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font: 700 1rem var(--font); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .18s, transform .18s cubic-bezier(.2, .8, .3, 1.25); }
.btn:hover, .btn:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-btn); transform: translateY(-2px); }
.btn:active { box-shadow: none; transform: none; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: color-mix(in srgb, var(--teal) 14%, transparent); border-color: var(--teal); }

.btn--lg { min-height: 52px; padding: 0 var(--space-6); font-size: 1.05rem; }

.btn--on-band { background: var(--cta-btn-bg); border-color: var(--cta-btn-bg); color: var(--cta-btn-ink); }
.btn--on-band:hover, .btn--on-band:focus-visible { background: var(--cta-btn-bg-hover); border-color: var(--cta-btn-bg-hover); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }   /* keep the label in the DOM for screen readers */
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--on-accent); border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
.btn--ghost[aria-busy="true"]::after { border-color: var(--ink); border-right-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }