/**
 * ASR Mega Menu: desktop panel (≥1000px). Shared tokens for the drawer too.
 * Colours follow the Blocksy palette; fallbacks only apply outside Blocksy.
 */

.asrmm,
.asrmm-d {
  --asrmm-accent: var(--theme-palette-color-1, #1f4d2b);
  --asrmm-tint: #eef4f0;
  --asrmm-tint: color-mix(in srgb, var(--asrmm-accent) 10%, transparent);
  --asrmm-heading: var(--theme-headings-color, #192a3d);
  --asrmm-text: var(--theme-text-color, #3a4f66);
  --asrmm-line: var(--theme-border-color, #e7ebee);
  --asrmm-bg: var(--theme-palette-color-8, #fff);
  --asrmm-img-bg: #f4f5f7;
}

.asrmm[hidden] {
  display: none !important;
}
.asrmm ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.asrmm a {
  text-decoration: none;
}

/* Placeholder when a category has no image */
.asrmm-ph {
  display: grid;
  place-items: center;
  background: var(--asrmm-tint);
  color: var(--asrmm-accent);
  font-weight: 700;
}
.asrmm-count {
  margin-inline-start: 6px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.6;
}
/* Chevron pointing to the inline end (flips in RTL) */
.asrmm-chev {
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-start: auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: 0.5;
}
[dir="rtl"] .asrmm-chev {
  rotate: -135deg;
}

/* ---------- Panel (moved to <body> by megamenu.js, placed under the header row) ---------- */
.asrmm {
  position: fixed;
  z-index: 9995;
  inset-inline: 0;
  top: var(--asrmm-top, 80px);
  opacity: 0;
  translate: 0 -6px;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease;
}
.asrmm.is-open {
  opacity: 1;
  translate: none;
  pointer-events: auto;
}

.asrmm__inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  inline-size: calc(100% - 48px);
  max-inline-size: var(--theme-normal-container-max-width, 1290px);
  max-block-size: calc(100vh - var(--asrmm-top, 80px) - 24px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--asrmm-line);
  border-radius: 16px;
  background: var(--asrmm-bg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

/* Tabs (start side) */
.asrmm__tabs {
  padding: 12px !important;
  overflow-y: auto;
  border-inline-end: 1px solid var(--asrmm-line);
}
.asrmm__tab a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--asrmm-heading);
  font-size: 15px;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
}
.asrmm__tab.is-active a,
.asrmm__tab a:focus-visible {
  background: var(--asrmm-tint);
  color: var(--asrmm-accent);
  font-weight: 600;
}
.asrmm__tab a:focus-visible {
  outline: 2px solid var(--asrmm-accent);
  outline-offset: -2px;
}

/* Panes (end side) */
.asrmm__panes {
  padding: 22px 26px 26px;
  overflow-y: auto;
}
.asrmm__pane[hidden] {
  display: none;
}
.asrmm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 18px;
}
.asrmm__title {
  color: var(--asrmm-heading);
  font-size: 19px;
  font-weight: 700;
}
.asrmm__all {
  color: var(--asrmm-accent);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.asrmm__all:hover {
  text-decoration: underline;
}

.asrmm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
}
.asrmm__card-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--asrmm-heading);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.asrmm__card-img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--asrmm-img-bg);
  object-fit: cover;
  font-size: 28px;
  transition: transform 0.2s ease;
}
.asrmm__card-link:hover .asrmm__card-img {
  transform: scale(1.03);
}
.asrmm__card-link:hover .asrmm__card-name {
  color: var(--asrmm-accent);
}
.asrmm__subs {
  margin-block-start: 6px !important;
  text-align: center;
}
.asrmm__subs a {
  display: block;
  padding-block: 2px;
  color: var(--asrmm-text);
  font-size: 13px;
}
.asrmm__subs a:hover {
  color: var(--asrmm-accent);
}

/* Category without sub-categories */
.asrmm__solo {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--asrmm-heading);
}
.asrmm__solo-img {
  flex: 0 0 auto;
  inline-size: 220px;
  block-size: 220px;
  border-radius: 14px;
  background: var(--asrmm-img-bg);
  object-fit: cover;
  font-size: 48px;
}
.asrmm__solo-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}
.asrmm__solo-text strong {
  font-size: 20px;
}
.asrmm__cta {
  margin-block-start: 8px;
  color: var(--asrmm-accent);
  font-weight: 700;
}
.asrmm__solo:hover .asrmm__cta {
  text-decoration: underline;
}

/* The trigger item while its panel is open */
.menu-item.asrmm-active > .ct-menu-link {
  color: var(--theme-link-hover-color, var(--asrmm-accent));
}

@media (max-width: 999.98px) {
  .asrmm {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .asrmm,
  .asrmm__tab a,
  .asrmm__card-img {
    transition: none;
  }
}