/**
 * CFRO Component — Donate Page (Figma v3)
 * Block-based patterns: donation cards, amount buttons, why-donate.
 * @package CFRO
 * @since   4.2.0
 */

/* ── Donate Card ─────────────────────────────── */
.cfro-donate-card {
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.cfro-donate-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Colored header bars */
.cfro-donate-card__header {
    border-bottom: 1px solid rgba(27,122,90,0.1);
}
.cfro-donate-card__header--coral {
    background: color-mix(in srgb, var(--cfro-coral) 8%, #fff) !important;
    border-bottom-color: rgba(224,107,86,0.15) !important;
}
.cfro-donate-card__header--amber {
    background: color-mix(in srgb, var(--cfro-amber) 8%, #fff) !important;
    border-bottom-color: rgba(217,119,6,0.15) !important;
}

/* ── Amount Buttons ──────────────────────────── */
.cfro-amount-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.cfro-amount-btn {
    flex: 1;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(27,122,90,0.15);
    border-radius: 0.375rem;
    background: #fff;
    font-family: var(--cfro-font-sans, sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cfro-charcoal);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Coral variant hover (One-Time) */
.cfro-amount-btn--coral:hover,
.cfro-amount-btn--coral.is-active {
    background: rgba(224,107,86,0.05);
    border-color: rgba(224,107,86,0.4);
    color: var(--cfro-coral);
}
/* Amber variant hover (Sustainer) */
.cfro-amount-btn--amber:hover,
.cfro-amount-btn--amber.is-active {
    background: rgba(217,119,6,0.05);
    border-color: rgba(217,119,6,0.4);
    color: var(--cfro-amber);
}

/* ── Donate Submit Button ────────────────────── */
.cfro-donate-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.375rem;
    font-family: var(--cfro-font-sans, sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}
.cfro-donate-submit--coral {
    background: var(--cfro-coral);
}
.cfro-donate-submit--coral:hover {
    background: var(--cfro-rose);
}
.cfro-donate-submit--amber {
    background: var(--cfro-amber);
}
.cfro-donate-submit--amber:hover {
    background: color-mix(in srgb, var(--cfro-amber) 90%, black);
}
.cfro-donate-submit:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
a.cfro-donate-submit,
a.cfro-donate-submit:hover,
a.cfro-donate-submit:focus {
    color: #fff;
}


/* ── Why Donate ──────────────────────────────── */
.cfro-why-donate {
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .cfro-why-donate {
        padding: 2rem !important;
    }
}

/* ── Centered hero variant ───────────────────── */
.cfro-page-hero--centered .wp-block-cover__inner-container {
    text-align: center;
}