/* offset main site content by the height of the navbar */
.navbar-offset {
  margin-top: 63px;
}

/* glassmorphism/bg-blurred navbar */
.custom-navbar {
  background-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);  
}

/* "Future Tech" brand */
.navbar-brand {
  font-size: 1.5rem;
}

/* nav links ("Home", "Articles", "Feedback") */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
}

/* user profile */
.user-profile {
  width: 52px; height: 52px;
  font-size: 1.2rem;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.user-profile:hover,
.user-profile[aria-expanded="true"] {
  background-color: var(--color-primary) !important;
  color: var(--off-black) !important;
}
.user-profile .bi-chevron-down {
  font-size: 0.8rem;
  transition: 0.3s ease;
}
.user-profile[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* user profile's dropdown menu */
.dropdown-menu {
  border: 3px solid var(--divider);
}

.dropdown-item {
  transition: all 0.15s ease;
}
.dropdown-item:hover {
  background-color: var(--dark-surface);
  color: var(--text-heading) !important;
}
.dropdown-item:focus {
  background-color: var(--dark-surface);
  color: var(--text-heading) !important;
}

/* custom mobile hamburger menu */
.navbar-toggler {
  border-color: var(--divider);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.88%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}