/* RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.6; color:#1f2937; background:#f7fafc;
}
img { max-width:100%; display:block; }

/* LAYOUT HELPERS */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* NAVBAR */
.navbar{
  position:sticky; top:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  background:#003366; color:#fff; padding:0.9rem 1.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.logo{ font-weight:700; letter-spacing:.3px; }
.nav-links{ list-style:none; display:flex; gap:1rem; }
.nav-links a{ color:#fff; text-decoration:none; font-weight:600; }
.nav-links a:hover{ color:#ffd700; }
.theme-toggle{ background:#ffd700; border:none; padding:.45rem .8rem; border-radius:6px; cursor:pointer; }

/* HERO */
.hero{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:2.2rem 1.25rem; max-width:1100px; margin: 0 auto;
  background:linear-gradient(90deg, #003366 0%, #0a5bb5 100%); color:#fff;
  border-bottom-left-radius:14px; border-bottom-right-radius:14px;
}
.hero-text{ flex:1; }
.hero h1{ font-size: clamp(1.9rem, 2.4vw + 1.2rem, 3rem); line-height:1.2; margin-bottom:.4rem; font-weight:700; }
.hero p{ font-size: clamp(1rem, .5vw + .9rem, 1.25rem); opacity:.95; }
.countdown{ margin:.8rem 0 1.2rem; font-weight:600; color:#ffe08a; }
.hero-buttons{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* Hero image: keep it tidy */
.hero-image img{
  width:min(420px, 100%);
  height:auto;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  object-fit:cover;
}

/* BUTTONS */
.btn{
  display:inline-block; padding:.7rem 1.2rem; border-radius:8px; text-decoration:none; font-weight:700; transition:.2s ease;
}
.primary{ background:#ffd700; color:#111; }
.primary:hover{ background:#f1c40f; }
.secondary{ background:#ffffff; color:#0a5bb5; }
.secondary:hover{ background:#eaf3ff; }

/* SECTIONS */
.section{ padding:3rem 0; }
.section h2{
  font-size: clamp(1.4rem, 1.1vw + 1rem, 2rem);
  margin-bottom:1rem; color:#003366; text-align:center;
}

/* PROJECTS */
.filter-buttons{ display:flex; justify-content:center; gap:.5rem; margin:1rem 0 1.5rem; flex-wrap:wrap; }
.filter-btn{
  border:1px solid #003366; background:#fff; color:#003366;
  padding:.45rem .9rem; border-radius:999px; cursor:pointer; font-weight:600;
}
.filter-btn.active, .filter-btn:hover{ background:#003366; color:#fff; }

.project-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);  /* EXACTLY 3 per row on desktop */
  gap:1rem;
}
@media (max-width: 1024px){
  .project-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .project-grid{ grid-template-columns: 1fr; }
}

.project-card{
  background:#fff; border-radius:12px; padding:1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.12); }

/* Make all project images consistent */
.project-card img{
  width:100%;
  aspect-ratio: 16 / 9;       
  object-fit: cover;
  border-radius:8px;
  margin-bottom:.7rem;
}

/* SCHEDULE + VIDEO */
.schedule-video-wrapper{ background:#f3f6fb; }
.schedule-container h2, .video-container h2{ text-align:left; }
.schedule-list{ list-style:none; margin-top:.6rem; }
.schedule-list li{ padding:.40rem 0; font-size:1.05rem; }
.time{ font-weight:800; color:#003366; }

/* Register form full layout */
.register-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 1rem;
  }
  .register-form input,
  .register-form select,
  .register-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
  }
  
/* RSVP section styled like Register form */
.rsvp-wrapper {
    padding: 4rem 1rem;
    text-align: center;
  }
  
  .rsvp-wrapper .container {
    max-width: 900px;  
    margin: 0 auto;
  }
  
  .rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  
  .rsvp-form input,
  .rsvp-form select {
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
  }
  
  .rsvp-form button {
    background: #FFD700;
    color: #000;
    font-weight: bold;
    padding: 0.9rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .rsvp-form button:hover {
    background: #e6c200;
  }
  
  
  

/* FORMS */
/* form{ max-width:520px; margin:0 auto; }
.form-group{ margin-bottom:1rem; }
label{ display:block; font-weight:600; margin-bottom:.35rem; }
input, select{
  width:100%; padding:.7rem; border:1px solid #cbd5e1; border-radius:8px; font-size:1rem;
  background:#fff; color:#1f2937;
}
input:focus, select:focus{ outline:2px solid #0a5bb5; border-color:#0a5bb5; }
button.btn{ width:100%; margin-top:.6rem; } */
/* Mini Register CTA */
/* .register-cta {
    background: #eaf3ff;
    text-align: center;
    border-top: 2px solid #cbd5e1;
    border-bottom: 2px solid #cbd5e1;
  }
  .register-cta h2 {
    color: #003366;
    margin-bottom: 1rem;
  }
  .small-register {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .8rem;
    max-width: 800px;
    margin: 0 auto;
  }
  .small-register button {
    grid-column: 1 / -1; /* full width */
  }
  body.dark-mode .register-cta {
    background: #0c1426;
    border-color: #334155;
  }
   */

/* RSVP list styles */
/* Who's Attending Section */
.rsvp-list {
  list-style: none;
  margin-top: 1.5rem;
  padding: 0;
  max-width: 600px;   
  margin-left: auto;
  margin-right: auto;
}

.rsvp-list li {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  background: #f8fafc;
  margin: 0.5rem 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: #111;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Role badge */
.rsvp-list .role {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: #0f3a7a;
  border-radius: 20px;
  text-transform: capitalize;
}

/* DARK MODE */
body.dark-mode .rsvp-list li {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #334155;
}

body.dark-mode .rsvp-list .role {
  background: #2563eb;  
  color: #fff;
}


/* FOOTER */
.footer{
  background:#003366; color:#fff; text-align:center; padding:1rem;
}
.footer a.footer-link{ color:#ffd700; text-decoration:none; font-weight:700; }
.footer a.footer-link:hover{ text-decoration:underline; }

/* DARK MODE */
body.dark-mode{ background:#0b1220; color:#e5e7eb; }
body.dark-mode .navbar{ background:#0f172a; }
body.dark-mode .section h2{ color:#93c5fd; }
body.dark-mode .hero{ background:linear-gradient(90deg,#0f172a,#0b3a7a); }
body.dark-mode .secondary{ background:#0f172a; color:#e5e7eb; border:1px solid #334155; }
body.dark-mode .project-card{ background:#111827; box-shadow:0 6px 16px rgba(0,0,0,.35); }
body.dark-mode input, body.dark-mode select{ background:#0b1220; color:#e5e7eb; border-color:#334155; }
body.dark-mode .schedule-video-wrapper{ background:#0c1426; }
body.dark-mode .time{ color:#93c5fd; }
body.dark-mode .filter-btn{ border-color:#93c5fd; color:#93c5fd; background:transparent; }
body.dark-mode .filter-btn.active, body.dark-mode .filter-btn:hover{ background:#1e3a8a; color:#fff; }
body.dark-mode .footer{ background:#0f172a; }
body.dark-mode .footer a.footer-link{ color:#f6d45d; }