/*
 * Custom stylesheet for the VoiceWorks website
 *
 * This CSS defines the layout and typographic styles for all pages on
 * the site. It intentionally avoids frameworks so the site can run
 * entirely offline without external dependencies. Colours and
 * spacing values are defined as CSS variables for easy tuning.
 */

/* CSS Variables for theme colours */
:root {
  /* Updated colour palette for a more vibrant, modern feel */
  --primary-color: #6366f1;      /* indigo 500 */
  --secondary-color: #8b5cf6;    /* violet 500 */
  --text-color: #1f2937;         /* slate 800 */
  --text-gray: #4b5563;          /* slate 600 */
  --bg-light: #f5f3ff;           /* lavender */
  --bg-footer: #ede9fe;          /* very light purple */
}

/* Global reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header */
.header {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 10px 20px;
}

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

.header .logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.25rem;
}

.header .logo img {
  height: 40px;
  width: 40px;
  margin-right: 8px;
}

.header .nav a {
  margin-left: 1rem;
  color: #ffffff;
  transition: opacity 0.2s ease;
  font-weight: 500;
}

.header .nav a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Hero Section */
.hero {
  /*
   * The hero section uses a full‑bleed background image overlaid
   * with a dark gradient to improve text contrast. Adjust the
   * path to the background image as needed. All text inside
   * inherits a white colour for readability.
   */
  text-align: center;
  padding: 100px 20px;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../../images/hero-bg.png');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: #f3f4f6;
}

.button-primary {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  display: inline-block;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

/* Ensure the button text remains white even after the link has been visited */
.button-primary:link,
.button-primary:visited {
  color: #ffffff;
}

.button-primary:hover {
  background-color: var(--secondary-color);
}

/* Features Section */
.features {
  background-color: var(--bg-light);
  padding: 60px 20px;
}

.features h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 600;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.feature-grid h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.feature-grid p {
  color: var(--text-gray);
}

/* Page content */
.page-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

.page-content h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.page-content p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: var(--text-gray);
}

.page-content ul {
  margin-left: 1rem;
  margin-bottom: 20px;
  color: var(--text-gray);
}

.page-content ul li {
  margin-bottom: 0.75rem;
  list-style: disc;
}

.page-content a {
  color: var(--primary-color);
  text-decoration: underline;
}

.page-content a:hover {
  color: var(--secondary-color);
}

/* Contact form */
.contact-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 60px 20px;
}

.contact-form h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.contact-form p {
  color: var(--text-gray);
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 1rem;
}

.contact-form button {
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.contact-form button:hover {
  background-color: var(--secondary-color);
}

/*
 * Info cards section
 *
 * This section is used on the home page to display key features
 * of the VoiceWorks initiative in a grid. Each card is elevated
 * with a subtle shadow and coloured heading to draw the eye.
 */
.info-section {
  padding: 60px 20px;
  background-color: var(--bg-light);
}

.info-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 600;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.info-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--primary-color);
}

.info-card p {
  color: var(--text-gray);
}

/*
 * Stats section
 * Displays key numbers about the initiative in a horizontal row on
 * larger screens and stacked on smaller devices.
 */
.stats-section {
  /* Soft gradient for the stats section */
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
  padding: 60px 20px;
  text-align: center;
}

.stats-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: 600;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

.stat-item {
  flex: 1;
  min-width: 200px;
}

.stat-item .number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-item .label {
  font-size: 1rem;
  color: var(--text-gray);
  margin-top: 10px;
}

/*
 * Values section
 * A section for showcasing the core values or pillars of VoiceWorks
 * similar to the creativity/innovation/strategy icons on the
 * reference site.
 */
.values-section {
  background-color: var(--bg-light);
  padding: 60px 20px;
  text-align: center;
}

.values-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: 600;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.value-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.value-item h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--primary-color);
}

.value-item p {
  color: var(--text-gray);
}

/*
 * Animation keyframes and helper classes
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * A gentle rotate‑and‑fade animation used for gallery items. The element
 * starts slightly rotated and transparent, then spins into place while
 * fading in. Coupling rotation and scale creates a playful but polished
 * feel as visitors scroll through the highlights grid.
 */
@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotate(-15deg) scale(0.9);
  }
  50% {
    opacity: 0.6;
    transform: rotate(-5deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* Apply fadeInUp animation. Add this class to any element to animate
 * when it becomes visible. Optional inline style can set
 * animation-delay for staggering effects.
 */
/*
 * Elements with the .animate class will not animate until the
 * .run-animation class is added by JavaScript. This prevents
 * animations from running before the element is visible in the
 * viewport. Use data-delay="0.5s" etc. to stagger animations.
 */
.animate {
  opacity: 0;
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.animate.run-animation {
  animation-play-state: running;
}

/* Override the default fadeIn animation for rotating gallery items.
 * When a .rotate-image element also has the .animate class applied,
 * swap in the rotateIn keyframe instead of the standard fadeInUp.
 */
.rotate-image.animate {
  animation-name: rotateIn;
}

/* Placeholder for images */
.img-placeholder {
  width: 100%;
  height: 250px;
  background-color: #e5e7eb;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.875rem;
  text-align: center;
  padding: 10px;
}

/* Generic section wrapper for consistent padding */
.section {
  padding: 60px 20px;
}

/* Story section styling */
.story-section {
  background-color: #ffffff;
}

.story-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.story-text {
  flex: 1;
  min-width: 280px;
}

.story-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.story-text p {
  color: var(--text-gray);
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Programs section styling */
.programs-section {
  /* Soft gradient for the programs section */
  background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-footer) 100%);
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.program-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.program-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--primary-color);
}

.program-card p {
  color: var(--text-gray);
}

/* Testimonials section styling */
.testimonials-section {
  background-color: #ffffff;
}

.testimonial {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.testimonial p {
  font-style: italic;
  color: var(--text-gray);
  margin-bottom: 15px;
}

.testimonial .author {
  font-weight: 600;
  color: var(--primary-color);
}

.status {
  margin-top: 10px;
  font-size: 0.875rem;
}

/* Footer */
.footer {
  background-color: var(--bg-footer);
  padding: 20px;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
}

/* ------------------------------------------------------------------- */
/* Additional styling for enhanced sections and animations */

/* Floating shapes overlay for hero background */
.floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

/* Base style for shapes */
.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  animation: float 30s linear infinite;
}

/* Individual shape variations */
.shape-one {
  width: 160px;
  height: 160px;
  background: rgba(59, 130, 246, 0.3);
  top: 15%;
  left: -10%;
  animation-duration: 25s;
}

.shape-two {
  width: 120px;
  height: 120px;
  background: rgba(99, 102, 241, 0.35);
  top: 50%;
  right: -15%;
  animation-duration: 30s;
  animation-delay: 5s;
}

.shape-three {
  width: 220px;
  height: 220px;
  background: rgba(37, 99, 235, 0.25);
  bottom: -25%;
  left: 40%;
  animation-duration: 35s;
  animation-delay: 10s;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(45deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Mission section layout */
.mission-section {
  /* Soft gradient background for the mission section */
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
}

.mission-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.mission-text {
  flex: 1;
  min-width: 280px;
}

.mission-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 600;
  color: var(--primary-color);
}

.mission-text p {
  color: var(--text-gray);
  margin-bottom: 15px;
  line-height: 1.6;
}

.mission-image {
  flex: 1;
  min-width: 280px;
  display: flex;
  justify-content: center;
}

/* Subtitle styling for section descriptions */
.subtitle {
  text-align: center;
  font-size: 1rem;
  color: var(--text-gray);
  max-width: 600px;
  margin: 0 auto 30px;
}

/* Testimonials slider */
.testimonials-section {
  background-color: var(--bg-light);
  text-align: center;
}

.testimonials-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.testimonial-slide {
  display: none;
  padding: 40px 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.testimonial-slide p {
  font-style: italic;
  margin-bottom: 15px;
  color: var(--text-gray);
}

.testimonial-slide .author {
  font-weight: 600;
  color: var(--primary-color);
}

/* Timeline section */
.timeline-section {
  /* Soft gradient for the timeline section */
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
  text-align: center;
}

/* Apply coordinated gradients to key sections to create a cohesive
   colour story across the page. Without these gradients, the site
   can feel disjointed and flat. The gradient transitions gently
   from the light lavender tone into pure white, echoing the hero
   and mission backgrounds. */
.stats-section,
.values-section,
.testimonials-section,
.cta-section {
  background: linear-gradient(180deg, var(--bg-light) 0%, #ffffff 100%);
}

.timeline {
  position: relative;
  margin: 40px auto;
  padding-left: 20px;
  border-left: 2px solid #d1d5db;
  max-width: 800px;
}

.timeline-item {
  position: relative;
  padding: 20px 20px 20px 40px;
  margin-bottom: 40px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.timeline-item h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--primary-color);
}

.timeline-item p {
  color: var(--text-gray);
  margin-bottom: 15px;
}

.timeline-item .img-placeholder {
  margin-top: 10px;
}

/* Add decorative dot for each timeline item */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 25px;
  width: 12px;
  height: 12px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

/* Call to action section */
.cta-section {
  background-color: var(--bg-light);
  text-align: center;
}

.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.cta-section p {
  color: var(--text-gray);
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------- */
/* Custom image and gallery styling
 *
 * The original site used simple dashed boxes as placeholders for
 * photography. To make the website feel more vibrant and polished,
 * these placeholders have been replaced with real images supplied by
 * the client. The rules below ensure that photos scale gracefully,
 * maintain their aspect ratio and have subtle shadows and rounded
 * corners for a modern aesthetic.
 */

/* Generic responsive image used in mission, program and timeline sections */
.mission-image img,
.program-card img,
.timeline-item img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Adjust heights on specific sections to maintain consistent layouts */
.program-card img {
  height: 180px;
  margin-bottom: 15px;
  /* Focus on the top of each image to avoid cropping important content (e.g. video overlays) */
  object-position: center top;
}

.mission-image img {
  max-width: 500px;
  height: auto;
  margin: 0 auto;
}

.timeline-item img {
  width: 100%;
  height: auto;
  margin-top: 10px;
  /* Ensure full photos are visible instead of being cropped. We limit the
     height to a reasonable maximum so long, vertical shots remain balanced
     with the surrounding text. Using object-fit: contain preserves the
     entire image while adding subtle letterboxing when needed. */
  max-height: 280px;
  object-fit: contain;
  object-position: center;
}

/* Gallery Section
 * A responsive, masonry‑style gallery showcasing highlights from
 * VoiceWorks events. Each item scales up slightly on hover to draw
 * the viewer in.
 */
/* Gallery Section
 * A responsive, masonry‑style gallery showcasing highlights from
 * VoiceWorks events. The section uses a subtle gradient to add
 * depth and visual interest instead of a flat colour.
 */
.gallery-section {
  background: linear-gradient(180deg, var(--bg-light) 0%, #ffffff 100%);
  text-align: center;
}

.gallery-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: 600;
  color: var(--primary-color);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  /* Set a consistent height for gallery images so the grid remains
     structured. Photos will be cropped, but this ensures that empty
     spaces do not appear if the image hasn’t loaded yet. */
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* About page image
 * A featured photo on the about page helps humanise the organisation.
 */
.about-image {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 30px auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------------- */
/* Cinematic rolling gallery styles
 * A horizontal strip of photos that scrolls endlessly across the top of
 * the page. The track is duplicated to create a seamless loop. */
.rolling-gallery {
  overflow: hidden;
  width: 100%;
  /* Subtle gradient to separate the strip from the hero below */
  background: linear-gradient(90deg, #f3e8ff 0%, #e9d5ff 100%);
  padding: 20px 0;
}

.rolling-track {
  display: flex;
  width: max-content;
  /* Shorter duration for a livelier marquee effect */
  animation: scroll-horizontal 30s linear infinite;
}

.rolling-track img {
  height: 220px;
  flex-shrink: 0;
  margin-right: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Previously hid a specific image in the rolling gallery. Removed now that the unwanted image has been deleted. */

@keyframes scroll-horizontal {
  from {
    transform: translateX(0);
  }
  to {
    /* Translate half the width of the duplicated track to achieve a loop */
    transform: translateX(-50%);
  }
}

/* Decorative underline for section headings */
.section h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  border-radius: 2px;
}

/* Card hover effects for programs and timeline items */
.program-card,
.timeline-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover,
.timeline-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Navigation link underline on hover */
.header .nav a {
  position: relative;
  padding-bottom: 2px;
}

.header .nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  transition: width 0.3s ease;
}

.header .nav a:hover::after {
  width: 100%;
}