/* =========================
   HARD FIX: Force Donate button visible on mobile
   ========================= */

@media (max-width: 768px) {

    /* Force ALL standalone buttons visible */
    a.btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Specifically target Donate button */
    a[href="donate/index.php"] {
        display: flex !important;
        width: 100% !important;
        margin-top: 2rem !important;
        justify-content: center;
        align-items: center;
        z-index: 9999 !important;
        position: relative !important;
    }

    /* Kill parent clipping */
    .hero,
    .hero-section,
    .give-back,
    .container,
    .center {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

        .page-header {
            background-color: var(--color-primary);
            color: white;
            padding: 8rem 0 4rem;
            text-align: center;
        }

        .donate-cta {
            text-align: center;
            padding: 4rem 0;
        }

        .impact-metric {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #eee;
            text-align: center;
        }

        .impact-metric strong {
            display: block;
            font-size: 3rem;
            color: var(--color-primary);
            line-height: 1;
            font-weight: 800;
            margin-bottom: 0.5rem;
        }

        .impact-metric span {
            font-size: 0.9rem;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            display: block;
        }

        .card-content p {
            margin-bottom: 1rem;
            font-size: 0.95rem;
            color: #444;
        }