/*
  Stylesheet for The Wasatch Yard website
  This file is based on the original repository styles with additional
  responsive rules, navigation adjustments, sponsor and icon styling,
  and minor layout tweaks.  Comments explain key changes.
*/

/* ===== Base styles copied from the original style.css ===== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #161621;
  color: #F5F9FF;
}

/* Card sections */
.card-section {
  background: #1e233a;
  border-radius: 12px;
  padding: 40px;
  margin: 60px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Container */
.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgba(7, 28, 42, 0.8);
  padding: 2px 0;
}

.navbar .logo {
  display: flex;
  align-items: center;
  color: #F5F6F8;
  font-weight: bold;
  font-size: 0.85rem;
}

.navbar .logo img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex-shrink: 0;
}

.navbar nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar nav li {
  margin-left: 15px;
}

.navbar nav a {
  color: #F0F4F8;
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding: 4px 6px;
}

.navbar nav a.active {
  color: #E63946;
  border-bottom: 2px solid #E63946;
}

.btn-nav {
  background: #E63946;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: bold;
}

/* Hero section */
.hero {
  position: relative;
  background-image: linear-gradient(135deg, rgba(7,28,42,0.9) 0%, rgba(17,40,68,0.8) 50%, rgba(34,68,104,0.6) 100%), url('assets/hero.png');
  background-size: cover;
  background-position: center;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.hero .content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Buttons */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

.btn-primary {
  background: #E63946;
  color: #fff;
}

.btn-secondary {
  border: 1px solid #E63946;
  color: #E63946;
}

/* Sections */
.section {
  padding: 80px 0;
  scroll-margin-top: 80px;
  transition: background-color 0.4s ease;
}

.section.dark {
  background: #0a1f33;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Stats */
.stats {
  background: #14182c;
  padding: 60px 0;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
}

.stat {
  background: #10263c;
  border-radius: 8px;
  text-align: center;
  flex: 1 1 200px;
  padding: 20px;
}

.stat .value {
  font-size: 2rem;
  font-weight: bold;
  color: #E63946;
}

.stat .label {
  margin-top: 5px;
  font-size: 0.9rem;
  color: #E0E1DD;
}

/* Format layout */
.format {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.format-text {
  flex: 1 1 55%;
}

.format-text h3,
.format-text h4 {
  margin-top: 1rem;
  color: #E63946;
}

.format-image {
  flex: 1 1 35%;
  position: relative;
  height: 250px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.lap-time {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(230, 57, 70, 0.85);
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  font-size: 1.4rem;
}

.lap-time .label {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
}

/* Prizes */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card {
  flex: 1 1 250px;
  background: #10263c;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.card h3 {
  margin-top: 0;
  color: #E63946;
}

/* Features section */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.feature {
  flex: 1 1 200px;
  padding: 10px;
  background: #0e2642;
  border-radius: 8px;
  text-align: center;
}

.feature h3 {
  margin-top: 0.5rem;
  color: #E63946;
}

.feature-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
  object-fit: contain;
  /* Invert dark icons so they appear light on dark backgrounds */
  filter: brightness(0) invert(1);
}

/* Sponsors */
.sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.sponsor {
  flex: 1 1 200px;
  background: #10263c;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor img {
  max-width: 150px;
  max-height: 80px;
  width: auto;
  height: auto;
  /* Invert dark logos to white for dark backgrounds */
  filter: brightness(0) invert(1);
}

/* Contact form */
.contact-section {
  background: #1e233a;
  border-radius: 12px;
  padding: 40px;
  margin: 60px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.contact-section h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #E63946;
  font-size: 1.8rem;
}

.contact-section p {
  margin-bottom: 1rem;
  color: #E0E1DD;
}

.contact-form {
  display: grid;
  gap: 15px;
  max-width: 600px;
  margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border-radius: 6px;
  border: 1px solid #264066;
  background: #0d1d33;
  color: #F5F9FF;
  font-size: 1rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #6c7a99;
}

.contact-form button {
  background: #E63946;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background: #c72f3d;
}

.form-status {
  margin-top: 10px;
  color: #E0E1DD;
  font-style: italic;
}

/* Footer */
.footer {
  background: #0D1B2A;
  color: #E0E1DD;
  padding: 40px 0 20px;
  text-align: center;
}

.footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.footer-links {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-links a {
  color: #E0E1DD;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer a:hover {
  text-decoration: underline;
}

/* Fade in animation */
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-section.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hamburger icon */
.hamburger {
  background: none;
  border: none;
  color: #F0F4F8;
  font-size: 1.5rem;
  cursor: pointer;
  display: none; /* hidden on desktop */
}

/* Navigation links container for toggle */
.nav-links {
  display: flex;
}

/* Open state for mobile navigation */
.nav-links.open {
  display: block;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .container {
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger {
    display: block;
  }
  /* Stack hero content */
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1rem;
  }
  /* Hide nav links until toggled */
  .nav-links {
    display: none;
    flex-direction: column;
    background: rgba(7, 28, 42, 0.95);
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    padding: 20px;
    border-radius: 8px;
  }
  .nav-links ul {
    flex-direction: column;
    gap: 10px;
  }
  .nav-links li {
    margin-left: 0;
  }
  .nav-links.open {
    display: flex;
  }
  /* Format section stacks vertically */
  .format {
    flex-direction: column;
  }
  .format-image {
    height: 200px;
  }
  /* Features stack */
  .features {
    flex-direction: column;
  }
  .feature {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  .lap-time {
    font-size: 1.2rem;
  }
}