/**
 * "New Home Villages" submenu (under Villages > New Home Villages) - a
 * third nav level with 22 items, the first place this menu has ever
 * nested that deep. Kept in its own file rather than hand-edited into the
 * compiled/minified css/app.css (no build tool is present in this theme
 * to regenerate it from scss/partials/_header.scss, so app.css is the only
 * thing actually served - see scss source for the mirrored, commented rule).
 *
 * Targeted via `.has-village-flyout`, a class added automatically in
 * functions.php (nav_menu_css_class filter) to whichever menu item is
 * titled "New Home Villages" - not a hardcoded item ID, which would be a
 * different number in every environment's database (local/dev/staging/
 * production each have their own). This way the styling just works
 * wherever that title exists, with no per-environment setup.
 *
 * Renders as a flyout to the right of "New Home Villages" itself, single
 * column, same look as its parent (coral background, tan bold uppercase
 * text via the existing li:hover > ul.sub-menu rules). The generic dropdown
 * pattern positions absolutely against the nearest positioned ancestor,
 * which is normally the fixed .header; giving this one item
 * `position: relative` makes it anchor to itself instead, so the flyout
 * sits beside "New Home Villages" rather than at the top of the whole
 * Villages panel. Padding/spacing below are restated explicitly (not left
 * to inherit) to guarantee a match with the parent panel's per-link
 * spacing (0.5rem vertical) regardless of any other page/plugin CSS that
 * might otherwise reset list padding - top padding is intentionally
 * 0.5rem rather than the parent's 1.5rem, since this panel starts flush
 * with "New Home Villages" itself rather than below a nav bar, and the
 * parent's fuller top padding left a large empty gap above the first
 * item here. The gap from the Villages panel is a transparent left
 * *border* rather than a margin - a margin sits outside the element's own
 * box, so the mouse briefly isn't hovering anything at all while crossing
 * it, and the CSS-only `:hover` reveal drops right there before the
 * cursor ever reaches the flyout. A same-width transparent border is
 * still part of the hoverable box, so the reveal holds all the way
 * across; `background-clip: padding-box` keeps the coral fill from
 * bleeding into that border strip, so it still looks identical to a gap.
 * Capped height + scroll since 22 items is far more than any other
 * dropdown in this menu carries.
 */
#menu-primary .has-village-flyout {
  position: relative;
}

#menu-primary .has-village-flyout:hover > .sub-menu {
  top: 0;
  left: 100%;
  border-left: 1rem solid transparent;
  background-clip: padding-box;
  box-sizing: content-box;
  width: 300px;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem 1rem 1rem 1rem;
}

#menu-primary .has-village-flyout:hover > .sub-menu li {
  padding: 0;
}

#menu-primary .has-village-flyout:hover > .sub-menu li:last-of-type > a {
  padding-bottom: 0;
}

#menu-primary .has-village-flyout:hover > .sub-menu a {
  padding: 0.5rem 0;
}

/**
 * Caret icon on "New Home Villages" itself (added via nav_menu_item_title
 * in functions.php, not stored in the menu item's title). Desktop only -
 * mobile already has its own +/- accordion indicator
 * (.menu-item-has-children > a::after in _header-mobile.scss), so this
 * would be a redundant second indicator there. Pinned to the right edge
 * of the link (position: relative on the <a>, absolute on the caret)
 * rather than just trailing the text, since "New Home Villages" is the
 * same width as its siblings (Compare Villages, Builders, etc.) and the
 * text is much shorter than the row - right after the text left it
 * sitting in the middle of the row, not at the edge.
 */
#menu-primary .has-village-flyout > a {
  position: relative;
  padding-right: 1.5rem;
}

.nav-caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
}

@media screen and (max-width: 1200px) {
  .nav-caret {
    display: none;
  }
}