/* ==========================================================================
   edit.css — manual CSS edits for the Clarence House theme

   WHY THIS FILE EXISTS
   _assets/styles/styles.min.css is a Gulp/Tailwind build output. Anything
   written there is lost on the next build. This file sits in the theme root,
   outside the build pipeline, and is enqueued after styles.min.css (see
   functions/enqueue-scripts.php) so its rules win on equal specificity.

   Add new edits at the bottom under a dated heading.
   ========================================================================== */


/* --------------------------------------------------------------------------
   2026-08-18 — Third-level dropdown (Cultural Arrangements > Asian > …)

   The theme styles every .sub-menu level with one descendant selector:
     .primary-menu-wrapper .nav-item.dropdown .sub-menu { left:50%; transform:translateX(-50%) }
   so a third-level menu inherits the second level's centred position and
   lands on top of its own parent list. It also became visible whenever the
   grandparent ("Cultural Arrangements") was hovered, not its own parent.

   Fix: fly the third level out to the right, and only reveal it on hover of
   its own parent item.
   -------------------------------------------------------------------------- */

/* Desktop — the theme switches to mobile nav at 1024px */
@media (min-width: 1025px) {

  /* Third level sits to the right of its parent item */
  .primary-menu-wrapper .nav-item.dropdown .sub-menu .sub-menu {
    left: 100%;
    top: -8px;            /* offsets the parent menu's 8px padding */
    margin-left: 6px;     /* small gap so the panels read as separate */
    transform: none;
    opacity: 0;
    visibility: hidden;
    z-index: 210;         /* above the second level, which is 200 */
  }

  /* Stay hidden when only the top-level item is hovered */
  .primary-menu-wrapper .nav-item.dropdown:hover .sub-menu .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  /* Reveal only when its own parent item is hovered.
     Must stay after the rule above — same specificity, source order wins. */
  .primary-menu-wrapper .nav-item.dropdown .sub-menu > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* Mobile / tablet — the theme already handles nested levels correctly here:
   .sub-menu is display:none, and .nav-item.dropdown.open > .sub-menu is
   display:block, so each level opens independently. Nothing to override.
   The only tweak: indent the third level a step further than the second,
   which otherwise share the same padding-left. */
@media (max-width: 1024px) {
  .primary-menu-wrapper .nav-item.dropdown .sub-menu .sub-menu {
    padding-left: calc(var(--spacing, .25rem) * 12);
  }
}

/* NOTE: on mobile the third level cannot currently be opened at all, because
   of a bug in the theme's submenu JS (dev-src/scripts/main.js ~line 245):
   tapping any toggle runs $('.nav-item.dropdown').removeClass('open') first,
   which strips .open from the ANCESTOR too, collapsing the parent list that
   the third-level item lives inside. That needs a JS fix, not CSS. */