/* CSS - style.css */

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

1.  Root Variables
2.  Reset & Base Styles
3.  Typography
4.  Layout (Container, Columns, Grid)
5.  Header & Navigation
    5.1. Mobile Navigation (Burger Menu)
6.  Footer
7.  Buttons & Forms (Global)
    7.1. Buttons
    7.2. Forms
8.  Utility Classes
9.  Card Styles (Global)
10. Section Specific Styles
    10.1. Hero Section
    10.2. Contact Form Top Section
    10.3. Mission Section
    10.4. Workshops Section (Accordion)
    10.5. Events Section
    10.6. Gallery Section (Swiper Carousel)
    10.7. News Section
    10.8. External Resources Section
    10.9. Community Section
    10.10. Press Section
11. Specific Page Styles
    11.1. Success Page
    11.2. Privacy & Terms Pages
12. Animations & Transitions
13. Media Queries (Responsiveness)
-------------------------------------------------------------------*/

/* 1. Root Variables */
:root {
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-secondary: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  --color-primary: #0A2463; /* Deep Blue */
  --color-primary-rgb: 10, 36, 99;
  --color-primary-dark: #071a48;
  --color-secondary: #247BA0; /* Lighter Blue/Teal */
  --color-accent: #FF9F1C; /* Bright Orange */
  --color-accent-dark: #e08c10;

  --color-text-light: #FFFFFF;
  --color-text-dark: #222222; /* Darker for better contrast */
  --color-text-medium: #555555;
  --color-text-subtle: #777777;

  --color-background-light: #F8F9FA; /* Slightly off-white */
  --color-background-dark: #121212;
  --color-background-section: #FFFFFF;
  --color-border: #DEE2E6; /* Light gray border */
  --color-input-border: #CED4DA;

  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), #FFAA3B);

  --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.15);

  --border-radius-small: 5px;
  --border-radius-medium: 8px;
  --border-radius-large: 16px;

  --transition-speed-fast: 0.2s;
  --transition-speed-medium: 0.3s;
  --transition-speed-slow: 0.5s;
  --transition-cubic-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --transition-cubic-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --header-height: 70px;
  --container-max-width: 1200px;
  --container-padding: 0 20px;
}

/* 2. Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-secondary);
  color: var(--color-text-dark);
  background-color: var(--color-background-light);
  line-height: 1.65;
  padding-top: var(--header-height); /* For fixed header */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

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

ul {
  list-style: none;
}

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-dark); /* Ensures high contrast */
  margin-bottom: 1rem;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}
.section-title.text-light,
.hero-title.text-light {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Stronger shadow for light text on image */
}


h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

p {
  margin-bottom: 1.25rem;
  color: var(--color-text-medium);
}

.text-light { color: var(--color-text-light) !important; }
.text-dark { color: var(--color-text-dark) !important; }
.text-accent { color: var(--color-accent) !important; }

.section-title {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-primary); /* Make section titles stand out */
}

.section-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-text-medium);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

/* 4. Layout (Container, Columns, Grid) */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--container-padding);
}

section {
  padding: 4rem 0; /* Natural height based on content */
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* Gap between columns */
}

.column {
  flex: 1;
  min-width: 0; /* Allow flex items to shrink below their content size */
}

.column.is-two-thirds {
  flex: 2; /* Takes up 2/3 if the other column is flex 1 */
}

/* For a common 2-column layout (e.g., text and image) */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem;
    align-items: center; /* Vertically align items in columns */
}

@media (min-width: 769px) {
    .two-column-layout {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Asymmetrical potential */
    }
    .two-column-layout.is-60-40 {
        grid-template-columns: 3fr 2fr;
    }
     .two-column-layout.is-40-60 {
        grid-template-columns: 2fr 3fr;
    }
}


/* 5. Header & Navigation */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
  backdrop-filter: blur(10px); /* Glassmorphism effect */
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  z-index: 1000;
  transition: background-color var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
}

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

.logo {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.logo:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links a.nav-link {
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--color-text-medium);
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  transition: color var(--transition-speed-fast) ease;
}

.nav-links a.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-speed-medium) var(--transition-cubic-smooth);
}

.nav-links a.nav-link:hover,
.nav-links a.nav-link.active {
  color: var(--color-primary);
  text-decoration: none;
}

.nav-links a.nav-link:hover::after,
.nav-links a.nav-link.active::after {
  width: 100%;
}

/* 5.1. Mobile Navigation (Burger Menu) */
.menu-toggle {
  display: none; /* Hidden by default, shown in media query */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001; /* Above nav links when open */
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-primary);
  position: relative;
  transition: transform var(--transition-speed-medium) ease, background-color var(--transition-speed-medium) ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 25px;
  height: 3px;
  background-color: var(--color-primary);
  transition: transform var(--transition-speed-medium) ease, top var(--transition-speed-medium) ease, bottom var(--transition-speed-medium) ease;
}

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

/* Active state for burger menu */
.menu-toggle.is-active .hamburger {
  background-color: transparent; /* Middle line disappears */
}
.menu-toggle.is-active .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger::after {
  bottom: 0;
  transform: rotate(-45deg);
}


/* 6. Footer */
.site-footer {
  background-color: var(--color-primary-dark);
  color: var(--color-text-light);
  padding: 3rem 0;
  font-size: 0.9rem;
}

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

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

.footer-column p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-speed-fast) ease, padding-left var(--transition-speed-fast) ease;
}

.footer-column ul li a:hover {
  color: var(--color-accent);
  padding-left: 5px;
  text-decoration: none;
}

.footer-column .social-links-text li a {
    font-weight: 500;
}
.footer-column .social-links-text li a:hover {
    color: var(--color-accent);
}

/* 7. Buttons & Forms (Global) */
/* 7.1. Buttons */
.button, button, input[type="submit"], input[type="button"] {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--border-radius-medium);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-speed-medium) var(--transition-cubic-smooth);
  box-shadow: var(--shadow-soft);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  text-decoration: none;
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}
.button-primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-light);
}

.button-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.button-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
}

.button-accent {
  background-color: var(--color-accent);
  color: var(--color-primary); /* Dark text on accent for contrast */
}
.button-accent:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-primary);
}

/* 7.2. Forms */
.modern-form .form-group {
  margin-bottom: 1.5rem;
}

.modern-form label {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--color-text-medium);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.modern-form input[type="text"],
.modern-form input[type="email"],
.modern-form input[type="tel"],
.modern-form input[type="password"],
.modern-form input[type="url"],
.modern-form input[type="number"],
.modern-form textarea,
.modern-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--color-text-dark);
  background-color: var(--color-background-section);
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius-small);
  transition: border-color var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
}

.modern-form input[type="text"]:focus,
.modern-form input[type="email"]:focus,
.modern-form input[type="tel"]:focus,
.modern-form input[type="password"]:focus,
.modern-form input[type="url"]:focus,
.modern-form input[type="number"]:focus,
.modern-form textarea:focus,
.modern-form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-rgb, 255, 159, 28), 0.25); /* Accent color RGB for shadow */
}
:root { --color-accent-rgb: 255, 159, 28; } /* Add this for the shadow */


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

.modern-form .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.5rem;
}

@media (min-width: 768px) {
  .modern-form .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .modern-form .form-group.full-width {
    grid-column: 1 / -1;
  }
}

.modern-form .form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.modern-form .form-checkbox input[type="checkbox"] {
  width: auto;
  accent-color: var(--color-accent);
}
.modern-form .form-checkbox label {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--color-text-medium);
}
.modern-form .form-checkbox label a {
    color: var(--color-accent);
}
.modern-form .form-checkbox label a:hover {
    color: var(--color-accent-dark);
}

/* 8. Utility Classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-speed-slow) var(--transition-cubic-smooth), transform var(--transition-speed-slow) var(--transition-cubic-smooth);
}

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

.animate-on-load { /* For initial load animations */
  opacity: 0;
  animation: fadeInSlideUp 0.8s var(--transition-cubic-smooth) forwards;
  animation-delay: 0.3s; /* Stagger effect */
}

@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image-container { /* General purpose image container */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: var(--border-radius-medium); /* if images should be rounded */
}
.image-container img {
    width: 100%;
    height: auto; /* maintain aspect ratio by default */
    object-fit: cover; /* crop to fit if fixed height is set on container */
}


/* 9. Card Styles (Global) */
.card {
  background-color: var(--color-background-section);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: transform var(--transition-speed-medium) var(--transition-cubic-smooth), box-shadow var(--transition-speed-medium) var(--transition-cubic-smooth);
  display: flex;
  flex-direction: column;
  /* align-items: center; /* Centers block content if not full width */
  text-align: center; /* Centers inline/text content */
  height: 100%; /* For consistent height in grids */
}

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

.card .card-image { /* This is the container for the image */
  width: 100%;
  height: 220px; /* Fixed height for consistency in grids */
  overflow: hidden;
  /* margin-bottom: 1.5rem;  /* Remove if padding handles spacing */
  display: flex; /* Center image if it's smaller (though object-fit usually handles this) */
  justify-content: center;
  align-items: center;
}

.card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed-slow) ease;
}

.card:hover .card-image img {
  transform: scale(1.05);
}

.card .card-content {
  padding: 1.5rem;
  flex-grow: 1; /* Allows content to fill space if card heights are equalized */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes buttons to bottom if card is tall */
}
.card .card-content h3 {
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.card .card-content p {
  font-size: 0.95rem;
  color: var(--color-text-medium);
  margin-bottom: 1rem;
  flex-grow: 1; /* Allows text to take available space */
}
.card .card-content .button {
    margin-top: auto; /* Pushes button to the bottom of card-content */
}


/* 10. Section Specific Styles */

/* 10.1. Hero Section */
.hero-section {
  position: relative;
  color: var(--color-text-light);
  padding: 6rem 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(var(--color-primary-rgb), 0.7), rgba(var(--color-secondary-rgb, 36, 123, 160), 0.5));
  /* Fallback: background-color: rgba(0, 0, 0, 0.55); */
  z-index: 1;
}
:root { --color-secondary-rgb: 36, 123, 160; } /* Add this for the gradient */

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  color: var(--color-text-light);
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--color-text-light);
  margin-bottom: 2.5rem;
  font-weight: 400;
  line-height: 1.7;
  opacity: 0.9;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.hero-section .button-accent {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* 10.2. Contact Form Top Section */
.contact-form-top-section {
  background-color: var(--color-background-light);
  padding: 3rem 0;
}
.contact-form-top-section .section-title {
    margin-bottom: 1rem;
}
.contact-form-top-section .section-subtitle {
    margin-bottom: 2rem;
}

/* 10.3. Mission Section */
.mission-section {
    background-color: var(--color-background-section);
}
.mission-section .columns {
    align-items: center; /* Vertically align columns */
}
.mission-section .image-container img {
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-strong);
}
.mission-section p {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* 10.4. Workshops Section (Accordion) */
.workshops-section {
  background-color: var(--color-background-light);
}
.accordion-container {
  max-width: 800px;
  margin: 0 auto;
}
.accordion-item {
  background-color: var(--color-background-section);
  margin-bottom: 1rem;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.accordion-header {
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color var(--transition-speed-fast) ease;
}
.accordion-header:hover {
  background-color: rgba(var(--color-primary-rgb), 0.05);
}
.accordion-icon {
  font-size: 1.5rem;
  font-weight: 700;
  transition: transform var(--transition-speed-medium) var(--transition-cubic-smooth);
  color: var(--color-accent);
}
.accordion-header[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-speed-medium) ease-in-out, padding var(--transition-speed-medium) ease-in-out;
}
.accordion-content p {
  padding: 0 1.5rem 1.25rem 1.5rem;
  font-size: 0.95rem;
  margin:0;
  color: var(--color-text-medium);
}
.accordion-header[aria-expanded="true"] + .accordion-content {
  /* max-height will be set by JS, this is for transition reference */
  /* padding: 0 1.5rem 1.25rem 1.5rem; /* Applied when max-height > 0 */
}


/* 10.5. Events Section */
.events-section {
    background-color: var(--color-background-section);
}
.events-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.event-item .card-content .event-date {
  font-size: 0.9rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
}


/* 10.6. Gallery Section (Swiper Carousel) */
.gallery-section {
  background-color: var(--color-background-light);
}
.content-carousel {
  position: relative;
}
.swiper-container {
  width: 100%;
  padding: 1rem 0 3rem 0; /* Space for pagination */
}
.swiper-slide .card {
  margin: 0 10px; /* Small gap between slides visually if needed */
  box-shadow: var(--shadow-medium);
}
.swiper-slide .card .card-image { height: 280px; }

.swiper-pagination .swiper-pagination-bullet {
  background-color: var(--color-accent);
  opacity: 0.5;
  width: 10px;
  height: 10px;
}
.swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
}
.swiper-button-prev, .swiper-button-next {
  color: var(--color-accent);
  background-color: rgba(var(--color-primary-rgb), 0.5);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  transition: background-color var(--transition-speed-fast) ease;
}
.swiper-button-prev::after, .swiper-button-next::after {
  font-size: 1.5rem;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  background-color: rgba(var(--color-primary-rgb), 0.8);
  color: var(--color-text-light);
}
.gallery-caption {
    text-align: center;
    font-style: italic;
    color: var(--color-text-subtle);
    font-size: 0.9rem;
    margin-top: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 10.7. News Section */
.news-section {
    background-color: var(--color-background-section);
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.news-item .card-content .news-date {
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  margin-bottom: 0.5rem;
}
.read-more {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
}
.read-more::after {
    content: ' →';
    font-family: sans-serif; /* Ensure arrow renders consistently */
    transition: transform var(--transition-speed-fast) ease;
    display: inline-block;
}
.read-more:hover {
    color: var(--color-accent-dark);
    text-decoration: none;
}
.read-more:hover::after {
    transform: translateX(3px);
}


/* 10.8. External Resources Section */
.external-resources-section {
  background-color: var(--color-background-light);
}
.resources-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.resource-item.card .card-content {
  text-align: left; /* Override global card text-align for this section */
}
.resource-item.card .card-content h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.resource-item.card .card-content h4 a {
  color: var(--color-primary);
}
.resource-item.card .card-content h4 a:hover {
  color: var(--color-accent);
}
.resource-item.card .card-content p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* 10.9. Community Section */
.community-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-light);
  padding: 5rem 0;
  text-align: center;
}
.community-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(var(--color-primary-rgb), 0.85), rgba(var(--color-secondary-rgb), 0.75));
  z-index: 1;
}
.community-content {
  position: relative;
  z-index: 2;
}
.community-section .section-title,
.community-section .section-subtitle,
.community-section h3 {
  color: var(--color-text-light);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.community-section ul {
  text-align: left;
  list-style: disc;
  padding-left: 20px;
  margin: 1rem auto 2rem auto;
  max-width: 500px; /* Constrain list width for readability */
}
.community-section ul li {
  margin-bottom: 0.5rem;
  color: rgba(255,255,255,0.9);
}
.testimonial-item {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: rgba(255,255,255,0.1);
  border-radius: var(--border-radius-medium);
  font-style: italic;
}
.testimonial-item p {
    color: var(--color-text-light);
    opacity: 0.95;
    margin-bottom: 0;
}


/* 10.10. Press Section */
.press-section {
    background-color: var(--color-background-section);
}
.press-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.press-logo-item {
  text-align: center;
  max-width: 200px; /* Control width of each logo item */
}
.press-logo-item img {
  max-height: 50px; /* Control logo height */
  width: auto;
  margin: 0 auto 0.75rem auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter var(--transition-speed-medium) ease, opacity var(--transition-speed-medium) ease;
}
.press-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.press-logo-item p {
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  font-style: italic;
  margin-bottom: 0;
}
.press-section > .container > p:last-child { /* The paragraph after logos */
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
}


/* 11. Specific Page Styles */
/* 11.1. Success Page */
body.success-page { /* Add class 'success-page' to body of success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 0; /* Override global body padding-top if header is not on this page */
}
body.success-page .site-header { /* Hide header if not needed */
    /* display: none; */
}
body.success-page .main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-primary); /* Full page background */
    color: var(--color-text-light);
}
.success-message-container {
    background-color: var(--color-background-section);
    color: var(--color-text-dark);
    padding: 2.5rem 3.5rem;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-strong);
    max-width: 600px;
}
.success-message-container h1 {
    color: var(--color-accent);
    font-size: 2.5rem;
}
.success-message-container p {
    font-size: 1.1rem;
    color: var(--color-text-medium);
    margin-bottom: 1.5rem;
}
.success-message-container .button {
    margin-top: 1rem;
}

/* 11.2. Privacy & Terms Pages */
/* Add 'privacy-page' or 'terms-page' to body tag of respective pages */
body.privacy-page .main-content .container,
body.terms-page .main-content .container {
    padding-top: 2rem; /* Space below fixed header for content */
    padding-bottom: 2rem;
}
body.privacy-page .main-content,
body.terms-page .main-content {
    background-color: var(--color-background-section); /* Give these pages a white background */
    min-height: calc(100vh - var(--header-height) - 148px); /* header height and approx footer height */
}
body.privacy-page h1, body.terms-page h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-primary);
}
body.privacy-page h2, body.terms-page h2 {
    color: var(--color-secondary);
    margin-top: 2rem;
}


/* 12. Animations & Transitions (General helpers) */
/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* 13. Media Queries (Responsiveness) */

/* Tablet and larger mobile */
@media (max-width: 1024px) {
    h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); }
    h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
    
    .column.is-two-thirds {
      flex-basis: 100%; /* Stack columns on smaller screens */
    }
    .mission-section .columns {
        flex-direction: column;
    }
    .mission-section .image-container {
        order: -1; /* Image on top on mobile */
        margin-bottom: 2rem;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }
  body {
    padding-top: var(--header-height);
  }

  section {
    padding: 2.5rem 0;
  }

  .section-title { font-size: 1.8rem; margin-bottom: 1rem; }
  .section-subtitle { font-size: 1rem; margin-bottom: 2rem; }

  .hero-section { padding: 4rem 0; }
  .hero-title { font-size: clamp(2rem, 7vw, 2.8rem); }
  .hero-subtitle { font-size: clamp(1rem, 4vw, 1.2rem); }

  .menu-toggle {
    display: block;
  }
  .nav-links {
    position: fixed;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--color-background-section);
    box-shadow: var(--shadow-strong);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--header-height) + 2rem) 2rem 2rem 2rem; /* Space for header + padding */
    gap: 1rem;
    transition: left var(--transition-speed-medium) var(--transition-cubic-smooth);
    z-index: 999; /* Below header toggle but above content */
  }
  .nav-links.is-active {
    left: 0;
  }
  .nav-links a.nav-link {
    font-size: 1.1rem;
    width: 100%;
    padding: 0.75rem 0;
  }
  .nav-links a.nav-link::after {
    bottom: -2px; /* Adjust for better visual */
  }
  .footer-grid {
    grid-template-columns: 1fr; /* Stack footer columns */
    text-align: center;
  }
  .footer-column ul {
      padding-left: 0;
  }
  .footer-column ul li a {
      display: block;
      padding: 0.25rem 0;
  }
  .footer-column .social-links-text {
      display: flex;
      justify-content: center;
      gap: 1rem;
  }

  .modern-form .form-grid {
    grid-template-columns: 1fr; /* Stack form fields */
  }

  .card .card-image {
      height: 180px;
  }

  .two-column-layout,
  .two-column-layout.is-60-40,
  .two-column-layout.is-40-60 {
      grid-template-columns: 1fr; /* Stack all grid columns */
  }
}

/* Cookie Popup Minimal Styles */
/* Styles are in HTML for this component as per prompt */