/*
 * ============================================================
 * BUTTONS  —  buttons.css
 * ============================================================
 * Three button styles used across the site:
 *
 *   .btn-cta      Hero outline buttons
 *                 Default: transparent + dark border + dark text
 *                 Hover:   black background + white text
 *
 *   .btn-donate   Nav "Donate" button
 *                 Always filled dark green
 *
 *   .btn-ripple   Add to any button to get the click ripple.
 *                 Works on both .btn-cta and .btn-donate.
 *
 * To change a button's look, edit only this file.
 * ============================================================
 */

/* --- Shared base ------------------------------------------- */
.btn-cta,
.btn-donate {
  position: relative;
  overflow: hidden;                /* required for the ripple */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  border-radius: var(--rg-radius-btn);
  cursor: pointer;
  text-decoration: none;
  transition:
    background    var(--rg-ease),
    color         var(--rg-ease),
    border-color  var(--rg-ease);
}

/* --- .btn-cta  (Plant With Us / Make A Donation) ----------- */
.btn-cta {
  padding: 11px 24px;
  background: transparent;
  color: #1a1a16;
  border: 2px solid #1a1a16;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background: #1a1a16;
  color: #ffffff;
}

/* --- .btn-donate  (nav Donate button) ---------------------- */
.btn-donate {
  padding: 9px 20px;
  background: var(--rg-green-dark);
  color: var(--rg-invert);
  border: 2px solid var(--rg-green-dark);
}

.btn-donate:hover,
.btn-donate:focus-visible {
  background: #0f2410;
  border-color: #0f2410;
}

/* --- Ripple effect ----------------------------------------- */
/*
 * .ripple-effect spans are injected by assets/js/ripple.js on click.
 * They expand from the click point and fade out.
 */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.55s linear forwards;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.22);
}