/* ==========================================================================
   Mouldshop mega-menu — RIGHT-HAND ASIDE COLUMN (operator instruction, 2026-09-24)

   Operator, with a crop marking the line: "we need to add column - more less like
   on image - or we can try 1/3 width - colour bg same as left sidebar on megamenu".
   The crop's line sits at ~1235 of a 1700 viewport, i.e. ~32% of the space right
   of the 256px sidebar, so the column takes ONE THIRD of that space and the items
   panel keeps two thirds.

   CONTENT added the same day (icon, divider, description) - see the block at the
   end of this file and mouldshop-megamenu-aside.js.

   A NEW FILE, not an edit to the ported bundle (mouldshop-navbar-base.css) or to
   the identity layer (mouldshop-navbar.css). The one bundle rule it changes is
   `.mega-menu__items { flex: 1 }`, restated here as 2 so the 2:1 split holds.

   GROUND: the exact expression the bundle uses for the left sidebar
   (`#megaMenu .mega-menu__subcategories`), so the two always match, including
   under the identity layer's token redefinitions. Border mirrors the sidebar's.

   Desktop only: below the bundle's mobile breakpoint `.mega-menu__columns` is
   display:none, and this column goes with it.
   ========================================================================== */
#megaMenu .mega-menu__items {
  flex: 2 1 0;
  min-width: 0;
}
#megaMenu .ms-mm-aside {
  flex: 1 1 0;
  min-width: 0;
  background: color-mix(in oklab, var(--color-nicknavyblue-80) 50%, transparent);
  border-left: 1px solid var(--mouldshop-mega-border);
}

/* --------------------------------------------------------------------------
   CONTENT (operator, 2026-09-24): "square icon of this section on top of this
   block, width more or less 50% of this block, then divider below and
   description of this section". Filled by mouldshop-megamenu-aside.js.
   Padding matches the items panel (24 / 32), so the aside's content starts
   level with the section title beside it.
   -------------------------------------------------------------------------- */
#megaMenu .ms-mm-aside {
  padding: var(--spacing-24, 24px) var(--spacing-32, 32px);
}
/* The square: TWO THIRDS of the column's content width, centred, grey (operator,
   2026-09-24 revision: "2/3 of block width - centered grey - vector animation ease in
   out"). Grey is the menu's own grey token, the same one the description uses.

   STROKE: in USER units, not non-scaling. The draw-on animation uses pathLength=1
   (set by the JS), and a dash in user units is what pathLength normalises. At 2/3 of
   the column the tile is ~170-270px for a 24-unit viewBox, so 0.2 units is ~1.4-2.2px.

   DRAW-ON: each section change builds a fresh <svg>, so the animation restarts by
   construction. dasharray 1 / offset 1 hides the whole stroke; animating the offset to
   0 draws it, ease-in-out. Reduced motion: shown at once, no animation. */
#megaMenu .ms-mm-aside__icon {
  width: calc(100% * 2 / 3);
  margin-inline: auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* LIGHTER GREY (operator, 2026-09-24: "more lighter grey"): halfway from the menu grey to
     the menu line grey, both existing tokens. */
  color: color-mix(in oklab, var(--color-nickgrey-100) 50%, var(--ms-grey-20));
}
#megaMenu .ms-mm-aside__icon[hidden] { display: none; }
#megaMenu .ms-mm-aside__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* FALLBACK — the MenuIconKey sprite line icon: the stroke draws on. */
#megaMenu .ms-mm-aside-ico--sprite [pathLength] {
  stroke-width: 0.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ms-mm-draw 1.2s ease-in-out forwards;
}

/* PRIMARY — the group's icon FILE (operator, 2026-09-24: the category grid's icons).
   The files are FILLED outlines, not strokes, so "draw" is two beats, both ease-in-out:
     1. the dark shape's OUTLINE traces on (stroke dash, pathLength=1, width = the cropped
        box side / 140, from --ms-mm-side set by the shared loader);
     2. its fill fades in while the tracing stroke fades out,
   and the light-blue "shadow" layer fades in last, as a paler grey.
   Colours are the icon grey (currentColor, set on .ms-mm-aside__icon) and the menu's
   line grey — the files' own #0a2979 / #c4e0f2 never apply here. */
#megaMenu .ms-mm-aside-ico--file .bon-svg-darkblue,
#megaMenu .ms-mm-aside-ico--file [pathLength]:not(.bon-svg-lightblue) {
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: calc(var(--ms-mm-side, 70) / 140);
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    ms-mm-draw 1.2s ease-in-out forwards,
    ms-mm-fill 0.6s ease-in-out 0.9s forwards;
}
#megaMenu .ms-mm-aside-ico--file .bon-svg-lightblue {
  fill: var(--ms-grey-20);
  stroke: none;
  opacity: 0;
  animation: ms-mm-fade 0.6s ease-in-out 1.1s forwards;
}
@keyframes ms-mm-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ms-mm-fill {
  to { fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes ms-mm-fade {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #megaMenu .ms-mm-aside__icon svg [pathLength] {
    animation: none;
    stroke-dashoffset: 0;
  }
  #megaMenu .ms-mm-aside-ico--file .bon-svg-darkblue,
  #megaMenu .ms-mm-aside-ico--file [pathLength]:not(.bon-svg-lightblue) {
    fill-opacity: 1;
    stroke-opacity: 0;
  }
  #megaMenu .ms-mm-aside-ico--file .bon-svg-lightblue {
    animation: none;
    opacity: 1;
  }
}
/* The divider: the menu's own line (same token as the items header's rule). */
#megaMenu .ms-mm-aside__rule {
  margin: var(--spacing-24, 24px) 0;
  border: 0;
  border-top: 1px solid var(--mouldshop-mega-border);
  opacity: 1;
}
/* The description: the items panel's subtitle type, so the two columns read as one menu. */
#megaMenu .ms-mm-aside__text {
  margin: 0;
  color: var(--color-nickgrey-100);
  font-size: 14px;
  line-height: 1.5;
}