/* =============================================================
   NLIGN — Header / Navbar
   ============================================================= */

.nlign-navbar {
  background-color: var(--nlign-color-onyx);
  height:           var(--nlign-navbar-height);
  padding-top:      6px;
  padding-bottom:   6px;
}

.nlign-navbar__container {
  padding-left:  var(--nlign-section-padding-x);
  padding-right: var(--nlign-section-padding-x);
  max-width:     var(--nlign-max-width);
  margin-inline: auto;
}

/* ── Logo ───────────────────────────────────────────────────── */
.nlign-navbar__logo {
  width:       176px;
  height:      80px;
  object-fit:  contain;
}

/* ── Nav links ──────────────────────────────────────────────── */
.nlign-nav__link,
.nlign-navbar__nav .menu a,
.nlign-navbar__nav ul a {
  font-family:     var(--nlign-nav-font-family);
  font-weight:     var(--nlign-nav-font-weight);
  font-size:       var(--nlign-nav-font-size);
  letter-spacing:  var(--nlign-nav-letter-spacing);
  color:           var(--nlign-color-dust-grey) !important;
  white-space:     nowrap;
  padding-left:    0 !important;
  padding-right:   0 !important;
  transition:      color var(--nlign-transition);
}

.navbar-nav.gap_lg_3 {
  gap: 32px;
}

@media (max-width: 1032px) {
  .navbar-nav.gap_lg_3 { gap: 19px; }
}

.navbar-nav.gap_lg_4 {
  gap: 32px;
}

.nlign-nav__link:hover,
.nlign-nav__link:focus,
.nlign-navbar__nav .menu a:hover,
.nlign-navbar__nav ul a:hover {
  color: var(--nlign-color-orange) !important;
}

/* ── WordPress menu list reset ──────────────────────────────── */
.nlign-navbar__nav .menu,
.nlign-navbar__nav ul {
  list-style:  none;
  margin:      0;
  padding:     0;
  display:     flex;
  align-items: center;
  gap:         2rem;
}

.nlign-navbar__nav .menu li,
.nlign-navbar__nav ul li {
  margin: 0;
}

/* ── Hamburger toggler ──────────────────────────────────────── */
.nlign-navbar__toggler {
  border-color: var(--nlign-color-dust-grey);
  background:   none;
  padding:      8px;
}

.nlign-navbar__toggler .navbar-toggler-icon {
  filter: invert(1);
}

/* ── WordPress admin bar offset ─────────────────────────────── */
.admin-bar .nlign-navbar {
  top: 32px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .nlign-navbar__container {
    padding-left:  24px;
    padding-right: 24px;
    background:    var(--nlign-color-onyx-800);
  }

  .nlign-navbar__nav {
    padding: 16px 0;
    gap:     12px !important;
  }

  .nlign-navbar__nav .menu,
  .nlign-navbar__nav ul {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.25rem;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .nlign-navbar {
    top: 46px;
  }
 body .nlign-footer__container{
    padding-left:  60px;
    padding-right: 60px;
  }
  .nlign-impact__heading br{
    display: none;
  }
}

/* =============================================================
   NLIGN — Dropdown / Submenu
   ============================================================= */

/* ── Navbar stacking context ─────────────────────────────────── */
.nlign-navbar {
  position: relative;
  z-index:  9999;
}

/* ── Dropdown <li> ───────────────────────────────────────────── */
.nlign-navbar__nav .nav-item.dropdown {
  position: relative;
}

/* ── Dropdown panel ──────────────────────────────────────────── */
.nlign-navbar__nav .dropdown-menu {
  display:        none !important;
  flex-direction: unset;
  align-items:    unset;
  gap:            0 !important;

  position:    absolute;
  top:         100% !important;
  left:        0    !important;
  right:       auto !important;
  transform:   none !important;
  min-width:   100%;
  width:       auto;
  z-index:     9999;
  margin-top:  6px;

  background-color: var(--nlign-color-onyx-800);
  border:           1px solid var(--nlign-color-onyx-600);
  border-top:       2px solid var(--nlign-color-orange);
  border-radius:    0;
  padding:          6px 0;
  box-shadow:       0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ── Show state ──────────────────────────────────────────────── */
.nlign-navbar__nav .dropdown-menu.show {
  display: block !important;
}

/* ── Desktop (≥ 992px) ───────────────────────────────────────── */
@media (min-width: 992px) {

  /* Hover open */
  .nlign-navbar__nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
  }

  /* Flip caret + orange on hover */
  .nlign-navbar__nav .nav-item.dropdown:hover > .d-flex > .nlign-dropdown-toggle::after,
  .nlign-navbar__nav .nav-item.dropdown:hover > .dropdown-toggle::after {
    transform:        rotate(180deg);
    border-top-color: var(--nlign-color-orange);
  }

  /* Panel sizing on desktop */
  .nlign-navbar__nav .dropdown-menu {
    min-width: 110px !important;
    padding:   10px 0 !important;
  }

  /* Submenu link padding on desktop */
  .nlign-navbar__nav .dropdown-menu .nlign-submenu__link {
    padding: 13px 10px !important;
  }

  /* Gap bridge — prevents menu closing when cursor crosses margin-top gap */
  .nlign-navbar__nav .dropdown-menu::before {
    content:    '';
    position:   absolute;
    top:        -6px;
    left:       0;
    right:      0;
    height:     6px;
    background: transparent;
  }
}

/* =============================================================
   NLIGN — Split Dropdown Toggle (mobile-safe caret button)
   Separates the link href from the dropdown toggle so tapping
   the label navigates and tapping the caret opens the submenu.
   ============================================================= */

/* ── Wrapper row for link + caret button ─────────────────────── */
.nlign-navbar__nav .nav-item.dropdown > .d-flex {
  align-items: center;
  width:       100%;
}

/* ── Caret button ────────────────────────────────────────────── */
.nlign-dropdown-toggle {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background:       transparent;
  border:           none;
  padding:          4px 8px;
  cursor:           pointer;
  box-shadow:       none !important;
  outline:          none;
  transition:       color var(--nlign-transition);
}

/* Remove any Bootstrap split-button divider line */
.nlign-dropdown-toggle.dropdown-toggle-split {
  border-left: none !important;
}

/* ── Caret arrow ─────────────────────────────────────────────── */
.nlign-dropdown-toggle::after {
  display:        inline-block;
  content:        '';
  border-style:   solid;
  border-width:   5px 4px 0 4px;
  border-color:   var(--nlign-color-dust-grey) transparent transparent transparent;
  transition:     transform        var(--nlign-transition),
                  border-top-color var(--nlign-transition);
}

/* Caret flips + turns orange when open */
.nlign-dropdown-toggle[aria-expanded="true"]::after {
  transform:        rotate(180deg);
  border-top-color: var(--nlign-color-orange);
}

/* Caret turns orange on hover/focus */
.nlign-dropdown-toggle:hover::after,
.nlign-dropdown-toggle:focus::after {
  border-top-color: var(--nlign-color-orange);
}

/* ── Mobile (≤ 991px) ────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Full width nav item */
  .nlign-navbar__nav .nav-item.dropdown {
    width: 100%;
  }

  /* Push caret to far right on mobile */
  .nlign-navbar__nav .nav-item.dropdown > .d-flex {
    justify-content: space-between;
  }

  .nlign-dropdown-toggle {
    margin-left: auto;
    padding:     8px 4px;
  }

  /* Flush inline panel — no floating panel on mobile */
  .nlign-navbar__nav .dropdown-menu {
    position:         static !important;
    top:              auto   !important;
    left:             auto   !important;
    right:            auto   !important;
    min-width:        0      !important;
    width:            100%   !important;
    background-color: transparent !important;
    border:           none   !important;
    border-left:      2px solid var(--nlign-color-orange) !important;
    box-shadow:       none   !important;
    padding:          4px 0 8px 16px !important;
    margin-top:       4px    !important;
  }

  .nlign-navbar__nav .dropdown-menu.show {
    display: block !important;
  }

  /* Submenu links — tighter on mobile */
  .nlign-submenu__link {
    padding:   10px 0;
    font-size: 15px;
  }
}

/* =============================================================
   NLIGN — Submenu Links
   ============================================================= */
.nlign-submenu__link {
  display:          block;
  width:            100%;
  padding:          12px 10px;
  font-family:      var(--nlign-nav-font-family);
  font-weight:      var(--nlign-nav-font-weight);
  font-size:        var(--nlign-nav-font-size);
  letter-spacing:   var(--nlign-nav-letter-spacing);
  line-height:      var(--nlign-nav-line-height);
  color:            var(--nlign-color-dust-grey);
  text-align:       left;
  white-space:      nowrap;
  text-decoration:  none;
  background-color: transparent;
  border-radius:    0;
  transition:       color            var(--nlign-transition),
                    background-color var(--nlign-transition);
}

.nlign-submenu__link:hover,
.nlign-submenu__link:focus {
  color:            var(--nlign-color-orange);
  background-color: var(--nlign-color-onyx);
  text-decoration:  none;
}

/* Current page stays orange */
.nlign-navbar__nav .dropdown-menu li.current-menu-item > .nlign-submenu__link {
  color: var(--nlign-color-orange);
}

/* ── Dropdown caret — top-level toggle (desktop fallback) ────── */
.nlign-navbar__nav .dropdown-toggle::after {
  display:        inline-block;
  margin-left:    6px;
  vertical-align: middle;
  content:        '';
  border-style:   solid;
  border-width:   5px 4px 0 4px;
  border-color:   var(--nlign-color-dust-grey) transparent transparent transparent;
  transition:     transform        var(--nlign-transition),
                  border-top-color var(--nlign-transition);
}

.nlign-navbar__nav .dropdown-toggle[aria-expanded="true"]::after {
  transform:        rotate(180deg);
  border-top-color: var(--nlign-color-orange);
}