/* Shared theme utilities: navbar blur, theme transitions, responsive tweaks */

:root {
  --nav-padding: 0.5rem;
  --nav-gap: 0.5rem;
  --nav-blur: 12px;
  --nav-bg-dark-rgba: 17,17,41;
}

/* Smooth transitions for theme changes */
* {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

/* Navbar container */
#navbar {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: flex-end;
  gap: var(--nav-gap);
  padding: var(--nav-padding);
  z-index: 9999;
  align-items: center;
  pointer-events: auto;
}

/* small helper: keep navbar contents spaced */
.nav-actions { display: inline-flex; gap: .5rem; align-items: center; }

/* Scrolled navbar with blur and translucent background */
#navbar.scrolled {
  background-color: rgba(var(--nav-bg-dark-rgba), 0.75);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
  -webkit-transition: backdrop-filter 220ms ease, background-color 220ms ease;
  transition: backdrop-filter 220ms ease, background-color 220ms ease;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border-radius: 10px;
}

/* Note: light-theme specific styles were removed per rollback request */

/* Mobile tweaks */
@media (max-width: 767.98px) {
  #navbar { top: 10px; left: 10px; right: 10px; }
  .nav-actions { gap: .4rem; }
}

/* Ensure menu button inside navbar is positioned correctly (overrides older fixed styles) */
#navbar .menu-btn {
  position: relative !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

#navbar .menu-btn>span,
#navbar .menu-btn>span::before,
#navbar .menu-btn>span::after {
  background-color: var(--bs-light, #fff);
}

/* Contact form inputs and submit button styling */
.contact-form .form-control {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #333 !important;
  box-shadow: none !important;
}
.contact-form .form-control::placeholder {
  color: #777 !important;
}

.contact-form .btn,
.contact-form button[type="submit"],
.contact-form input[type="submit"] {
  background-color: #d43030 !important;
  border-color: #d43030 !important;
  color: #fff !important;
}
.contact-form .btn:hover,
.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover {
  background-color: #b82525 !important;
  border-color: #b82525 !important;
}