/* style.css */

/* --------------------
   CSS Variables
   -------------------- */
:root {
    --font-primary: 'Archivo Black', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    /* Monochrome Neomorphism Palette */
    --bg-color: #E0E5EC; /* Light grey background */
    --bg-color-darker: #c8d0e7; /* Slightly darker for depth or specific elements */
    --text-color-dark: #333740; /* Dark grey for primary text */
    --text-color-medium: #5c6270; /* Medium grey for secondary text */
    --text-color-light: #8d93a0; /* Light grey for subtle text */
    --text-color-hero: #FFFFFF; /* White text for hero section */

    --shadow-color-light: rgba(255, 255, 255, 0.8);
    --shadow-color-dark: rgba(163, 177, 198, 0.7); /* Adjusted for better neumorphic effect */
    
    /* Neumorphic Shadows */
    --neumorphic-shadow-convex: 6px 6px 12px var(--shadow-color-dark), -6px -6px 12px var(--shadow-color-light);
    --neumorphic-shadow-concave: inset 6px 6px 12px var(--shadow-color-dark), inset -6px -6px 12px var(--shadow-color-light);
    --neumorphic-shadow-flat: 3px 3px 6px var(--shadow-color-dark), -3px -3px 6px var(--shadow-color-light);
    --neumorphic-shadow-hover: 8px 8px 16px var(--shadow-color-dark), -8px -8px 16px var(--shadow-color-light);
    --neumorphic-shadow-active-convex: 3px 3px 6px var(--shadow-color-dark), -3px -3px 6px var(--shadow-color-light); /* For pressed convex */

    /* Borders & Radius */
    --border-radius-soft: 12px;
    --border-radius-medium: 20px;
    --border-radius-large: 30px;

    /* Transitions */
    --transition-smooth: all 0.3s ease-in-out;
    --transition-fast: all 0.2s ease-in-out;

    /* Spacing */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-xxl: 4rem;    /* 64px */

    /* Header height - adjust as needed */
    --header-height: 80px;
}

/* --------------------
   Global Resets & Base Styles
   -------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* Corresponds to 16px by default */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    background-color: var(--bg-color);
    color: var(--text-color-dark);
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-wrapper {
    padding-top: var(--header-height); /* Account for fixed header */
}

/* For specific pages like privacy, terms */
.page-content-wrapper {
    padding-top: calc(var(--header-height) + var(--spacing-md)); /* Extra space for these pages */
    padding-bottom: var(--spacing-xl);
}
.page-content-wrapper .container {
    max-width: 800px; /* Narrower content for text-heavy pages */
}
.page-content-wrapper h1 {
    margin-bottom: var(--spacing-md);
}
.page-content-wrapper h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}
.page-content-wrapper p,
.page-content-wrapper ul,
.page-content-wrapper ol {
    margin-bottom: var(--spacing-sm);
}
.page-content-wrapper ul, .page-content-wrapper ol {
    padding-left: var(--spacing-md);
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--text-color-medium);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--text-color-dark);
    text-decoration: underline;
}

/* Headings - Adaptive Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--text-color-dark);
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for dark text on light bg for definition */
}

h1 { font-size: clamp(2.2rem, 5vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.8rem, 4vw + 0.8rem, 2.8rem); }
h3 { font-size: clamp(1.4rem, 3vw + 0.5rem, 2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw + 0.4rem, 1.75rem); }

p {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.125rem); /* Approx 16px to 18px */
    color: var(--text-color-medium);
}

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

/* --------------------
   Layout & Container
   -------------------- */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* --------------------
   Header & Navigation
   -------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--bg-color);
    box-shadow: var(--neumorphic-shadow-flat); /* Subtle shadow for fixed header */
    z-index: 1000;
    transition: var(--transition-smooth);
}

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

.logo {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--text-color-dark);
    text-decoration: none;
}
.logo:hover {
    color: var(--text-color-dark);
    text-decoration: none;
}

.main-nav .nav-links {
    list-style: none;
    display: flex;
    gap: var(--spacing-md);
}

.main-nav .nav-links a {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    color: var(--text-color-medium);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-soft);
    transition: var(--transition-smooth);
}

.main-nav .nav-links a:hover,
.main-nav .nav-links a.active-link { /* Add .active-link via JS */
    color: var(--text-color-dark);
    background-color: var(--bg-color-darker); /* Subtle neumorphic press */
    box-shadow: var(--neumorphic-shadow-concave);
}

.nav-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: 1001;
}

.nav-toggle .hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color-dark);
    position: relative;
    transition: var(--transition-smooth);
}

.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--text-color-dark);
    transition: var(--transition-smooth);
}

.nav-toggle .hamburger::before { top: -8px; }
.nav-toggle .hamburger::after { bottom: -8px; }

.nav-toggle.active .hamburger { background-color: transparent; }
.nav-toggle.active .hamburger::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active .hamburger::after { transform: translateY(-8px) rotate(-45deg); }


/* --------------------
   Global UI Components
   -------------------- */

/* Buttons */
.neumorphic-button,
button,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-medium);
    background-color: var(--bg-color);
    color: var(--text-color-dark);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: var(--neumorphic-shadow-convex);
    transition: var(--transition-fast);
    outline: none;
}

.neumorphic-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: var(--neumorphic-shadow-hover);
    color: var(--text-color-dark);
    text-decoration: none;
}

.neumorphic-button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
    box-shadow: var(--neumorphic-shadow-concave); /* Pressed effect */
    color: var(--text-color-medium);
}

/* Inputs */
.neumorphic-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea {
    font-family: var(--font-secondary);
    font-size: clamp(0.9rem, 1vw + 0.4rem, 1rem);
    width: 100%;
    padding: var(--spacing-sm);
    border: none; /* 1px solid var(--bg-color-darker); */
    border-radius: var(--border-radius-soft);
    background-color: var(--bg-color); /* Slightly different for contrast or same with inset shadow */
    color: var(--text-color-dark);
    box-shadow: var(--neumorphic-shadow-concave);
    transition: var(--transition-fast);
    outline: none;
}
.neumorphic-input::placeholder,
textarea::placeholder {
    color: var(--text-color-light);
}

.neumorphic-input:focus,
textarea:focus {
    box-shadow: var(--neumorphic-shadow-concave), 0 0 0 2px var(--shadow-color-dark); /* Focus ring */
}


/* Cards */
.neumorphic-card, .card {
    background-color: var(--bg-color);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-md);
    box-shadow: var(--neumorphic-shadow-convex);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content like images */
    text-align: center; /* Center text content within card */
    overflow: hidden; /* Ensure content respects border-radius */
}

.neumorphic-card:hover, .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--neumorphic-shadow-hover);
}

.card-image, .image-container { /* Global class for image wrappers in cards */
    width: 100%;
    height: 200px; /* Fixed height for uniform card images */
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-soft); /* Soft radius for image container */
    overflow: hidden; /* Important for object-fit */
    display: flex; /* For centering image if it's smaller, though object-fit handles it */
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color-darker); /* Placeholder bg */
}

.card-image img, .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, crops if necessary */
    display: block; /* Remove extra space below image */
}

.card-content {
    width: 100%; /* Take full width of the card for text alignment */
}

.card-content h3 {
    margin-bottom: var(--spacing-xs);
    color: var(--text-color-dark);
}

.card-content p {
    font-size: clamp(0.85rem, 1vw + 0.3rem, 1rem);
    color: var(--text-color-medium);
    line-height: 1.6;
}

/* Read More Link Style */
.read-more-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-weight: bold;
    color: var(--text-color-dark);
    text-decoration: underline;
    transition: var(--transition-fast);
}
.read-more-link:hover {
    color: var(--text-color-medium);
    text-decoration: none;
}

/* --------------------
   Section Styles
   -------------------- */
.section {
    padding: var(--spacing-xl) 0;
}

.section:nth-child(even) { /* Alternate section background slightly if desired */
   /* background-color: var(--bg-color-darker); */ /* Keeping it consistent for now */
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--text-color-dark); /* Ensure high contrast for titles */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15); /* Enhanced shadow for section titles */
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-lg);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--text-color-medium);
}

/* Hero Section */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--text-color-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
    padding: var(--spacing-xxl) 0; /* Generous padding */
}

.hero-content {
    max-width: 800px;
}

.hero-title {
    color: var(--text-color-hero); /* Explicitly white as per requirement */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Stronger shadow for readability */
    margin-bottom: var(--spacing-md);
}

.hero-subtitle {
    color: var(--text-color-hero); /* Explicitly white */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
    margin-bottom: var(--spacing-lg);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
}

#hero .cta-button {
    background-color: rgba(255, 255, 255, 0.2); /* Glassmorphism hint */
    backdrop-filter: blur(5px);
    color: var(--text-color-hero);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
#hero .cta-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
#hero .cta-button:active {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
}


/* Mission Section */
.mission-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}
@media (min-width: 768px) {
    .mission-content {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
         grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); /* Text takes more space */
    }
    .mission-text { text-align: left; }
}
.mission-image {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-flat);
    height: auto; /* Override fixed card image height */
    max-height: 450px; /* But cap it */
}
.mission-image img {
    border-radius: var(--border-radius-medium);
}


/* Features Section */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}
.project-card .card-image { height: 220px; }

/* Success Stories (Testimonials) Section */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}
.testimonial-card .card-image {
    width: 120px; /* Smaller image for testimonials */
    height: 120px;
    border-radius: 50%; /* Circular images */
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--neumorphic-shadow-flat);
}
.testimonial-card blockquote {
    font-style: italic;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color-medium);
}
.testimonial-card blockquote p {
    margin-bottom: var(--spacing-xs);
}
.testimonial-card footer {
    font-weight: bold;
    color: var(--text-color-dark);
}


/* Accolades Section */
.accolades-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xl);
    text-align: center;
}
.accolade-item {
    flex-basis: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.accolade-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: var(--spacing-sm);
    filter: drop-shadow(2px 2px 4px var(--shadow-color-dark));
}
.accolade-item p {
    font-size: 0.9rem;
    color: var(--text-color-medium);
}


/* Community Section */
.community-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}
@media (min-width: 768px) {
    .community-content {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }
    .community-text { text-align: left; }
}
.community-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}
.community-image-gallery .card-image {
    height: 230px; /* As per HTML */
    box-shadow: var(--neumorphic-shadow-flat);
}


/* Partners Section */
.partners-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
}
.partners-logos img {
    height: 60px; /* Consistent height for logos */
    width: auto;
    object-fit: contain;
    opacity: 0.8;
    transition: var(--transition-smooth);
    filter: grayscale(50%) contrast(1.1); /* Subtle monochrome effect */
}
.partners-logos img:hover {
    opacity: 1;
    filter: grayscale(0%) contrast(1);
    transform: scale(1.05);
}

/* External Resources Section */
.resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}
.resource-item .card-content {
    text-align: left;
}
.resource-item h3 a {
    color: var(--text-color-dark);
    font-family: var(--font-secondary); /* Roboto for these titles, not Archivo */
    font-weight: bold;
}
.resource-item h3 a:hover {
    color: var(--text-color-medium);
}


/* Contact Section */
.contact-form-container {
    background-color: var(--bg-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--neumorphic-shadow-convex);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.form-group {
    margin-bottom: var(--spacing-md);
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
    color: var(--text-color-medium);
}
.contact-form-container .submit-button {
    width: 100%;
    margin-top: var(--spacing-sm);
}

.contact-details {
    text-align: center;
    margin-top: var(--spacing-xl);
}
.contact-details h3 {
    margin-bottom: var(--spacing-md);
}
.contact-details p {
    margin-bottom: var(--spacing-xs);
}
.contact-image {
    margin-top: var(--spacing-lg);
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Match HTML width */
    height: auto; /* Override fixed card image height */
    box-shadow: var(--neumorphic-shadow-flat);
}
.contact-image img {
    border-radius: var(--border-radius-medium);
}

/* --------------------
   Footer
   -------------------- */
.site-footer {
    background-color: var(--bg-color-darker); /* Slightly different bg for footer */
    color: var(--text-color-medium);
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    text-align: center;
    box-shadow: inset 0 5px 10px -5px var(--shadow-color-dark); /* Inner shadow from top */
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    text-align: left;
    align-items: start;
}

.site-footer h4 {
    font-family: var(--font-primary);
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
}

.site-footer ul {
    list-style: none;
    padding-left: 0;
}

.site-footer ul li a {
    color: var(--text-color-medium);
    padding: var(--spacing-xs) 0;
    display: inline-block;
}
.site-footer ul li a:hover {
    color: var(--text-color-dark);
    text-decoration: underline;
}

.footer-social ul li a {
    /* Text links, styled as required */
}

.footer-copyright {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--shadow-color-dark);
    font-size: 0.9rem;
}

/* --------------------
   Specific Page Styles
   -------------------- */

/* success.html */
body.success-page { /* Add this class to body on success.html */
    display: flex;
    flex-direction: column; /* To stack header, main, footer */
    min-height: 100vh;
}
body.success-page .main-wrapper {
    flex-grow: 1;
    display: flex; /* For centering success message */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0; /* Override main-wrapper padding if header is not desired or different */
}
body.success-page .site-header, body.success-page .site-footer {
    flex-shrink: 0; /* Prevent header/footer from shrinking */
}
.success-content {
    background-color: var(--bg-color);
    padding: var(--spacing-xxl) var(--spacing-xl);
    border-radius: var(--border-radius-large);
    box-shadow: var(--neumorphic-shadow-convex);
    max-width: 600px;
}
.success-content h1 {
    color: #28a745; /* Success green, if allowed in monochrome, otherwise dark grey */
    font-size: clamp(2rem, 4vw, 3rem);
}
.success-content p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    margin-bottom: var(--spacing-lg);
}

/* --------------------
   Animations & Transitions (Scroll-based needs JS)
   -------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------
   Media Queries (Responsive Design)
   -------------------- */
@media (max-width: 992px) {
    .mission-content, .community-content {
        grid-template-columns: 1fr; /* Stack on smaller screens */
        text-align: center;
    }
    .mission-text, .community-text { text-align: center; }
    .mission-image, .community-image-gallery { margin-top: var(--spacing-md); }
}

@media (max-width: 768px) {
    :root { --header-height: 70px; } /* Slightly smaller header on mobile */

    .main-wrapper { padding-top: var(--header-height); }
    
    .section { padding: var(--spacing-lg) 0; }
    .section-title { margin-bottom: var(--spacing-lg); }
    .section-subtitle { margin-bottom: var(--spacing-md); }
    
    .features-grid, .projects-grid, .testimonials-grid, .resources-list {
        grid-template-columns: 1fr; /* Stack cards */
    }

    .nav-toggle {
        display: block;
    }
    .main-nav .nav-links {
        display: none; /* Hidden by default */
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--bg-color);
        padding: var(--spacing-md) 0;
        box-shadow: var(--neumorphic-shadow-flat);
        border-top: 1px solid var(--shadow-color-dark);
    }
    .main-nav .nav-links.active {
        display: flex; /* Show when active */
    }
    .main-nav .nav-links li {
        width: 100%;
        text-align: center;
    }
    .main-nav .nav-links a {
        display: block;
        padding: var(--spacing-sm);
        width: 100%;
        border-radius: 0;
    }
    .main-nav .nav-links a:hover {
        background-color: var(--bg-color-darker);
        box-shadow: none; /* Simpler hover on mobile */
    }

    .footer-container {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .site-footer ul {
        margin-bottom: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    h1 { font-size: clamp(1.8rem, 10vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 8vw, 2rem); }
    h3 { font-size: clamp(1.2rem, 6vw, 1.6rem); }

    .neumorphic-button, button, input[type="submit"] {
        padding: var(--spacing-sm) var(--spacing-md); /* Slightly smaller padding */
    }
    .hero-content { padding: 0 var(--spacing-sm); }
}

/* Utility Classes (Optional) */
.text-center { text-align: center; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }

.sr-only { /* For accessibility, hide visually but keep for screen readers */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}