/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. ROOT VARIABLES
2. GENERAL STYLES & TYPOGRAPHY
3. LAYOUT & CONTAINERS
4. HEADER & NAVIGATION
5. HERO SECTION
6. COMMON SECTION STYLES
7. UI COMPONENTS
    7.1. Buttons
    7.2. Cards (General, Resource, Media, etc.)
    7.3. Accordion
    7.4. Carousel
    7.5. Forms
    7.6. Gallery
8. SPECIFIC SECTIONS
    8.1. Mission
    8.2. Methodology (uses Accordion)
    8.3. Research (uses Cards)
    8.4. Innovation (uses Carousel Cards)
    8.5. Webinars & Events (uses Cards)
    8.6. Blog (uses Cards)
    8.7. Media (uses Media Cards)
    8.8. External Resources (uses Resource Cards)
    8.9. Contact (uses Forms)
9. FOOTER
10. ANIMATIONS & EFFECTS
11. UTILITY CLASSES
12. SPECIFIC PAGE STYLES (Privacy, Terms, Success)
13. COOKIE POPUP
14. RESPONSIVE DESIGN (Media Queries)
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --font-family-headings: 'Roboto', sans-serif;
    --font-family-body: 'Lato', sans-serif;

    /* Monochromatic Theme */
    --color-primary-darkest: #121212; /* Deepest black for backgrounds or accents */
    --color-primary-dark: #222222;    /* Dark grey for text, backgrounds */
    --color-primary-medium: #333333;  /* Medium dark grey for text, elements */
    --color-primary-light: #444444;   /* Lighter grey for subtle elements */
    --color-neutral-dark: #666666;    /* Neutral grey for secondary text */
    --color-neutral-medium: #999999;  /* Lighter neutral grey */
    --color-neutral-light: #CCCCCC;   /* Very light grey for borders, subtle UI */
    --color-neutral-lightest: #EAEAEA;/* Off-white for card backgrounds, dividers */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Semantic Colors */
    --text-color-primary: var(--color-primary-dark);
    --text-color-secondary: var(--color-neutral-dark);
    --text-color-light: var(--color-white);
    --text-color-headings: var(--color-primary-darkest);
    --text-color-accent: var(--color-primary-light); /* Example: For muted highlights */

    --background-color-body: var(--color-white);
    --background-color-section-alt: var(--color-neutral-lightest);
    --background-color-card: var(--color-white);
    --background-color-dark-section: var(--color-primary-darkest);

    --accent-color-interactive: #5555dd; /* A subtle blue for interactivity if strictly monochromatic is too limiting */
    /* If strict monochrome, use a shade of grey like: var(--color-primary-light); */
    --accent-color-cta: #007bff; /* Brighter accent for CTAs, can be adjusted to grey */
     /* For strict monochrome CTAs:
    --accent-color-cta: var(--color-primary-medium);
    --accent-color-cta-hover: var(--color-primary-light);
    */

    --border-color: var(--color-neutral-light);
    --box-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.1);
    --box-shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.15);

    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;

    --header-height: 80px;
    --footer-background: var(--color-primary-darkest);
    --footer-text-color: var(--color-neutral-light);
    --footer-link-color: var(--color-white);
    --footer-link-hover-color: var(--color-neutral-medium);
}

/* 2. GENERAL STYLES & TYPOGRAPHY */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* Base for rem units, typically 16px */
}

body {
    font-family: var(--font-family-body);
    font-size: 1rem; /* Approx 16px */
    line-height: 1.7;
    color: var(--text-color-primary);
    background-color: var(--background-color-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--text-color-headings);
    margin-bottom: 0.75em; /* Responsive margin */
    line-height: 1.3;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; } /* Adaptive h1 */
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); } /* Adaptive h2 */
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: 1.25rem; /* Approx 20px */
    color: var(--text-color-secondary);
}

a {
    color: var(--accent-color-cta);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out;
}

a:hover, a:focus {
    color: var(--color-primary-dark); /* Darken on hover for monochrome */
    text-decoration: underline;
}

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

ul, ol {
    list-style-position: inside;
    padding-left: 1.5em; /* Indentation for lists */
    margin-bottom: 1rem;
}

/* 3. LAYOUT & CONTAINERS */
.site-container {
    width: 100%;
    overflow: hidden; /* Prevents horizontal scroll from animations */
}

.section-container, .header-container, .footer-container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.grid-container {
    display: grid;
    gap: 2rem; /* Spacing between grid items */
}

/* Default to 1 column, then adjust with media queries */
.research-grid, .webinars-grid, .events-grid, .blog-grid, .resources-grid {
    grid-template-columns: 1fr;
}


/* 4. HEADER & NAVIGATION */
.site-header {
    background-color: var(--color-white);
    padding: 1rem 0;
    position: fixed; /* Sticky header */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--box-shadow-soft);
    transition: background-color var(--transition-speed-normal), box-shadow var(--transition-speed-normal);
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: var(--box-shadow-medium);
}

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

.logo {
    font-family: var(--font-family-headings);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    color: var(--text-color-headings);
    text-decoration: none;
}

.logo .logo-accent {
    color: var(--accent-color-cta);
}

.main-nav .nav-list {
    list-style: none;
    display: flex;
    padding-left: 0;
    margin-bottom: 0; /* Override default p margin */
}

.main-nav .nav-link {
    font-family: var(--font-family-headings);
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text-color-primary);
    font-weight: 700;
    font-size: 0.9rem;
    transition: color var(--transition-speed-fast), background-color var(--transition-speed-fast);
    border-radius: var(--border-radius-small);
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .nav-link.active {
    color: var(--accent-color-cta);
    background-color: rgba(0,0,0,0.03);
}

.nav-toggle {
    display: none; /* Hidden by default, shown in mobile view */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color-primary);
    position: relative;
    transition: transform var(--transition-speed-normal) ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color-primary);
    position: absolute;
    left: 0;
    transition: transform var(--transition-speed-normal) ease-in-out, top var(--transition-speed-normal) ease-in-out;
}

.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

/* Styles for open mobile menu */
.nav-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* Middle bar disappears */
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: rotate(45deg);
    top: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: rotate(-45deg);
    top: 0;
}


/* 5. HERO SECTION */
.hero-section {
    position: relative;
    color: var(--text-color-light); /* White text for hero */
    text-align: center;
    padding: clamp(5rem, 15vh, 10rem) 0; /* Responsive padding */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Ensure it's substantial but not overly large */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); /* Dark overlay for readability */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 1rem;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive title */
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--text-color-light);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* Responsive subtitle */
    margin-bottom: 2rem;
    color: var(--text-color-light);
    opacity: 0.9;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}


/* 6. COMMON SECTION STYLES */
.content-section {
    padding: clamp(3rem, 8vh, 5rem) 0; /* Responsive padding */
}

.section-bg-alt {
    background-color: var(--background-color-section-alt);
}

.section-title {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vh, 3rem); /* Responsive margin */
    font-weight: 700;
    color: var(--text-color-headings);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(1.5rem, 4vh, 3rem); /* Responsive margin */
    color: var(--text-color-secondary);
    font-size: clamp(1rem, 2vw, 1.15rem);
}


/* 7. UI COMPONENTS */

/* 7.1. Buttons (Global) */
.cta-button,
.submit-button,
.card-link,
button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    padding: 0.8em 1.8em; /* Responsive padding */
    font-family: var(--font-family-headings);
    font-size: clamp(0.9rem, 1.8vw, 1.1rem); /* Responsive font size */
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all var(--transition-speed-normal) ease-in-out;
    box-shadow: var(--box-shadow-soft);
    line-height: 1.4; /* Ensure text is centered vertically */
}

.cta-button, .submit-button { /* Main call-to-action buttons */
    background-color: var(--accent-color-cta);
    color: var(--text-color-light);
    border-color: var(--accent-color-cta);
}

.cta-button:hover, .submit-button:hover,
.cta-button:focus, .submit-button:focus {
    background-color: var(--color-primary-dark); /* Darken on hover */
    border-color: var(--color-primary-dark);
    color: var(--text-color-light);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-medium);
    text-decoration: none;
}

.card-link { /* Links styled as buttons within cards */
    background-color: transparent;
    color: var(--accent-color-cta);
    border: 2px solid var(--accent-color-cta);
    font-size: 0.9rem;
    padding: 0.6em 1.2em;
}

.card-link:hover, .card-link:focus {
    background-color: var(--accent-color-cta);
    color: var(--text-color-light);
    text-decoration: none;
}

/* 7.2. Cards (General, Resource, Media, etc.) */
.card {
    background-color: var(--background-color-card);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-soft);
    transition: transform var(--transition-speed-normal), box-shadow var(--transition-speed-normal);
    overflow: hidden; /* Ensures content respects border-radius */
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a grid take full height */
    text-align: center; /* Center content within the card */
}

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

.card-image { /* Container for the image */
    width: 100%;
    /* Fixed height example - adjust as needed or make responsive */
    height: 200px; /* Example fixed height */
    overflow: hidden;
    display: flex; /* For centering the image if it's smaller */
    align-items: center;
    justify-content: center;
    background-color: var(--color-neutral-lightest); /* Placeholder bg */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, crop if necessary */
    transition: transform var(--transition-speed-slow) ease;
}

.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes link to bottom if card-link is last */
}

.card-title {
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    margin-bottom: 0.75rem;
    color: var(--text-color-headings);
}

.card-text {
    font-size: 0.95rem;
    color: var(--text-color-secondary);
    margin-bottom: 1rem;
    flex-grow: 1; /* Allows text to take space before link */
}

.card-link {
    margin-top: auto; /* Pushes link to bottom */
    align-self: center; /* Center button if it's not full width */
}

/* Specific card types */
.resource-card .card-content {
    text-align: left;
}
.resource-card .card-title a {
    color: var(--text-color-headings);
}
.resource-card .card-title a:hover {
    color: var(--accent-color-cta);
}

.media-item.card {
    flex-direction: column; /* Stack image and content vertically */
    align-items: center;
}

.media-item .card-image {
    width: 150px; /* Specific width for media logos */
    height: 50px; /* Specific height for media logos */
    margin-bottom: 1rem;
    margin-top: 1rem; /* Space for logo */
}
.media-item .card-image img {
    object-fit: contain; /* Ensure logo is not cropped */
}

.media-source {
    font-weight: 700;
    color: var(--text-color-primary);
}
.media-quote {
    font-style: italic;
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    border-left: 3px solid var(--accent-color-cta);
    padding-left: 1rem;
    margin: 1rem 0;
}

/* 7.3. Accordion */
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    margin-bottom: 1rem;
    overflow: hidden; /* For smooth transition of content */
    background-color: var(--color-white);
}

.accordion-header {
    background-color: transparent;
    color: var(--text-color-headings);
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: left;
    border: none;
    font-family: var(--font-family-headings);
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-speed-fast);
}

.accordion-header:hover {
    background-color: rgba(0,0,0,0.02);
}

.accordion-icon {
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform var(--transition-speed-normal);
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed-normal) ease-in-out, padding var(--transition-speed-normal) ease-in-out;
}
.accordion-content p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin-bottom: 0;
    font-size: 0.95rem;
}
.accordion-header[aria-expanded="true"] + .accordion-content {
    max-height: 500px; /* Adjust as needed */
    /* padding: 1.5rem; managed in p tag*/
}

/* 7.4. Carousel */
.carousel-container {
    position: relative;
    max-width: 900px; /* Or adjust to desired width */
    margin: 0 auto;
    overflow: hidden; /* Important for carousel items */
}

.carousel-content {
    display: flex;
    transition: transform var(--transition-speed-slow) ease-in-out;
}

.carousel-item {
    min-width: 100%; /* Each item takes full width of container */
    flex-shrink: 0; /* Prevent items from shrinking */
    padding: 0 0.5rem; /* Small gap between items if multiple are shown */
}
.carousel-item .card {
    margin: 0; /* Reset margin if card has its own */
    width: 100%; /* Ensure card takes full width of carousel item */
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--text-color-light);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: background-color var(--transition-speed-fast);
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

/* 7.5. Forms */
.contact-form-container {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    align-items: start; /* Align items to the top */
}

.contact-form {
    background-color: var(--background-color-card);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-soft);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--text-color-primary);
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 0.9rem 1rem; /* Slightly larger padding */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--text-color-primary);
    background-color: var(--color-white);
    transition: border-color var(--transition-speed-fast), box-shadow var(--transition-speed-fast);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color-cta);
    box-shadow: 0 0 0 3px rgba(85, 85, 221, 0.2); /* Use accent color with alpha */
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-details {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background-color: var(--background-color-section-alt);
    border-radius: var(--border-radius-large);
}
.contact-details h3 {
    margin-top: 0;
}

/* 7.6. Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 1rem;
}

.gallery-item .card {
    box-shadow: none; /* Simpler cards for gallery */
    border: 1px solid var(--border-color);
}
.gallery-item .card-image {
    height: 180px; /* Consistent height for gallery images */
}


/* 8. SPECIFIC SECTIONS */

/* 8.1. Mission */
.mission-content {
    display: grid;
    grid-template-columns: 1fr; /* Default single column */
    gap: 2rem;
    align-items: center;
}

.mission-image {
    border-radius: var(--border-radius-large);
    overflow: hidden; /* To ensure image respects border-radius */
    box-shadow: var(--box-shadow-medium);
    height: auto; /* Allow image to define its height within grid constraints */
}
.mission-image img {
    border-radius: var(--border-radius-large);
}

/* 9. FOOTER */
.site-footer {
    background-color: var(--footer-background);
    color: var(--footer-text-color);
    padding: clamp(2.5rem, 6vh, 4rem) 0 1.5rem 0; /* Responsive padding */
    font-size: 0.9rem;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.footer-column h4 {
    font-family: var(--font-family-headings);
    color: var(--text-color-light);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.footer-column p {
    color: var(--footer-text-color);
    margin-bottom: 0.5rem; /* Less margin for footer paragraphs */
    line-height: 1.6;
}
.footer-column .logo-accent { color: var(--accent-color-cta); }


.footer-nav-list, .social-links {
    list-style: none;
    padding-left: 0;
}

.footer-nav-list li, .social-links li {
    margin-bottom: 0.5rem;
}

.footer-link {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast);
}

.footer-link:hover, .footer-link:focus {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}

.footer-bottom {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--color-primary-light);
    font-size: 0.85rem;
}
.footer-bottom p {
    color: var(--footer-text-color);
}

/* 10. ANIMATIONS & EFFECTS */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-speed-slow) ease-out, transform var(--transition-speed-slow) ease-out;
}

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

/* Parallax effect placeholder for JS driven logic */
[data-parallax-speed] {
    transition: transform 0.1s ease-out; /* Smooths out JS updates */
}


/* 11. UTILITY CLASSES */
.text-center { text-align: center; }
.margin-bottom-small { margin-bottom: 1rem; }
.margin-bottom-medium { margin-bottom: 2rem; }
.margin-bottom-large { margin-bottom: 3rem; }

/* 12. SPECIFIC PAGE STYLES */
.page-container { /* For privacy, terms pages */
    padding-top: calc(var(--header-height) + 2rem); /* Clear fixed header */
    padding-bottom: 3rem;
}
.page-container .section-container {
    max-width: 900px; /* Content width for text-heavy pages */
}
.page-container h1 {
    margin-bottom: 2rem;
    text-align: center;
}
.page-container h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* success.html */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--background-color-body);
}

.success-content {
    background-color: var(--color-white);
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-strong);
    max-width: 600px;
}
.success-content h1 {
    color: var(--accent-color-cta); /* Or a success green if monochrome allows */
    margin-bottom: 1rem;
}
.success-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}
.success-content .cta-button {
    font-size: 1rem;
}

/* 13. COOKIE POPUP */
/* Styles for #cookie-popup are inline in HTML for simplicity as requested,
   but could be moved here if more complex styling is needed.
   The provided HTML includes minimal inline CSS. */


/* 14. RESPONSIVE DESIGN (Media Queries) */

@media (min-width: 768px) {
    .research-grid, .webinars-grid, .events-grid, .blog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
    .resources-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .mission-content {
        grid-template-columns: 2fr 1fr; /* Text larger than image */
    }
    .mission-content .mission-text {
        order: 1; /* Text first */
    }
    .mission-content .mission-image {
        order: 2; /* Image second */
    }
    .contact-form-container {
        grid-template-columns: 2fr 1fr; /* Form larger */
    }
}

@media (min-width: 992px) {
    .research-grid, .webinars-grid, .events-grid, .blog-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for large screens */
    }
    .main-nav .nav-link {
        font-size: 1rem;
    }
}

/* Mobile Navigation */
@media (max-width: 899px) { /* Breakpoint for burger menu */
    .main-nav .nav-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--header-height); /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        box-shadow: var(--box-shadow-medium);
        padding: 1rem 0;
        border-top: 1px solid var(--border-color);
    }

    .main-nav .nav-list.is-active {
        display: flex;
    }

    .main-nav .nav-list li {
        width: 100%;
        text-align: center;
    }

    .main-nav .nav-link {
        display: block;
        padding: 1rem;
        width: 100%;
        border-bottom: 1px solid var(--color-neutral-lightest);
    }
    .main-nav .nav-list li:last-child .nav-link {
        border-bottom: none;
    }

    .nav-toggle {
        display: block; /* Show burger icon */
    }
}