/* ============================================================
 * NAVIGATION
 * Matches the live site's centered nav with dropdowns.
 * Uses et-menu / nav / sub-menu classes like Divi.
 * ============================================================ */

/* ─── Bootstrap color overrides for main nav ─── */
/* Kill all blue. Site palette: black, white, tan (#bfa37c). */
#block-reco-main-menu .nav-link,
#block-reco-main-menu .nav-link:focus,
#block-reco-main-menu .nav-link:active,
#block-reco-main-menu .nav-link.active,
#block-reco-main-menu .navbar-nav .nav-link.show,
#block-reco-main-menu .navbar-nav .nav-link.active {
  color: #fff !important;
  background: transparent !important;
}

/* The top-level dropdown-toggle (SEARCH, ABOUT) should also be white.
   But leave alone dropdown-toggles deeper in the menu (column headers). */
#block-reco-main-menu > .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle,
#block-reco-main-menu > .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle:focus,
#block-reco-main-menu > .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle:active {
  color: #fff !important;
}
#block-reco-main-menu > .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle:hover {
  color: var(--color-accent) !important;
}

/* Nav-link hover stays tan */
#block-reco-main-menu .nav-link:hover {
  color: var(--color-accent) !important;
}

#block-reco-main-menu .dropdown-item,
#block-reco-main-menu .dropdown-item:focus,
#block-reco-main-menu .dropdown-item:active {
  color: #000 !important;
  background: transparent !important;
}
#block-reco-main-menu .dropdown-item:hover {
  background: var(--color-bg-alt) !important;
  color: var(--color-primary) !important;
}
#block-reco-main-menu .dropdown-item.active,
#block-reco-main-menu .dropdown-item:active {
  background: var(--color-bg-alt) !important;
  color: #000 !important;
}

/* Dropdown menu border — tan, not blue */
#block-reco-main-menu .dropdown-menu {
  border-color: #bfa37c !important;
}

/* Caret color on dropdown toggles */
#block-reco-main-menu .dropdown-toggle::after {
  color: #fff;
  border-top-color: currentColor;
  border-right-color: transparent;
  border-bottom: none;
  border-left-color: transparent;
}

/* Neutralize focus-visible outlines (Bootstrap defaults to blue) */
#block-reco-main-menu .nav-link:focus-visible,
#block-reco-main-menu .dropdown-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.header-menu-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Main nav list */
.main-nav,
.et-menu,
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.main-nav > li,
.et-menu > li,
.nav > li {
  position: relative;
  display: inline-block;
  padding: 0;
}

.main-nav > li > a,
.et-menu > li > a,
.nav > li > a,
.nav > li > span {
  display: block;
  padding: 15px 16px;
  color: var(--color-text-on-dark);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
  cursor: pointer;
}

.main-nav > li > a:hover,
.main-nav > li > a:focus,
.main-nav > li > span:hover,
.main-nav > li.active-trail > a,
.main-nav > li.menu-item--active-trail > a,
.main-nav > li.menu-item--active-trail > span {
  color: var(--color-accent);
  text-decoration: none;
}

/* Dropdown / Sub-menu */
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-color: #bfa37c;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 10px 0;
  z-index: 1000;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.main-nav li:hover > .sub-menu,
.main-nav li.menu-item--expanded:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-menu li {
  display: block;
  padding: 0;
}

.sub-menu li a {
  display: block;
  padding: 10px 20px;
  color: #000;
  font-size: var(--font-size-base);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  transition: all 0.2s;
}

.sub-menu li a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  text-decoration: none;
}

/* Third-level dropdown */
.sub-menu .sub-menu {
  top: -10px;
  left: 100%;
}

/* Mobile menu */
@media only screen and (max-width: 980px) {
  .header-menu-wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-primary);
    z-index: 999;
  }

  .header-menu-wrap.open {
    display: block;
  }

  .main-nav,
  .et-menu,
  .nav {
    flex-direction: column;
    width: 100%;
  }

  .main-nav > li {
    display: block;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-nav > li > a {
    padding: 12px 5%;
  }

  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
    display: none;
  }

  .main-nav li.menu-item--expanded.open > .sub-menu {
    display: block;
  }

  .sub-menu li a {
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 5% 10px 10%;
  }

  .sub-menu .sub-menu {
    left: 0;
  }

  .sub-menu .sub-menu li a {
    padding-left: 15%;
  }
}

/* ─── Hover dropdowns for main nav (override Bootstrap click behavior) ─── */

/* 1. Target the top-level <ul class="nav navbar-nav"> directly via the nav ID */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu {
  display: flex !important;
  flex-wrap: wrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.3s ease;
  pointer-events: none;
  border-color: #bfa37c;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  margin-top: 0;
  border-radius: 0;
  background: #fff;
}

/* 2. Hover reveals the top-level dropdown */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* 3. Simple dropdown (ABOUT — no nested sub-items): vertical column */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu:not(:has(> .dropdown-item.dropdown)) {
  flex-direction: column;
  min-width: 200px;
  padding: 10px 0;
}

/* 4. Mega-menu (SEARCH — has .dropdown-item.dropdown children): columns side by side */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu:has(> .dropdown-item.dropdown) {
  min-width: 520px;
  padding: 20px;
}

/* 5. Second-level items become flex columns (By Location, Kentucky Agents) */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown {
  flex: 1 0 auto;
  padding: 0 25px;
  list-style: none;
}

/* 6. Column headers: bold static text, no caret */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown > span.dropdown-toggle {
  font-weight: bold;
  cursor: default;
  pointer-events: none;
  display: block;
  margin-bottom: 8px;
  color: #000 !important;
}
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown > span.dropdown-toggle::after {
  display: none;
}

/* 7. Third-level menus inside mega-menu columns: stay vertical, inline */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown > .dropdown-menu {
  position: static !important;
  flex-direction: column !important;
  display: block !important;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0;
}
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown > .dropdown-menu > .dropdown-item {
  padding: 3px 0;
  list-style: none;
}
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown > .dropdown-menu > .dropdown-item a {
  color: #555;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 4px 0;
  display: block;
}
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown > .dropdown-menu > .dropdown-item a:hover {
  color: var(--color-accent);
  background: none;
}

/* 8. Split the long Kentucky Agents list into 3 columns */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item.dropdown:nth-of-type(2) > .dropdown-menu {
  columns: 3;
  column-gap: 30px;
}

/* ─── Simple dropdown link styling (ABOUT items) ─── */
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item a {
  color: #000;
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  padding: 8px 20px;
}
#block-reco-main-menu .navbar-nav > .nav-item.dropdown > .dropdown-menu > .dropdown-item a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}