/* =============================================================
   Science Habitat — Button Components
   ============================================================= */

/* ─── Base ─── */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--sh-radius-sm);
  font-family: var(--sh-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background var(--sh-transition-fast),
    border-color var(--sh-transition-fast),
    color var(--sh-transition-fast),
    transform var(--sh-transition-fast),
    box-shadow var(--sh-transition-fast);
  white-space: nowrap;
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--sh-teal);
  outline-offset: 3px;
}

/* ─── Primary (Orange — CTAs only) ─── */
.btn-primary,
.button--primary {
  background: var(--sh-orange);
  color: var(--sh-white);
}
.btn-primary:hover,
.button--primary:hover {
  background: var(--sh-orange-hover);
  color: var(--sh-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,107,53,0.3);
}

/* ─── Secondary (Teal outline) ─── */
.btn-secondary,
.button--secondary {
  background: transparent;
  color: var(--sh-teal-light);
  border: 2px solid rgba(26,138,125,0.6);
}
.btn-secondary:hover,
.button--secondary:hover {
  border-color: var(--sh-teal-light);
  background: rgba(26,138,125,0.08);
  color: var(--sh-teal-light);
}

/* ─── Teal (solid) ─── */
.btn-teal {
  background: var(--sh-teal);
  color: var(--sh-white);
}
.btn-teal:hover {
  background: var(--sh-teal-light);
  color: var(--sh-white);
}

/* ─── Outline (Navy) ─── */
.btn-outline {
  background: transparent;
  color: var(--sh-navy);
  border: 2px solid var(--sh-navy);
}
.btn-outline:hover {
  background: var(--sh-navy);
  color: var(--sh-white);
}

/* ─── Ghost (white, on dark bg) ─── */
.btn-ghost {
  background: transparent;
  color: var(--sh-white);
  border: 1.5px solid rgba(255,255,255,0.35);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  color: var(--sh-white);
}

/* ─── Sizes ─── */
.btn--sm { padding: 8px 18px; font-size: 0.82rem; }
.btn--lg { padding: 16px 36px; font-size: 1rem; }

/* ─── CTA Link ─── */
.sh-cta-link {
  color: var(--sh-teal);
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: gap var(--sh-transition-fast), color var(--sh-transition-fast);
}
.sh-cta-link:hover { gap: 10px; color: var(--sh-teal-light); }

/* ─── Webform / contact form submit overrides ─── */
.webform-submission-form .form-actions .button,
.contact-message-form .form-actions .button {
  background: var(--sh-orange);
  color: var(--sh-white);
  border: none;
  padding: 14px 32px;
  border-radius: var(--sh-radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background var(--sh-transition-fast);
}
.webform-submission-form .form-actions .button:hover,
.contact-message-form .form-actions .button:hover {
  background: var(--sh-orange-hover);
}