/* --- 1. Global Styles & Design System Variables --- */

/* Reset and Box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* CSS Variables (Design System Implementation) */
:root {
    /* Color Palette */
    --color-background-white: #FFFFFF;
    --color-content-background: #FAFAFA;
    --color-text-primary: #1D1D1F;
    --color-text-secondary: #86868B;
    --color-text-tertiary: #D2D2D7;
    --color-primary-brand: #007AFF; /* Apple blue - adjust hue based on mission */
    --color-primary-hover: #0056CC; /* 20% darker */
    --color-primary-disabled: rgba(0, 122, 255, 0.4); /* 40% opacity */
    --color-success: #34C759;
    --color-warning: #FF9F0A;
    --color-error: #FF3B30;
    --color-border-light: #F2F2F7;

    /* Typography */
    --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;

    /* Type Scale */
    --font-size-display-large: 48px;
    --font-size-display-medium: 36px;
    --font-size-headline-1: 28px;
    --font-size-headline-2: 24px;
    --font-size-headline-3: 20px;
    --font-size-body-large: 18px;
    --font-size-body-regular: 16px;
    --font-size-body-small: 14px;
    --font-size-caption: 12px;
    --font-size-button-text: 16px;

    /* Spacing System (Base Unit: 8px) */
    --space-4xs: 4px;    /* 0.5 units */
    --space-xs: 8px;     /* 1 unit */
    --space-sm: 16px;    /* 2 units */
    --space-md: 24px;    /* 3 units */
    --space-lg: 32px;    /* 4 units */
    --space-xl: 48px;    /* 6 units */
    --space-xxl: 64px;   /* 8 units */
    --space-xxxl: 80px;  /* 10 units */

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 50%;

    /* Shadows */
    --shadow-level-1: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-level-2: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-level-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-level-4: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* Animation Timing Functions */
    --timing-default: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out-quad */
    --timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --timing-sharp: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */

    /* Animation Durations */
    --duration-micro: 150ms;
    --duration-quick: 300ms;
    --duration-moderate: 500ms;
    --duration-slow: 800ms;

    /* Accessibility */
    --focus-outline-width: 2px;
    --focus-outline-offset: 2px;
}

/* Body Styles */
body {
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    background-color: var(--color-background-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts */
    -moz-osx-font-smoothing: grayscale;
}

/* Container for content */
.container {
    max-width: 1200px; /* Desktop */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md); /* Desktop margin */
    padding-right: var(--space-md);
}

/* Responsive Grid Layout */
.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

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

/* Text Alignment */
.text-center {
    text-align: center;
}

/* Placeholder for Images */
img.responsive-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
}

/* --- 2. Header & Navigation --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 72px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border-bottom: 1px solid var(--color-border-light);
    display: flex; /* Using flexbox as a fallback for outer container */
    align-items: center;
}

.site-header .container {
    display: grid;
    grid-template-columns: auto 1fr auto; /* Left Group (toggle), Logo, Right Group (nav/btn) */
    align-items: center;
    width: 100%;
    padding-left: var(--space-xxl); /* Desktop page margins */
    padding-right: var(--space-xxl);
    gap: var(--space-lg); /* Gap between grid columns */
}

/* New: Left group for mobile toggle and left nav */
.header-left-group {
    grid-column: 1 / 2; /* Place in first column */
    display: flex;
    align-items: center;
    gap: var(--space-md);
    justify-self: start; /* Align to the start */
}

.logo-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-self: center; /* Center horizontally within its grid cell */
    grid-column: 2 / 3; /* Explicitly place in the middle column */
}

.site-logo {
    display: block; /* Ensure it behaves like a block element */
    width: 40px; /* Maintain the requested size */
    height: 40px;
    object-fit: contain; /* Ensure the image scales down without cropping */
}


.logo-container a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: opacity var(--duration-micro) var(--timing-default);
}

.logo-container a:hover,
.logo-container a:focus {
    opacity: 0.9;
}

.brand-name {
    font-size: var(--font-size-headline-3);
    font-weight: var(--font-weight-bold);
    margin-left: var(--space-xs);
    white-space: nowrap; /* Prevent brand name from wrapping */
}

/* Base nav styles */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-md);
}

.main-nav .nav-link {
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-body-regular);
    font-weight: var(--font-weight-regular);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    transition: color var(--duration-micro) var(--timing-default),
                background-color var(--duration-micro) var(--timing-default);
    white-space: nowrap; /* Prevent nav links from wrapping */
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
    color: var(--color-primary-brand);
    background-color: rgba(0, 122, 255, 0.08); /* 8% opacity of primary */
}

/* Positioning for left and right nav (desktop only) */
.main-nav-left {
    /* On desktop, this is part of header-left-group */
}

.main-nav-right {
    /* On desktop, this is part of header-right-group */
}

/* Right group for right nav and desktop actions */
.header-right-group {
    grid-column: 3 / 4; /* Place in third column */
    display: flex;
    align-items: center;
    gap: var(--space-md);
    justify-self: end; /* Align to the end */
}


.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.mobile-nav-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    z-index: 1001; /* Ensure it's above backdrop */
}

.hamburger-icon {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: background-color var(--duration-micro) var(--timing-default);
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: transform var(--duration-quick) var(--timing-default), top var(--duration-quick) var(--timing-default);
}

.hamburger-icon::before {
    top: -7px;
}

.hamburger-icon::after {
    top: 7px;
}

/* For active mobile menu */
.mobile-nav-toggle.active .hamburger-icon {
    background-color: transparent;
}

.mobile-nav-toggle.active .hamburger-icon::before {
    transform: translateY(7px) rotate(45deg);
}

.mobile-nav-toggle.active .hamburger-icon::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- New Mobile Menu Overlay Styles --- */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background-white); /* Pure white background */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%); /* Start off-screen to the left */
    transition: opacity var(--duration-quick) var(--timing-default),
                transform var(--duration-quick) var(--timing-default),
                visibility var(--duration-quick) var(--timing-default);
    z-index: 998; /* Below header, above main content */
    padding: var(--space-lg); /* Padding around content */
}

#mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mobile-nav-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl); /* Consistent spacing between menu items */
    list-style: none;
    padding: 0;
    text-align: center;
}

.mobile-nav-content li {
    width: 100%; /* Ensure list items take full width for consistent hover area */
}

.mobile-nav-content .nav-link {
    font-size: var(--font-size-headline-2); /* Larger font for mobile links */
    font-weight: var(--font-weight-medium); /* Slightly bolder than regular body text */
    color: var(--color-text-primary);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    display: block; /* Make links block level for easier tapping */
    border-radius: var(--border-radius-sm); /* Consistent border radius */
    transition: background-color var(--duration-micro) var(--timing-default),
                color var(--duration-micro) var(--timing-default);
}

.mobile-nav-content .nav-link:hover,
.mobile-nav-content .nav-link:focus {
    background-color: rgba(0, 122, 255, 0.08); /* Consistent hover effect from desktop nav */
    color: var(--color-primary-brand);
    outline: none; /* Remove default focus outline */
}

.mobile-menu-btn { /* Styling for the "Contribute" button in mobile menu */
    display: inline-flex; /* Inherit button display */
    width: auto; /* Allow button to size to its content, or set a max-width */
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-md); /* Space above the button if it's the last item */
    font-size: var(--font-size-button-text); /* Consistent button text size */
}


/* --- 3. Removed Hero Section --- */

/* --- 4. Section Styling --- */

.section-header {
    margin-bottom: var(--space-xl);
}

.section-header h2 {
    font-size: var(--font-size-headline-1);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-sm);
}

.section-header p {
    font-size: var(--font-size-body-regular);
    color: var(--color-text-secondary);
}

/* --- 5. Cards --- */

.card {
    background-color: var(--color-background-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-level-1);
    border: 1px solid var(--color-border-light);
    overflow: hidden; /* Ensure content respects border-radius */
    transition: transform var(--duration-quick) var(--timing-default),
                box-shadow var(--duration-quick) var(--timing-default);
}

.card:hover {
    box-shadow: var(--shadow-level-2);
    transform: translateY(-5px); /* Subtle lift effect */
}

.card-header {
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.card-icon {
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.card-header h3 {
    font-size: var(--font-size-headline-3);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin-bottom: 0; /* Remove default margin */
}

.card-body {
    padding: 0 var(--space-lg) var(--space-lg); /* Padding top is handled by header */
}

.card-body p {
    font-size: var(--font-size-body-regular);
    color: var(--color-text-secondary);
}

.card-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border-light);
}

/* Program Card Specifics (used for Current Initiatives flyers) */
.program-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push footer to bottom if content varies */
    min-height: 300px; /* Ensure consistent height */
}

.program-card .card-footer .btn-text {
    font-weight: var(--font-weight-medium);
}

/* Impact Card Specifics (Used for placeholders) */
.impact-card {
    background: linear-gradient(180deg, var(--color-content-background) 0%, var(--color-background-white) 100%);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-level-2);
    padding: var(--space-lg); /* Use standard padding */
    text-align: center;
    border: none; /* Override default card border */
}

.impact-card:hover {
    box-shadow: var(--shadow-level-3);
    transform: translateY(-5px);
}

.impact-card .impact-value {
    font-size: var(--font-size-display-medium);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-primary-brand);
    margin-bottom: var(--space-sm);
}

.impact-card p {
    font-size: var(--font-size-body-regular);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* --- 6. Buttons --- */

.btn {
    display: inline-block;
    padding: var(--space-sm) calc(var(--space-sm) * 2); /* 12px 24px */
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-button-text);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-micro) var(--timing-default),
                color var(--duration-micro) var(--timing-default),
                border-color var(--duration-micro) var(--timing-default),
                transform var(--duration-micro) var(--timing-default);
    border: none; /* Default to no border */
    min-width: 120px; /* Minimum width */
    height: 48px; /* Standard height */
    display: inline-flex; /* For centering content */
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: var(--color-primary-brand);
    color: var(--color-background-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover);
    outline: none; /* Remove default focus outline for custom styling */
    box-shadow: 0 0 0 var(--focus-outline-width) var(--color-primary-brand); /* Accessibility focus */
    transform: translateY(-2px); /* Subtle lift on hover */
}

.btn-primary:active {
    transform: scale(0.98); /* Button press effect */
}

.btn-primary:disabled {
    background-color: var(--color-primary-disabled);
    cursor: not-allowed;
    transform: none; /* Remove hover transform */
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-primary-brand);
    color: var(--color-primary-brand);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: rgba(0, 122, 255, 0.1); /* 10% opacity of primary */
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 var(--focus-outline-width) var(--color-primary-brand); /* Accessibility focus */
    transform: translateY(-2px);
}

.btn-secondary:active {
    background-color: rgba(0, 122, 255, 0.2); /* 20% opacity */
    transform: scale(0.98);
}

.btn-text {
    background-color: transparent;
    color: var(--color-primary-brand);
    padding: var(--space-xs) var(--space-sm); /* Smaller padding */
    min-width: auto; /* No min-width for text buttons */
    height: auto; /* Auto height */
    font-weight: var(--font-weight-medium);
    border: none;
    text-decoration: underline; /* Underline for text buttons */
    transition: color var(--duration-micro) var(--timing-default),
                background-color var(--duration-micro) var(--timing-default);
}

.btn-text:hover,
.btn-text:focus {
    color: var(--color-primary-hover);
    background-color: rgba(0, 122, 255, 0.08); /* 8% opacity */
    text-decoration: none; /* Remove underline on hover for a cleaner look */
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 var(--focus-outline-width) var(--color-primary-brand); /* Accessibility focus */
}

.nav-donate-btn {
    padding: var(--space-xs) var(--space-md); /* Slightly smaller than main buttons */
    height: 40px; /* Adjust height for header consistency */
    font-size: var(--font-size-body-small);
}

/* --- 7. About Section --- */

.about-section .container {
    max-width: 1100px; /* Slightly narrower for focus */
}

.about-content {
    align-items: center; /* Vertically align content */
}

.about-text h3 {
    font-size: var(--font-size-headline-3);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin-bottom: var(--space-sm);
}

.about-text p {
    margin-bottom: var(--space-md);
}

.about-text .btn-text {
    margin-top: var(--space-md);
}

.about-image-container {
    position: relative;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-level-3);
}

/* --- 8. Programs Section (now Current Initiatives) --- */

.programs-section .container {
    max-width: 1200px;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: var(--space-lg);
}

/* --- 9. Removed Impact Section --- */

/* --- 10. Removed Get Involved Section --- */

/* --- 11. Donate & Volunteer Sections (now Ways to Contribute) --- */

.donate-section,
.volunteer-section {
    background-color: var(--color-content-background);
}

.donate-section .container,
.volunteer-section .container {
    max-width: 1100px;
}

.donate-content {
    align-items: flex-start; /* Align items at the start */
    gap: var(--space-lg);
}

.donate-text ul,
.volunteer-text ul {
    list-style: disc; /* Use discs for list items */
    padding-left: var(--space-md);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.donate-text li,
.volunteer-text li {
    margin-bottom: var(--space-xs);
}

.donate-form-placeholder {
    width: 100%; /* Take full width of its grid cell */
}

.donate-form-placeholder .impact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* Give some height */
}

.donate-form-btn,
.volunteer-form-btn {
    margin-top: var(--space-md);
}

/* --- 12. Contact Section --- */

.contact-section {
    background-color: var(--color-content-background);
}

.contact-section .container {
    max-width: 1000px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.contact-icon {
    flex-shrink: 0;
}

.contact-item p {
    margin-bottom: 0; /* Remove default margin */
}

.social-links {
    display: flex;
    gap: var(--space-sm);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Consistent size */
    height: 40px;
    background-color: var(--color-background-white); /* Pure white background */
    border-radius: var(--border-radius-full); /* Make it a perfect circle */
    transition: transform var(--duration-micro) var(--timing-default),
                box-shadow var(--duration-micro) var(--timing-default);
    border: none; /* Ensure no border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.social-links a:hover,
.social-links a:focus {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
    outline: none; /* Remove default focus outline */
}

/* Style for actual social icon images */
.social-icon-img {
    display: block;
    width: 24px; /* Match SVG size */
    height: 24px;
    object-fit: contain;
    /* filter: invert(1); Uncomment if your icons are white and need to be black on white background */
}


.contact-form-container {
    width: 100%;
}

.contact-form-container .impact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.contact-form-btn {
    margin-top: var(--space-md);
}


/* --- 13. Footer --- */

.site-footer {
    background-color: var(--color-text-primary);
    color: var(--color-background-white);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.site-footer .container {
    max-width: 1100px;
}

.footer-content {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: var(--space-md); /* Smaller gap for horizontal distribution */
    align-items: flex-start; /* Align items to the top within their rows */
}

.footer-logo-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 250px; /* Allow growing/shrinking, min-width 250px */
    min-width: 200px; /* Ensure it doesn't get too small */
    padding-right: var(--space-md); /* Add some internal padding */
}

.footer-logo-img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: var(--space-sm); /* Space below logo */
}

.footer-content h4 {
    font-size: var(--font-size-headline-3);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    white-space: nowrap; /* Prevent headline from wrapping if possible */
}

.footer-links {
    flex: 1 1 150px; /* Allow growing/shrinking, min-width 150px */
    padding-right: var(--space-md);
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-links a {
    color: var(--color-background-white);
    text-decoration: none;
    font-size: var(--font-size-body-small);
    transition: opacity var(--duration-micro) var(--timing-default);
}

.footer-links a:hover,
.footer-links a:focus {
    opacity: 0.8;
}

.footer-social {
    flex: 1 1 150px; /* Allow growing/shrinking, min-width 150px */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align header and content to start */
}

.footer-social .social-icons {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs); /* Add some space below "Follow Us" heading */
}

.footer-social .social-icons a {
    background-color: var(--color-background-white); /* Pure white background */
    border-radius: var(--border-radius-full); /* Make it a perfect circle */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none; /* Remove border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.footer-social .social-icons a:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
    transform: translateY(-2px);
}

.footer-social .social-icons .social-icon-img { /* Specific styling for images within footer social links */
    /* filter: invert(0); */ /* Keep original colors if transparent or already black */
    width: 24px;
    height: 24px;
    object-fit: contain;
}


.footer-legal {
    width: 100%; /* Occupies full width */
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border for separation */
}

.footer-legal p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    line-height: 1.5; /* Improve readability for legal text */
}

.footer-legal a {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.footer-legal a:hover,
.footer-legal a:focus {
    color: var(--color-background-white);
    text-decoration: none;
}

/* --- 14. Accessibility --- */

/* Skip to Content */
.skip-to-content {
    position: absolute;
    top: -100px; /* Hide off-screen */
    left: 0;
    z-index: 1001; /* Ensure it's on top */
    background: var(--color-primary-brand);
    color: var(--color-background-white);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: top 0.3s ease-out; /* Smooth transition */
}

.skip-to-content:focus {
    top: 10px; /* Bring into view when focused */
    outline: none; /* Remove default outline as we handle focus */
}

/* Focus States for interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: var(--focus-outline-width) solid var(--color-primary-brand);
    outline-offset: var(--focus-outline-offset);
}

/* Ensure sufficient contrast for all text elements */
h1, h2, h3, h4, h5, h6, p, li, a, span, div {
    color: var(--color-text-primary);
}

/* Specific text color for footer to ensure contrast on dark background */
.site-footer, .site-footer p, .site-footer a, .site-footer h4 {
    color: var(--color-background-white);
}
.site-footer .footer-legal p, .site-footer .footer-legal a {
    color: var(--color-text-secondary); /* Keep secondary for copyright/policy links */
}


/* Ensure touch targets are adequately sized and spaced */
/* Buttons and links should have enough padding */


/* --- 15. Responsive Design --- */

@media (min-width: 993px) {
    /* Desktop-specific styles */
    .mobile-nav-toggle {
        display: none; /* Hide hamburger on desktop */
    }
    .header-left-group .main-nav-left, /* Show desktop left nav */
    .header-right-group .main-nav-right { /* Show desktop right nav */
        display: flex;
    }
    .nav-donate-btn {
        display: inline-flex; /* Show desktop header button */
    }
    .main-nav-left ul,
    .main-nav-right ul {
        /* Ensure horizontal display on desktop */
        flex-direction: row;
    }
    #mobile-menu-overlay {
        display: none !important; /* Ensure overlay is hidden on desktop */
    }
}


@media (max-width: 1200px) {
    .container {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }

    .site-header .container {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
}

@media (max-width: 992px) {
    /* General grid for smaller screens */
    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr; /* Stack columns */
    }

    .program-card {
        min-height: auto; /* Allow cards to size naturally */
    }

    .section-header h2 {
        font-size: var(--font-size-headline-2);
    }
    
    .impact-card .impact-value {
        font-size: var(--font-size-display-medium);
    }

    .contact-content {
        flex-direction: column;
        align-items: center;
    }

    .contact-form-container {
        width: 100%; /* Ensure form takes full width */
    }

    .footer-content {
        flex-direction: column; /* Stack footer sections vertically */
        text-align: center;
        align-items: center; /* Center items in column layout */
        gap: var(--space-lg); /* More space between stacked sections */
    }

    .footer-logo-section,
    .footer-links,
    .footer-social {
        flex: none; /* Reset flex grow */
        width: 100%; /* Take full width */
        padding: 0; /* Remove internal padding on mobile for full width */
        align-items: center; /* Center content within these sections */
    }
    /* Specifically center content for logo section when stacked */
    .footer-logo-section {
        align-items: center;
    }


    .footer-links ul {
        justify-content: center; /* Center quick links */
    }

    .footer-social .social-icons {
        justify-content: center; /* Center social icons */
        margin-top: var(--space-sm);
    }

    /* Header specific for mobile/tablet */
    .site-header .container {
        grid-template-columns: auto 1fr auto; /* Left toggle, Logo, Right actions (empty or future) */
        padding-left: var(--space-md); /* Adjust padding */
        padding-right: var(--space-md);
        gap: var(--space-sm); /* Smaller gap for mobile */
    }

    .header-left-group {
        grid-column: 1 / 2; /* Place in first column */
        justify-self: start; /* Align to the start */
        order: 1; /* Ensure it's visually first */
    }

    .mobile-nav-toggle {
        display: block; /* Show hamburger on mobile */
    }
    /* Hide desktop nav elements on mobile */
    .header-left-group .main-nav-left,
    .header-right-group .main-nav-right,
    .nav-donate-btn {
        display: none;
    }

    .logo-container {
        grid-column: 2 / 3; /* Keep logo in the center column visually */
        justify-self: center; /* Ensures horizontal centering */
        order: 2; /* Place after the toggle */
    }
    
    .header-right-group {
        grid-column: 3 / 4; /* Keep this group on the far right */
        justify-self: end; /* Align to the end */
        order: 3; /* Place after logo */
        display: flex; /* Ensure it remains flex for internal items */
        align-items: center;
        gap: var(--space-sm);
    }
}

@media (max-width: 768px) {
    .site-header .container {
        padding: 0 var(--space-sm); /* Reduce header padding further */
    }

    .section-padding-large {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .section-header {
        margin-bottom: var(--space-lg);
    }
    
    .card {
        box-shadow: var(--shadow-level-1); /* Reset hover effect for mobile if needed */
    }

    .card:hover {
        box-shadow: var(--shadow-level-1);
        transform: none;
    }

    .impact-card .impact-value {
        font-size: var(--font-size-headline-1);
    }

    .social-links a {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .btn {
        padding: var(--space-xs) var(--space-sm); /* Smaller button padding */
        min-width: auto; /* Remove min-width */
        height: 40px;
    }

    .nav-donate-btn {
        padding: var(--space-xs) var(--space-sm);
        height: 40px;
    }

    .section-header h2 {
        font-size: var(--font-size-headline-2);
    }
}