/* --- Global Styles & Variables --- */
:root {
    /* Color Palette */
    --primary-color: #2563eb; --primary-light: #60a5fa; --primary-dark: #1d4ed8;
    --secondary-color: #FFC107; --secondary-light: #FFD54F; --secondary-dark: #FFA000;
    --accent-color: #f59e0b; --accent-dark: #d97706; --accent-light: #fbbf24; /* Added accent-light */
    --danger-color: #e52323; --danger-dark: #c81e1e; /* Added Danger color */
    --dark-color: #111827; --text-color: #374151; --text-light: #6b7280;
    --background-color: #ffffff; --background-alt: #dee1e5;
    --border-color: #d1d5db; --card-background: #ffffff;
    --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    --card-hover-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    --heading-color: #111827; --link-color: var(--primary-color); --link-hover-color: var(--primary-dark);
    --header-bg-scrolled: var(--primary-color); --header-text-scrolled: var(--white-color);
    --shape-divider-bg: var(--background-alt);
    --icon-wrapper-bg-light: #dee1e5; /* Light gray fallback for icon wrappers */
    --icon-wrapper-bg-dark-mode: rgba(96, 165, 250, 0.15); /* Specific for dark mode */
    --icon-wrapper-bg-footer-dark: rgba(255, 255, 255, 0.1); /* Default for dark footer */
    --icon-color: var(--primary-color); /* Base icon color */
    --focus-ring-color: rgba(37, 99, 235, 0.4);
    /* --service-overlay-color: rgba(17, 24, 39, 0.6); /* REMOVED - Use gradients now */
    /* --impact-overlay-color: rgba(17, 24, 39, 0.7); /* REMOVED */

    /* Spacing Variables */
    --space-xxs: 0.25rem; --space-xs: 0.5rem; --space-s: 0.75rem; --space-m: 1rem;
    --space-l: 1.5rem; --space-xl: 2.5rem; --space-xxl: 4rem;
    --space-section: 5rem; --space-section-sm: 4rem;

    /* Shared */
    --white-color: #ffffff;
    --font-heading: 'Montserrat', sans-serif; --font-body: 'Poppins', sans-serif;
    --container-width: 1140px; --header-height: 70px;
    --border-radius: 8px; --transition-speed: 0.3s;
    --carousel-transition-speed: 0.5s;

    /* Scrollbar Variables */
    --track-color: #f1f1f1; /* Light grey track for light mode */
    --thumb-color: #c1c1c1; /* Medium grey thumb */
    --thumb-hover-color: #a8a8a8; /* Darker grey on hover */

    /* REMOVED Service Card Specific Variables */
}

/* Dark Mode Palette */
html[data-theme="dark"] {
    --primary-color: #60a5fa; --primary-light: #93c5fd; --primary-dark: #3b82f6;
    /* Force Secondary colors to Light Mode values */
    --secondary-color: #FFC107; /* Force light mode yellow */
    --secondary-light: #FFD54F; /* Force light mode light yellow */
    --secondary-dark: #FFA000;  /* Force light mode dark yellow */
    --accent-color: #fbbf24; --accent-dark: #f59e0b; --accent-light: #fcd34d; /* Added accent-light */
    --dark-color: #1f2937; --text-color: #d1d5db; --text-light: #9ca3af;
    --background-color: #111827; --background-alt: #1f2937;
    --border-color: #4b5563; --card-background: #1f2937;
    --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    --card-hover-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
    --heading-color: #f3f4f6;
    /* Use darker blue for base links and general icons */
    --link-color: var(--primary-dark);
    --link-hover-color: var(--primary-color); /* Use standard blue for hover */
    --icon-color: var(--primary-dark); /* Use darker blue for general icons */
    --header-bg-scrolled: #1f2937; --header-text-scrolled: var(--primary-color); /* Header text uses standard blue */
    --shape-divider-bg: var(--background-alt);
    --focus-ring-color: rgba(96, 165, 250, 0.4);
    /* --service-overlay-color: rgba(0, 0, 0, 0.7); /* REMOVED - Use gradients now */
    /* --impact-overlay-color: rgba(0, 0, 0, 0.75); /* REMOVED */
    /* Keep danger color consistent */
    --danger-color: #e52323;
    --danger-dark: #c81e1e;

    /* Scrollbar Variables */
    --track-color: var(--background-alt); /* Dark grey track for dark mode */
    --thumb-color: #555; /* Medium dark thumb */
    --thumb-hover-color: #777; /* Lighter dark thumb on hover */

    /* REMOVED Service Card Specific Variables (Dark Mode) */
}

/* --- Base & Typography --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden; /* Prevent horizontal scrollbars / overflow */
}
body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.7;
    overflow-x: hidden; /* Prevent horizontal scrollbars / overflow */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Enhance scroll lock for mobile */
html.no-scroll-html,
body.no-scroll {
    overflow: hidden;
    /* Optional: Some mobile scenarios benefit from fixed height too */
    /* height: 100%; */ /* Uncomment cautiously if needed */
}
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-l); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; color: var(--heading-color); margin-bottom: var(--space-s); line-height: 1.3; transition: color var(--transition-speed) ease; }
h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: var(--space-m); }
h2 { font-size: 2.2rem; margin-bottom: var(--space-m); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
p { margin-bottom: var(--space-m); }
a { color: var(--link-color); text-decoration: none; transition: color var(--transition-speed) ease; }
a:hover { color: var(--link-hover-color); }
a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 2px; } /* Added focus-visible */
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* Spacing Utilities */
.mt-s { margin-top: var(--space-s); } .mb-s { margin-bottom: var(--space-s); }
.mt-m { margin-top: var(--space-m); } .mb-m { margin-bottom: var(--space-m); }
.mt-l { margin-top: var(--space-l); } .mb-l { margin-bottom: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); } .mb-xl { margin-bottom: var(--space-xl); }
.pt-m { padding-top: var(--space-m); } .pb-m { padding-bottom: var(--space-m); }
.pt-xl { padding-top: var(--space-xl); } .pb-xl { padding-bottom: var(--space-xl); }

/* Section Padding */
.section-padding { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section-padding-sm { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); }

/* Grid Gaps */
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }
.gap-xl { gap: var(--space-xl); }

/* Text Alignment & Backgrounds */
.text-center { text-align: center; }
.text-white { color: var(--white-color) !important; } /* Keep !important for utility override */
.bg-light { background-color: var(--background-alt); transition: background-color var(--transition-speed) ease; }
.bg-dark { background-color: var(--dark-color); transition: background-color var(--transition-speed) ease; }

/* Basic Grid Helpers */
/* Base 3-col uses auto-fit for general cases */
.grid-3-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-l); }
/* REMOVED specific override for #get-involved */
.grid-2-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-l); }
.grid-auto-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-l); }

/* Items Alignment & Spacing */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.space-y-s > * + * { margin-top: var(--space-s); }
.space-y-m > * + * { margin-top: var(--space-m); }
.space-y-l > * + * { margin-top: var(--space-l); }

/* Rounded & Shadows */
.rounded-lg { border-radius: var(--border-radius); }
.rounded-full { border-radius: 9999px; }
.shadow-lg { box-shadow: var(--card-shadow); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* --- Buttons --- */
.btn { display: inline-block; padding: var(--space-s) var(--space-l); border-radius: var(--border-radius); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; text-align: center; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.2s ease, box-shadow var(--transition-speed) ease; transform: translateY(0); }
.btn:focus { outline: none; } /* Remove default outline */
/* REMOVED .btn:active { transform: translateY(0); } */

/* Hover state - applies transform only when NOT focused */
.btn:hover:not(:focus-visible) { transform: translateY(-2px); }

/* Focus state - applies outline and hover COLORS but NO transform */
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-color); }

/* JS Active State for Buttons */
.btn.js-active-state { transform: translateY(0); /* Reset transform for active state */ }

/* --- Primary Button --- */
.btn-primary { background-color: var(--primary-color); color: var(--white-color); border-color: var(--primary-color); }
.btn-primary:hover:not(:focus-visible) { background-color: var(--primary-light); border-color: var(--primary-light); color: var(--white-color); }
.btn-primary:focus-visible { background-color: var(--primary-light); border-color: var(--primary-light); color: var(--white-color); box-shadow: 0 0 0 3px var(--focus-ring-color); }
/* REMOVED .btn-primary:active */
.btn-primary.js-active-state { background-color: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(0); } /* Added JS state */

/* --- Secondary Button (General - e.g., Get Involved Cards) --- */
.btn-secondary { background-color: var(--secondary-color); color: var(--white-color); border-color: var(--secondary-color); } /* Base: White text */
.btn-secondary:hover:not(:focus-visible) { background-color: var(--secondary-light); border-color: var(--secondary-light); color: var(--dark-color); } /* Hover: Dark text */
.btn-secondary:focus-visible { background-color: var(--secondary-light); border-color: var(--secondary-light); color: var(--dark-color); box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5); } /* Focus: Dark text */
/* REMOVED .btn-secondary:active */
.btn-secondary.js-active-state { background-color: var(--secondary-dark); border-color: var(--secondary-dark); color: var(--white-color); transform: translateY(0); } /* Added JS state */

/* Dark Mode Secondary Button (General) */
/* Colors are forced via variables, only need to adjust shadow */
html[data-theme="dark"] .btn-secondary:focus-visible { box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.6); }

/* Override for Secondary buttons in Get Involved section to always have white text */
#get-involved .involvement-option .btn-secondary:hover:not(:focus-visible),
#get-involved .involvement-option .btn-secondary:focus-visible {
    color: var(--white-color);
}
#get-involved .involvement-option .btn-secondary.js-active-state { /* Keep white text for JS active state too */
    color: var(--white-color);
}
html[data-theme="dark"] #get-involved .involvement-option .btn-secondary:hover:not(:focus-visible),
html[data-theme="dark"] #get-involved .involvement-option .btn-secondary:focus-visible {
    color: var(--white-color); /* Ensure white text override in dark mode too */
}
html[data-theme="dark"] #get-involved .involvement-option .btn-secondary.js-active-state { /* Keep white text for JS active state too in dark mode */
    color: var(--white-color);
}


/* --- Accent Button --- */
.btn-accent { background-color: var(--accent-color); color: var(--white-color); border-color: var(--accent-color); }
.btn-accent:hover:not(:focus-visible) { background-color: var(--accent-light); border-color: var(--accent-light); color: var(--white-color); }
.btn-accent:focus-visible { background-color: var(--accent-light); border-color: var(--accent-light); color: var(--white-color); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5); } /* Specific focus ring */
/* REMOVED .btn-accent:active */
.btn-accent.js-active-state { background-color: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(0); } /* Added JS state */

html[data-theme="dark"] .btn-accent.js-active-state { background-color: var(--accent-dark); border-color: var(--accent-dark); } /* Ensure dark mode active color */
html[data-theme="dark"] .btn-accent:focus-visible { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.6); }

/* --- Cards --- */
.card { background-color: var(--card-background); border-radius: var(--border-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; transform: translateY(0); border: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; position: relative; /* Added for pseudo-element positioning */ }
.card-content { padding: var(--space-l); flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 2; /* Ensure content is above background/overlay */ }
.card:hover { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); }
.card.hover-effect-border:hover { border-color: var(--primary-color); }
.card:focus-within { /* Style parent when focus is inside */ border-color: var(--primary-color); box-shadow: var(--card-hover-shadow); } /* Optional: subtle focus indication for the whole card */

/* --- Header --- */
.fixed-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: var(--header-height); background-color: transparent; transition: background-color 0.4s ease, box-shadow 0.4s ease, height 0.3s ease; }
.fixed-header.scrolled { background-color: var(--header-bg-scrolled); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); height: calc(var(--header-height) - 10px); }
html[data-theme="dark"] .fixed-header.scrolled { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
#main-header .container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo { font-size: 1.6rem; font-weight: 700; color: var(--white-color); text-decoration: none; transition: color var(--transition-speed) ease; margin-right: var(--space-l); }
.scrolled .logo { color: var(--header-text-scrolled); }
html[data-theme="light"] .logo:hover { color: var(--white-color); } /* Light mode logo hover text fix */
html[data-theme="dark"] .fixed-header:not(.scrolled) .logo:hover { color: var(--white-color); } /* Dark mode logo hover text fix */
.logo-accent { color: var(--secondary-color); }
.scrolled .logo-accent { color: var(--secondary-light); }
#main-nav { margin-left: auto; }
#main-nav ul { display: flex; list-style: none; padding: 0; margin: 0; }
#main-nav li { margin-left: var(--space-l); }
.nav-link { text-decoration: none; color: var(--white-color); font-weight: 500; padding: var(--space-xs) 0; position: relative; transition: color var(--transition-speed) ease; }
.scrolled .nav-link { color: var(--header-text-scrolled); }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--secondary-color); transition: width var(--transition-speed) ease, background-color var(--transition-speed) ease; }
.scrolled .nav-link::after { background-color: var(--secondary-light); }
.nav-link:hover { color: var(--secondary-color); }
.scrolled .nav-link:hover { color: var(--secondary-light); }
.nav-link:hover::after { width: 100%; }
.nav-link:focus { outline: none; } /* Remove default */
.nav-link:focus-visible { /* Keep color change for focus, but not underline */ color: var(--secondary-color); outline: 2px solid var(--secondary-color); outline-offset: 3px; border-radius: 2px; }
.scrolled .nav-link:focus-visible { color: var(--secondary-light); outline-color: var(--secondary-light); }
.header-actions { display: flex; align-items: center; gap: var(--space-m); margin-left: var(--space-l); }
.header-donate { padding: var(--space-xs) var(--space-m); font-size: 0.9rem; }
.theme-toggle-button { background: none; border: none; color: var(--white-color); font-size: 1.3rem; cursor: pointer; padding: var(--space-xs); line-height: 1; transition: color var(--transition-speed) ease, transform 0.2s ease; transform: scale(1); min-width: 40px; }
.scrolled .theme-toggle-button { color: var(--header-text-scrolled); }
.theme-toggle-button:hover { transform: scale(1.1); color: var(--secondary-color); }
.scrolled .theme-toggle-button:hover { color: var(--secondary-light); }
.theme-toggle-button:focus { outline: none; }
.theme-toggle-button:focus-visible { color: var(--secondary-color); outline: 2px solid var(--secondary-color); outline-offset: 2px; border-radius: 50%; } /* Keep color change, add outline */
.scrolled .theme-toggle-button:focus-visible { color: var(--secondary-light); outline-color: var(--secondary-light); }
/* REMOVED .theme-toggle-button:active */
.theme-toggle-button.js-active-state { transform: scale(1); /* Reset scale on active */ } /* Added JS state */

/* Dark Mode Scrolled Theme Toggle */
html[data-theme="dark"] .scrolled .theme-toggle-button {
    color: var(--secondary-light); /* Match logo accent */
}
html[data-theme="dark"] .scrolled .theme-toggle-button:hover {
    color: var(--secondary-color); /* Slightly darker yellow */
    transform: scale(1.1); /* Keep scale */
}
html[data-theme="dark"] .scrolled .theme-toggle-button:focus-visible {
    color: var(--secondary-color); /* Match hover */
    outline: 2px solid var(--secondary-color); /* Yellow outline */
    outline-offset: 2px;
    border-radius: 50%;
}

/* Light Mode Scrolled Theme Toggle */
html[data-theme="light"] .scrolled .theme-toggle-button {
    color: var(--icon-wrapper-bg-light); /* Light gray */
}
html[data-theme="light"] .scrolled .theme-toggle-button:hover {
    color: var(--white-color); /* White color */
    transform: scale(1.1); /* Keep scale */
}
html[data-theme="light"] .scrolled .theme-toggle-button:focus-visible {
    color: var(--white-color); /* Match hover */
    outline: 2px solid var(--secondary-color); /* Yellow outline */
    outline-offset: 2px;
    border-radius: 50%;
}

/* --- Mobile Navigation --- */
.mobile-menu-button { display: none; background: none; border: none; cursor: pointer; padding: var(--space-s); font-size: 1.5rem; color: var(--white-color); z-index: 1011; line-height: 1; transition: color var(--transition-speed) ease; }
.scrolled .mobile-menu-button { color: var(--header-text-scrolled); }
.mobile-menu-button:focus { outline: none; }
.mobile-menu-button:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; border-radius: var(--border-radius); }
.scrolled .mobile-menu-button:focus-visible { outline-color: var(--secondary-light); }
/* Active state for mobile buttons might not need JS if visual effect is minor */
.mobile-menu-header .close-button.js-active-state i { color: var(--danger-dark); } /* Example JS active state */


#mobile-menu-container {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    max-width: 80%;
    height: 100%;
    background-color: var(--card-background);
    box-shadow: -5px 0 15px rgba(0,0,0,0.15);
    /* INCREASED Z-INDEX */
    z-index: 1025; /* Higher than overlay (1015) and modal (1020) */
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto;
    border-left: 1px solid var(--border-color);
}
#mobile-menu-container.active { right: 0; }
.mobile-menu-header { display: flex; justify-content: flex-end; padding: var(--space-m) var(--space-l); border-bottom: 1px solid var(--border-color); }
.mobile-menu-header .close-button i { color: var(--text-light); transition: color var(--transition-speed) ease; } /* Use danger color */
.mobile-menu-header .close-button:hover i { color: var(--danger-color); } /* Darker red on hover */
.mobile-menu-header .close-button:focus-visible i { color: var(--danger-color); } /* Darker red on hover */
.mobile-menu-header .close-button { /* Button itself is transparent */ font-size: 1.6rem; }
#mobile-menu-container #main-nav-list { display: flex; flex-direction: column; padding: var(--space-m) 0; }
#mobile-menu-container #main-nav-list li { margin: 0; }
#mobile-menu-container .nav-link { display: block; padding: var(--space-m) var(--space-xl); color: var(--text-color); font-size: 1.1rem; border-bottom: 1px solid var(--border-color); font-weight: 500; }
#mobile-menu-container .nav-link:hover, #mobile-menu-container .nav-link:focus { background-color: rgba(var(--link-hover-rgb, 0,0,0), 0.05); color: var(--link-hover-color); }
#mobile-menu-container .nav-link:focus-visible { outline-offset: -2px; } /* Adjust outline position */
#mobile-menu-container .nav-link::after { display: none; }
#mobile-menu-container #main-nav-list li:last-child .nav-link { border-bottom: none; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1015; /* Below modal trigger, potentially below mobile nav */ opacity: 0; transition: opacity 0.4s ease-in-out; }
.overlay.active { display: block; opacity: 1; }

/* --- Hero Section --- */
.hero-section { /* background-image moved to end */ color: var(--white-color); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--header-height) var(--space-l) var(--space-xxl); text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.hero-content h1 { color: var(--white-color); font-size: 3.5rem; margin-bottom: var(--space-m); }
.hero-content p { font-size: 1.2rem; margin-bottom: var(--space-xl); max-width: 700px; margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.9); }
html[data-theme="dark"] .hero-content p { color: var(--text-color); }
.hero-buttons { display: flex; justify-content: center; align-items: center; gap: var(--space-m); /* Removed flex-wrap: wrap */ }
.hero-buttons .btn { margin: var(--space-xs) 0; }

/* Hero Button 1 (Learn More -> uses Accent in Hero) */
.hero-buttons .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white-color);
}
.hero-buttons .btn-primary:hover:not(:focus-visible) {
    background-color: var(--accent-light);
    border-color: var(--accent-light);
    color: var(--white-color);
}
.hero-buttons .btn-primary:focus-visible {
    background-color: var(--accent-light);
    border-color: var(--accent-light);
    color: var(--white-color);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5); /* Accent focus ring */
}
/* REMOVED .hero-buttons .btn-primary:active */
.hero-buttons .btn-primary.js-active-state { /* Added JS state */
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white-color);
}
/* Dark Mode Hero Button 1 (Learn More -> uses Accent) */
html[data-theme="dark"] .hero-buttons .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.6); /* Dark accent focus ring */
}
/* Dark mode states inherit correctly via accent variables */


/* Hero Button 2 (Get Involved -> specific style) */
/* Light Mode Hero Secondary Button (Blue / White Text) */
.hero-buttons .btn-secondary {
    background-color: var(--primary-color); /* Light mode standard blue */
    border-color: var(--primary-color); /* Match background */
    color: var(--white-color); /* White text */
}
.hero-buttons .btn-secondary:hover:not(:focus-visible) {
    background-color: var(--primary-light); /* Light mode light blue on hover */
    border-color: var(--primary-light);
    color: var(--white-color); /* Keep white text */
}
.hero-buttons .btn-secondary:focus-visible {
    background-color: var(--primary-light); /* Light mode light blue on focus */
    border-color: var(--primary-light);
    color: var(--white-color); /* Keep white text */
    box-shadow: 0 0 0 3px var(--focus-ring-color); /* Keep focus ring */
}
/* REMOVED .hero-buttons .btn-secondary:active */
.hero-buttons .btn-secondary.js-active-state { /* Added JS state */
    background-color: var(--primary-dark); /* Light mode dark blue on active */
    border-color: var(--primary-dark);
    color: var(--white-color); /* Keep white text */
}

/* Dark Mode Hero Button 2 (Get Involved -> Dark Blue / White Text) */
html[data-theme="dark"] .hero-buttons .btn-secondary {
    background-color: var(--primary-dark); /* Dark mode primary dark blue */
    border-color: var(--primary-dark); /* Match background */
    color: var(--white-color); /* White text */
}
html[data-theme="dark"] .hero-buttons .btn-secondary:hover:not(:focus-visible) {
    background-color: var(--primary-color); /* Dark mode standard blue on hover */
    border-color: var(--primary-color);
    color: var(--white-color); /* Keep white text */
}
html[data-theme="dark"] .hero-buttons .btn-secondary:focus-visible {
    background-color: var(--primary-color); /* Dark mode standard blue on focus */
    border-color: var(--primary-color);
    color: var(--white-color); /* Keep white text */
    box-shadow: 0 0 0 3px var(--focus-ring-color); /* Keep focus ring */
}
/* REMOVED html[data-theme="dark"] .hero-buttons .btn-secondary:active */
html[data-theme="dark"] .hero-buttons .btn-secondary.js-active-state { /* Added JS state */
    background-color: var(--primary-dark); /* Dark mode primary dark blue on active */
    border-color: var(--primary-dark);
    color: var(--white-color); /* Keep white text */
}


.hero-shape { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; background-color: var(--shape-divider-bg); clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 40%); transition: background-color var(--transition-speed) ease; }

/* --- Feature Icons & Info Blocks --- */
.info-block .card-content { text-align: center; display: flex; flex-direction: column; align-items: center; }
.info-block h3 { margin-top: var(--space-xs); }
.feature-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; background-color: var(--icon-wrapper-bg-light); /* Base: light gray */ border-radius: 50%; width: 70px; height: 70px; margin-bottom: var(--space-m); transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease; }
html[data-theme="dark"] .feature-icon-wrapper { background-color: var(--icon-wrapper-bg-dark-mode); /* Dark mode override */ }
.feature-icon { color: var(--icon-color); font-size: 1.8rem; line-height: 1; transition: color var(--transition-speed) ease; }
/* Dark mode override for icons *inside* wrappers */
html[data-theme="dark"] .feature-icon-wrapper .feature-icon { color: var(--primary-color); /* Use standard blue */ }
.card:hover .feature-icon-wrapper { transform: scale(1.1); }
.info-block h3 { font-size: 1.3rem; margin-bottom: var(--space-s); }
.info-block p { font-size: 0.95rem; color: var(--text-light); margin-bottom: var(--space-m); }
.link-arrow { font-weight: 600; color: var(--link-color); font-size: 0.9rem; display: inline-block; margin-top: auto; }
.link-arrow i { margin-left: var(--space-xs); transition: transform var(--transition-speed) ease;}
.link-arrow:hover i { transform: translateX(5px); }
.link-arrow:focus i { transform: translateX(0); } /* Prevent arrow moving on focus */
.link-arrow:focus-visible { /* Use parent focus-visible style */ outline: none; }
.card:focus-within .link-arrow:focus-visible { /* Style link focus when card has focus */ outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 2px; }
.feature-icon-wrapper.large { width: 80px; height: 80px; margin-bottom: var(--space-l); }
.feature-icon-wrapper.large .feature-icon { font-size: 2.2rem; }


/* --- Section Headers --- */
.section-header { margin-bottom: var(--space-xl); }
.section-title { position: relative; display: inline-block; margin-bottom: var(--space-m); font-size: 2.2rem; font-weight: 700; }
.section-title::after { content: ''; position: absolute; bottom: calc(var(--space-s) * -0.75); left: 50%; transform: translateX(-50%); width: var(--title-width); /* Use the dynamic width */ max-width: 90%; /* Keep max-width constraint */ height: 4px; background: var(--secondary-color); border-radius: 2px; transition: width 0.4s ease, background-color var(--transition-speed) ease; }
.section-header:hover .section-title::after { width: calc(var(--title-width) + 20px); /* Restore hover expansion */ }
.section-title.white-title { color: var(--white-color); }
.section-title.white-title::after { background: var(--accent-color); }
.section-intro { max-width: 700px; margin: var(--space-s) auto 0 auto; color: var(--text-light); font-size: 1.05rem; line-height: 1.6; } /* Consistent font size */
/* Specific intro color for sections with dark/image backgrounds */
#impact .section-intro { color: rgba(255, 255, 255, 0.9); } /* Updated opacity */
html[data-theme="dark"] #impact .section-intro { color: rgba(255, 255, 255, 0.9); } /* Match light mode */


/* --- About Us / Founder Message --- */
/* .about-section .image-placeholder {  REMOVED  } */
.founder-message-section { border-top: 1px solid var(--border-color); margin-top: var(--space-xl); padding-top: var(--space-xl); }
.founder-message-section h3 { color: var(--heading-color); margin-bottom: var(--space-m); }
.founder-message-section p.italic { color: var(--text-color); font-style: italic; font-size: 1.2rem; }
html[data-theme="dark"] .founder-message-section p.italic { color: var(--text-light); }
.founder-message-section p.text-gray-600 { color: var(--text-light); }
html[data-theme="dark"] .founder-message-section p.text-gray-600 { color: var(--text-light); }
.founder-message-section p.text-gray-700 { color: var(--text-color); }
html[data-theme="dark"] .founder-message-section p.text-gray-700 { color: var(--text-color); }
.founder-message-section p.text-gray-800 { color: var(--heading-color); }
html[data-theme="dark"] .founder-message-section p.text-gray-800 { color: var(--heading-color); }
.founder-message-section p.text-primary { color: var(--primary-color); }
html[data-theme="dark"] .founder-message-section p.text-primary { color: var(--primary-dark); } /* Use darker blue text */
/* Icon added before Founder title */
.icon-title {
    margin-right: var(--space-xs);
    /* Color should be inherited from parent <p> */
}

/* --- About Section Carousel --- */
.carousel-container { position: relative; overflow: hidden; /* Hides slides outside the container */ width: 100%; aspect-ratio: 16 / 10; /* Adjust as needed */ margin: 0 auto; }
/* Ensure light mode shadow for carousel */
html[data-theme="light"] #about .carousel-container.shadow-lg { box-shadow: var(--card-shadow); }
.carousel-track-container { height: 100%; }
.carousel-track { display: flex; height: 100%; transition: transform var(--carousel-transition-speed) ease-in-out; }
.carousel-slide { flex: 0 0 100%; min-width: 100%; height: 100%; position: relative; }
.carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; /* Ensures images cover the slide area */ }
.carousel-slide-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(222, 225, 229, 0.75); /* Semi-transparent light gray */
    color: var(--dark-color); /* Dark text */
    padding: var(--space-s) var(--space-m);
    font-size: 1.1rem; /* Adjust as needed */
    font-weight: 600;
    text-align: center;
    z-index: 5;
    border-bottom-left-radius: var(--border-radius); /* Match container rounding */
    border-bottom-right-radius: var(--border-radius);
}
html[data-theme="dark"] .carousel-slide-label {
    background-color: rgba(var(--dark-rgb, 17, 24, 39), 0.85); /* Darker semi-transparent */
    color: var(--white-color); /* Light text */
}
.carousel-button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background-color: rgba(var(--dark-rgb, 17, 24, 39), 0.5); color: var(--white-color); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-speed) ease, transform 0.2s ease; }
.carousel-button i { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Added shadow for visibility */ }
.carousel-button:hover { background-color: rgba(var(--dark-rgb, 17, 24, 39), 0.8); transform: translateY(-50%) scale(1.1); }
.carousel-button:focus { outline: none; }
.carousel-button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; background-color: rgba(var(--dark-rgb, 17, 24, 39), 0.8); }
.carousel-button.prev { left: var(--space-m); }
.carousel-button.next { right: var(--space-m); }

/* --- Impact Section --- */
#impact { /* background-image moved to end */ background-size: cover; background-position: center; color: var(--white-color); /* Base text color */ transition: background var(--transition-speed) ease; }

.impact-metrics { display: flex; flex-wrap: wrap; justify-content: space-around; gap: var(--space-l); }
.count-box { text-align: center; flex: 1 1 180px; padding: var(--space-m); }
.count-number { display: inline; font-size: 3.5rem; font-weight: 700; color: var(--accent-color); /* Always yellow */ line-height: 1; }
.count-unit { font-size: 3.5rem; font-weight: 700; color: var(--accent-color); /* Always yellow */ line-height: 1; margin-left: var(--space-xxs); vertical-align: baseline; }
.count-label { display: block; font-size: 1rem; font-weight: 500; color: var(--white-color); /* Always white */ line-height: 1.4; margin-top: var(--space-xs); }


/* --- Services Section --- */
.services-section .service-item.card {
    position: relative; /* Needed for pseudo-elements */
    overflow: hidden; /* Clip the zooming pseudo-element */
    background-color: var(--card-background); /* Keep fallback color */
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                background-color var(--transition-speed) ease;
    /* Remove background-size from card transition */
}

/* Background Image Pseudo-element */
.services-section .service-item.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform calc(var(--transition-speed) * 1.8) ease; /* Animate transform */
    z-index: 0; /* Behind content and overlay */
    will-change: transform;
    background-image: var(--bg-image, none); /* Use CSS variable set inline, default to none */
}

/* Apply zoom effect to the ::before pseudo-element */
.services-section .service-item.card:hover::before,
.services-section .service-item.card.js-active-state::before {
    transform: scale(1.1); /* Zoom effect */
}

/* Overlay Pseudo-element - Apply correct gradients */
.services-section .service-item.card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Apply Light Mode Gradient by default */
    background-image: linear-gradient(rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.85) 100%);
    z-index: 1; /* Above background, below content */
    transition: opacity var(--transition-speed) ease; /* Transition opacity */
    border-radius: inherit; /* Match card rounding */
    opacity: 0; /* Initially hidden */
    pointer-events: none; /* Make sure it doesn't block interactions */
}
/* Dark Mode Overlay Gradient */
html[data-theme="dark"] .services-section .service-item.card::after {
    background-image: linear-gradient(rgba(31, 41, 55, 0.9) 0%, rgba(31, 41, 55, 0.8) 50%, rgba(31, 41, 55, 0.9) 100%);
}

/* Show overlay only if card has a background image STYLE variable set */
.services-section .service-item.card[style*="--bg-image"]::after {
    opacity: 1;
}

/* Explicitly ensure light mode shadow for service cards */
html[data-theme="light"] #services .service-item.card { box-shadow: var(--card-shadow); }

/* Content Area - Ensure it's above pseudo-elements */
.services-section .service-item .card-content {
    z-index: 2; /* Keep content above pseudo-elements */
    text-align: center; /* Center text */
    align-items: center; /* Center icon wrapper */
    padding: var(--space-xl) var(--space-l); /* Symmetrical vertical padding */
}

/* Default content styles (no image assigned) - Use standard theme variables */
.services-section .service-item:not([style*="--bg-image"]) h3 { color: var(--heading-color); transition: color var(--transition-speed) ease; }
.services-section .service-item:not([style*="--bg-image"]) p { color: var(--text-light); font-size: 0.95rem; transition: color var(--transition-speed) ease;}
.services-section .service-item:not([style*="--bg-image"]) .feature-icon-wrapper { background-color: var(--icon-wrapper-bg-light); margin-bottom: var(--space-l); } /* Light mode bg */
.services-section .service-item:not([style*="--bg-image"]) .feature-icon { color: var(--icon-color); } /* Light mode icon color */
html[data-theme="dark"] .services-section .service-item:not([style*="--bg-image"]) .feature-icon-wrapper { background-color: var(--icon-wrapper-bg-dark-mode); } /* Dark mode bg */
html[data-theme="dark"] .services-section .service-item:not([style*="--bg-image"]) .feature-icon { color: var(--primary-color); } /* Dark mode icon color (standard blue) */


/* Content styles when image IS assigned via style attribute - Corrected for contrast */
/* Light Mode Image Card Content */
.services-section .service-item.card[style*="--bg-image"] h3 { color: var(--heading-color); } /* Use dark heading color */
.services-section .service-item.card[style*="--bg-image"] p { color: var(--text-color); } /* Use dark text color */
.services-section .service-item.card[style*="--bg-image"] .feature-icon-wrapper { background-color: rgba(0, 0, 0, 0.05); } /* Slightly darker translucent wrapper */
.services-section .service-item.card[style*="--bg-image"] .feature-icon { color: var(--accent-light); } /* Use dark heading color for icon */

/* Dark Mode Image Card Content */
html[data-theme="dark"] .services-section .service-item.card[style*="--bg-image"] h3 { color: var(--white-color); } /* Use white */
html[data-theme="dark"] .services-section .service-item.card[style*="--bg-image"] p { color: rgba(243, 244, 246, 0.9); } /* Use light text */
html[data-theme="dark"] .services-section .service-item.card[style*="--bg-image"] .feature-icon-wrapper { background-color: rgba(255, 255, 255, 0.1); } /* Light translucent wrapper */
html[data-theme="dark"] .services-section .service-item.card[style*="--bg-image"] .feature-icon { color: var(--primary-dark); } /* Use white */

/* --- End of Services Section Changes --- */


/* --- Get Involved Section --- */
.get-involved-section .card .card-content { text-align: center; display: flex; flex-direction: column; align-items: center; }
.get-involved-section .feature-icon-wrapper.large { margin-bottom: var(--space-l); }
.get-involved-section h3 { margin-bottom: var(--space-s); }
/* Target only descriptive paragraphs within involvement cards */
.get-involved-section .involvement-option p.text-sm { margin-bottom: var(--space-m); font-size: 0.9rem; color: var(--text-light); flex-grow: 1; }
.get-involved-section .btn { margin-top: auto; }

/* Dark Mode Get Involved Donate Button Override */
/* REMOVED :active state */
html[data-theme="dark"] #get-involved .involvement-option:first-child .btn-primary {
    background-color: var(--primary-dark); /* Dark mode primary dark blue */
    border-color: var(--primary-dark); /* Match background */
    color: var(--white-color); /* White text */
}
html[data-theme="dark"] #get-involved .involvement-option:first-child .btn-primary:hover:not(:focus-visible) {
    background-color: var(--primary-color); /* Dark mode standard blue on hover */
    border-color: var(--primary-color);
    color: var(--white-color); /* Keep white text */
}
html[data-theme="dark"] #get-involved .involvement-option:first-child .btn-primary:focus-visible {
    background-color: var(--primary-color); /* Dark mode standard blue on focus */
    border-color: var(--primary-color);
    color: var(--white-color); /* Keep white text */
    box-shadow: 0 0 0 3px var(--focus-ring-color); /* Use standard focus ring */
}
html[data-theme="dark"] #get-involved .involvement-option:first-child .btn-primary.js-active-state { /* Added JS state */
    background-color: var(--primary-dark); /* Dark mode primary dark blue on active */
    border-color: var(--primary-dark);
    color: var(--white-color); /* Keep white text */
}


/* --- Contact Section --- */
.contact-info h3 { margin-bottom: var(--space-s); }
.icon-contact { color: var(--primary-color); font-size: 1.2rem; margin-right: var(--space-m); width: 24px; text-align: center; transition: color var(--transition-speed) ease; flex-shrink: 0; }
html[data-theme="dark"] .icon-contact { color: var(--icon-color); /* Uses darker blue via variable */}
.contact-info .space-y-m > div { margin-bottom: var(--space-m); }
.link-contact { color: var(--text-color); font-weight: 500; }
.link-contact:hover { color: var(--primary-color); }
.text-contact { color: var(--text-color); font-weight: 500; line-height: 1.5; }
html[data-theme="dark"] .link-contact, html[data-theme="dark"] .text-contact { color: var(--text-color); }
html[data-theme="dark"] .link-contact:hover { color: var(--primary-light); }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--icon-wrapper-bg-light); color: var(--icon-color); margin-right: var(--space-s); transition: all var(--transition-speed) ease; } /* Base: light gray */
html[data-theme="dark"] .social-icons a { background-color: var(--icon-wrapper-bg-dark-mode); } /* Dark mode override */
/* Dark mode override for icons *inside* contact social wrappers */
html[data-theme="dark"] .social-icons a i { color: var(--primary-color); /* Use standard blue */ }
.social-icons a:last-child { margin-right: 0; }
.social-icons a:hover { background-color: var(--primary-color); color: var(--white-color); transform: translateY(-3px); }
.social-icons a:focus { outline: none; }
.social-icons a:focus-visible { background-color: var(--primary-color); color: var(--white-color); outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Maintain visual cues on focus */
/* REMOVED .social-icons a:active */
.social-icons a.js-active-state { transform: translateY(0); } /* Added JS state */

html[data-theme="dark"] .social-icons a:hover, html[data-theme="dark"] .social-icons a:focus-visible { background-color: var(--primary-light); color: var(--dark-color); outline-color: var(--primary-light); }
html[data-theme="dark"] .social-icons a:hover i, html[data-theme="dark"] .social-icons a:focus-visible i { color: var(--dark-color); } /* Ensure icon color changes with wrapper on hover/focus */


.contact-form .form-group { margin-bottom: var(--space-m); }
.contact-form input, .contact-form textarea { width: 100%; padding: var(--space-s) var(--space-m); border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 0.95rem; font-family: var(--font-body); transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease; background-color: var(--card-background); color: var(--text-color); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-light); opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring-color); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button { font-size: 1rem; padding: var(--space-m) var(--space-l); margin-top: var(--space-xs); }
/* Dark Mode Contact Form Button */
/* REMOVED :active state */
html[data-theme="dark"] #contact-form button {
    background-color: var(--primary-dark); /* Darker blue base */
    border-color: var(--primary-dark);
    color: var(--white-color);
}
html[data-theme="dark"] #contact-form button:hover:not(:focus-visible) {
    background-color: var(--primary-color); /* Standard blue on hover */
    border-color: var(--primary-color);
    color: var(--white-color);
}
html[data-theme="dark"] #contact-form button:focus-visible {
    background-color: var(--primary-color); /* Standard blue on focus */
    border-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}
html[data-theme="dark"] #contact-form button.js-active-state { /* Added JS state */
    background-color: var(--primary-dark); /* Keep darker blue on active */
    border-color: var(--primary-dark);
    color: var(--white-color);
}
.contact-form-container.card .card-content { padding: var(--space-xl); }


/* --- Footer --- */
#main-footer { background-color: var(--dark-color); /* Default dark background */ color: var(--text-light); /* Default light text */ padding-top: var(--space-xl); padding-bottom: var(--space-m); transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease; border-top: 1px solid var(--border-color); /* Default uses dark border variable */ }
#main-footer h3, #main-footer h4 { margin-bottom: var(--space-m); font-size: 1.1rem; color: var(--white-color); /* Default white headings */ transition: color var(--transition-speed) ease; }
#main-footer p { color: var(--text-color); transition: color var(--transition-speed) ease; margin-bottom: var(--space-l); line-height: 1.6; }
#main-footer li { margin-bottom: var(--space-l); line-height: 1.6; color: var(--text-color); transition: color var(--transition-speed) ease; } /* Added default li color */
#main-footer ul.space-y-s li { margin-bottom: var(--space-s);}
#main-footer ul.space-y-m li { margin-bottom: var(--space-m);}
.footer-link { color: #9ca3af; /* Default grey text in dark mode */ text-decoration: none; font-size: 0.9rem; transition: color var(--transition-speed) ease, padding-left var(--transition-speed) ease; }
.footer-link:hover { color: var(--white-color); padding-left: var(--space-xs); }
.footer-link:focus { outline: none; }
.footer-link:focus-visible { color: var(--white-color); padding-left: var(--space-xs); outline: 2px solid var(--primary-light); outline-offset: 2px; border-radius: 2px;}
.footer-icon { color: var(--primary-light); margin-right: var(--space-s); width: 16px; text-align: center; flex-shrink: 0; margin-top: var(--space-xxs); transition: color var(--transition-speed) ease; }
html[data-theme="dark"] #main-footer .footer-icon { color: var(--icon-color); } /* Use darker blue via variable */
.social-icon-footer { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--icon-wrapper-bg-footer-dark); /* Default dark footer bg */ color: #9ca3af; transition: all var(--transition-speed) ease; margin-right: var(--space-s); }
/* Dark mode override for icons *inside* footer social wrappers */
html[data-theme="dark"] .social-icon-footer i { color: var(--primary-color); /* Use standard blue */ }
.social-icon-footer:last-child { margin-right: 0; }
.social-icon-footer:hover { background-color: var(--primary-light); color: var(--dark-color); transform: translateY(-2px); }
.social-icon-footer:focus { outline: none; }
.social-icon-footer:focus-visible { background-color: var(--primary-light); color: var(--dark-color); outline: 2px solid var(--primary-light); outline-offset: 2px; } /* Maintain visual cues */
/* REMOVED .social-icon-footer:active */
.social-icon-footer.js-active-state { transform: translateY(0); } /* Added JS state */

html[data-theme="dark"] .social-icon-footer:hover i, html[data-theme="dark"] .social-icon-footer:focus-visible i { color: var(--dark-color); } /* Ensure icon color changes with wrapper on hover/focus */
.footer-bottom { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid #4b5563; /* Darker border for dark bg */ text-align: center; font-size: 0.8rem; color: #6b7280; transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease; }

/* Light Mode Footer Overrides */
html[data-theme="light"] #main-footer { background-color: var(--background-alt); border-top-color: var(--border-color); }
html[data-theme="light"] #main-footer h3.text-white, html[data-theme="light"] #main-footer h4.text-white { color: var(--heading-color) !important; }
html[data-theme="light"] #main-footer p, html[data-theme="light"] #main-footer li { color: var(--text-color); }
html[data-theme="light"] #main-footer .footer-link { color: var(--link-color); }
html[data-theme="light"] #main-footer .footer-link:hover { color: var(--link-hover-color); }
html[data-theme="light"] #main-footer .footer-link:focus-visible { outline-color: var(--primary-color); color: var(--link-hover-color); } /* Match hover */
html[data-theme="light"] #main-footer .footer-icon { color: var(--primary-color); }
html[data-theme="light"] #main-footer .social-icon-footer { background-color: var(--border-color); color: var(--icon-color); } /* Use light gray */
html[data-theme="light"] #main-footer .social-icon-footer i { color: var(--icon-color); /* Ensure icon color matches */ }
html[data-theme="light"] #main-footer .social-icon-footer:hover { background-color: var(--primary-color); color: var(--white-color); }
html[data-theme="light"] #main-footer .social-icon-footer:hover i { color: var(--white-color); } /* Icon color change on hover */
html[data-theme="light"] #main-footer .social-icon-footer:focus-visible { outline-color: var(--primary-color); background-color: var(--primary-color); color: var(--white-color); }
html[data-theme="light"] #main-footer .social-icon-footer:focus-visible i { color: var(--white-color); } /* Icon color change on focus */
html[data-theme="light"] .footer-bottom { border-top-color: var(--border-color); color: var(--text-light); }

/* Dark Mode Footer Overrides */
html[data-theme="dark"] #main-footer .footer-link { color: var(--link-color); /* Uses darker blue via variable */ }
html[data-theme="dark"] #main-footer .footer-link:hover { color: var(--link-hover-color); padding-left: var(--space-xs); }
html[data-theme="dark"] #main-footer .footer-link:focus-visible { color: var(--link-hover-color); outline-color: var(--primary-color); } /* Match hover, adjust outline */


/* --- Accessibility --- */
.skip-link { position: absolute; top: -999px; left: 50%; transform: translateX(-50%); background-color: var(--dark-color); color: var(--white-color); padding: var(--space-s) var(--space-m); z-index: 9999; border-radius: 0 0 var(--border-radius) var(--border-radius); font-weight: bold; transition: top 0.3s ease; }
.skip-link:focus { top: 0; }

/* --- Custom Scrollbar (Hidden) --- */
body::-webkit-scrollbar { display: none; }

/* Hero Section Centering Fix */
#hero .hero-content h1 { margin-top: 1em; }

/* --- Responsiveness --- */
@media (max-width: 992px) { /* Adjusted breakpoint for 2x2 grid */
    .grid-2-col { grid-template-columns: 1fr; gap: var(--space-s); }
     /* Force services into 2 columns with standard gap */
     #services .grid-2-col {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-l); /* Ensure standard gap */
     }
     .about-image { order: -1; margin-bottom: var(--space-xl); }
     /* .contact-info { margin-bottom: var(--space-s); } */
}
@media (max-width: 768px) {
    .impact-metrics, .grid-4-col-mobile-2x2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); }
    /* Allow Get Involved to wrap on tablet */
     #get-involved .grid-3-col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
     /* Services remain 2x2 from 992px rule */
}

@media (max-width: 768px) {
    /* Base 3-col rule */
     .grid-3-col { gap: var(--space-l); }
}
@media (max-width: 1032px) {
    h1 { font-size: 2.5rem; } h2 { font-size: 2rem; }
    .hero-content h1 { font-size: 3rem; }
    :root { --space-section: 4.5rem; --space-section-sm: 3.5rem; }
    .mobile-menu-button { display: block; }
    #main-nav > ul { display: none; }
    .header-actions .header-donate { display: none; }
    /* Hero Section Centering Fix */
    #hero .hero-content h1 { margin-top: 1.8em; }
}
@media (max-width: 768px) {
    :root { --header-height: 65px; --space-section: 4rem; --space-section-sm: 3rem;}
    h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; }
    .section-title { font-size: 2rem; }
    .hero-section { min-height: 85vh; padding-bottom: var(--space-xl); }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.1rem; margin-bottom: var(--space-l); }
    .mobile-menu-button { display: block; }
    #main-nav > ul { display: none; }
    .header-actions .header-donate { display: none; }
    .theme-toggle-button { margin-right: var(--space-s); width: 36px; }
    .count-number, .count-unit { font-size: 3rem; }
    /* Removed .footer-content text-align */
    .carousel-container { aspect-ratio: 4 / 3; } /* Adjust aspect ratio for mobile */
    /* Hero Section Centering Fix */
    #hero .hero-content h1 { margin-top: 1.3em; }
}
@media (max-width: 576px) {
    html { font-size: 15px; }
    :root { --space-section: 3.5rem; --space-section-sm: 2.5rem; }
    .container { padding: 0 var(--space-m); }
    h1 { font-size: 2rem; } h2 { font-size: 1.6rem; }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 1rem; }
    .hero-buttons { gap: var(--space-s); }
    /* Removed width: 90% from hero buttons */
     .hero-buttons .btn { max-width: 280px; }
    .section-header { margin-bottom: var(--space-l); }
    .section-title { font-size: 1.8rem; }
    .section-intro { margin-top: var(--space-m); font-size: 1.05rem; } /* Ensure consistency */
    .impact-metrics, .grid-4-col-mobile-2x2 { grid-template-columns: 1fr; gap: var(--space-l); }
     /* Allow Get Involved cards to wrap naturally on smallest screens */
     #get-involved .grid-3-col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
     /* Keep Services 2x2 on smallest screens, ensure standard gap */
     #services .grid-2-col {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-l);
     }
    .count-number, .count-unit { font-size: 2.8rem; }
    .card-content { padding: var(--space-l); }
     /* Ensure service card padding is consistent on small screens */
     .services-section .service-item .card-content { padding: var(--space-xl) var(--space-l); }
    .contact-form-container.card .card-content { padding: var(--space-l); }
    /* Removed .footer-content text-align */
    #main-footer { padding-top: var(--space-l); }
    .carousel-button { width: 36px; height: 36px; font-size: 1rem; }
    .carousel-button.prev { left: var(--space-s); }
    .carousel-button.next { right: var(--space-s); }
    /* Hero Section Centering Fix */
    #hero .hero-content h1 { margin-top: 0.8em; }
}


/* --- Background Images --- */
/* These now apply to the ::before pseudo-element for service cards */
/* An inline style `--bg-image: url(...)` is needed on the HTML element */

/* Hero Section Background */
.hero-section { background-image: linear-gradient(rgba(18, 73, 191, 0.851) 18%, rgba(255, 201, 41, 0.85)), url('../images/hero-background.jpg'); }
html[data-theme="dark"] .hero-section { background-image: linear-gradient(rgba(11, 51, 137, 0.85) 18%, rgba(228, 172, 1, 0.85)), url('../images/hero-background.jpg'); } /* Apply a darker gradient in dark mode */

/* Impact Section Background */
#impact { background-image: linear-gradient(rgba(54, 112, 236, 0.85) 0%, rgba(82, 132, 239, 0.85) 61%, rgba(255, 218, 107, 0.85) 100%), url('../images/impact-background.jpg'); }
html[data-theme="dark"] #impact { background-image: linear-gradient(rgba(17, 65, 166, 0.85) 0%, rgba(35, 98, 199, 0.85) 45%, rgba(250, 199, 46, 0.85)), url('../images/impact-background.jpg'); } /* Apply a darker gradient in dark mode */

/* --- End Background Images --- */

/* --- Force Portrait-like Layout on Mobile Landscape --- */
/* Targets devices with max-width 768px when in landscape */
@media (max-width: 768px) and (orientation: landscape) {
    head {
        max-width: 450px; /* Adjust this value as needed - typical portrait width */
        margin: 0 auto !important; /* Center the constrained body */
        overflow-y: scroll; /* Ensure vertical scrolling is possible if content exceeds height */
    }
    body {
        max-width: 450px; /* Adjust this value as needed - typical portrait width */
        margin: 0 auto !important; /* Center the constrained body */
        overflow-y: scroll; /* Ensure vertical scrolling is possible if content exceeds height */
    }
}


/* --- Founder Card Trigger Styling --- */
.founder-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Keep existing .card:hover styles, this adds to it */
.founder-card:hover {
    border-color: var(--accent-color); /* Use accent color for hover */
}

/* Focus state for the clickable card */
.founder-card:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
    border-color: var(--accent-color);
    box-shadow: var(--card-hover-shadow);
}

/* JS Active State for Founder Card */
.founder-card.js-active-state {
    /* Override hover transform */
    transform: none;
    /* Optional: Add a subtle active effect if desired, e.g.: */
    /* border-color: var(--accent-dark); */
    /* box-shadow: var(--card-shadow); /* Reset shadow from hover */
}


/* --- Modal Styling --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
    z-index: 1020; /* Higher than header and overlay */
    opacity: 0;
    visibility: hidden;
    /* ADJUSTED TRANSITION: Include transform */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; /* Delay hiding visibility */
    padding: var(--space-s); /* Padding around the modal content */
    pointer-events: none; /* Prevent interaction when hidden */
    /* ADDED: Initial state for expansion effect */
    transform: scale(0.85) translateY(15px); /* Start smaller and slightly lower */
}

.modal.active {
    opacity: 1;
    visibility: visible;
    /* ADJUSTED TRANSITION */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
    pointer-events: auto; /* Allow interaction when active */
    /* ADDED: Active state for expansion effect */
    transform: scale(1) translateY(0); /* Scale to full size and original position */
}

.modal-content {
    /* ADJUSTED: Match the card's container max-width */
    max-width: 768px; /* Equivalent to Tailwind's max-w-3xl */
    width: 90%;
    max-height: 85vh; /* Limit height */
    display: flex;
    flex-direction: column;
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    overflow: hidden; /* Needed for scrolling content */
    /* REMOVED: Initial transform now handled by .modal */
    /* REMOVED: Transition now on .modal */
}

/* REMOVED: .modal.active .modal-content transform style */

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-m) var(--space-l);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent header from shrinking */
}

.modal-header h3 {
    margin-bottom: 0; /* Remove default heading margin */
    font-size: 1.3rem;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    padding: 0 var(--space-xs);
    transition: color 0.2s ease;
}

.modal-close-btn:hover,
.modal-close-btn:focus-visible {
    color: var(--danger-color); /* Use danger color */
    outline: none;
}

/* Add specific focus style if needed */
.modal-close-btn:focus-visible {
   outline: 2px solid var(--danger-color);
   outline-offset: 2px;
   border-radius: 50%;
}

.modal-body {
    padding: var(--space-l);
    overflow-y: auto; /* Allow scrolling if content exceeds max-height */
    flex-grow: 1; /* Allow body to take remaining space */
    /* Firefox Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--thumb-color, var(--text-light)) var(--track-color, var(--card-background)); /* Define fallback */
}

/* WebKit (Chrome, Safari, Edge) Scrollbar */
.modal-body::-webkit-scrollbar {
    width: 8px; /* Adjust width as needed */
}

.modal-body::-webkit-scrollbar-track {
    background: var(--track-color, var(--card-background)); /* Use variable, fallback */
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--thumb-color, var(--text-light)); /* Use variable, fallback */
    border-radius: 4px;
    border: 2px solid var(--track-color, var(--card-background)); /* Creates padding */
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--thumb-hover-color, var(--text-color)); /* Use variable, fallback */
}

.modal-body p {
    margin-bottom: var(--space-m); /* Restore paragraph spacing */
    font-size: 1rem; /* Ensure readable font size */
    line-height: 1.7;
}

/* Ensure position title is blue */
.position-icon {
    color: var(--primary-dark);
}

/* Modal Hover/Click Stability Fix */
/* Override the default card hover transform specifically for the modal content */
.modal-content.card:hover {
    transform: none; /* Prevent the modal from shifting up on hover */
    /* Optionally reset shadow if card hover shadow is also unwanted */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Maintain the standard modal shadow */
}

/* Form Enhancements */
.form-group {
    position: relative; /* Needed for absolute positioning of error messages if desired */
    margin-bottom: var(--space-l); /* Increase spacing slightly */
}

/* Honeypot Field Styling */
.honeypot {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

/* Error Message Styling */
.error-message {
    color: var(--danger-color);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: var(--space-xs);
    display: block; /* Ensure it takes space */
    min-height: 1.2em; /* Reserve space even when empty */
}

/* Status Message Styling (Success/General Error) */
.form-status-message {
    margin-top: var(--space-s);
    margin-bottom: var(--space-m);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--border-radius);
    font-weight: 500;
    text-align: center;
    display: none; /* Hidden by default */
}

.form-status-message.success {
    background-color: #dcfce7; /* Light green */
    color: #166534; /* Dark green */
    border: 1px solid #86efac; /* Green border */
    display: block;
}

.form-status-message.error {
    background-color: #fee2e2; /* Light red */
    color: #991b1b; /* Dark red */
    border: 1px solid #fca5a5; /* Red border */
    display: block;
}

/* Optional: Style invalid fields */
/* input:invalid, textarea:invalid {
    border-color: var(--danger-color); ( Be cautious, HTML5 validation can be inconsistent )
} */
input.error-border, textarea.error-border {
    border-color: var(--danger-color) !important; /* Force red border via JS */
}

/* Ensure button is disabled while submitting */
#submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}