/*
  Base variables define the colour palette used across the site.  Adjusting
  these values allows you to tweak the appearance in one place without
  rewriting individual rules.  The palette draws inspiration from both
  UCLA’s official colours and the crisp, minimalist aesthetic found on
  high‑end automotive sites such as Tesla’s.  Dark blues and light greys
  provide contrast while accent tones enliven call‑to‑action buttons.
*/
:root {
  /* Light space inspired palette.  A soft off‑white canvas with deep blue
     accents evokes a clean, airy feeling while retaining the club’s
     professional identity. */
  --primary: #f5faff;        /* pale blue‑white for primary backgrounds */
  --secondary: #005587;      /* deep UCLA blue for buttons and highlights */
  --accent: #2774ae;         /* lighter blue for hover states and bullets */
  --light: #ffffff;          /* pure white for light sections */
  --dark: #003f6b;           /* deep blue for the footer to maintain contrast while feeling lighter */
  --text-dark: #0a192f;      /* dark grey for body text on light backgrounds */
  --text-light: #f5f5f5;     /* off‑white for text on dark backgrounds */
}

/* Global resets.  Setting box‑sizing to border‑box ensures paddings
   and borders are included in element dimensions. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--light);
  scroll-behavior: smooth;
}

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

img {
  display: block;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation bar styling.  The bar remains fixed at the top of the page.
   A subtle backdrop blur gives it a frosted glass effect.  When the user
   scrolls away from the hero, the script adds the .scrolled class to
   strengthen the background and drop a shadow. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* Light frosted navigation bar. */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  font-size: 1.25rem;
  font-weight: 600;
  /* Ensure the logo is clearly visible on the light navigation bar. */
  color: var(--secondary);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: var(--text-dark);
  font-weight: 500;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: width 0.3s ease;
}

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

/* Hero section.  A full‑viewport hero with a dark overlay for contrast.
   The copy is centered both vertically and horizontally.  Buttons are
   styled as pills and change colour on hover. */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  /* Use the AI‑generated pastel cosmic background. */
  background-image: url('hero_ai.png');
  background-size: cover;
  background-position: center;
  display: flex;
  /* Anchor the content to the top left to give a modern layout reminiscent of
     premium tech sites. */
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  color: var(--text-dark);
  padding: 0 1rem;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Light overlay for the pale starry hero background. */
  /* Darken the hero image slightly with a semi‑transparent blue overlay. This adds
     contrast and makes the headline pop while preserving the space theme. */
  background: rgba(0, 20, 40, 0.3);
}

.hero-content {
  position: relative;
  z-index: 1;
  /* Increase the max width and adjust padding so the hero text sits towards
     the upper left of the viewport. */
  max-width: 60%;
  padding-top: 25vh;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(30px);
  animation: slideIn 1.2s ease forwards;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  /* Use a dark colour for the subtitle on the light hero. */
  color: var(--text-dark);
  opacity: 0;
  transform: translateY(20px);
  animation: slideIn 1.4s ease forwards;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-primary {
  background: var(--secondary);
  color: var(--text-light);
}

.btn-primary:hover {
  background: var(--accent);
}

.btn-secondary {
  background: transparent;
  color: var(--secondary);
  border: 2px solid var(--secondary);
  margin-left: 1rem;
}

.btn-secondary:hover {
  background: var(--secondary);
  color: var(--text-light);
}

.btn-light {
  background: var(--secondary);
  color: var(--text-light);
}

.btn-light:hover {
  background: var(--accent);
}

/* Section titles and subtitles. */
.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  /* Headings in light sections should use the deep UCLA blue to stand out. */
  color: var(--secondary);
}

.section-title.light {
  /* Even when marked .light, use the secondary colour on light backgrounds. */
  color: var(--secondary);
}

.section-subtitle {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #6b7280;
}

.section-subtitle.light {
  /* Use a medium grey for subtitles on light backgrounds. */
  color: #6b7280;
}

/* About section. */
.about {
  padding: 6rem 0;
  background-color: var(--light);
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
}

.about-text {
  flex: 1 1 400px;
}

.about-text h3 {
  margin-top: 1.25rem;
  color: var(--secondary);
  position: relative;
  padding-left: 1.25rem;
}

/* Blue dot preceding each About section subheading to enhance hierarchy. */
.about-text h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}

.about-text p {
  margin-top: 0.5rem;
  color: var(--text-dark);
}

.values-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.values-list li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-dark);
}

/* Small icons used in the About section headings. */
.about-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  color: var(--secondary);
}

.values-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 8px;
  height: 8px;
  background: var(--secondary);
  border-radius: 50%;
}

.about-image {
  flex: 1 1 300px;
  text-align: center;
}

.about-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Services section. */
.services {
  padding: 6rem 0;
  background-color: var(--light);
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.service-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  flex: 1 1 260px;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

/*
  Emoji icons used throughout the site.  The size and colour are tuned to
  harmonise with headings and call‑to‑action elements.  Because emojis are
  treated like text, they scale cleanly and are widely supported without
  requiring external image assets. */
.icon-emoji {
  display: inline-block;
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--secondary);
}

.service-card h3 {
  margin-bottom: 0.5rem;
  /* Service card titles use the deep blue for better contrast on white cards. */
  color: var(--secondary);
  font-size: 1.25rem;
}

.service-card p {
  color: #4b5563;
  font-size: 0.95rem;
}

/* Join section.  A dark theme to emphasise the call‑to‑action.  The
   subtle pattern is overlaid via a ::before pseudo element. */
.join {
  padding: 6rem 0;
  /* Use the pale primary colour for the background of the Join section so it
     harmonises with the overall light theme. Switch text to dark for
     contrast. */
  background: var(--primary);
  color: var(--text-dark);
  position: relative;
}

.join::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Use the light starry hero background as a subtle pattern in the join section. */
  /* Reuse the generated light starry background for the subtle pattern. */
  background-image: url('hero_light_generated.png');
  background-size: cover;
  background-position: center;
  /* Increase the opacity and apply a brightness filter for a lighter, more airy feel. */
  opacity: 0.15;
  filter: brightness(1.2);
  z-index: 0;
}

.join-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.join-text {
  flex: 1 1 350px;
}

.join-benefits {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
}

.join-benefits li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.join-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}

/* Join section image. This flexible container holds an illustrative image on the right side of the join section.
   It balances the text and enhances the visual appeal without overwhelming the viewer. */
.join-image {
  flex: 1 1 300px;
  text-align: center;
}

.join-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.join-form {
  flex: 1 1 300px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 2rem;
  min-height: 300px;
}

.form-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 1rem;
  font-size: 0.95rem;
}

/* Contact section. */
.contact {
  padding: 6rem 0;
  background-color: var(--light);
}

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.contact-item {
  flex: 1 1 250px;
  max-width: 350px;
  text-align: center;
}


.contact-item h3 {
  margin-bottom: 0.25rem;
  color: var(--secondary);
  font-size: 1.25rem;
}

.contact-item p {
  color: var(--text-dark);
  font-size: 0.95rem;
}

.social-link {
  color: var(--secondary);
}

.social-link:hover {
  text-decoration: underline;
}

/* Footer.  A dark backdrop ties into the join section and anchors the page. */
.footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.8);
  padding: 2rem 0;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

.footer-right {
  display: flex;
  gap: 1rem;
}

.footer-right a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.footer-right a:hover {
  color: var(--accent);
}

/* Fade‑in animation for sections.  Each section starts slightly lowered and
   transparent.  When the IntersectionObserver in script.js adds the
   .in-view class, opacity and transform animate to reveal the section. */
section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

section.in-view {
  opacity: 1;
  transform: none;
}

/* Responsive adjustments.  On narrower screens, stack columns and reduce
   horizontal spacing. */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .about-content,
  .join-container,
  .services-grid,
  .contact-grid {
    flex-direction: column;
    gap: 2rem;
  }
  .service-card {
    max-width: none;
    width: 100%;
  }
  .join-form,
  .join-text,
  .about-text,
  .about-image {
    flex: 1 1 100%;
  }
  .footer-container {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .footer-right {
    justify-content: center;
  }
}

/* Gallery section.  This grid showcases photos from club events and
   projects.  Images are displayed in a responsive grid that adapts
   to the viewport size. */
.gallery {
  padding: 6rem 0;
  background-color: var(--light);
}

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

.gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid img:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

/* Highlighted text spans used in the hero headline. */
.highlight {
  color: var(--secondary);
}

/* Animation for the hero title: slides up and fades in. */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}