/* CSS Custom Properties (Variables) for consistent theming */
/* This approach allows easy theme updates and maintains consistency */
:root {
  --primary: #00d4ff; /* Main brand color - cyan blue */
  --primary-dark: #0099cc; /* Darker shade for gradients and hover states */
  --bg-dark: #0f0f23; /* Primary background - deep dark blue */
  --bg-darker: #1a1a2e; /* Secondary background - slightly lighter */
  --bg-darkest: #16213e; /* Accent background - darkest blue */
  --text: #fff; /* Primary text color - white */
  --contrast: #222; /* High contrast color for readability */
}

/* Global reset for consistent cross-browser rendering */
* {
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
  box-sizing: border-box; /* Include padding/border in element dimensions */
}

/* Body - Main container styling with dark theme */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* Multi-stop gradient background for visual depth */
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: white;
  line-height: 1.6; /* Improved readability */
  overflow-x: hidden; /* Prevent horizontal scrollbars */
}

/* ================================================
   HEADER & NAVIGATION STYLES
   ================================================ */

/* Fixed header with glassmorphism effect */
.header {
  position: fixed; /* Stay at top during scroll */
  top: 0;
  width: 100%;
  z-index: 1000; /* Above other content */
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Navigation container with flexbox layout */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1rem;
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(25px);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* Logo styling with brand color */
.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00d4ff; /* Brand cyan color */
  text-decoration: none;
  margin-left: 2.5rem;
}

/* Navigation links container */
.nav-links {
  display: flex;
  gap: 2rem; /* Space between navigation items */
  list-style: none; /* Remove bullet points */
  margin-right: 3rem;
}

/* Individual navigation link styling */
.nav-links a {
  color: var(--primary);
  background: transparent;
  text-decoration: none; /* Remove underlines */
  transition: color 0.3s ease; /* Smooth color transitions on hover */
  position: relative; /* Required for pseudo-element positioning */
}

/* Active navigation link styling */
.nav-links a.active {
  color: var(--text);
  background: var(--primary);
  font-weight: bold; /* Emphasize active link */
  border-radius: 8px; /* Rounded corners */
  padding: 0.25em 0.5em; /* Pill-shaped padding */
}

/* Hover effects for navigation links */
.nav-links a:hover {
  color: var(--primary);
  background: rgba(0, 212, 255, 0.08);
  border-radius: 8px; /* Rounded hover state */
  padding: 0.25em 0.5em; /* Consistent padding with active state */
}

/* Animated underline effect using pseudo-elements */
.nav-links a::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position relative to parent link */
  bottom: -5px; /* Below the text */
  left: 0;
  width: 0; /* Start with no width */
  height: 2px; /* Thin underline */
  background: var(--primary); /* Brand color underline */
  transition: width 0.3s ease; /* Smooth width animation */
}

/* Expand underline on hover and active states */
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%; /* Full width underline on hover/active */
}

/* ================================================
   LAYOUT & PAGE STRUCTURE
   ================================================ */

/* Main content container with responsive max-width */
.container {
  max-width: 1200px; /* Prevent content from being too wide */
  margin: 0 auto; /* Center container */
  padding: 0 2rem; /* Horizontal padding for mobile */
}

/* ================================================
   PAGE HEADER SECTION
   ================================================ */

/* Hero section at top of events page */
.page-header {
  padding: 120px 2rem 60px; /* Top padding accounts for fixed header */
  text-align: center;
  background: rgba(0, 0, 0, 0.2); /* Subtle overlay for text readability */
}

/* Main page title with gradient text effect */
.page-title {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  /* Gradient text effect using background-clip */
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  -webkit-background-clip: text; /* Webkit browsers */
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Standard property */
}

/* Subtitle text styling */
.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.8; /* Subtle transparency for hierarchy */
  max-width: 600px; /* Constrain width for readability */
  margin: 0 auto; /* Center text block */
}

/* ===== Resource Playlist Section ===== */
.content-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

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

.resource-card {
  background-color: #0f0f23;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #586ca2f0;
}

.resource-card p {
  font-size: 0.95rem;
  margin-bottom: 15px;
  color: white;
}

.resource-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* ===== Button Styling ===== */
.btn-primary {
  display: inline-block;
  background-color: #2e3a59;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #1e2a45;
}

/* ===== Responsive Text ===== */
@media (max-width: 600px) {
  .page-header .page-title {
    font-size: 2rem;
  }

  .page-header .page-subtitle {
    font-size: 1rem;
  }
}

/* ================================================
   FOOTER SECTION
   ================================================ */

/* Footer container with glassmorphism background */
.footer {
  background: rgba(0, 0, 0, 0.3); /* Dark semi-transparent overlay */
  padding: 3rem 2rem 1rem; /* Generous padding with less bottom space */
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator line */
  margin-top: 4rem; /* Space from main content */
}

/* Footer navigation links container */
.footer-container {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #fff;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Individual footer link styling */
.footer-links a {
  color: #00d4ff;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Footer link hover state */
.footer-links a.active {
  color: var(--text);
  background: var(--primary);
  border-radius: 8px;
  padding: 0.25em 0.5em;
}

.footer-links a:hover {
  color: var(--text);
  background: var(--primary);
  border-radius: 8px;
  padding: 0.25em 0.5em;
}


/* ================================================
   BACKGROUND PARTICLE SYSTEM
   ================================================ */

/* Particle container - fixed overlay covering entire viewport */
.particles {
  position: fixed; /* Fixed to viewport, not page scroll */
  top: 0;
  left: 0;
  width: 100%; /* Full viewport width */
  height: 100%; /* Full viewport height */
  pointer-events: none; /* Don't interfere with page interactions */
  z-index: -1; /* Behind all other content */
}

/* Individual particle styling */
.particle {
  position: absolute; /* Absolute positioning for animation control */
  width: 2px; /* Small dot size */
  height: 2px;
  background: #00d4ff; /* Brand color particles */
  opacity: 0.5; /* Semi-transparent for subtle effect */
  animation: float 6s infinite linear; /* Continuous floating animation */
  /* Particles are dynamically positioned via JavaScript */
}

/* Particle floating animation - creates upward movement with rotation */
@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg); /* Start below viewport */
    opacity: 0; /* Fade in */
  }
  10% {
    opacity: 0.5; /* Reach full opacity */
  }
  90% {
    opacity: 0.5; /* Maintain opacity */
  }
  100% {
    transform: translateY(-10vh) rotate(360deg); /* End above viewport with full rotation */
    opacity: 0; /* Fade out */
  }
}

/* ================================================
   RESPONSIVE DESIGN & MOBILE OPTIMIZATION
   ================================================ */

/* Tablet and mobile breakpoint - screens smaller than 768px */
@media (max-width: 768px) {
  /* Hide navigation links on mobile - would typically show hamburger menu */
  .nav-links {
    display: contents;
  }

  /* Reduce title size for mobile screens */
  .page-title {
    font-size: 2.5rem; /* Smaller than desktop 3.5rem */
    /* Could also adjust line-height and margin for better mobile spacing */
  }

  #clubLogo {
    width: 110px;
  }
}

#clubLogo {
  width: 175px;
}