/* style.css */

/* -------------------------------------------------------------------
TABLE OF CONTENTS
----------------------------------------------------------------------
1.  CSS Variables
2.  Reset & Base Styles
3.  Typography
4.  Layout (Container, Grids)
5.  Utility Classes
6.  Neumorphic System & UI Elements
7.  Buttons (Global)
8.  Header & Navigation
9.  Hero Section
10. General Section Styling
11. Card Styles (Services, Resources, etc.)
12. About Us Section
13. Clientele Section (Slider Placeholders)
14. External Resources Section
15. Community Section
16. FAQ Section (Accordion)
17. Contact Preview / CTA Section
18. Footer
19. Specific Page Styles (Privacy, Terms, Success)
20. Contact Form Styles (For contacts.html, reusable)
21. Animations & Transitions (Base for AOS and interactions)
22. Responsive Design (Media Queries)
------------------------------------------------------------------- */

/* 1. CSS Variables
------------------------------------------------------------------- */
:root {
  /* Fonts */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Work Sans', sans-serif;

  /* Base Colors */
  --color-page-background: #F4F7F9;
  --color-neu-bg: #e0e5ec;
  --color-text-primary: #34495e;
  --color-text-secondary: #7f8c8d;
  --color-headings: #2c3e50;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Accent Colors (Pastel & Eco) */
  --color-accent-primary: #76c7c0;      /* Soft Teal */
  --color-accent-primary-dark: #62a89f;
  --color-accent-secondary: #f7cac9;    /* Soft Pink/Peach */
  --color-accent-secondary-dark: #e0b0af;
  --color-link: var(--color-accent-primary);
  --color-link-hover: var(--color-accent-primary-dark);

  /* Neumorphic Shadow Colors (based on --color-neu-bg: #e0e5ec) */
  --neu-light-shadow-outer: #ffffff; /* Brighter highlight */
  --neu-dark-shadow-outer: #a3b1c6;  /* Darker shadow */
  --neu-light-shadow-inner: #a3b1c6; /* For concave, represents the "darker" part */
  --neu-dark-shadow-inner: #ffffff;   /* For concave, represents the "lighter" highlight part */

  /* Standard Box Shadow for contrast on non-neu elements */
  --box-shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.08);
  --box-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);

  /* UI Elements */
  --border-radius-sm: 8px;
  --border-radius-md: 15px;
  --border-radius-lg: 25px;

  /* 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 */

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

  /* Header Height */
  --header-height: 90px;
  --header-height-scrolled: 70px;
}

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

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

body {
  font-family: var(--font-secondary);
  color: var(--color-text-primary);
  background-color: var(--color-page-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

input, button, textarea, select {
  font: inherit;
}

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

/* 3. Typography
------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .poppins-font {
  font-family: var(--font-primary);
  color: var(--color-headings);
  font-weight: 600;
  line-height: 1.3;
}

.work-sans-font {
  font-family: var(--font-secondary);
}

h1, .hero-title {
  font-size: clamp(2.5rem, 5vw, 3.8rem); /* Responsive font size */
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

h2, .section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: var(--spacing-md);
  text-align: center;
  font-weight: 700;
  color: var(--color-headings); /* Ensure high contrast */
}

h3, .card-title, .resource-title {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  margin-bottom: var(--spacing-sm);
}

h4, .footer-title {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  margin-bottom: var(--spacing-sm);
}

p, li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.lead-text {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

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

/* 4. Layout (Container, Grids)
------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1180px; /* Slightly wider for modern layouts */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.grid-2-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  align-items: center; /* Default alignment */
}
.grid-3-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}
.grid-4-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* 5. Utility Classes
------------------------------------------------------------------- */
.text-center { text-align: center; }
.img-responsive { width: 100%; height: auto; }
.parallax-background {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.hidden { display: none; }

/* 6. Neumorphic System & UI Elements
------------------------------------------------------------------- */
.neu-element {
  background-color: var(--color-neu-bg);
  border-radius: var(--border-radius-md);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}

.neu-element--convex {
  box-shadow: 6px 6px 12px var(--neu-dark-shadow-outer), 
              -6px -6px 12px var(--neu-light-shadow-outer);
}
.neu-element--convex:hover {
  transform: translateY(-3px);
  box-shadow: 8px 8px 16px var(--neu-dark-shadow-outer), 
              -8px -8px 16px var(--neu-light-shadow-outer);
}

.neu-element--concave {
  box-shadow: inset 4px 4px 8px var(--neu-light-shadow-inner), 
              inset -4px -4px 8px var(--neu-dark-shadow-inner);
}

/* 7. Buttons (Global)
------------------------------------------------------------------- */
.btn, button, input[type="submit"], input[type="button"] {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  padding: 12px 28px;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-smooth);
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--color-neu-bg);
  color: var(--color-accent-primary);
  box-shadow: 5px 5px 10px var(--neu-dark-shadow-outer), 
              -5px -5px 10px var(--neu-light-shadow-outer);
}
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  box-shadow: inset 2px 2px 5px var(--neu-light-shadow-inner), 
              inset -2px -2px 5px var(--neu-dark-shadow-inner);
  color: var(--color-accent-primary-dark);
  transform: translateY(-2px); /* Subtle lift */
}
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
  box-shadow: inset 5px 5px 10px var(--neu-light-shadow-inner), 
              inset -5px -5px 10px var(--neu-dark-shadow-inner);
  transform: translateY(0px); /* Press down */
}

.btn-primary { /* Colored button */
  background-color: var(--color-accent-primary);
  color: var(--color-white);
  /* For colored buttons, standard shadow often looks better than pure neumorphic */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1), 
              3px 3px 6px var(--color-accent-primary-dark); /* Subtle colored shadow */
}
.btn-primary:hover {
  background-color: var(--color-accent-primary-dark);
  color: var(--color-white);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15),
              inset 2px 2px 4px rgba(0,0,0,0.2); /* Subtle inset */
}

.btn-hero {
  font-size: 1.1rem;
  padding: 15px 35px;
  background-color: var(--color-accent-primary);
  color: var(--color-white);
  /* On dark hero bg, standard shadow is better */
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}
.btn-hero:hover {
  background-color: var(--color-accent-primary-dark);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  color: var(--color-white); /* Ensure color remains white on hover */
}
.btn-lg {
  padding: 16px 38px;
  font-size: 1.15rem;
}

/* 8. Header & Navigation
------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-neu-bg);
  padding: 0 var(--spacing-md);
  height: var(--header-height);
  transition: height var(--transition-smooth), box-shadow var(--transition-smooth);
}
.site-header.scrolled {
  height: var(--header-height-scrolled);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); /* Softer standard shadow on scroll */
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.logo img {
  max-height: calc(var(--header-height) - 30px);
  width: auto;
  transition: max-height var(--transition-smooth);
}
.site-header.scrolled .logo img {
  max-height: calc(var(--header-height-scrolled) - 25px);
}

.main-navigation .nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
}
.main-navigation .nav-menu li {
  margin-left: var(--spacing-md);
}
.main-navigation .nav-link {
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  position: relative; /* For underline */
}
.main-navigation .nav-link:hover,
.main-navigation .nav-link.active {
  color: var(--color-accent-primary);
}
.main-navigation .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 4px;
    right: 50%;
    transform: translateX(50%);
    background: var(--color-accent-primary);
    transition: width var(--transition-smooth);
}
.main-navigation .nav-link:hover::after,
.main-navigation .nav-link.active::after {
    width: calc(100% - 16px); /* Adjust width to not be full width of padding */
}
.main-navigation .nav-link.btn { /* Contact button in nav */
  padding: 10px 20px; /* Overrides global btn padding if needed */
  font-size: 0.9rem; /* Slightly smaller for nav */
}
.main-navigation .nav-link.btn::after { display: none; } /* No underline for button */

.nav-toggle {
  display: none; /* Hidden on desktop */
  background-color: transparent; /* Changed to transparent for better icon visibility */
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  /* Remove neumorphic from toggle button itself, icon provides visuals */
}
.hamburger-icon {
  display: block;
  position: relative;
  width: 26px; /* Slightly larger */
  height: 3px;
  background-color: var(--color-headings);
  transition: all var(--transition-fast);
  border-radius: 2px;
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-headings);
  transition: all var(--transition-fast);
  border-radius: 2px;
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { bottom: -8px; }

.nav-toggle[aria-expanded="true"] .hamburger-icon { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger-icon::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-icon::after { transform: translateY(-8px) rotate(-45deg); }


/* 9. Hero Section
------------------------------------------------------------------- */
.hero-section {
  min-height: 85vh; /* Natural height based on content or min-height */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  padding: var(--spacing-xxl) var(--spacing-md);
  position: relative;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)); /* Darker overlay */
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.hero-title {
  color: var(--color-white); /* Ensured by HTML, reinforced here */
  text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /* Stronger shadow for readability */
}
.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  margin-bottom: var(--spacing-lg);
  color: var(--color-white); /* Ensured by HTML, reinforced here */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  opacity: 0.9;
}

/* 10. General Section Styling
------------------------------------------------------------------- */
.section-padding {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}
.section-padding-colored {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
  background-color: var(--color-neu-bg); /* Use neumorphic base for these sections */
}

/* 11. Card Styles (Services, Resources, etc.)
------------------------------------------------------------------- */
.card {
  /* .neu-element and .neu-element--convex are applied in HTML */
  overflow: hidden; /* Ensures border-radius on image container */
  display: flex;
  flex-direction: column;
  height: 100%; /* For equal height cards in a grid row */
}
.card-image {
  width: 100%;
  height: 220px; /* Fixed height for consistency */
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}
.card:hover .card-image img {
  transform: scale(1.05);
}
.card-content {
  padding: var(--spacing-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.card-content .card-title {
  text-align: center;
  margin-bottom: var(--spacing-sm);
  color: var(--color-headings);
}
.card-content .card-text {
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  flex-grow: 1; /* Pushes button to bottom if exists */
  margin-bottom: var(--spacing-sm);
}
.read-more-link {
  display: inline-block;
  font-family: var(--font-primary);
  color: var(--color-accent-primary);
  text-decoration: none;
  font-weight: 600;
  margin-top: auto; /* Pushes to bottom of card-content */
  align-self: flex-start; /* Aligns to left if text-align is center on parent */
  transition: color var(--transition-fast);
}
.read-more-link:hover {
  color: var(--color-accent-primary-dark);
  text-decoration: underline;
}
.read-more-link::after {
  content: ' \2192';
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.2s ease-out;
}
.read-more-link:hover::after {
  transform: translateX(3px);
}

/* Resource Cards */
.resource-card {
  padding: var(--spacing-md);
  /* .neu-element and .neu-element--convex are applied in HTML */
}
.resource-card .resource-title a {
  color: var(--color-headings);
  text-decoration: none;
}
.resource-card .resource-title a:hover {
  color: var(--color-accent-primary);
}
.resource-card .resource-description {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* 12. About Us Section
------------------------------------------------------------------- */
.about-image-container .image-wrapper {
  /* .neu-element and .neu-element--convex are applied in HTML */
  padding: 10px; /* Creates a neumorphic frame */
  border-radius: var(--border-radius-lg); /* Match inner image or slightly larger */
}
.about-image-container .image-wrapper img {
  border-radius: calc(var(--border-radius-lg) - 10px); /* Inner image radius */
}

/* 13. Clientele Section (Slider Placeholders)
------------------------------------------------------------------- */
.clientele-slider-container {
  /* Basic styling for the container, JS will handle slider functionality */
  overflow: hidden; /* If using a simple CSS scroll */
}
.custom-slider {
  display: flex; /* For horizontal layout of slides */
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-sm); /* Space for potential scrollbar or just padding */
  /* For simple scroll: overflow-x: auto; */
}
.custom-slider .slide {
  flex: 0 0 auto; /* Prevent shrinking/growing */
  width: 180px; /* Example width */
  text-align: center;
  padding: var(--spacing-sm);
  background-color: var(--color-neu-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 3px 3px 6px var(--neu-dark-shadow-outer), 
              -3px -3px 6px var(--neu-light-shadow-outer);
}
.custom-slider .slide img {
  max-height: 60px; /* Adjust based on logo sizes */
  width: auto;
  margin: 0 auto var(--spacing-sm) auto;
  filter: grayscale(80%); /* Desaturate logos for eco-minimalism */
  opacity: 0.7;
  transition: filter var(--transition-smooth), opacity var(--transition-smooth);
}
.custom-slider .slide:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.custom-slider .slide p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* 14. External Resources Section - covered by .resource-card */

/* 15. Community Section
------------------------------------------------------------------- */
.community-image-container .image-wrapper {
  /* .neu-element and .neu-element--convex are applied in HTML */
  padding: 10px;
  border-radius: var(--border-radius-lg);
}
.community-image-container .image-wrapper img {
  border-radius: calc(var(--border-radius-lg) - 10px);
}

/* 16. FAQ Section (Accordion)
------------------------------------------------------------------- */
.faq-accordion .accordion-item {
  margin-bottom: var(--spacing-md); /* Increased spacing */
  /* .neu-element --convex by default from HTML */
}
.faq-accordion .accordion-header {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: var(--spacing-md);
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-headings);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color var(--transition-fast);
  border-radius: var(--border-radius-md); /* Match item for seamless feel */
}
.faq-accordion .accordion-header:hover {
  /* No visual change on hover for header, interaction is on icon/expansion */
}
.faq-accordion .accordion-icon {
  width: 10px; /* Smaller icon */
  height: 10px;
  border-right: 2.5px solid var(--color-accent-primary);
  border-bottom: 2.5px solid var(--color-accent-primary);
  transform: rotate(45deg);
  transition: transform var(--transition-smooth);
  margin-left: var(--spacing-sm);
}
.faq-accordion .accordion-header[aria-expanded="true"] .accordion-icon {
  transform: rotate(-135deg);
  margin-top: -3px; /* Fine-tune position */
}
.faq-accordion .accordion-content {
  padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
  font-family: var(--font-secondary);
  color: var(--color-text-primary);
  line-height: 1.7;
  font-size: 0.95rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), 
              padding 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* JS adds .active class or directly sets max-height for expanded content */
.faq-accordion .accordion-item.active .accordion-content {
    /* max-height will be set by JS */
    padding-top: var(--spacing-sm); /* Add padding when expanded */
}


/* 17. Contact Preview / CTA Section
------------------------------------------------------------------- */
.contact-preview-section, #contact-preview { /* From HTML */
  color: var(--color-white);
  padding: var(--spacing-xxl) var(--spacing-md);
  position: relative; /* For overlay */
}
.contact-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75));
  z-index: 1;
}
.contact-preview-content {
  position: relative;
  z-index: 2;
  max-width: 700px; /* Control content width */
  margin: 0 auto; /* Center content */
}
.contact-preview-content .section-title,
.contact-preview-content p {
  color: var(--color-white); /* Ensure text is white */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* 18. Footer
------------------------------------------------------------------- */
.site-footer {
  /* .section-padding-colored is applied in HTML */
  color: var(--color-text-secondary); /* Base text color for footer */
}
.site-footer .footer-title {
  color: var(--color-headings); /* Darker titles in footer */
  margin-bottom: var(--spacing-md);
}
.site-footer p {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}
.footer-links li {
  margin-bottom: var(--spacing-xs);
}
.footer-links a {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.footer-links a:hover {
  color: var(--color-accent-primary);
  text-decoration: underline;
}
.social-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}
.footer-social-link {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}
.footer-social-link:hover {
  color: var(--color-accent-primary);
  text-decoration: underline;
}
.footer-bottom {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(44, 62, 80, 0.1); /* Subtle separator */
}
.footer-bottom p {
  font-size: 0.85rem;
  margin-bottom: 0;
}
#cookie-settings-link {
    cursor: pointer;
}

/* 19. Specific Page Styles (Privacy, Terms, Success)
------------------------------------------------------------------- */
.privacy-page-container, .terms-page-container, .success-page-container, .contact-page-container {
  padding-top: calc(var(--header-height) + var(--spacing-lg));
  padding-bottom: var(--spacing-xl);
  background-color: var(--color-page-background); /* Ensure consistent bg */
}
.privacy-page-container .container, 
.terms-page-container .container,
.contact-page-container .container { /* For content pages */
  max-width: 900px;
  background-color: var(--color-neu-bg); /* Content on a neumorphic card */
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Soft shadow for content pages */
}
.legal-content h1, .contact-page-container h1, .success-page-container h1 { /* Page title */
    margin-bottom: var(--spacing-lg);
    text-align: center;
}
.legal-content h2, .legal-content h3 {
    color: var(--color-headings);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}
.legal-content p, .legal-content li {
    color: var(--color-text-primary);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}
.legal-content ul, .legal-content ol {
    margin-left: var(--spacing-md);
    padding-left: var(--spacing-sm);
}

.success-page-container { /* Specific for success.html */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.success-content {
  background-color: var(--color-neu-bg);
  padding: var(--spacing-xl) var(--spacing-xxl);
  border-radius: var(--border-radius-lg);
  box-shadow: 8px 8px 15px var(--neu-dark-shadow-outer), 
              -8px -8px 15px var(--neu-light-shadow-outer);
  max-width: 600px;
}
.success-content h1 {
  color: var(--color-accent-primary);
  margin-bottom: var(--spacing-md);
}
.success-content p {
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

/* 20. Contact Form Styles (For contacts.html, reusable)
------------------------------------------------------------------- */
.contact-form .form-group {
  margin-bottom: var(--spacing-lg); /* More space between fields */
}
.contact-form label {
  display: block;
  font-family: var(--font-secondary);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  font-size: 0.9rem;
}
.contact-form .form-control {
  width: 100%;
  padding: 15px 20px; /* Generous padding */
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: var(--color-neu-bg);
  border: none; /* Neumorphic doesn't use border */
  border-radius: var(--border-radius-md);
  box-shadow: inset 4px 4px 7px var(--neu-light-shadow-inner), 
              inset -4px -4px 7px var(--neu-dark-shadow-inner);
  transition: all var(--transition-smooth);
}
.contact-form .form-control::placeholder {
  color: #9ab; /* Softer placeholder */
}
.contact-form .form-control:focus {
  outline: none;
  background-color: #e8edf2; /* Slightly different shade on focus */
  /* Keep inset shadow, add outer ring for focus */
  box-shadow: inset 4px 4px 7px var(--neu-light-shadow-inner), 
              inset -4px -4px 7px var(--neu-dark-shadow-inner),
              0 0 0 2px var(--color-accent-primary-dark);
}
.contact-form textarea.form-control {
  min-height: 150px;
  resize: vertical;
}
.contact-form .btn-submit { /* Submit button specific for form, uses .btn-primary */
  width: 100%;
  margin-top: var(--spacing-sm);
  padding: 15px 20px; /* Ensure good size */
}

/* Contact page layout elements */
.contact-info-map-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}
.contact-info h3 {
    margin-bottom: var(--spacing-md);
}
.contact-info p, .contact-info a {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    display: block; /* For better spacing */
}
.contact-info i { /* For icons if used */
    margin-right: var(--spacing-sm);
    color: var(--color-accent-primary);
}
.map-container iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


/* 21. Animations & Transitions (Base for AOS and interactions)
------------------------------------------------------------------- */
/* AOS will handle data-aos animations. Micro-interactions are on specific elements. */
body.barba- τόσο-active {
  /* Example Barba.js transition style */
  transition: opacity 0.5s;
  opacity: 0;
}

/* 22. Responsive Design (Media Queries)
------------------------------------------------------------------- */
@media (max-width: 991px) { /* Tablets and below */
  .main-navigation .nav-menu {
    display: none; /* Hide for hamburger */
    position: absolute;
    top: var(--header-height); /* Position below header */
    left: 0;
    width: 100%;
    background-color: var(--color-neu-bg);
    flex-direction: column;
    padding: var(--spacing-md) 0;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    /* For active state, JS will toggle a class */
  }
  .main-navigation .nav-menu.is-active {
    display: flex;
  }
  .main-navigation .nav-menu li {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .main-navigation .nav-menu .nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(44, 62, 80, 0.05);
  }
  .main-navigation .nav-menu .nav-link.btn {
    margin: var(--spacing-sm) auto; /* Center button */
    width: calc(100% - var(--spacing-xl)*2); /* Full width with padding */
    display: block;
  }
  .nav-toggle {
    display: flex; /* Show hamburger */
  }
  .site-header.scrolled .main-navigation .nav-menu {
    top: var(--header-height-scrolled);
  }
}

@media (min-width: 768px) { /* Tablet */
  .grid-2-cols { grid-template-columns: repeat(2, 1fr); }
  .grid-4-cols { grid-template-columns: repeat(2, 1fr); }
  .about-content.grid-2-cols { grid-template-columns: 3fr 2fr; } /* Text 3/5, Image 2/5 */
  .community-content.grid-2-cols { grid-template-columns: 3fr 2fr; }
  .contact-info-map-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) { /* Desktop */
  .grid-3-cols { grid-template-columns: repeat(3, 1fr); }
  .grid-4-cols { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) { /* Mobile specific adjustments */
  h1, .hero-title { font-size: 2.2rem; }
  h2, .section-title { font-size: 1.8rem; }
  .section-padding, .section-padding-colored {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
  .hero-section { min-height: 70vh; }
  .about-content.grid-2-cols, .community-content.grid-2-cols {
    grid-template-columns: 1fr; /* Stack on mobile */
  }
  .about-text, .community-text { order: 2; } /* Text below image on mobile if desired */
  .about-image-container, .community-image-container { order: 1; }
  .footer-content.grid-4-cols {
      grid-template-columns: 1fr; /* Stack footer columns */
      text-align: center;
  }
  .footer-content .footer-col {
      margin-bottom: var(--spacing-lg);
  }
  .footer-links, .social-links {
      align-items: center;
  }
  .contact-form { padding: 0; } /* Remove extra padding on form for mobile */
  .contact-info-map-grid {
      grid-template-columns: 1fr; /* Stack contact info and map */
  }
  .map-container iframe { height: 300px; }
}

/* Cookie Popup (already has inline styles, this is just a placeholder if needed) */
/* #cookie-popup styles are primarily in HTML */
#accept-cookies-btn:hover {
  background-color: var(--color-accent-primary-dark) !important; /* Ensure hover for inline styled button */
}