/* Header hover-dropdown submenu — approved redesign (elevated rounded
   card instead of the legacy Mato flat box). Pure CSS override of
   main.css's .navigation .sub-menu/.children rules: no markup change
   needed, since the show/hide itself is still main.css's existing
   :hover opacity/visibility toggle — this only restyles the box once
   it's visible. Loaded after main.css (see inc/enqueue.php) so these
   equal-specificity selectors win by source order. */

.navigation .sub-menu,
.navigation .children {
  width: 236px;
  left: -18px;
  top: calc(100% + 14px);
  background: #232226;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 10px;
  text-transform: none;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), visibility 220ms;
}

.navigation .menu li.menu-item-has-children:hover > .sub-menu,
.navigation .menu li.page_item_has_children:hover > .children {
  transform: translateY(0);
}

.navigation .sub-menu::before,
.navigation .children::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: #232226;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

/* Nested (grandchild) menus sit to the side per main.css's existing
   left:100% placement — the connecting caret moves to match. */
.navigation .sub-menu .sub-menu::before,
.navigation .sub-menu .children::before,
.navigation .children .sub-menu::before,
.navigation .children .children::before {
  top: 12px;
  left: -6px;
  transform: rotate(-45deg);
}

.navigation .sub-menu li a,
.navigation .children li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82) !important;
  transition: background 150ms ease, color 150ms ease, padding-left 150ms ease;
}

.navigation .sub-menu li a::before,
.navigation .children li a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 150ms ease, transform 150ms ease;
}

.navigation .sub-menu li a:hover,
.navigation .children li a:hover,
.navigation .sub-menu li.current-menu-item > a,
.navigation .children li.current-menu-item > a {
  background: rgba(222, 75, 45, 0.12);
  color: var(--color-white) !important;
  padding-left: 16px;
}

.navigation .sub-menu li a:hover::before,
.navigation .children li a:hover::before,
.navigation .sub-menu li.current-menu-item > a::before,
.navigation .children li.current-menu-item > a::before {
  opacity: 1;
  transform: scale(1);
}

/* Mobile off-canvas menu already renders sub-menus inline/expanded
   (see main.css's max-width:991.98px block) — the floating-card
   treatment above is for the hover dropdown only, so it's turned off
   below that breakpoint rather than fighting the mobile layout. */
@media (max-width: 991.98px) {
  .navigation .sub-menu,
  .navigation .children {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 5px 15px;
    transform: none;
  }

  .navigation .sub-menu::before,
  .navigation .children::before {
    display: none;
  }

  .navigation .sub-menu li a,
  .navigation .children li a {
    padding: 7px 0;
  }

  .navigation .sub-menu li a:hover,
  .navigation .children li a:hover {
    padding-left: 0;
    background: none;
  }
}