/*
 * Catalog menu (Journal3 flyout_menu module, both the homepage rail and the header "Katalogas" dropdown) plus the
 * mobile category drill-down. Loaded on every page by journal3/event/header.php, behaviour lives in js/menu.js.
 *
 * Desktop: js/menu.js adds `.mm` to every `.flyout-menu` that renders as dropdowns. Levels 2 + 3 are shown together
 * in one panel (level 3 listed under its level-2 heading) instead of Journal's cascading flyouts, and the panel is
 * opened by `.mm-active` on the level-1 <li> (Journal's own `.open` is suppressed for these items by menu.js).
 * Mobile: `.accordion-menu` items with a nested category tree get `.mm-drilled`; their accordion is replaced by `.mm-drill`.
 *
 * The flyout module CSS is printed inline after this file with long selectors and !important, so desktop rules go
 * through `:not(#mm)` (adds id specificity) and repeat !important where Journal uses it.
 */

.flyout-menu.mm,
.mm-drill {
  --mm-accent: #2563eb;
  --mm-accent-hover: #1d4ed8;
  --mm-accent-soft: #eff6ff;
  --mm-accent-softer: #dbeafe;
  --mm-accent-ring: rgba(37, 99, 235, .18);
  --mm-text: #111827;
  --mm-text-soft: #374151;
  --mm-muted: #6b7280;
  --mm-border: #e5e7eb;
  --mm-surface: #fff;
  --mm-surface-soft: #f8fafc;
  --mm-chevron: #cbd5e1;
  --mm-radius: 14px;
  --mm-radius-sm: 10px;
  --mm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -16px rgba(15, 23, 42, .22);
}

/* ---------- Desktop: rail (level 1) ---------- */

html.desktop-header-active .grid-item.mm-host {
  flex: 1 1 auto;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) {
  position: relative;
  width: 100%;
  max-width: none;
}

html.desktop-header-active .flyout-menu.mm.mm-home:not(#mm) {
  height: 100%;
}

/* header "Katalogas" dropdown: rail wide enough for "Kompiuterių komponentai" */
html.desktop-header-active .drop-menu > .j-dropdown:has(> .flyout-menu.mm) {
  width: auto;
  min-width: 0;
}

html.desktop-header-active .flyout-menu.mm.mm-drop:not(#mm) {
  width: 288px;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 6px;
  margin: 0;
  background: var(--mm-surface);
  border-radius: var(--mm-radius);
}

/* Journal's header dropdown .j-menu rules carry an id too (`:not(#search)`), hence !important */
html.desktop-header-active .flyout-menu.mm.mm-drop:not(#mm) > .j-menu {
  border: 1px solid var(--mm-border);
  border-radius: 0 0 var(--mm-radius) var(--mm-radius) !important;
  box-shadow: var(--mm-shadow) !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li {
  position: static !important;
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  margin: 0;
  border: 0 !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  max-width: none !important;
  padding: 7px 12px 7px 8px !important;
  border-radius: var(--mm-radius-sm);
  background: transparent !important;
  color: var(--mm-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: normal;
  transition: background-color .15s ease, color .15s ease;
}

/* icomoon glyph from the module settings, boxed */
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > a::before {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  border-radius: 9px;
  background: var(--mm-surface-soft);
  color: var(--mm-muted) !important;
  font-size: 18px !important;
  transition: background-color .15s ease, color .15s ease;
}

/* Journal styles the text span itself (colour, size), so it has to follow the link */
html.desktop-header-active .flyout-menu.mm:not(#mm) .links-text {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > a > .links-text {
  flex: 1 1 auto;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  text-decoration: none !important;
}

/* chevron */
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li.dropdown > a::after {
  content: "" !important;
  position: static !important;
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 4px 0 auto !important;
  border: solid var(--mm-chevron);
  border-width: 2px 2px 0 0;
  /* style.min.css sets `.dropdown>a::after` border colours to transparent !important */
  border-top-color: var(--mm-chevron) !important;
  border-right-color: var(--mm-chevron) !important;
  opacity: 1 !important;
  transform: rotate(45deg);
  font-size: 0 !important;
  transition: border-color .15s ease, transform .15s ease;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > a .open-menu,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > a .count-badge {
  display: none !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > a:hover,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > a:focus-visible {
  background: var(--mm-surface-soft) !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li.mm-active > a {
  background: var(--mm-accent-soft) !important;
  color: var(--mm-accent) !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li.mm-active > a::before {
  background: var(--mm-accent-softer);
  color: var(--mm-accent) !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li.mm-active > a::after {
  border-top-color: var(--mm-accent) !important;
  border-right-color: var(--mm-accent) !important;
  transform: translateX(2px) rotate(45deg);
}

html.desktop-header-active .flyout-menu.mm:not(#mm) a:focus-visible {
  outline: 2px solid var(--mm-accent);
  outline-offset: -2px;
}

/* ---------- Desktop: panel (levels 2 + 3) ---------- */

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown {
  position: absolute !important;
  top: var(--mm-top, 0px) !important;
  left: 100% !important;
  right: auto !important;
  z-index: 1001;
  display: none !important;
  flex-direction: column;
  width: var(--mm-panel-w, 880px) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--mm-rail-h, 0px);
  max-height: var(--mm-max-h, 80vh);
  margin: 0 !important;
  padding: 22px 28px 24px !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mm-surface) !important;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow) !important;
  /* not !important: that would also beat the mm-in animation */
  opacity: 1;
  visibility: visible !important;
  transform: none;
  transition: none !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li.mm-active > .j-dropdown {
  display: flex !important;
  animation: mm-in .14s ease-out;
}

html.desktop-header-active .flyout-menu.mm.mm-switch:not(#mm) > .j-menu > li.mm-active > .j-dropdown {
  animation: none;
}

@keyframes mm-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li.mm-active > .j-dropdown {
    animation: none;
  }
}

html.desktop-header-active .flyout-menu.mm:not(#mm) .mm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--mm-border);
}

html.desktop-header-active .flyout-menu.mm:not(#mm) .mm-head .mm-title {
  color: var(--mm-text) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) .mm-head .mm-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--mm-accent) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) .mm-head .mm-all::after {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) .mm-head .mm-all:hover {
  color: var(--mm-accent-hover) !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) .mm-head .mm-all:hover::after {
  transform: translateX(2px) rotate(45deg);
}

/* level 2 list: balanced columns */
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu {
  display: block !important;
  columns: var(--mm-cols, 4);
  column-gap: 36px;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 2px;
  padding: 0;
  border: 0 !important;
  break-inside: avoid;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li.mm-group {
  padding: 4px 0 12px;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .j-menu > li > a {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 -10px;
  padding: 5px 10px !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--mm-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition: background-color .15s ease, color .15s ease;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .j-menu > li > a::before,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .j-menu > li > a::after,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .menu-image,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .open-menu,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .count-badge {
  display: none !important;
}

/* the module's text truncation (max-width, nowrap, ellipsis) and min-width:fit-content: names wrap instead */
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .links-text {
  display: inline !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .j-menu > li > a:hover,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown .j-menu > li > a:focus-visible {
  background: var(--mm-accent-soft) !important;
  color: var(--mm-accent) !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li.mm-group > a {
  font-weight: 700 !important;
}

/* level 3: always visible under its level-2 heading */
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li > .j-dropdown {
  position: static !important;
  float: none !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu {
  display: block !important;
  columns: auto !important;
  margin: 0 !important;
  padding: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  border-inline-start: 1px solid var(--mm-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  border: 0 !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a {
  margin: 0 -10px 0 0;
  padding: 4px 10px !important;
  color: var(--mm-text-soft) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}

html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a:hover,
html.desktop-header-active .flyout-menu.mm:not(#mm) > .j-menu > li > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a:focus-visible {
  color: var(--mm-accent) !important;
}

/* the panel header is desktop-only (the flyout turns into an accordion with the mobile header) */
html:not(.desktop-header-active) .flyout-menu .mm-head {
  display: none;
}

/* ---------- Mobile: category drill-down ---------- */

.accordion-menu li.mm-drilled > .collapse,
.accordion-menu li.mm-drilled > a .count-badge {
  display: none !important;
}

.mm-drill {
  position: relative;
  overflow: hidden;
  transition: height .22s ease;
}

.mm-drill-track {
  display: flex;
  align-items: flex-start;
  transition: transform .22s ease;
}

.mm-drill-screen {
  flex: 0 0 100%;
  min-width: 0;
  padding: 2px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mm-drill,
  .mm-drill-track {
    transition: none;
  }
}

.mm-drill .mm-back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--mm-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.mm-drill .mm-back::before {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(45deg);
}

.mm-drill .mm-drill-title {
  margin: 0 !important;
  padding: 2px 16px 8px;
  color: var(--mm-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.mm-drill .mm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--mm-border);
  background: none;
  color: var(--mm-text) !important;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mm-drill .mm-row > span {
  flex: 1 1 auto;
  min-width: 0;
}

.mm-drill .mm-row.mm-has-kids::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-inline-end: 4px;
  border: solid var(--mm-chevron);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.mm-drill .mm-row:active {
  background: var(--mm-surface-soft);
}

.mm-drill .mm-row.mm-row-all {
  color: var(--mm-accent) !important;
  font-weight: 600;
}

.mm-drill .mm-back:focus-visible,
.mm-drill .mm-row:focus-visible {
  outline: 2px solid var(--mm-accent);
  outline-offset: -2px;
}