/* General styles */
body {
  font-family: 'Georgia', serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: #333;
}

/* Header */
header {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  border-bottom: 2px solid #e0e0e0;
}

header h1 {
  font-size: 2.5em;
  margin: 0;
}

header h2 {
  font-size: 1.2em;
  color: #777;
  margin: 5px 0;
}

/* Navigation */
nav {
  position: relative;
  /* for absolute positioning of tooltips */
  background-color: #fff;
  padding: 10px 0;
  text-align: center;
  border-bottom: 2px solid #e0e0e0;
  overflow: visible;
  /* allow tooltips to extend outside */
}

nav a {
  margin: 0 15px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  position: relative;
  padding-bottom: 5px;
}

/* Base underline for all links */
nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: #333; /* default hover color */
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* Hover animation for any link */
nav a:hover::after {
  width: 100%;
}

/* Active page underline (green) */
nav a.active::after {
  width: 100%;           /* always full width */
  background: #2c6b2f;   /* green theme color */
}

/* Optional: when hovering active, temporarily show hover color */
nav a.active:hover::after {
  background: #333;       /* temporarily black on hover */
}


/* Tooltip descriptions */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 10px;
  position: absolute;
  /* absolute so it can go outside nav */
  top: 125%;
  /* below menu item */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 9999;
  /* above nav border and other sections */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

/* Sections */
section {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}

section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #2c6b2f;
}

/* Footer */
footer {
  background-color: #fff;
  text-align: center;
  padding: 20px;
  border-top: 2px solid #e0e0e0;
  font-size: 0.9em;
  color: #777;
}

footer a {
  color: #2c6b2f;
  text-decoration: none;
}

/* Hero text overlay (only for homepage) */
.text-overlay {
  position: absolute;
  top: 50%;
  left: 68%;
  transform: translateY(-50%);
  max-width: 90%;
}

.text-overlay h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.text-overlay h1 span {
  display: block;
  /* separate lines */
}

/* Home content */
.home-content {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.home-content h2 {
  font-size: 2em;
  color: #2c6b2f;
  margin-bottom: 20px;
}

.home-content p {
  font-size: 1.1em;
  line-height: 1.6;
}

/* Proposal section */
#proposal {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

#proposal h2 {
  font-size: 2em;
  color: #2c6b2f;
  margin-bottom: 20px;
}

#proposal p {
  font-size: 1.1em;
  line-height: 1.6;
}

/* Button "active" press effect */
#guest-submit.active,
#guestSearchBtn.active {
  transform: scale(0.95);
  filter: brightness(0.95);
}

/* Fade animation for results */
#rsvp-result {
  transition: opacity 0.2s ease;
  opacity: 1;
  min-height: 50px; /* keeps space so layout doesn't jump */
}
#rsvp-result.fade-out { opacity: 0; }
#rsvp-result.fade-in  { opacity: 1; }

/* Loading spinner */
.spinner {
  margin: 10px auto;
  width: 24px; height: 24px;
  border: 3px solid #ddd;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }