/* =========================
   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;
    }
}

        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../../images/stock/unsplash-1541534741688-6078c6bfb5c5.jpg');
            background-size: cover;
            background-position: center;
        }

        .track-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .track-img {
            height: 250px;
            object-fit: cover;
            width: 100%;
        }

        .track-content {
            padding: 2rem;
        }
.hero h1 {
    color: #ffffff;
    text-shadow: 0 4px 14px rgba(0,0,0,0.6);
}

.hero .lead {
    color: rgba(255,255,255,0.95);
    font-weight: 400;
}

        .wod-box {
            background: var(--color-off-white);
            border: 2px solid var(--color-primary);
            padding: 2.5rem;
            margin: 3rem auto;
            max-width: 600px;
            border-radius: 8px;
            text-align: center;
        }