/* ✅ layout.css — Global shared styles across all pages */

/* 🔲 Basic Reset and Font Setup */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #111;
  color: #fff;
}

/* 🔹 Logo Styling - Always Centered */
.logo-wrapper {
  text-align: center;
  margin-top: 1.5rem;
}

.logo {
  width: 160px;
  height: auto;
}

/* 🔹 Shared Glow Animation (used universally) */
@keyframes pulseGlow {
  0% { filter: drop-shadow(0 0 6px #00ffff); }
  50% { filter: drop-shadow(0 0 12px #00ffff); }
  100% { filter: drop-shadow(0 0 6px #00ffff); }
}

.logo.glow {
  animation: pulseGlow 2.5s cubic-bezier(0.4,0,0.2,1) infinite;
}

/* ✨ Enhance logo glow on desktop */
@media (min-width: 768px) {
  .logo.glow { filter: drop-shadow(0 0 8px #00ffff); }
}

/* 🔹 Navbar Container - Centered Navigation */
.navbar-container {
  display: flex;
  justify-content: center;   /* center the buttons as a group */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem 2rem;
  background: transparent;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* If your markup includes .navbar-left/.navbar-right, make sure they don't push things */
.navbar-left,
.navbar-right {
  margin: 0;
  display: flex;
  align-items: center;
}

/* 🔹 Dropdown Wrapper */
.dropdown {
  /* let the button size naturally to its text on desktop */
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  text-align: center;
}

/* 🔹 Dropdown Buttons - Neon Glow Style (fluid, no wrap, centered) */
.dropbtn {
  display: inline-flex;                 /* center text nicely */
  align-items: center;
  justify-content: center;

  background-color: #111;
  color: #00ffff;
  border: 2px solid #00ffff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0,255,255,0.4);

  /* ✅ Fluid sizing for ALL screens */
  font-size: clamp(14px, 1.8vw, 18px);
  padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2.4vw, 24px);

  /* ✅ No wrapping + scale box to text */
  white-space: nowrap;
  width: auto;                           /* let it grow to fit text */
  min-width: clamp(140px, 16ch, 220px);  /* consistent feel across labels */
}

.dropbtn:hover {
  background-color: #00ffff;
  color: #000;
  box-shadow: 0 0 16px #00ffff;
}

/* 🔹 Dropdown Content (pushes content down when shown) */
.dropdown-content {
  display: none;
  background-color: #222;
  border: 1px solid #00ffff;
  border-radius: 8px;
  margin-top: 8px;
  padding: 10px 0;
  box-shadow: 0 0 10px rgba(0,255,255,0.2);
  text-align: center;

  /* match width of its trigger on desktop */
  width: 100%;
}

/* ✅ JS toggles this class to reveal dropdown */
.dropdown-content.show {
  display: block;
}

/* 🔹 Dropdown Links */
.dropdown-content a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #00ffff;
  color: #000;
}

/* Make <a> with .dropbtn look like a button (if you use anchors as triggers) */
a.dropbtn {
  text-decoration: none;
  box-sizing: border-box;
}

/* 🔹 Main Page Content Styling */
main {
  padding-top: 2rem;
  text-align: center;
}

/* 📱 Responsive Tweaks */
@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    align-items: center;
    margin-top: -0.5rem; /* pull buttons slightly up */
  }

  .dropdown {
    width: min(90vw, 18rem);
  }

  .dropbtn {
    width: 100%;
    min-width: 0;
    font-size: clamp(13px, 3.5vw, 15px);
    padding: 8px 14px;
    border-width: 1.5px;
  }

  .dropdown-content {
    width: 100%;
  }
}