/* Global & Typography */
:root {
    --slate: #4A5568;
    --burgundy: #722F37;
    --cream: #FDFBF7;
    --text-main: #2D3748;
}
body { font-family: 'Georgia', serif; background-color: #E2E8F0; color: var(--text-main); margin: 0; padding: 2rem 1rem; }

/* Boxed Layout */
.site-wrapper { max-width: 900px; margin: 0 auto; background: var(--cream); box-shadow: 0 0 20px rgba(0,0,0,0.1); border: 1px solid #CBD5E0; }

/* Header */
.elegant-header { text-align: center; padding: 4rem 2rem 2rem; border-bottom: 1px solid #E2E8F0; }
.elegant-header h1 { color: var(--burgundy); font-size: 2.5rem; margin: 0; font-weight: normal; letter-spacing: 1px; }
.subtitle { font-size: 1.2rem; color: var(--slate); font-style: italic; margin-bottom: 0.5rem; }
.charity-id { font-size: 0.85rem; color: #A0AEC0; font-family: sans-serif; }

/* Navigation */
.site-navigation { margin-top: 2rem; }
.site-navigation ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.site-navigation a { text-decoration: none; color: var(--slate); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; transition: color 0.3s; font-family: sans-serif; }
.site-navigation a:hover, .site-navigation a.current { color: var(--burgundy); border-bottom: 1px solid var(--burgundy); padding-bottom: 2px; }

/* Main Content */
.main-area { padding: 4rem 2rem; text-align: center; }
.intro-section h2 { font-size: 2rem; color: var(--slate); font-weight: normal; }
.divider { width: 50px; height: 2px; background-color: var(--burgundy); border: none; margin: 1.5rem auto; }
.lead-text { font-size: 1.1rem; line-height: 1.8; max-width: 700px; margin: 0 auto; color: #4A5568; }

/* Banner */
.action-banner { background-color: var(--slate); color: var(--cream); padding: 3rem 2rem; margin-top: 4rem; }
.action-banner h3 { font-size: 1.5rem; font-weight: normal; margin-bottom: 1rem; }
.button-outline { display: inline-block; margin-top: 1.5rem; padding: 0.8rem 2rem; border: 1px solid var(--cream); color: var(--cream); text-decoration: none; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; transition: all 0.3s; font-family: sans-serif; }
.button-outline:hover { background-color: var(--cream); color: var(--slate); }

/* Footer */
.elegant-footer { text-align: center; padding: 3rem 2rem; background-color: #F7FAFC; border-top: 1px solid #E2E8F0; font-family: sans-serif; font-size: 0.9rem; }
.footer-details p { margin: 0.3rem 0; color: var(--slate); }
.footer-details a { color: var(--burgundy); text-decoration: none; }
.copy { margin-top: 2rem; font-size: 0.8rem; color: #A0AEC0; }

/* Heritage Grid for Projects Page */
.heritage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: left;
}
.heritage-card {
    background: white;
    padding: 2rem;
    border: 1px solid #E2E8F0;
    border-top: 4px solid var(--burgundy);
    position: relative;
}
.heritage-card h3 {
    margin-top: 1rem;
    color: var(--text-main);
}
.status {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: sans-serif;
    color: white;
}
.status.ongoing { background-color: var(--burgundy); }
.status.planning { background-color: var(--slate); }
.status.completed { background-color: #48BB78; }

/* Donation Boxes */
.donation-box {
    background: white;
    padding: 2rem;
    border: 1px solid #E2E8F0;
}

/* Elegant Form Styles for Contact Page */
.heritage-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.form-row {
    display: flex;
    flex-direction: column;
}
.heritage-form label {
    font-family: sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--slate);
    margin-bottom: 0.5rem;
}
.heritage-form input,
.heritage-form select,
.heritage-form textarea {
    padding: 0.8rem;
    border: 1px solid #CBD5E0;
    background-color: white;
    font-family: 'Georgia', serif;
    font-size: 1rem;
    color: var(--text-main);
}
.heritage-form input:focus,
.heritage-form select:focus,
.heritage-form textarea:focus {
    outline: none;
    border-color: var(--burgundy);
}
.btn-elegant {
    background-color: var(--burgundy);
    color: var(--cream);
    padding: 1rem;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 1rem;
}
.btn-elegant:hover {
    background-color: #5a252b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-layout {
        flex-direction: column;
    }
}