/* SFG third-level nav — SCOPED to the header navbar
   • Carets for top + 2nd level
   • Desktop: 3rd level opens inline and can “stick” until parent closes
   • Mobile: submenus stack UNDER parent; hidden by default; only .show visible
*/

.main-nav-unique { --sfg-accent-navy: #172452; }

/* ---------------- Top-level items (desktop baseline) ---------------- */
.main-nav-unique .navbar-nav > .nav-item { margin-right: 0.75rem; }
.main-nav-unique .navbar-nav > .nav-item:last-child { margin-right: 0; }
.main-nav-unique .navbar-nav > .nav-item > .nav-link { display: inline-block; padding: .5rem .75rem; }

/* Top-level caret (Bootstrap triangle) */
.main-nav-unique .navbar-nav > .nav-item.menu-item-has-children > a.dropdown-toggle.nav-link::after{
  display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";
  border-top:.3em solid currentColor;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;
}

/* ---------------- Second-level items ---------------- */
.main-nav-unique .dropdown-menu .dropdown-item{ line-height:1.5; padding:.25rem 1.25rem; }

/* 2nd-level caret (same triangle look) */
.main-nav-unique .dropdown-menu > li.menu-item-has-children > a.dropdown-item::after,
.main-nav-unique .dropdown-menu > li.menu-item-has-children > a.dropdown-toggle::after{
  display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";
  border-top:.3em solid currentColor;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;
}

/* ---------------- Third-level panel styling (baseline) ---------------- */
.main-nav-unique .dropdown-submenu{ position:static; }

.main-nav-unique .dropdown-submenu > .dropdown-menu{
  position:static; float:none; display:none; /* hidden by default; shown via hover (desktop) or .show (mobile) or .is-open (desktop sticky) */
  margin:.35rem .25rem; padding:.4rem .4rem .45rem .8rem; border:0;
  background:rgba(23,36,82,.05); border-left:3px solid rgba(23,36,82,.25);
  border-radius:6px; box-shadow:0 2px 6px rgba(23,36,82,.15);
}

/* Desktop behavior (≥992px) */
@media (min-width:992px){
  /* Open on hover for discoverability */
  .main-nav-unique .dropdown-submenu:hover > .dropdown-menu { display:block; }
  /* Sticky open: JS adds .is-open so it stays open even if hover moves away */
  .main-nav-unique .dropdown-submenu.is-open > .dropdown-menu {
    display:block;
    background:rgba(23,36,82,.06);
    border-left-color:rgba(23,36,82,.35);
    box-shadow:0 3px 8px rgba(23,36,82,.18);
  }
}

/* 3rd-level link spacing */
.main-nav-unique .dropdown-submenu > .dropdown-menu .dropdown-item{
  padding:.3rem .9rem .3rem .5rem; border-radius:4px;
}

/* Keep menus above content */
.main-nav-unique .navbar .dropdown-menu{ z-index:1000; }

/* Accessibility */
.main-nav-unique .dropdown-submenu > .dropdown-menu .dropdown-item:focus{
  outline:2px solid rgba(23,36,82,.35); outline-offset:2px;
}

/* ==================== MOBILE OVERRIDES (<992px) ==================== */
@media (max-width:991.98px){

  /* Parents static so Popper can't fly out */
  .main-nav-unique .navbar-collapse,
  .main-nav-unique .navbar-nav .dropdown{
    position:static !important;
  }

  /* All dropdown menus inline under parent, HIDDEN by default */
  .main-nav-unique .navbar-nav .dropdown-menu{
    position:static !important;
    float:none !important;
    top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    transform:none !important; will-change:auto !important;
    width:100% !important; margin:.25rem 0 0 0 !important;
    box-shadow:none !important; display:none !important;
    text-align:center !important;               /* center text inside dropdowns */
  }

  /* Nested menus inline (no fly-out) */
  .main-nav-unique .navbar-nav .dropdown-menu .dropdown-menu{
    position:static !important;
    left:0 !important; right:auto !important; top:auto !important;
    transform:none !important; margin-left:0 !important; width:100% !important;
    padding-left:.75rem !important; border-left:3px solid rgba(23,36,82,.25) !important;
    box-shadow:none !important;
  }

  /* Only the toggled submenu shows */
  .main-nav-unique .navbar-nav .dropdown-menu.show{ display:block !important; }

  /* Center dropdown link text */
  .main-nav-unique .navbar-nav .dropdown-menu .dropdown-item{
    text-align:center !important;
    display:block; width:100%;
    padding-left:.75rem; padding-right:.75rem;
  }

  /* Top-level items centered, without flex row (prevents side-by-side issue) */
  .main-nav-unique .navbar-nav > .nav-item{
    margin-right:0 !important;
    width:100%;
    text-align:center;
    display:block !important; /* keep block so submenu stacks UNDER link */
  }
  .main-nav-unique .navbar-nav > .nav-item > .nav-link{
    display:inline-block;
    text-align:center;
    padding-left:0 !important; padding-right:0 !important;
  }
}

/* ==================== Desktop 3rd-level hover enhancement ==================== */
@media (min-width: 992px) {

  /* Make 3rd-level container span full width */
  .main-nav-unique .dropdown-submenu > .dropdown-menu {
    width: 100%;
    padding: 0.25rem 0;
  }

  /* Ensure 3rd-level items fill full width */
  .main-nav-unique .dropdown-submenu > .dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: .4rem 1rem;
    border-radius: 0;
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* On hover: magenta background extends across full item */
  .main-nav-unique .dropdown-submenu > .dropdown-menu .dropdown-item:hover,
  .main-nav-unique .dropdown-submenu > .dropdown-menu .dropdown-item:focus {
    background-color: #b5005a;
    color: #fff;
  }

  /* Optional: subtle divider lines between items */
  .main-nav-unique .dropdown-submenu > .dropdown-menu .dropdown-item + .dropdown-item {
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  /* Smooth hover effect */
  .main-nav-unique .dropdown-submenu > .dropdown-menu {
    border-radius: 6px;
    overflow: hidden; /* keeps background fills clean to edges */
  }
}