/* Banner Styles */
.banner {
  background: linear-gradient(135deg, #6c63ff 0%, #ff006e 100%);
  color: white;
  padding: 1.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Make footers share the same gradient as the top banner on both themes.
   Target footer elements (including ones using Bootstrap's bg-light) with
   higher specificity so existing HTML doesn't need editing. Keep the
   footer text content unchanged; adjust color for contrast. */
/* Footer base styles: use flexbox, but align to top and add extra top padding
   so multi-line footers sit slightly lower visually (applies to Bootstrap
   footers and the custom .about-footer). */
footer, footer.bg-light, .about-footer {
  background: linear-gradient(135deg, #6c63ff 0%, #ff006e 100%);
  color: #fff;
  border-top: none !important;
  display: flex;
  /* Center vertically and horizontally */
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Balanced padding so two-line footers sit visually centered */
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  flex-direction: column;
}

body.dark-mode footer, body.dark-mode footer.bg-light {
  /* Same gradient for dark mode — keeps consistent branding */
  background: linear-gradient(135deg, #6c63ff 0%, #ff006e 100%);
  color: #fff;
}

/* Reduce vertical gap between multiple footer lines */
footer p,
footer .container p,
footer small,
footer .container small,
.about-footer p,
.about-footer small {
  margin: 0;
  line-height: 1.18;
}

/* Add a small gap between consecutive footer lines to improve readability */
footer p + p,
footer p + small,
footer .container p + p,
footer .container p + small,
.about-footer p + p {
  margin-top: 0.25rem;
}

.banner-text {
  font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.15vw, 1.75rem);
  letter-spacing: 1.5px;
  margin: 0;
}

/* Navbar Styles */
.navbar {
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

body.dark-mode .navbar {
  background-color: #2a2a2a;
}

.navbar-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  position: relative;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #6c63ff;
  text-decoration: none;
  padding: 1rem 0;
  white-space: nowrap;
  margin-right: auto;
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Ensure the collapse wrapper behaves as the desktop nav by default
   and is overridden in the mobile media query. This preserves the
   horizontal layout on large viewports while allowing the mobile
   collapse to hide/show the nav on small screens. */
@media (min-width: 769px) {
  .collapse.navbar-collapse {
    display: flex;
    align-items: center;
    gap: 0;
    position: static;
    background: transparent;
    width: auto;
  }
}

.navbar-nav .nav-item {
  margin: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-nav .nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 1rem 2rem;
  border-bottom: 3px solid transparent;
  display: inline-block;
  height: 100%;
  display: flex;
  align-items: center;
}

body.dark-mode .navbar-nav .nav-link {
  color: #e0e0e0;
}

.navbar-nav .nav-link:hover {
  color: #6c63ff;
  border-bottom-color: #6c63ff;
  background-color: rgba(108, 99, 255, 0.05);
}

body.dark-mode .navbar-nav .nav-link:hover {
  background-color: rgba(108, 99, 255, 0.1);
}

.navbar-nav .nav-link.active {
  color: #6c63ff;
  border-bottom-color: #6c63ff;
}

.navbar-toggler {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
}

.navbar-toggler span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.3s;
}

body.dark-mode .navbar-toggler span {
  background-color: #e0e0e0;
}

/* Responsive Navbar */
@media (max-width: 768px) {
  .navbar {
    margin-top: 2px;
  }

  .navbar-container {
    padding-top: 3rem;
  }

  .collapse.navbar-collapse {
     /* Keep the collapse element in the document flow so expanding
       pushes page content down instead of overlapping it */
     position: static;
     background-color: #f8f9fa;
     flex-direction: column;
     gap: 0;
     display: none;
     padding: 0;
      border-top: none;
     z-index: 999;
     width: 100%;
     box-sizing: border-box;
  }

  body.dark-mode .collapse.navbar-collapse {
    background-color: #2a2a2a;
  }

  .collapse.navbar-collapse.show {
    display: flex;
    padding-top: 0;
    margin-top: 0.75rem;
  }

  /* Prevent horizontal cutoff by ensuring links use box-sizing and
     have smaller horizontal padding on mobile */
  .navbar-nav {
    width: 100%;
    box-sizing: border-box;
    /* On small viewports make the nav stack vertically */
    flex-direction: column;
  }

  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    display: block; /* ensure links take full width and stack */
  }

  .navbar-nav .nav-item {
    width: 100%;
    height: auto;
  }

  .navbar-nav .nav-link {
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    border-right: none;
    justify-content: flex-start;
  }

  body.dark-mode .collapse.navbar-collapse .nav-link {
    border-bottom-color: #444;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus-visible,
  .navbar-nav .nav-link.active {
    color: #6c63ff !important;
    border-bottom-color: #6c63ff !important;
    background-color: rgba(108, 99, 255, 0.05) !important;
  }

  body.dark-mode .collapse.navbar-collapse .nav-link:hover,
  body.dark-mode .collapse.navbar-collapse .nav-link:focus-visible,
  body.dark-mode .collapse.navbar-collapse .nav-link.active {
    color: #6c63ff !important;
    border-bottom-color: #6c63ff !important;
    background-color: rgba(108, 99, 255, 0.1) !important;
  }

  .navbar-toggler {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0.15rem;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 8px;
    z-index: 2;
  }

  .navbar-toggler span {
    margin: 3px 0;
  }

  .navbar-toggler[aria-expanded="true"] {
    border-color: #111;
  }

  .navbar-toggler[aria-expanded="false"] {
    top: -0.1rem;
  }

  .navbar-brand {
    order: 1;
    margin-right: 2rem;
  }
}

/* Dropdown Menu (for future use) */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 4px;
  top: 100%;
  left: 0;
}

body.dark-mode .dropdown-menu {
  background-color: #2a2a2a;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease;
}

body.dark-mode .dropdown-menu a {
  color: #e0e0e0;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1;
}

body.dark-mode .dropdown-menu a:hover {
  background-color: #3a3a3a;
}