/* ==========================================================================
   BUTTONS — Primary, secondary, and CTA variants.
   ========================================================================== */

.btn,
.button,
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  padding: var(--button-padding);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--button-border-radius);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--button-font-weight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ---------- PRIMARY ---------- */

.btn--primary,
button[type="submit"],
input[type="submit"] {
  background: var(--color-primary-btn);
  color: var(--color-white);
  border-color: var(--color-primary-btn);
}

.btn--primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--color-primary-btn-hover);
  border-color: var(--color-primary-btn-hover);
  text-decoration: none;
  color: var(--color-white);
}

/* ---------- SECONDARY ---------- */

.btn--secondary {
  background: transparent;
  color: var(--color-primary-btn);
  border-color: var(--color-primary-btn);
}

.btn--secondary:hover {
  background: var(--color-primary-btn);
  color: var(--color-white);
  text-decoration: none;
}

/* ---------- PRIMARY ON DARK BACKGROUND ---------- */
/* Use the on-dark blue bg with dark text for buttons on dark hero/CTA backgrounds.
   This keeps the button color consistent with surrounding on-dark text/icons (#3a9dce)
   while maintaining 5.59:1 contrast ratio with dark text. */

.main--dark .btn--primary,
.otb-hero .btn--primary {
  background: var(--color-primary-on-dark);
  border-color: var(--color-primary-on-dark);
  color: var(--color-dark);
}

.main--dark .btn--primary:hover,
.otb-hero .btn--primary:hover {
  background: var(--color-primary-on-dark-hover);
  border-color: var(--color-primary-on-dark-hover);
  color: var(--color-dark);
}

/* ---------- SECONDARY ON DARK BACKGROUND ---------- */
/* Secondary buttons on dark backgrounds use the on-dark blue for text/border */

.main--dark .btn--secondary,
.otb-home-section--cta .btn--secondary {
  color: var(--color-primary-on-dark);
  border-color: var(--color-primary-on-dark);
}

.main--dark .btn--secondary:hover,
.otb-home-section--cta .btn--secondary:hover {
  background: var(--color-primary-on-dark);
  color: var(--color-white);
}

/* ---------- ON DARK BACKGROUND ---------- */

.btn--on-dark {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--on-dark:hover {
  background: var(--color-white);
  color: var(--color-dark);
  text-decoration: none;
}

/* ---------- LARGE ---------- */

.btn--lg {
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-sm);
}

/* ---------- DISABLED ---------- */

.btn:disabled,
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}