/* Base global styles */
:root {
    --primary-bg-start: #063e00;
    --primary-bg-end: #2e631f;
    --accent: #8bff8d;
    --accent-hover: #bdffb3;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --radius: 12px;
    --text-light: #f8f9fa;
    --footer-bg: #d4f0d4; /* semi-light green */
}

/* Allow page to grow naturally; ensure minimum full viewport height without constraining further growth */
html, body {
    /* height: 100%; */ /* removed fixed height */
}
html {
    min-height: 100%;
    /* Put the gradient on html so it spans full document and doesn't recalc per body growth */
    background: #fff7ce; /* fallback */
    background: linear-gradient(
        to bottom,
        #ffffe9 0%,
        #ffffff 35%,
        #fffef6 60%,
        #fff9dd 80%,
        #fff7ce 100%
    );
    background-repeat: no-repeat;
    background-attachment: fixed; /* keeps gradient static to avoid perceived "reset" when scrolling */
    background-size: 100% 100%; /* let it stretch the full element height */
}
body {
    min-height: 100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: transparent; /* keep transparent so html gradient shows through */
    color: #222;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.2rem;
}

.btn.filter-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #222;
    margin: .25rem .4rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: background .25s, transform .25s;
}

.btn.filter-btn.active, .btn.filter-btn:hover {
    background: var(--accent, #8bff8d);
    color: #220033;
    transform: translateY(-2px);
}

.image-card {
    background: var(--card-bg, #ffffff);
    border-radius: var(--radius, 12px);
    overflow: hidden;
    box-shadow: var(--card-shadow, 0 4px 12px rgba(0,0,0,0.15));
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.image-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.image-card .image-caption {
    padding: .75rem 1rem;
    background: #fff;
}

.image-card .image-caption h5 {
    margin: 0;
    font-size: 1.05rem;
}

.loading {
    color: #555;
}

/* Footer */
.site-footer {
    background: #446c4a;
    padding: 40px 20px;
    text-align: center;
}

.site-footer p {
    margin: .35rem 0;
    font-size: .9rem;
}

/* Utility */
.text-center {
    text-align: center;
}

.text-muted {
    color: #6c757d !important;
}

/* Smooth transitions */
* {
    transition: background-color .25s, color .25s;
}