/* Nested wp-admin nav-menu items (inc/nav-walker.php).
   Separate from `.gravin-category-menu` in base.css on purpose — that class is
   the header's own "Categories" control and carries breakpoint rules (a 46px
   display-font summary among them) that belong to that one control, not to
   every menu item that happens to have children. Logical properties throughout
   so [dir="rtl"] mirrors without a second ruleset. */

.gravin-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/*
 * A menu item with children wraps its own `<a>` one level deeper than a plain
 * item, inside this span — so the two `> a` rules in base.css that target
 * "the header's / the mobile menu's own direct-child links" (touch-target
 * height on desktop, the 46px heading size in the mobile menu's tablet width)
 * no longer reach it. Restated here for the one nested case they miss.
 */
.gravin-site-header__nav .gravin-nav-item > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gravin-hit, 44px);
}

@media (min-width: 701px) and (max-width: 1050px) {
  .gravin-mobile-menu .gravin-nav-item > a {
    font-family: var(--gravin-display);
    font-size: 46px;
    line-height: .95;
  }
}

.gravin-nav-item__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--gravin-hit, 44px);
  min-height: var(--gravin-hit, 44px);
  cursor: pointer;
  list-style: none;
}

.gravin-nav-item__toggle::-webkit-details-marker {
  display: none;
}

.gravin-nav-item__toggle::after {
  content: "↓";
  color: var(--gravin-accent);
}

/* Row context (the header's horizontal primary nav): the panel flies out
   below the whole link + toggle group, like the Categories control beside it. */
.gravin-nav-item--row > .gravin-nav-item__panel {
  position: absolute;
  inset-block-start: calc(100% + 18px);
  inset-inline-start: 0;
  z-index: 40;
  min-width: 200px;
  padding: 18px;
  border: 1px solid var(--gravin-hair);
  background: var(--gravin-bg);
  box-shadow: 0 18px 45px rgba(var(--gravin-charcoal-rgb), .14);
}

/* Column context (the mobile menu, the footer columns), and anything nested
   one level deeper than that (a grandchild panel inside a panel): an inline,
   indented block list rather than a second flyout. */
.gravin-nav-item--column > .gravin-nav-item__panel {
  padding-inline-start: 18px;
}

.gravin-nav-item__panel {
  display: flex;
  flex-direction: column;
}

.gravin-nav-item__panel > a,
.gravin-nav-item__panel > .gravin-nav-item {
  padding: 8px 0;
  overflow-wrap: anywhere;
}

.gravin-nav-item__panel > .gravin-nav-item > a {
  padding: 0;
}

/* Column branches keep the disclosure beside its label and children below. */
.gravin-mobile-menu .gravin-nav-item,
.gravin-site-footer .gravin-nav-item,
.gravin-nav-item__panel > .gravin-nav-item {
  display: block;
}
.gravin-nav-item--column { display: inline; }
.gravin-mobile-menu .gravin-nav-item__panel a {
  font-family: var(--gravin-sans);
  font-size: 20px;
  line-height: 1.4;
}
.gravin-nav-item__panel { max-width: min(320px, calc(100vw - 80px)); }
/* The animated hero mark sits at 31; an open header panel must cover it. */
.gravin-site-header:has(details[open]) { z-index: 32; }