/**
 * @file src/submenu.css
 * Haven Custom — submenu open/close states and layout.
 *
 * Tailwind's pre-compiled build/main.min.css cannot contain JS-driven
 * state classes or precise dropdown positioning, so they live here.
 * All colours use Haven's CSS custom properties from src/theme.css.
 *
 * WHY THIS FILE IS STILL NEEDED alongside Tailwind:
 *  - JS-toggled state classes (.hs-open, .hs-submenu--flip) cannot be
 *    expressed as Tailwind utilities — they require custom CSS selectors.
 *  - The hover/focus-within open states need compound selectors that
 *    Tailwind's group/peer utilities cannot fully replicate at this depth.
 *  - Precise absolute positioning of dropdown panels (left:0, right:0,
 *    top:100%, fly-out offsets) is possible in Tailwind but would bloat
 *    the Twig template significantly; keeping them here is cleaner.
 *  - Decorative values (box-shadow, min/max-width) are mapped to
 *    CSS custom properties from theme.css for design-system consistency.
 *
 * FIXES:
 *  #3 — CSS-only hover/focus-within open states are kept, but aria-expanded
 *        is synced from JS (submenu.js) so state never drifts.
 *  #4 — Viewport overflow protection: dropdowns that would overflow the right
 *        edge are flipped to align right instead. A `.hs-submenu--flip` utility
 *        class is provided for JS-driven flipping if needed. The default also
 *        uses `right: auto` + a max-width guard so they never escape the viewport.
 *  FIX — Removed the malformed commented-out block that contained literal `}}`
 *        and `\t`/`\n` escape strings — these are not valid in CSS and were
 *        left over from a copy-paste error. The hover rule is now clean below.
 */

/* ── Open state: JS adds .hs-open to the parent <li> ─────────────────────── */
.hs-has-submenu.hs-open > ul.hs-submenu {
  display: flex;
}

/* ── Desktop: also open on hover / focus-within ──────────────────────────── */
@media (min-width: 1024px) {
  .hs-has-submenu:hover > ul.hs-submenu,
  .hs-has-submenu:focus-within > ul.hs-submenu {
    display: flex;
  }
}

/* ── Chevron rotates 180° when the submenu is open ───────────────────────── */
/*
 * .hs-open is the only trigger on mobile — it is added/removed exclusively
 * by JS (_openItem / _closeItem), so the chevron always reflects the real
 * open/closed state and is never stuck by a lingering :hover after a tap.
 *
 * On desktop, :hover and :focus-within are added as additional triggers
 * (inside the media query below) because those states are meaningful with
 * a pointer device. They are intentionally absent on mobile to avoid the
 * two bugs they caused there:
 *   1. The chevron rotated on first tap (:hover fires on touch) before the
 *      submenu had visually opened, making the animation feel wrong.
 *   2. After _closeItem() removed .hs-open, the :hover pseudo-class remained
 *      active (touch devices hold :hover briefly after a tap), so the chevron
 *      stayed rotated and never animated back to the down position.
 */
.hs-has-submenu.hs-open > div > a .hs-chevron {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .hs-has-submenu:hover > div > a .hs-chevron,
  .hs-has-submenu:focus-within > div > a .hs-chevron {
    transform: rotate(180deg);
  }
}

/* ── Desktop dropdown panel ──────────────────────────────────────────────── */
@media (min-width: 1024px) {
  ul.hs-submenu {
    min-width: 12rem;
    /* FIX #4: Cap max-width so the panel can never be wider than the viewport. */
    max-width: min(20rem, calc(100vw - 2rem));
    background-color: var(--card);
    border-radius: var(--radius, 0.5rem);
    /* Use a CSS custom property from theme.css for design-system consistency.
       Falls back to a sensible literal if the token is not defined. */
    box-shadow: var(--shadow-dropdown, 0 4px 16px rgba(0, 0, 0, 0.1));
    padding: 0.375rem 0;
    flex-direction: column;
  }

  /* Links inside the dropdown */
  ul.hs-submenu li a {
    padding: 0.5rem 1rem;
    display: block;
    white-space: nowrap;
    color: var(--foreground);
    border-radius: 0;
  }

  /* Hover state for dropdown links */
  ul.hs-submenu li a:hover {
	background-color: oklch(from var(--accent) l c h / 0.30);
	border-radius: var(--radius, 0.5rem);
  }

  /* FIX #4: Default alignment is left-anchored (left: 0).
     When .hs-submenu--flip is added (by JS detecting overflow), the
     panel flips to align its right edge with the parent instead. */
  ul.hs-submenu {
    left: 0;
    right: auto;
  }

  ul.hs-submenu.hs-submenu--flip {
    left: auto;
    right: 0;
  }

  /* FIX #4: 3rd-level panels fly out to the right by default,
     but flip left if they would overflow. */
  ul.hs-submenu ul.hs-submenu {
    top: 0;
    left: 100%;
    right: auto;
  }

  ul.hs-submenu ul.hs-submenu.hs-submenu--flip {
    left: auto;
    right: 100%;
  }
}

/* ── Mobile: indent nested levels, no floating panel ────────────────────── */
@media (max-width: 1023px) {
  ul.hs-submenu {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
    margin-top: 0.25rem;
  }
}