/* Fallback styling when program/icon images are missing */
.program-image img,
.Volunteer-image img,
img.student-photo,
img[src*="sat.png"],
img[src*="dialogues.png"],
img[src*="college.png"],
img[src*="homework.png"] {
    object-fit: cover;
    background: linear-gradient(145deg, rgba(57, 166, 163, 0.15), rgba(23, 50, 77, 0.08));
}

img.is-placeholder {
    object-fit: cover;
    background: linear-gradient(145deg, #39A6A3, #17324D);
}

/* Final nav override — flat .top must stay flex (loads after header.css) */
body .top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 0.75rem !important;
    overflow-x: auto !important;
}

body .top:has(.nav-main) {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "brand nav actions" !important;
    overflow-x: visible !important;
}

body .top > .brand {
    margin-right: auto !important;
    flex-shrink: 0 !important;
}

body .top .index-1,
body .top .about-1,
body .top .faq-1,
body .top .story-1,
body .top .involve-1,
body .top .donate-1,
body .top .signin-button,
body .top .signup-button {
    position: static !important;
    margin: 0 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

@media (max-width: 900px) {
    body .top .index-1,
    body .top .about-1,
    body .top .faq-1,
    body .top .story-1,
    body .top .involve-1,
    body .top .donate-1 {
        display: inline-flex !important;
    }
}