/* === CSS/STYLE.CSS === */

/* --- 1. Basic Reset & Box Sizing --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    line-height: 1.7; /* Slightly increased for better readability of longer text */
    font-family: var(--font-family-sans-serif);
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
}

input, button, textarea, select {
    font: inherit;
}

/* --- 2. CSS Custom Properties (Variables) --- */
:root {
    /* Colors */
    --primary-color: #2c3e50;    /* Deep blue/grey */
    --secondary-color: #3498db;  /* Friendly blue */
    --accent-color: #e74c3c;     /* Contrasting accent */
    --light-bg-color: #ffffff;
    --medium-bg-color: #f8f9fa;
    --dark-bg-color: #1f2937;

    --text-color: #333333;
    --text-color-light: #f8f9fa; /* Slightly off-white for better readability on dark */
    --text-color-muted: #6c757d; /* For less important text */
    --link-color: var(--secondary-color);
    --link-hover-color: #2980b9;

    /* Typography */
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-serif: "Georgia", "Times New Roman", Times, serif;

    /* Spacing */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem;  /* 8px */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;  /* 24px */
    --spacing-xl: 2.5rem;  /* 40px (increased for more whitespace) */
    --spacing-xxl: 4rem;   /* 64px (increased for more whitespace) */

    /* Borders */
    --border-radius: 5px; /* Slightly more rounded */
    --border-color: #dee2e6;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 10px rgba(0,0,0,0.08);

    /* Transitions */
    --transition-speed: 0.25s;
}

/* --- 3. Body & General Styles --- */
body {
    font-family: var(--font-family-sans-serif);
    color: var(--text-color);
    background-color: var(--light-bg-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

a:hover {
    color: var(--link-hover-color);
    /* text-decoration: underline; */ /* Optional: Modern design often omits underline on hover for nav links */
    opacity: 0.85;
}

/* --- 4. Container --- */
.container {
    width: 90%;
    max-width: 1140px; /* Standard bootstrap-like max width */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* --- 5. Utility Classes --- */
.section-padding {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
}

.alternate-bg {
    background-color: var(--medium-bg-color);
}

.text-center {
    text-align: center;
}

.text-color-muted {
    color: var(--text-color-muted);
}

/* --- 6. Basic Typography --- */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    color: var(--primary-color);
    font-family: var(--font-family-serif); /* Serif for headings gives a classic publisher feel */
    font-weight: 600; /* Slightly bolder headings */
}

h1 { font-size: clamp(2.2rem, 5vw, 3rem); } /* Responsive font size */
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); }

p {
    margin-bottom: var(--spacing-md);
    max-width: 75ch; /* Limit line length for readability */
}
/* Center paragraphs in text-center sections */
.text-center p {
    margin-left: auto;
    margin-right: auto;
}


ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-sm);
}

blockquote {
    border-left: 4px solid var(--secondary-color);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--text-color-muted);
}

/* --- 7. Button Styling --- */
.btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-lg); /* Slightly larger padding */
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600; /* Bolder button text */
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    cursor: pointer;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    background-color: var(--link-hover-color);
    color: var(--text-color-light);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background-color: var(--secondary-color);
}
.btn-primary:hover {
    background-color: var(--link-hover-color);
}

.btn-secondary {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.btn-secondary:hover {
    background-color: #1e2b3a; /* Darker shade of primary */
}

/* --- 8. Header & Navigation --- */
.site-header {
    background-color: var(--light-bg-color);
    padding: var(--spacing-sm) 0; /* Reduced padding slightly */
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-text {
    font-size: 1.75rem; /* Slightly adjusted */
    font-weight: 700; /* Bolder logo */
    color: var(--primary-color);
    text-decoration: none;
    font-family: var(--font-family-serif); /* Logo with serif */
}
.logo-text:hover {
    color: var(--secondary-color);
    text-decoration: none;
    opacity: 1;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.main-navigation li {
    margin-left: var(--spacing-lg);
    margin-bottom: 0;
}
.main-navigation a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 3px solid transparent; /* Thicker underline for active state */
    transition: color var(--transition-speed) ease, border-bottom-color var(--transition-speed) ease;
}
.main-navigation a:hover,
.main-navigation a.active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
    text-decoration: none;
    opacity: 1;
}

/* --- 9. Hero Section Styling --- */
.hero-section {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--spacing-xxl) 0;
    text-align: center;
    /* background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/hero-banner.jpg'); */ /* Example with overlay */
    background-size: cover;
    background-position: center;
}
.hero-section h1 {
    color: var(--text-color-light);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family-serif); /* Ensure hero h1 also serif */
}
.hero-section .subtitle {
    font-size: 1.3rem;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-lg);
}

.page-hero-section {
    background-color: var(--medium-bg-color);
    color: var(--primary-color);
    padding: var(--spacing-xl) 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}
.page-hero-section h1 {
    color: var(--primary-color);
}
.page-hero-section .subtitle {
    font-size: 1.15rem;
    color: var(--text-color-muted);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 10. Homepage Specific Sections --- */
/* Mission Grid */
.mission-grid, .partnership-types, .tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}
.mission-item, .partnership-item, .tier-item {
    background-color: var(--light-bg-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.mission-item:hover, .partnership-item:hover, .tier-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.mission-item h3, .partnership-item h3, .tier-item h3 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-family-sans-serif); /* Sans-serif for these item headings for contrast */
    font-size: 1.25rem;
}
.mission-icon {
    width: 50px; /* Adjust as needed */
    height: 50px;
    margin-bottom: var(--spacing-md);
    /* Add filter if your icons are single color and you want to color them with CSS */
    /* filter: invert(56%) sepia(98%) saturate(1000%) hue-rotate(180deg) brightness(90%) contrast(90%); */ /* Example for secondary color */
}

/* Newsletter Form */
.newsletter-form {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.newsletter-form input[type="email"] {
    flex-grow: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-width: 200px; /* Prevent it from becoming too small before wrapping */
}
.newsletter-form button {
    padding: var(--spacing-sm) var(--spacing-lg); /* Match input padding */
    line-height: 1.7; /* ensure button height matches input */
}
.form-privacy-note {
    font-size: 0.85rem;
    color: var(--text-color-muted);
    margin-top: var(--spacing-md);
}

/* --- 11. Submissions Page Specific Sections --- */
.submission-email a {
    font-weight: 600;
    word-break: break-all; /* Prevent long email from breaking layout */
}
.tier-item {
    text-align: center; /* Center tier item content */
}
.tier-item h3 {
    margin-top: var(--spacing-sm);
}
.tier-note {
    margin-top: var(--spacing-lg);
    font-style: italic;
    color: var(--text-color-muted);
    text-align: center;
    /* Add these lines to center the block itself if it's narrower than its container */
    margin-left: auto;
    margin-right: auto;
}

/* --- 12. Contact Page Specific Sections --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: var(--spacing-xl);
}
@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
    }
}
.contact-info h3, .contact-form-container h3 { /* Match main section headings */
    font-family: var(--font-family-serif);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--primary-color);
}
.contact-info h4 { /* For sub-headings like General Inquiries */
    font-family: var(--font-family-sans-serif);
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
}
.contact-info .info-item {
    margin-bottom: var(--spacing-md);
}
.contact-info .info-item i { /* Basic icon styling - if you use an icon font */
    margin-right: var(--spacing-sm);
    color: var(--secondary-color);
    width: 20px; /* Give icon some space */
    text-align: center;
}
.contact-info .social-link {
    margin-right: var(--spacing-sm);
    font-size: 1.5rem; /* Example size for social icons */
}

/* Contact Form */
.form-group {
    margin-bottom: var(--spacing-md);
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--light-bg-color);
}
.form-group textarea {
    min-height: 120px;
    resize: vertical;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(var(--secondary-color-rgb, 52, 152, 219), 0.25); /* Define --secondary-color-rgb if using */
}
/* For the focus box-shadow, you'd need to define --secondary-color-rgb in :root, e.g. --secondary-color-rgb: 52, 152, 219; */
:root {
    /* ... other variables ... */
    --secondary-color-rgb: 52, 152, 219; /* RGB version of --secondary-color for box-shadow */
}


/* --- 13. Footer Styling --- */
.site-footer {
    background-color: var(--dark-bg-color);
    color: var(--text-color-light);
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    font-size: 0.95rem; /* Slightly larger footer text */
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}
.footer-column h4 {
    color: var(--text-color-light);
    margin-bottom: var(--spacing-md); /* Increased space */
    font-family: var(--font-family-sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
}
.site-footer a {
    color: #a5b4fc; /* Lighter, more accessible link color on dark bg */
}
.site-footer a:hover {
    color: var(--text-color-light);
    opacity: 1;
}
.site-footer ul {
    list-style: none;
    padding-left: 0;
}
.site-footer li {
    margin-bottom: var(--spacing-xs); /* Tighter spacing for footer links */
}
.copyright {
    text-align: center;
    border-top: 1px solid #374151; /* Adjusted border color */
    padding-top: var(--spacing-lg); /* More padding */
    font-size: 0.9rem;
    opacity: 0.7;
}

.copyright p { /* Centering fix applied here */
    max-width: none; /* Allow p to fill .copyright div */
    margin-bottom: 0; /* Remove default p margin */
    /* Text itself is centered by .copyright's text-align: center */
}

/* --- 14. Mobile Navigation & Responsive Styles --- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--primary-color);
    cursor: pointer;
    padding: var(--spacing-sm);
    line-height: 1;
    z-index: 1100; /* Ensure it's above sticky header content if nav opens weirdly */
}

.main-navigation.nav-open { /* This class is toggled by JS */
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; /* Position below the header based on its actual height */
    left: 0;
    right: 0;
    background-color: var(--light-bg-color);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    z-index: 1000; /* Ensure it's above content but below toggle if needed */
}
.main-navigation.nav-open ul {
    flex-direction: column;
    width: 100%;
}
.main-navigation.nav-open li {
    margin-left: 0;
    margin-bottom: var(--spacing-sm);
    width: 100%;
}
.main-navigation.nav-open a {
    display: block;
    padding: var(--spacing-md); /* Larger tap targets for mobile */
    text-align: left; /* Align text left in dropdown */
    border-bottom: 1px solid var(--border-color); /* Separator for links */
}
.main-navigation.nav-open a:last-child {
    border-bottom: none;
}
.main-navigation.nav-open a:hover,
.main-navigation.nav-open a.active {
    background-color: var(--medium-bg-color);
    color: var(--secondary-color);
    border-bottom-color: var(--border-color); /* Keep border or make transparent if bg is enough */
}

@media (max-width: 768px) {
    .main-navigation {
        display: none; /* Hide nav by default on small screens, shown by .nav-open */
    }
    .menu-toggle {
        display: block;
    }
    .site-header .container {
        /* Ensure space for toggle if logo is long */
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.35rem; }

    .mission-grid, .partnership-types, .tiers-grid, .footer-content {
        grid-template-columns: 1fr; /* Stack items in single column */
    }
    .hero-section {
        padding: var(--spacing-xl) 0;
    }
    .page-hero-section {
        padding: var(--spacing-lg) 0;
    }
    .newsletter-form input[type="email"], .newsletter-form button {
        width: 100%; /* Stack form elements */
        flex-grow: 0; /* Reset flex-grow */
    }
}

/* --- 15. FAQ Page Specific Sections --- */

.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-lg) 0;
}

.faq-item:first-child {
    padding-top: 0;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-question {
    font-size: 1.3rem;
    font-family: var(--font-family-sans-serif);
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.faq-answer p {
    max-width: 75ch; /* Already a global rule, but ensures consistency */
    margin-bottom: 0; /* Remove bottom margin from the last p in an answer */
    color: var(--text-color-muted); /* Softer color for answers */
    line-height: 1.8; /* Slightly more line height for readability */
}

/* Optional: Make the question clickable if you add JS for an accordion later */
.faq-question {
    /* cursor: pointer; */
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
}

/* --- 16. Form Feedback Messages --- */

.form-message {
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 500;
    max-width: 500px; /* Match newsletter form width */
    margin-left: auto;
    margin-right: auto;
}

.form-message.success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
    border: 1px solid #f5c6cb;
}