/* =========================
   PMCC - Navigation Tweaks
   ========================= */
.nav-link:hover {
  opacity: 0.8;
}

.navbar-toggler {
  border: none;
  box-shadow: none;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

#main-menu .navbar-nav .nav-link {
  color: #f6f6f6;
  text-align: center;
}

.dropdown-toggle::after {
  display: none;
  content: none;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: inherit;
  color: inherit;
}

/* Style the arrow */
#main-menu .dropdown-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 1.3em;
  vertical-align: middle;
}

/* =========================
     Desktop Hover Dropdown
     ========================= */
@media (min-width: 769px) {
  /* Default hidden state */
  #main-menu .navbar-nav .dropdown-menu {
    display: block; /* keep it block for transform animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* start slightly below */
    margin-top: 0; /* remove hover gap */
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }

  /* Show on hover + focus */
  #main-menu .navbar-nav .dropdown:hover > .dropdown-menu,
  #main-menu .navbar-nav .dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* slide up to position */
  }

  /* Disable JS-style clicking for desktop */
  #main-menu .navbar-nav .dropdown-toggle {
    pointer-events: none;
  }

  /* Rotate arrow on hover for top-level nav */
  #main-menu
    .navbar-nav
    > .menu-item-has-children:hover
    > .nav-link
    .dropdown-arrow {
    transform: rotate(180deg);
  }

  /* Rotate arrow when dropdown is open (Bootstrap adds .show) */
  #main-menu
    .navbar-nav
    > .menu-item-has-children.show
    > .nav-link
    .dropdown-arrow {
    transform: rotate(180deg);
  }

  /* Rotate arrow for nested dropdowns */
  #main-menu
    .dropdown-menu
    .menu-item-has-children:hover
    > .dropdown-item
    .dropdown-arrow,
  #main-menu
    .dropdown-menu
    .menu-item-has-children.show
    > .dropdown-item
    .dropdown-arrow {
    transform: rotate(180deg);
  }

  #main-menu .dropdown-item:active,
  #main-menu .dropdown-item:hover,
  #main-menu .current-menu-item .dropdown-item {
    background-color: #1a1a1a;
    color: #ebc248;
  }

  /* .navbar-expand-md #main-menu .current-page-ancestor .nav-link,
  .navbar-expand-md #main-menu .current-menu-ancestor .nav-link {
    color: #ebc248;
  } */

  #main-menu .dropdown-menu .menu-item-has-children .dropdown-menu {
    width: 100%;
    padding-left: 20px;
  }
}

/* =========================
     Mobile Navbar BG
     ========================= */
@media (max-width: 768px) {
  .navbar-collapse {
    background-color: #1a1a1a !important;
  }

  #main-menu .dropdown-menu {
    background-color: #1a1a1a !important;
    text-align: center;
    font-size: inherit;
    border: 0;
  }
  #main-menu .dropdown-menu a {
    color: #f6f6f6;
    transition: transform 0.6s ease, color 0.6s ease, background-color 0.6s ease;
  }

  #main-menu .dropdown-menu a:hover {
    background-color: inherit !important;
    color: #c2c2c2 !important;
  }

  #main-menu .dropdown-menu .dropdown-item {
    padding: 17px 0;
  }
}