/**
 * Mega Menu: Custom Property Overrides & Additional Styles
 *
 * Defines --cnvs-mega-menu-* design tokens and overrides base style.css
 * rules to use them, enabling Theme Options to customize mega menu appearance
 * via the Header > Mega Menu sub-tab.
 *
 * Loaded on all frontend pages via Header\Manager::enqueue_assets().
 *
 * @package Canvas
 * @since 1.0.0
 */

/* ─── Theme Options Tokens ─────────────────────────────────────────── */
/* Header > Mega Menu writes these custom properties onto #header. Every
   declaration falls back to the value style.css hard-codes for the same
   element, so an unset option renders exactly as the base stylesheet does
   and a set one takes effect without editing CSS. */
.is-expanded-menu .mega-menu-content {
  background-color: var(--cnvs-mega-menu-bg, var(--cnvs-primary-menu-submenu-bg));
  box-shadow: var(--cnvs-mega-menu-shadow, 0px 13px 42px 11px rgba(0, 0, 0, 0.05));
  border: var(--cnvs-mega-menu-border, var(--cnvs-primary-menu-submenu-border));
  /* The panel's top edge is its own option (Header > Menu > Submenu Border),
     so it is restated after the shorthand that would otherwise reset it. */
  border-top: var(--cnvs-primary-menu-submenu-top-border);
}

.is-expanded-menu .mega-menu-content:not(.border-0) .sub-menu-container.mega-menu-column:not(:first-child) {
  border-left: var(--cnvs-mega-menu-column-border, var(--cnvs-primary-menu-submenu-border));
}

.is-expanded-menu .mega-menu .mega-menu-style-2 .mega-menu-column {
  padding: var(--cnvs-mega-menu-column-padding, 1.75rem 1.5rem);
}

.is-expanded-menu .mega-menu-style-2 .mega-menu-title > .menu-link {
  --cnvs-primary-menu-submenu-tt: var(--cnvs-mega-menu-title-tt, uppercase);
  --cnvs-primary-menu-submenu-font-weight: var(--cnvs-mega-menu-title-font-weight, 700);
  --cnvs-primary-menu-submenu-hover-font-weight: var(--cnvs-mega-menu-title-font-weight, 700);
  font-size: var(--cnvs-mega-menu-title-font-size, calc(var(--cnvs-primary-menu-submenu-font-size) * 1.1));
  letter-spacing: var(--cnvs-mega-menu-title-ls, 1px);
  margin-bottom: var(--cnvs-mega-menu-title-spacing, 0.5rem);
  color: var(--cnvs-mega-menu-title-color, var(--cnvs-primary-menu-submenu-color));
}

.is-expanded-menu .mega-menu-style-2 .mega-menu-title > .menu-link:hover {
  color: var(--cnvs-mega-menu-title-hover-color, var(--cnvs-primary-menu-hover-color));
}

.is-expanded-menu .mega-menu-style-2 .sub-menu-container:not(.mega-menu-dropdown) .menu-link {
  --cnvs-primary-menu-submenu-padding-x: var(--cnvs-mega-menu-link-padding-x, 0.25rem);
  --cnvs-primary-menu-submenu-padding-y: var(--cnvs-mega-menu-link-padding-y, 0.5rem);
}

.is-expanded-menu .mega-menu-style-2 .sub-menu-container:not(.mega-menu-dropdown) .menu-item:not(.mega-menu-title):hover > .menu-link {
  --cnvs-primary-menu-submenu-hover-bg: var(--cnvs-mega-menu-link-hover-bg, rgba(var(--cnvs-contrast-rgb), 0.025));
  border-radius: var(--cnvs-mega-menu-link-hover-radius, 0.25rem);
}

/* ─── Menu Badge Positioning ───────────────────────────────────────── */
/* The badge always carries Bootstrap's .badge (WalkerNavMenu emits
   "badge canvas-menu-badge") which owns display:inline-block and
   color: var(--bs-badge-color) (#fff default), re-declaring color here
   would out-specify the token and break per-badge --bs-badge-color
   overrides. Only additive/override declarations live here. */
.menu-item .canvas-menu-badge {
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  --bs-badge-font-size: 0.625em;
}
/* ─── Side-Tab Rail ────────────────────────────────────────────────── */
/* The rail thumbnail, row and active row sizing for a mega menu whose
   columns are a vertical tab list. Scoped to `.mega-menu #side-tabs`, so
   nothing outside a side-tab panel is reached. */
.mega-menu #side-tabs .rounded-circle {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.mega-menu #side-tabs .list-group-item {
  color: #444;
  min-width: 250px;
}

.mega-menu #side-tabs .list-group-item.active {
  color: #FFF;
  background-color: var(--cnvs-themecolor);
  border-color: var(--cnvs-themecolor);
}

@media (min-width: 992px) {
  .sub-menu-container.menu-item-2 .menu-item > .menu-link {
    padding: 7px 15px;
    font-size: 1.25rem;
    text-transform: none;
    font-weight: 500;
    color: #444;
    background-color: transparent !important;
    text-decoration: underline !important;
  }
}

/* ─── Tab Strip ─────────────────────────────────────────────────────── */
/* The horizontal tab row a shop mega menu opens with. Scoped to
   `.menu-container #tab-shop`, so nothing outside that panel is reached. */
.menu-container #tab-shop {
  padding: 0 30px;
  background-color: #F9F9F9;
  border-bottom: 1px solid #EEE;
}

.menu-container #tab-shop .nav-link {
  color: #333;
  padding: 18px 25px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}

/* The tab strip is an underline tab row, not a pill: the framework's
   `[role="tablist"] a.active` fills the row with --cnvs-themecolor, which
   the theme-colour label would then sit on invisibly. */
.menu-container #tab-shop .nav-link.active {
  border-bottom: 2px solid var(--cnvs-themecolor);
  color: var(--cnvs-themecolor);
  background-color: transparent;
}

@media (max-width: 991.98px) {
  .menu-container #tab-shop .nav-link {
    padding: 15px;
  }
}