
/*─────────────────────────────────────────────────────────────*/
/* Custom Bootstrap 5 Menu Overrides for Zircon Theme           */
/*─────────────────────────────────────────────────────────────*/

/* 1. Navbar Toggler (Hamburger Icon) */
.navbar-toggler {
  background: #fff;
  border-color: #e7e8e9;
  margin: 4px 0 0 5px;
  border-radius: 3px;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
  background: #ddd;
}
.navbar-toggler-icon {
  background-image: none;
}
.navbar-toggler .icon-bar,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  display: block;
  width: 1.5em;
  height: 0.2em;
  background: #333;
  margin: 0.25em auto;
}

/* 2. Main Menu Styles */
#main-menu {
  margin-bottom: 0;
}
#main-menu + .navbar {
  margin-top: 0;
}
#main-menu-collapse {
  max-height: 200000px;
}
.collapse#main-menu-collapse .container {
  background: #fff;
  overflow: hidden;
  padding: 0.5rem 0;
}
#main-menu-collapse .navbar-nav {
  width: 100%;
  padding: 5px 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#main-menu-collapse .nav-link {
  display: block;
  color: #555;
  padding: 10px 15px;
  border-top: 1px dotted #dadada;
  border-radius: 0;
}
#main-menu-collapse .nav-item:first-child .nav-link {
  border-top: none;
}
#main-menu-collapse .nav-link.active,
#main-menu-collapse .nav-link:hover,
#main-menu-collapse .nav-link:focus {
  color: #c01700;
  background: none;
  text-decoration: none;
}

/* Submenus */
#main-menu-collapse .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  border: none;
  background: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
#main-menu-collapse .dropdown-item {
  border-top: 1px dotted #dadada;
  color: #555;
  padding: 10px 0;
}
#main-menu-collapse .dropdown-item:hover,
#main-menu-collapse .dropdown-item:focus,
#main-menu-collapse .dropdown-item.active {
  color: #c01700;
  background: none;
}
#main-menu-collapse .dropdown-menu .dropdown-item {
  padding-left: 1.5rem;
}
nav.navbar > .container {
  padding-left: var(--bs-gutter-x);
  padding-right: var(--bs-gutter-x);
}

/*─────────────────────────────────────────────────────────────*/
/* Primary Menu Specific Adaptation from original theme CSS     */
/*─────────────────────────────────────────────────────────────*/

.region-primary-menu {
  clear: both;
}
.region-primary-menu .navbar-nav {
  font-size: 0.929em;
  margin: 0 5px;
  padding: 0;
  text-align: left;
}
[dir="rtl"] .region-primary-menu .navbar-nav {
  text-align: right;
}
.region-primary-menu .nav-item {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  width: 100%;
}
.region-primary-menu .nav-link {
  display: block;
  color: #333;
  background: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  text-shadow: 0 1px #eee;
  border-radius: 8px;
  padding: 0.9em 0 0.9em 10px;
}
[dir="rtl"] .region-primary-menu .nav-link {
  padding: 0.9em 10px 0.9em 0;
}
.region-primary-menu .nav-link:hover,
.region-primary-menu .nav-link:focus {
  background: rgba(255, 255, 255, 0.95);
}
.region-primary-menu .nav-link:active {
  background: rgba(255, 255, 255, 1);
}
.region-primary-menu .nav-link.active {
  border-bottom: none;
}

/* Tablet (461px - 900px) */
@media (min-width: 461px) and (max-width: 900px) {
  .region-primary-menu .navbar-nav {
    text-align: center;
  }
  .region-primary-menu .nav-item {
    display: inline-block;
    width: 32.75%;
    margin-right: 5px;
  }
  .region-primary-menu .nav-item:nth-child(3n) {
    margin-right: -5px;
  }
  .region-primary-menu .nav-link {
    padding: 0.9em 5px;
    margin-bottom: 5px;
    border-radius: 8px;
  }
}

/* Desktop (901px and up) */
@media (min-width: 901px) {
  .region-primary-menu .navbar-nav {
    padding: 0 15px;
  }
  .region-primary-menu .nav-item {
    float: left;
    margin: 0 1px;
    padding: 0 1px;
    width: auto;
  }
  .region-primary-menu .nav-link {
    padding: 0.7em 0.8em;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .region-primary-menu .nav-link.active,
  .region-primary-menu .nav-link:active {
    background: rgba(240, 240, 240, 1);
  }
}
