/* ==========================================================================
   NYV Mega Menu — nyv-mm-* namespace. Theme-portable, no theme-class deps.

   COLOURS ARE INHERITED FROM THE ACTIVE THEME. The menu ships with no palette
   of its own — accent, text, surface and borders adopt each site's colours and
   follow its light/dark mode. Each token chains:
     theme token -> WordPress theme.json preset -> neutral fallback (derived
     from the surrounding text colour via color-mix, never a fixed hue).
   Override any --nyv-mm-* property in a theme to force a specific look.
   ========================================================================== */
:root{
  --nyv-mm-accent:
      var(--theme-link-hover-color,
      var(--theme-palette-color-1,
      var(--wp--preset--color--primary, currentColor)));
  --nyv-mm-bg:
      var(--theme-content-background,
      var(--wp--preset--color--base, Canvas));
  --nyv-mm-text:
      var(--theme-text-color,
      var(--wp--preset--color--contrast, currentColor));
  --nyv-mm-text-muted: color-mix(in srgb, currentColor 62%, transparent);
  --nyv-mm-bg-hover:   color-mix(in srgb, currentColor 7%, transparent);
  --nyv-mm-border:     color-mix(in srgb, currentColor 16%, transparent);
  --nyv-mm-heading-border: color-mix(in srgb, var(--nyv-mm-accent) 45%, transparent);
  --nyv-mm-accent-contrast:
      var(--theme-button-text-initial-color,
      var(--wp--preset--color--base, #fff));

  --nyv-mm-panel-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.07);
  --nyv-mm-radius: 10px;
  --nyv-mm-pad: 20px;
  --nyv-mm-width-md: 560px;
  --nyv-mm-cols: 4;
  --nyv-mm-gap: 8px 26px;
  --nyv-mm-t: .16s ease;
  --nyv-mm-z: 9999;
  --nyv-mm-fs: .95em;          /* em: scales with the theme menu size */
  --nyv-mm-img: 40px;
}

/* Placeholder trigger (if any raw item remains) */
.nyv-mm-placeholder>a{pointer-events:none;cursor:default}

/* Top-level item = positioning context. We do NOT restyle the theme's own top
   link (display/spacing) so the theme's menu-bar layout is left intact. */
.nyv-mm-top-level{position:relative}

/* Category-heavy bars: let the menu list that holds our items wrap onto extra
   rows and grow to fit, instead of clipping a second row. Scoped with :has() so
   only the menu that actually contains the mega-menu is affected. If a theme
   still clips (a fixed height on an outer header wrapper), give that wrapper
   height:auto in the theme's CSS. */
ul:has(> .nyv-mm-top-level){
  flex-wrap:wrap!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  overflow:visible!important;
  row-gap:4px}

/* Dropdown caret — appended inline so it never changes the theme link's box. */
.nyv-mm-top-level.nyv-mm-has-children>a::after,
.nyv-mm-caret{
  content:"";display:inline-block;vertical-align:middle;margin-left:.35em;
  width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform var(--nyv-mm-t)}
.nyv-mm-top-level.nyv-mm-open>a::after,
.nyv-mm-top-level.nyv-mm-open>.nyv-mm-toplink>.nyv-mm-caret{transform:rotate(-135deg)}
@media (hover:hover) and (pointer:fine){
  .nyv-mm-top-level:hover>a::after,
  .nyv-mm-top-level:hover>.nyv-mm-toplink>.nyv-mm-caret{transform:rotate(-135deg)}
}

/* ---------------------------------------------------------------- Panel
   Panels open aligned under their trigger (left:0). JS then clamps each panel
   inside the viewport on open, so it never spills off the right edge no matter
   where the trigger sits. Width and height are also capped to the viewport as a
   no-JS safety net. */
.nyv-mm-panel{
  position:absolute;top:calc(100% + 2px);left:0;z-index:var(--nyv-mm-z);
  min-width:230px;max-width:calc(100vw - 32px);box-sizing:border-box;
  max-height:min(80vh,720px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--nyv-mm-bg);color:var(--nyv-mm-text);
  border:1px solid var(--nyv-mm-border);border-radius:var(--nyv-mm-radius);
  box-shadow:var(--nyv-mm-panel-shadow);
  opacity:0;visibility:hidden;
  transition:opacity var(--nyv-mm-t),visibility 0s var(--nyv-mm-t)}
.nyv-mm-panel-inner{padding:var(--nyv-mm-pad)}

.nyv-mm-size-small>.nyv-mm-panel{width:auto;min-width:200px;max-width:min(320px,calc(100vw - 32px))}
.nyv-mm-size-medium>.nyv-mm-panel{width:min(var(--nyv-mm-width-md),calc(100vw - 32px))}
.nyv-mm-size-large>.nyv-mm-panel{width:min(1080px,calc(100vw - 32px))}

/* open states (CSS shows; JS positions) */
@media (hover:hover) and (pointer:fine){
  .nyv-mm-top-level:hover>.nyv-mm-panel,
  .nyv-mm-top-level:focus-within>.nyv-mm-panel{opacity:1;visibility:visible;transition:opacity var(--nyv-mm-t)}
}
.nyv-mm-top-level.nyv-mm-open>.nyv-mm-panel{opacity:1;visibility:visible;transition:opacity var(--nyv-mm-t)}

/* ---------------------------------------------------------------- Columns
   Masonry-style multi-column flow (not grid): category blocks pack down each
   column and wrap to the next, so a tall block never forces blank space beside
   short ones. break-inside keeps each category whole. */
.nyv-mm-columns{list-style:none;margin:0;padding:0;column-count:var(--nyv-mm-cols);column-gap:26px}
.nyv-mm-size-medium .nyv-mm-columns{column-count:2}
.nyv-mm-col{min-width:0;display:inline-block;width:100%;margin:0 0 16px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}

.nyv-mm-colhead{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding-bottom:7px;margin-bottom:7px;border-bottom:2px solid var(--nyv-mm-heading-border)}
.nyv-mm-thumb{flex:none;width:var(--nyv-mm-img);height:var(--nyv-mm-img);border-radius:8px;overflow:hidden;
  background:var(--nyv-mm-bg-hover);display:grid;place-items:center}
.nyv-mm-image{width:100%;height:100%;object-fit:cover;display:block}
.nyv-mm-ctwrap{min-width:0}
.nyv-mm-ct{display:block;font-weight:600;font-size:.92em;color:var(--nyv-mm-text);line-height:1.2}
.nyv-mm-cc{display:block;font-size:.74em;color:var(--nyv-mm-text-muted);margin-top:1px}
.nyv-mm-colhead:hover .nyv-mm-ct{color:var(--nyv-mm-accent)}

/* ---------------------------------------------------------------- Lists */
.nyv-mm-sublist,.nyv-mm-simple{list-style:none;margin:0;padding:0}
.nyv-mm-simple>.nyv-mm-subitem+.nyv-mm-subitem{margin-top:1px}
.nyv-mm-link{display:flex;align-items:center;gap:6px;text-decoration:none;line-height:1.4;transition:color var(--nyv-mm-t)}
.nyv-mm-sublist .nyv-mm-link,.nyv-mm-simple .nyv-mm-link{color:var(--nyv-mm-text-muted);font-size:var(--nyv-mm-fs);padding:3px 0}
.nyv-mm-link:hover{color:var(--nyv-mm-accent)}
.nyv-mm-label{min-width:0}
/* nested depth indents (unlimited) */
.nyv-mm-sublist .nyv-mm-sublist{margin-left:12px;border-left:1px solid var(--nyv-mm-border);padding-left:8px}
.nyv-mm-sublist .nyv-mm-sublist .nyv-mm-link{font-size:.9em}

/* ---------------------------------------------------------------- Footer */
.nyv-mm-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--nyv-mm-border)}
.nyv-mm-viewall{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;font-size:var(--nyv-mm-fs);color:var(--nyv-mm-accent)}
.nyv-mm-arrow{width:.5em;height:.5em;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform var(--nyv-mm-t)}
.nyv-mm-viewall:hover .nyv-mm-arrow{transform:translateX(2px) rotate(45deg)}

/* ---------------------------------------------------------------- Standalone shortcode */
.nyv-mm-standalone{position:relative}
.nyv-mm-root{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.nyv-mm-toplink{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:var(--nyv-mm-fs);
  color:var(--nyv-mm-text);text-decoration:none;background:var(--nyv-mm-bg-hover);
  border:1px solid var(--nyv-mm-border);border-radius:8px;cursor:pointer;transition:background var(--nyv-mm-t),color var(--nyv-mm-t)}
.nyv-mm-standalone .nyv-mm-top-level:hover>.nyv-mm-toplink,
.nyv-mm-standalone .nyv-mm-top-level.nyv-mm-open>.nyv-mm-toplink{background:var(--nyv-mm-accent);color:var(--nyv-mm-accent-contrast);border-color:var(--nyv-mm-accent)}

/* ---------------------------------------------------------------- Mobile / accordion (<=768px) */
@media (max-width:768px){
  .nyv-mm-panel{position:static;width:100%!important;max-width:none!important;min-width:0!important;left:0!important;right:auto!important;
    max-height:none!important;transform:none!important;opacity:1;visibility:hidden;box-shadow:none;border:0;border-top:1px solid var(--nyv-mm-border);border-radius:0;
    height:0;overflow:hidden;transition:none}
  .nyv-mm-top-level.nyv-mm-open>.nyv-mm-panel{visibility:visible;height:auto}
  .nyv-mm-panel-inner{padding:6px 0 6px 8px}
  .nyv-mm-columns,.nyv-mm-size-medium .nyv-mm-columns{column-count:1}
  .nyv-mm-col{display:block;margin:0;padding:2px 0}

  /* nested collapse: hide children until their row is opened */
  .nyv-mm-panel .nyv-mm-has-children>.nyv-mm-sublist{display:none}
  .nyv-mm-panel .nyv-mm-has-children.nyv-mm-open>.nyv-mm-sublist{display:block}

  /* tap targets + caret on nested rows */
  .nyv-mm-colhead,.nyv-mm-sublist .nyv-mm-link,.nyv-mm-simple .nyv-mm-link{padding:11px 8px;position:relative}
  .nyv-mm-panel .nyv-mm-subitem.nyv-mm-has-children>.nyv-mm-link::after,
  .nyv-mm-col.nyv-mm-has-children>.nyv-mm-colhead::after{
    content:"";position:absolute;right:10px;top:50%;width:.42em;height:.42em;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-65%) rotate(-45deg);opacity:.6;transition:transform var(--nyv-mm-t)}
  .nyv-mm-panel .nyv-mm-has-children.nyv-mm-open>.nyv-mm-colhead::after,
  .nyv-mm-panel .nyv-mm-has-children.nyv-mm-open>.nyv-mm-link::after{transform:translateY(-35%) rotate(45deg)}
  .nyv-mm-sublist .nyv-mm-sublist{margin-left:8px}
}

@media (prefers-reduced-motion:reduce){.nyv-mm-panel,.nyv-mm-link,.nyv-mm-arrow,[class*=nyv-mm-]::after{transition:none!important}}