/* Konfluence Menu Dropdowns — submenu support for the theme's main navigation.
   Applies to any nested item (li.menu-item-has-children > ul.sub-menu) in .header-main,
   now and for future submenus. Tokens: ink #1F1F1F, blue ink #0077A8, mist #F6F8F9. */

.header-main .navbar-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Parent link gets a small chevron */
.header-main .navbar-nav .menu-item-has-children > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-main .navbar-nav .menu-item-has-children > .nav-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .8;
  transition: transform .15s ease;
}

/* ---------- Desktop: hover / focus dropdown ---------- */
@media (min-width: 992px) {
  .header-main .navbar-nav .menu-item-has-children {
    position: relative;
  }
  .header-main .navbar-nav .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1050;
    min-width: 220px;
    padding: 8px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(31, 31, 31, .06), 0 18px 48px rgba(0, 52, 72, .18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  }
  /* invisible bridge so the pointer can travel from the link to the panel */
  .header-main .navbar-nav .menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -14px; height: 14px;
  }
  .header-main .navbar-nav .menu-item-has-children:hover > .sub-menu,
  .header-main .navbar-nav .menu-item-has-children:focus-within > .sub-menu,
  .header-main .navbar-nav .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
  .header-main .navbar-nav .menu-item-has-children:hover > .nav-link::after,
  .header-main .navbar-nav .menu-item-has-children.is-open > .nav-link::after {
    transform: translateY(1px) rotate(225deg);
  }
  .header-main .navbar-nav .sub-menu .menu-item {
    margin: 0;
  }
  .header-main .navbar-nav .sub-menu .nav-link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: #1F1F1F;
    font-size: 16px;
    line-height: 1.3;
    white-space: nowrap;
    text-shadow: none;
  }
  .header-main .navbar-nav .sub-menu .nav-link:hover,
  .header-main .navbar-nav .sub-menu .nav-link:focus-visible,
  .header-main .navbar-nav .sub-menu .current-menu-item > .nav-link {
    background: #F6F8F9;
    color: #0077A8;
  }
}

/* ---------- Mobile / offcanvas: indented, always visible ---------- */
@media (max-width: 991.98px) {
  .header-main .navbar-nav .menu-item-has-children > .nav-link::after {
    transform: translateY(1px) rotate(225deg);
  }
  .header-main .navbar-nav .sub-menu {
    padding-left: 18px;
    border-left: 2px solid rgba(0, 119, 168, .25);
    margin: 2px 0 8px 10px;
  }
  .header-main .navbar-nav .sub-menu .nav-link {
    font-size: .95em;
    opacity: .9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-main .navbar-nav .menu-item-has-children > .sub-menu,
  .header-main .navbar-nav .menu-item-has-children > .nav-link::after {
    transition: none;
  }
}