/*
  Nova Dropdown Menu — visual styling
  Targets markup added at runtime by novamenu.js. Uses the Nova
  template's own design tokens where they exist (--color-ink etc.,
  see design-tokens.css from the template spec) and falls back to
  literal Nova values so this still looks right even if installed
  on a menu module outside the Nova template.
*/

/*
  Inherits the SITE's own --color-accent by default, so the dropdown's
  hover underline/focus ring actually matches the rest of the site
  (the top nav's underline, buttons, etc.) instead of a second,
  independent accent color living only in this plugin. #FF5D4E is
  Nova's own coral default, used only as the last-resort fallback if
  --color-accent isn't defined at all. novamenu.php only overrides
  this var when the plugin's own "Accent color override" param is
  explicitly set — leaving it blank (the default) means this line is
  the only thing deciding the color.
*/
:root {
  --nova-menu-accent: var(--color-accent, #FF5D4E);
}

/*
  "Cloud Wash" panel background — picked from a set of five style
  previews. Uses the Nova template's own --cloud-1/2/3 tokens (the
  hero's gradient colors, see design-tokens.css from the template
  spec) if the page defines them, falling back to the same literal
  values Nova ships as defaults if it's installed somewhere those
  vars aren't set.
*/
:root {
  --nova-cloud-1: var(--cloud-1, #FFE7B0);
  --nova-cloud-2: var(--cloud-2, #FFC2DE);
  --nova-cloud-3: var(--cloud-3, #C9B8F5);
}

/*
  Patches a gap in the site's OWN top-nav CSS (templates/site/
  cassiopeia_extended/css/user.css), not something this plugin
  introduced. That file already defines the full hover-underline
  effect for top-level nav items — base bar (::after on both
  "> a" and "> span"), color, scaleX(0) resting state — but its
  scaleX(1) *trigger* rule only covers ":hover" and ".active" on
  "> a". A parent item like "Guides & Charts" that has no link of its
  own (rendered as "> span", not "> a" — see the README's Cassiopeia
  notes) has the underline's plumbing in place but nothing ever
  reveals it. This reuses that file's own selector shape and
  --color-accent variable, just extending the trigger to also cover
  "> span" and, additionally, this plugin's own .is-open state (so the
  underline shows while a dropdown is open via click/tap, not only on
  literal mouse hover).
*/
.container-header .mod-menu > li.active > span::after,
.container-header .mod-menu > li > span:hover::after,
.container-header .mod-menu > li > span:focus-visible::after,
.container-header .mod-menu > li.nova-has-dropdown.is-open > span::after {
  transform: scaleX(1) !important;
}
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li > span:hover,
.container-header .mod-menu > li > span:focus-visible,
.container-header .mod-menu > li.nova-has-dropdown.is-open > span {
  color: var(--color-ink) !important;
}

/* Keep ordinary links and dropdown parents on one identical baseline. */
.container-header .mod-menu > li.nova-has-dropdown {
  align-self: center !important;
  flex-wrap: nowrap !important;
  min-height: 0 !important;
}

.container-header .mod-menu > li.nova-has-dropdown > .nova-menu-trigger {
  padding: 1rem 0 .75rem !important;
  line-height: 1.7 !important;
  transform: translateY(-10px);
}

.container-header .mod-menu > li.nova-has-dropdown > .nova-menu-toggle {
  transform: translateY(-10px);
}

/* The plugin setting controls every menu accent, including the top nav. */
.container-header .mod-menu > li > a::after,
.container-header .mod-menu > li > span::after {
  background: var(--nova-menu-accent) !important;
}

/* Joomla 6 already renders a submenu toggle. Nova supplies its own toggle,
   so hide only the unused core toggle to avoid a second flex item. */
.nova-has-dropdown > .mod-menu__toggle-sub:not(.nova-menu-toggle),
.nova-has-dropdown > .mm-toggler:not(.nova-menu-toggle) {
  display: none !important;
}

/*
  The <li> itself is the flex row for its trigger + chevron toggle,
  not just the trigger. Reason: a plain leaf <span> elsewhere in this
  file (the "empty parent item" catch-all a few rules down) needs
  display:block !important to lay out correctly as its own full-width
  row, but that same selector also matches a flyout trigger's label —
  a span can't be both "block, full row" and "inline-flex, shrink to
  content" depending on which rule you'd rather won. Making the <li>
  the actual flex container sidesteps that fight entirely: the label
  can be whatever display it ends up computing to, and the <li> still
  lays out label + chevron side by side.

  Note the trigger is NOT stretched to fill the row (no flex:1 here) —
  it stays sized to its own text, and the toggle button gets
  margin-left:auto instead to push itself to the row's far end. That
  matters for the hover underline below: it's sized as a percentage of
  the trigger's own box, so the trigger has to stay text-width, not
  row-width, or the underline runs the full row instead of just under
  the title.
*/
.nova-has-dropdown {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

/*
  .nova-menu-trigger is added by JS to whichever element carries the
  item's label — an <a> when the menu item has its own real link, or a
  plain <span class="mod-menu__heading"> (Joomla core's own markup for
  a parent item that exists only to hold children, no link of its
  own) when it doesn't. Style by that class, never by tag name, or a
  span-labeled item silently loses its styling.
*/
.nova-has-dropdown > .nova-menu-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.nova-menu-toggle {
  margin-left: auto !important;
}

.nova-menu-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); /* points down, closed */
  transition: transform 180ms ease;
  flex-shrink: 0;
  opacity: 0.7;
}

/* A flyout (opens sideways, not below) gets a static right-pointing
   arrow instead of a down/up chevron that flips on open — the usual
   convention for nested submenu indicators. */
.nova-menu-chevron--flyout {
  transform: rotate(-45deg); /* points right */
}

/*
  The chevron button is inserted as a SIBLING right after the trigger
  element (JS: link.insertAdjacentElement('afterend', toggle)), not
  nested inside it — target it accordingly, not as a descendant of
  the trigger.
*/
.nova-has-dropdown.is-open > .nova-menu-toggle .nova-menu-chevron {
  transform: rotate(225deg); /* points up, open */
}
.nova-has-dropdown.is-open > .nova-menu-toggle .nova-menu-chevron--flyout {
  transform: rotate(-45deg); /* stays pointing right */
}

/*
  !important throughout this file's panel-related rules is deliberate,
  not sloppiness. The live site's template (Joomla's core Cassiopeia,
  see README.md) ships its OWN complete mega-menu CSS for this exact
  markup, at specificities like (0,3,0) — e.g.
  ".container-header .mod-menu .parent > ul { display: none }" and,
  worse, ".container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub span { color: #fff }"
  which forces dropdown text to WHITE regardless of what a plain
  ".nova-dropdown-panel" class (0,1,0) declares — against this panel's
  own white background, that's invisible text, which is what "ugly"
  actually was. A single-class selector structurally cannot outrank a
  3-class one, and matching Cassiopeia's own class names to compete on
  specificity would just couple this plugin to Cassiopeia internals
  (worse, not better). So: every property below that Cassiopeia's CSS
  also touches gets !important, applied consistently rather than
  patched one bug report at a time.
*/
.nova-dropdown-panel {
  position: absolute !important;
  top: var(--nova-dropdown-top, calc(100% + 12px)) !important;
  left: 0 !important;
  z-index: 1002 !important;
  min-width: 220px !important;
  margin: 0 !important;
  /* Extra top padding (14px vs 10px elsewhere) makes room for the
     4px "Gradient Edge" stripe added just below, so the first row
     doesn't sit flush against it. */
  padding: 14px 10px 10px !important;
  list-style: none !important;

  /* "Cloud Wash": a soft gradient tint of the hero's own cloud colors
     instead of flat white. Two declarations on purpose — the first
     (solid paper color) is the fallback for browsers without
     color-mix() support; they'll simply never parse the second line
     and keep this one. Browsers that do support it get the wash. */
  background:
    linear-gradient(var(--color-paper, #FFFFFF), var(--color-paper, #FFFFFF)) padding-box,
    linear-gradient(90deg, var(--nova-cloud-1), var(--nova-cloud-2), var(--nova-cloud-3)) border-box !important;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--nova-cloud-1) 22%, var(--color-paper, #FFFFFF)),
      color-mix(in srgb, var(--nova-cloud-3) 18%, var(--color-paper, #FFFFFF))
    ) padding-box,
    linear-gradient(90deg, var(--nova-cloud-1), var(--nova-cloud-2), var(--nova-cloud-3)) border-box !important;
  color: var(--color-ink, #18151C) !important;
  border: 1px solid transparent !important;
  border-top-width: 4px !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: var(--shadow-card-hover, 0 20px 44px -10px rgba(24, 21, 28, 0.24)) !important;

  display: flex !important;
  flex-direction: column;
  gap: 2px;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear 220ms;
}

/*
  "Gradient Edge", layered on top of the Cloud Wash background: a thin
  stripe across the panel's top, cycling through the same three cloud
  colors — a small signature detail rather than a second full color
  change. Sized/rounded to match the panel's own top corners exactly,
  and positioned via the panel's own padding-box (top:0/left:0/right:0)
  rather than relying on overflow:hidden on the panel — overflow:hidden
  here would also clip any open nested flyout panel, which visually
  extends outside this element's own box on purpose.
*/
.nova-dropdown-panel::before {
  content: none;
}

/*
  Tiered/nested flyout: a dropdown panel that lives INSIDE another open
  panel (an item like "Tamagotchi Guides" that itself has children)
  opens to the side of its own trigger row instead of below the whole
  menu — the standard nested-submenu pattern. novamenu.js adds
  .nova-flyout-left at open time if the panel would otherwise overflow
  the right edge of the viewport.
*/
.nova-dropdown-panel--flyout {
  top: -10px !important; /* aligns with the flyout panel's own padding, not the trigger row */
  left: calc(100% + 10px) !important;
  transform: translateX(-8px) !important;
}
.nova-dropdown-panel--flyout.nova-flyout-left {
  left: auto !important;
  right: calc(100% + 10px) !important;
  transform: translateX(8px) !important;
}
.nova-has-dropdown--flyout.is-open > .nova-dropdown-panel--flyout {
  transform: translateX(0) !important;
}

.nova-has-dropdown.is-open > .nova-dropdown-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear 0s;
}

/* animation style variants, set as a data attribute on <html> by novamenu.js */
html[data-nova-menu-animation="fade-only"] .nova-dropdown-panel {
  transform: none;
}
html[data-nova-menu-animation="none"] .nova-dropdown-panel,
html[data-nova-menu-animation="none"] .nova-has-dropdown.is-open > .nova-dropdown-panel {
  transition: none;
  transform: none;
}

.nova-dropdown-panel li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
  Includes plain "> li > span" too, not just "> li > a": a menu item
  with no link of its own AND no children yet (e.g. a parent item
  that's been created but not populated) renders as a bare, unstyled
  <span> here — still hit by Cassiopeia's white-text rule, and with
  no .nova-menu-trigger/.nova-dropdown-column class to catch it via
  the other rules below. This is more specific than the column-header
  rule further down (2 classes vs. 2 bare elements) isn't true by
  specificity, but it comes first in source and !important elsewhere
  in this file already establishes that a later, more specific rule
  is what actually decides column headers, so this stays a safe catch-all.
*/
.nova-dropdown-panel > li > a,
.nova-dropdown-panel > li > span,
.nova-dropdown-panel .nova-dropdown-column-list > li > a,
.nova-dropdown-panel .nova-dropdown-column-list > li > span {
  position: relative !important;
  display: block !important;
  padding: 7px 10px !important;
  margin: 0 -10px !important;
  border-radius: 8px !important;
  /* !important: Cassiopeia forces dropdown link/span text to white
     (".mod-menu__sub a, .mod-menu__sub span { color: #fff }") — see
     the note above .nova-dropdown-panel. Without this, links are
     invisible against this panel's white background. */
  color: var(--color-ink-soft, #4E4854) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  transition: background 150ms ease, color 150ms ease;
}

/* Translucent white, not the flat --color-paper-soft — the row should
   still let the cloud wash tint show faintly through it on hover
   ("lifting" off the panel), rather than covering it with a flat
   opaque color. */
.nova-dropdown-panel > li > a:hover,
.nova-dropdown-panel > li > a:focus-visible,
.nova-dropdown-panel .nova-dropdown-column-list > li > a:hover,
.nova-dropdown-panel .nova-dropdown-column-list > li > a:focus-visible {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--color-ink, #18151C) !important;
  text-decoration: none !important;
}

/* Same lift treatment on a flyout trigger's own row, scoped to the
   <li> (not just the label) so the whole row highlights, matching
   the leaf-link rows above. Padding/margin/width are in the BASE
   rule, not just :hover/.is-open — only background changes on
   interaction, so the row doesn't visibly shift size when it lifts. */
.nova-dropdown-panel .nova-has-dropdown {
  border-radius: 8px !important;
  margin: 0 -10px !important;
  padding: 7px 10px !important;
  width: calc(100% + 20px) !important;
  background: transparent;
  transition: background 150ms ease;
}
.nova-dropdown-panel .nova-has-dropdown:hover,
.nova-dropdown-panel .nova-has-dropdown.is-open {
  background: rgba(255, 255, 255, 0.7) !important;
}

/*
  Same animated underline the top-level nav uses on hover/active (a
  small accent bar that scales in from center) — added here to every
  row INSIDE a dropdown/flyout panel: leaf links, flyout triggers, and
  column headers. Deliberately scoped with the ".nova-dropdown-panel "
  ancestor prefix everywhere below so this never touches the top-level
  nav trigger itself — that element already has its own hover/active
  underline from the site's own template CSS, and since a single
  element can only have one ::after, this must not compete with it.
*/
.nova-dropdown-panel .nova-has-dropdown > .nova-menu-trigger,
.nova-dropdown-panel > li > a,
.nova-dropdown-panel .nova-dropdown-column-list > li > a {
  position: relative;
}
.nova-dropdown-panel .nova-has-dropdown > .nova-menu-trigger::after,
.nova-dropdown-panel > li > a::after,
.nova-dropdown-panel .nova-dropdown-column-list > li > a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 2px;
  background: var(--nova-menu-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
  pointer-events: none;
}
.nova-dropdown-panel > li > a:hover::after,
.nova-dropdown-panel > li > a:focus-visible::after,
.nova-dropdown-panel .nova-dropdown-column-list > li > a:hover::after,
.nova-dropdown-panel .nova-dropdown-column-list > li > a:focus-visible::after,
.nova-dropdown-panel .nova-has-dropdown:hover > .nova-menu-trigger::after,
.nova-dropdown-panel .nova-has-dropdown.is-open > .nova-menu-trigger::after {
  transform: scaleX(1);
}
/* The trigger's own underline spans exactly the label text's own
   width, not the whole flex row (which would run underneath — and
   past — the chevron too). This only works because the trigger isn't
   flex-stretched to fill the row above (see the .nova-has-dropdown
   comment) — it's sized to its content, so "100%" here means "the
   width of the title," not "the width of the row." */
.nova-dropdown-panel .nova-has-dropdown > .nova-menu-trigger::after {
  left: 0;
  right: 0;
}

/* column grouping — a dropdown item that itself has children becomes a
   column header instead of a clickable row */
.nova-dropdown-column {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}

.nova-dropdown-column > .nova-menu-trigger {
  display: block !important;
  padding: 0 10px 6px !important;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border, #ECE7F2);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nova-menu-accent) !important;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none !important;
}

.nova-dropdown-column-list {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
}

/* focus ring, consistent with the rest of the Nova template */
.nova-has-dropdown > .nova-menu-trigger:focus-visible,
.nova-dropdown-panel a:focus-visible {
  outline: 2px solid var(--nova-menu-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* html.nova-menu-force-motion is set by novamenu.js only when the
     "Respect reduced motion" plugin param is turned off. !important
     needed here too — the flyout rules below set their own !important
     transforms for the slide-in-from-the-side motion, which would
     otherwise keep animating regardless of this reduced-motion rule. */
  html:not(.nova-menu-force-motion) .nova-dropdown-panel {
    transition: opacity 1ms linear, visibility 0s linear 0s !important;
    transform: none !important;
  }
}

/* Below this breakpoint, dropdowns become static in-flow stacked
   lists opened by tap, not floating hover panels. Kept in sync with
   the "Mobile breakpoint" plugin param's default (992px) — if you
   change that param, update this value too so the visuals match the
   new interaction threshold (see the bundled README). */
@media (max-width: 991px) {
  /*
    !important here too, matching the desktop rule above — a plain
    (non-!important) declaration in a media query CANNOT override an
    !important one from outside it, regardless of source order, so
    every property the desktop .nova-dropdown-panel rule marked
    !important has to be re-declared !important here as well or the
    desktop values leak through onto mobile.
  */
  .nova-dropdown-panel {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid var(--color-border, #ECE7F2) !important;
    border-radius: 0 !important;
    margin: 10px 0 0 !important;
    padding: 10px 0 4px 16px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nova-has-dropdown.is-open > .nova-dropdown-panel {
    display: flex !important;
  }

  /* The Gradient Edge stripe is a desktop-panel detail — the mobile
     layout already has its own border-top divider (above) doing that
     job, and a rounded stripe would look odd against these square,
     full-width stacked panels. */
  .nova-dropdown-panel::before {
    display: none !important;
  }

  /* A nested flyout has no "side" to fly out to once menus stack full-width
     on mobile — it becomes just another indented stacked level, same as
     everything else in this block. The indentation compounds naturally
     since each nested .nova-dropdown-panel carries its own left padding. */
  .nova-dropdown-panel--flyout,
  .nova-dropdown-panel--flyout.nova-flyout-left {
    left: auto !important;
    right: auto !important;
  }

  .nova-dropdown-column > .nova-menu-trigger {
    padding-left: 0 !important;
  }
}