/**
 * ANS Media Mega Menu - mod_ans_megamenu
 *
 * (C) ANS Media. GNU General Public License version 2 or later.
 *
 * Design rules this file obeys, so the module can be dropped into an unknown template:
 *
 *   - Every custom property is namespaced --ansmm-* and declared on .ansmm, never on :root,
 *     so nothing leaks into the host site.
 *   - Colour and type are INHERITED by default. The panel surface falls back to the CSS
 *     system colours Canvas / CanvasText, which are automatically correct in a light
 *     template, a dark template and in Windows High Contrast, without this file knowing
 *     anything about the palette.
 *   - Anything a template might reasonably want to restyle is wrapped in :where() so it
 *     carries zero specificity and loses to any template rule. Structural layout rules use
 *     a single class. No element selectors at the top level, no !important except in the
 *     reduced-motion block, which must beat template overrides.
 *   - CSS selects classes. JavaScript selects data-ansmm-* attributes. Neither ever selects
 *     the other's hooks, so a template override can rename classes without breaking
 *     behaviour and the script cannot be broken by a designer.
 *   - Logical properties throughout, so RTL works without a second stylesheet.
 *   - No @import, no web font, no external URL of any kind.
 */

/* ============================================================================
   1. Tokens - the entire themeable surface of this module
   ========================================================================= */

.ansmm {
  /* Layout */
  --ansmm-gap: 1.5rem;
  --ansmm-panel-max: 1440px;
  --ansmm-panel-pad: 1.75rem;
  --ansmm-gutter: 1rem;
  --ansmm-radius: 3px;
  --ansmm-tracks: 12;
  --ansmm-nav-width: minmax(13rem, 20ch);

  /* Image sizes. --ansmm-image-lg is the square "Large picture" tile; the other two
     are the inline icon and thumbnail. All three are square so a mixed panel lines up. */
  --ansmm-image-lg: 180px;
  --ansmm-image-thumb: 44px;
  --ansmm-image-icon: 24px;

  /*
   * Colour - the ANS Media palette, taken from the site's own design:
   *   #153B2C  the deep green of the primary buttons
   *   #F0C48A  the sand the template's own dropdown panels use
   *   #FFAA00  the amber outlining the header nav items
   *   #22262A  body ink
   * Every one of these is a token: override them on .ansmm to retheme the whole module
   * without touching a single rule.
   */
  --ansmm-surface: #fcf7ee;
  --ansmm-ink: #22262a;
  --ansmm-muted: rgb(34 38 42 / 68%);
  --ansmm-rule: rgb(34 38 42 / 14%);
  --ansmm-hover: rgb(240 196 138 / 30%);
  --ansmm-accent: #153b2c;
  --ansmm-accent-ink: #fff;
  --ansmm-outline: #ffaa00;
  --ansmm-shadow: 0 0 8.8px rgb(0 0 0 / 10%);

  /* The open panel is outlined in the same amber as the bar items, so the two read as
     one control: the item you opened and the surface it opened. */
  --ansmm-panel-border: var(--ansmm-outline);
  --ansmm-panel-border-width: 1px;

  /* The bar sits on the template's light header, so it takes the header's own ink
     rather than inheriting a link colour meant for body copy. */
  --ansmm-bar-ink: #000;
  --ansmm-bar-bg: rgb(255 255 255 / 60%);
  --ansmm-bar-bg-hover: #fff;
  --ansmm-bar-border: var(--ansmm-outline);

  /* Focus */
  --ansmm-focus: var(--ansmm-accent);
  --ansmm-focus-width: 2px;
  --ansmm-focus-offset: 2px;

  /* Motion */
  --ansmm-dur: 160ms;
  --ansmm-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Type */
  --ansmm-fs-label: 1rem;
  --ansmm-fs-small: 0.8125rem;
  --ansmm-fs-title: 0.9375rem;

  /* Targets */
  --ansmm-tap: 44px;

  /* Computed at runtime by the script; a sane default for no-JS. */
  --ansmm-top: 100%;

  position: relative;
  font: inherit;
  color: inherit;
}

.ansmm,
.ansmm *,
.ansmm *::before,
.ansmm *::after {
  box-sizing: border-box;
}

/* ============================================================================
   2. Low-specificity resets, scoped to this module only
   ========================================================================= */

.ansmm :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ansmm :where(p) {
  margin: 0;
}

/*
 * Long unbroken strings - a German compound, a part number, a URL - must wrap rather
 * than widen their column. Without this a single long label pushes the panel wider than
 * the viewport, which is the other way a menu ends up with a horizontal scrollbar.
 */
.ansmm :where(a, p, span, li, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Every flex and grid child needs this or it refuses to shrink below its content. */
.ansmm :where(.ansmm__link-body, .ansmm__tab-body, .ansmm__card-body, .ansmm__promo-body) {
  min-inline-size: 0;
}

.ansmm :where(a) {
  color: inherit;
  text-decoration: none;
}

.ansmm :where(button) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.ansmm :where(img) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

.ansmm :where(hr) {
  margin: 0.5rem 0;
  border: 0;
  border-block-start: 1px solid var(--ansmm-rule);
}

/* Screen-reader-only text. Declared locally so the module does not depend on the
   template shipping Bootstrap's .visually-hidden. */
.ansmm .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================================
   3. Focus visibility - never removed, always replaced
   ========================================================================= */

.ansmm :where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--ansmm-focus-width) solid var(--ansmm-focus);
  outline-offset: var(--ansmm-focus-offset);
  border-radius: calc(var(--ansmm-radius) / 2);
}

@media (forced-colors: active) {
  .ansmm :where(a, button, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}

/* ============================================================================
   4. The bar
   ========================================================================= */

.ansmm__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.25rem;
}

.ansmm__top {
  position: relative;
  display: flex;
}

/*
 * The pill lives on the ROW, not on the link, so the disclosure chevron sits inside the
 * same outline as the label rather than floating beside it. The link and the toggle
 * stay separate controls - the link navigates, the button opens - they just share one
 * visible box.
 */
.ansmm__top-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--ansmm-bar-bg);
  border: 1px solid var(--ansmm-bar-border);
  border-radius: var(--ansmm-radius);
}

.ansmm__top-row:hover,
.ansmm__top.is-open > .ansmm__top-row {
  background: var(--ansmm-bar-bg-hover);
}

/*
 * The bar carries Joomla's .nav-link class so a template's own header styling reaches
 * it - but a template may colour .nav-link for body copy rather than for its header,
 * which on a light header can render the bar invisible. So the bar states its own ink
 * explicitly, from a token. This rule sits after the compatibility classes in source
 * order and matches their specificity, so it wins while staying trivially overridable.
 */
.ansmm__top-link,
.ansmm .ansmm__top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--ansmm-tap);
  padding-inline: 0.75rem;
  font-size: var(--ansmm-fs-label);
  white-space: nowrap;
  color: var(--ansmm-bar-ink);
  background: none;
  border: 0;
  border-radius: var(--ansmm-radius);
}

.ansmm__top-link:hover,
.ansmm .ansmm__top-link:hover {
  color: var(--ansmm-bar-ink);
  background: none;
}

/* An item with a panel keeps its label padding tight on the chevron side, so the pair
   reads as one unit instead of a label with a gap before the arrow. */
.ansmm__top--mega > .ansmm__top-row > .ansmm__top-link,
.ansmm__top--dropdown > .ansmm__top-row > .ansmm__top-link {
  padding-inline-end: 0.25rem;
}

.ansmm__toggle {
  color: var(--ansmm-bar-ink);
}

.ansmm__top.is-active > .ansmm__top-row > .ansmm__top-link,
.ansmm__top.is-parent-active > .ansmm__top-row > .ansmm__top-link {
  font-weight: 600;
}

.ansmm__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  min-block-size: var(--ansmm-tap);
  padding-inline-end: 0.25rem;
  border-radius: var(--ansmm-radius);
  touch-action: manipulation;
}

.ansmm__toggle:hover .ansmm__chev {
  opacity: 0.6;
}

.ansmm__chev,
.ansmm__arrow,
.ansmm__ico,
.ansmm__tab-chev {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  transition: rotate var(--ansmm-dur) var(--ansmm-ease);
}

.ansmm__toggle[aria-expanded='true'] .ansmm__chev {
  rotate: 180deg;
}

.ansmm__sep {
  display: block;
  inline-size: 1px;
  block-size: 1.25rem;
  margin: auto 0.5rem;
  background: var(--ansmm-rule);
}

/* ============================================================================
   5. The panel - placement
   ========================================================================= */

.ansmm__panel {
  position: absolute;
  inset-block-start: var(--ansmm-top);
  inset-inline-start: 0;
  z-index: var(--ansmm-z, 900);
  inline-size: max-content;
  /* 100vw includes the scrollbar; the doubled gutter absorbs it. */
  max-inline-size: calc(100vw - 2 * var(--ansmm-gutter));
  max-block-size: calc(100dvh - var(--ansmm-panel-top, 6rem) - var(--ansmm-gutter));
  /* Vertical scrolling only. overflow-x: clip rather than auto or hidden: a menu must
     never produce a horizontal scrollbar, and clip does not create a scroll container.
     The wrapping rules below mean there should be nothing to clip in the first place -
     this is the guarantee, not the mechanism. */
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--ansmm-surface);
  color: var(--ansmm-ink);
  border: var(--ansmm-panel-border-width) solid var(--ansmm-panel-border);
  border-radius: var(--ansmm-radius);
  box-shadow: var(--ansmm-shadow);
}

/*
 * A trigger-anchored dropdown is anchored to its item's TRAILING edge by default, so it
 * opens leftwards and can never push the page wider than it already is. The script then
 * measures and moves it under the item's leading edge whenever there is room - which is
 * the usual case, so the conventional look is what people see.
 *
 * Doing it in this order matters: the safe placement is the one that survives when the
 * script has not run yet, is switched off, or fails. A menu must never be the reason a
 * page grows a horizontal scrollbar.
 */
/*
 * A simple dropdown is a narrow column by nature, so the big square tile collapses to a
 * thumbnail inside one and the label goes back beside it. A 180px picture cannot fit a
 * 224px panel, and forcing it makes the content overflow its own box - which is how a
 * menu ends up clipping text or scrolling sideways.
 *
 * Mega panels are unaffected: they have the room, which is the whole point of them.
 */
.ansmm__panel--simple {
  --ansmm-image-lg: var(--ansmm-image-thumb);
  --ansmm-panel-pad: 0.75rem;
}

/*
 * A simple dropdown is one column, so it must NOT use the twelve-track canvas: eleven
 * 1.5rem gaps reserve 264px before a single track gets any width, which comfortably
 * overflows a 288px dropdown and makes it scroll sideways. One track, no gaps.
 */
.ansmm__panel--simple .ansmm__grid {
  grid-template-columns: 1fr;
  column-gap: 0;
}

.ansmm__panel--simple .ansmm__col {
  grid-column: 1 / -1;
}

.ansmm__panel--simple .ansmm__link--stacked,
.ansmm__panel--simple .ansmm__tab--stacked {
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.ansmm__panel--simple .ansmm__col-title--stacked .ansmm__col-link {
  flex-direction: row;
  align-items: center;
}

.ansmm__panel--trigger {
  /* A DEFINITE width, deliberately not max-content.
     With intrinsic sizing the panel asks its content how wide it wants to be, the grid
     inside is laid out at that answer, and capping the panel afterwards leaves the
     content overflowing the box it sits in - text gets clipped or the panel scrolls
     sideways. A definite width means everything inside lays out against a known figure
     and wraps to fit, which is the only way to guarantee neither happens. */
  inline-size: min(18rem, calc(100vw - 2 * var(--ansmm-gutter)));
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.ansmm__panel[data-ansmm-align='end'] {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Top-layer placement. Solves overflow clipping, transformed ancestors and z-index
   in one move: a popover paints above every stacking context. Browsers without
   support ignore the attribute and fall back to the absolute positioning above. */
@supports selector(:popover-open) {
  .ansmm__panel[popover] {
    margin: 0;
    padding: 0;
    border: 1px solid var(--ansmm-rule);
    background: var(--ansmm-surface);
    color: var(--ansmm-ink);
  }

  .ansmm__panel[popover]:not(:popover-open) {
    display: none;
  }

  .ansmm__panel[popover]:popover-open {
    position: fixed;
    inset: auto;
  }
}

/* Portal fallback: the script moves panels into a body-level layer when it finds a
   clipping or transformed ancestor and popover is unavailable. */
.ansmm-layer {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1000;
  inline-size: 100%;
}

.ansmm-layer .ansmm__panel {
  position: fixed;
}

/* ============================================================================
   6. The panel - the 12-track canvas
   ========================================================================= */

.ansmm__canvas {
  container-type: inline-size;
  container-name: ansmm-panel;
  padding: var(--ansmm-panel-pad);
}

.ansmm__grid {
  display: grid;
  grid-template-columns: repeat(var(--ansmm-tracks), minmax(0, 1fr));
  gap: var(--ansmm-gap);
  align-items: start;
}

/* --ansmm-span is written inline by the layout from the column's own mm_span. Every
   column carries min-inline-size:0, which is what stops a long product name from
   blowing the grid out - the classic CSS-grid footgun. */
.ansmm__col {
  grid-column: span clamp(1, var(--ansmm-span, 4), var(--ansmm-tracks));
  min-inline-size: 0;
}

/* "Columns per Row" mode: N equal tracks, one per column, Column Width ignored. */
.ansmm__grid--equal > .ansmm__col {
  grid-column: span 1;
}

.ansmm__col--divider {
  align-self: stretch;
}

.ansmm__col-title {
  margin-block-end: 0.5rem;
  font-size: var(--ansmm-fs-title);
  font-weight: 600;
  line-height: 1.3;
}

.ansmm__col-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* A column header's own Link Type image. Sized like an icon by default so a header
   stays a header; mm_image_style on the item widens it to thumb or cover. */
.ansmm__col-media,
.ansmm__top-media {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--ansmm-radius) / 2);
  vertical-align: middle;
}

.ansmm__col-media--icon,
.ansmm__top-media--icon {
  inline-size: var(--ansmm-image-icon);
  block-size: var(--ansmm-image-icon);
}

.ansmm__col-media--thumb,
.ansmm__top-media--thumb {
  inline-size: var(--ansmm-image-thumb);
  block-size: var(--ansmm-image-thumb);
}

.ansmm__col-media img,
.ansmm__top-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.ansmm__col-media--cover img,
.ansmm__top-media--cover img {
  object-fit: cover;
}

.ansmm__top-media {
  margin-inline-end: 0.5rem;
}

.ansmm__col-link:hover {
  text-decoration: underline;
}

.ansmm__col-intro,
.ansmm__panel-intro {
  margin-block-end: 0.75rem;
  font-size: var(--ansmm-fs-small);
  color: var(--ansmm-muted);
}

.ansmm__overview {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-end: 1rem;
  min-block-size: var(--ansmm-tap);
  font-weight: 600;
}

.ansmm__overview:hover {
  text-decoration: underline;
}

.ansmm__overview:hover .ansmm__arrow {
  translate: 0.2em 0;
}

.ansmm__arrow {
  transition: translate var(--ansmm-dur) var(--ansmm-ease);
}

/* ============================================================================
   7. Renderer - icon link list
   ========================================================================= */

.ansmm__links {
  display: grid;
  grid-template-columns: repeat(var(--ansmm-cols, 1), minmax(0, 1fr));
  gap: 0.125rem var(--ansmm-gap);
}

.ansmm__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: var(--ansmm-tap);
  padding: 0.375rem 0.5rem;
  border-radius: var(--ansmm-radius);
}

.ansmm__link:hover {
  background: var(--ansmm-hover);
}

.ansmm__link--static {
  color: var(--ansmm-muted);
  cursor: default;
}

.ansmm__link-media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--ansmm-radius) / 2);
}

.ansmm__link-media--icon {
  inline-size: var(--ansmm-image-icon);
  block-size: var(--ansmm-image-icon);
}

.ansmm__link-media--thumb {
  inline-size: var(--ansmm-image-thumb);
  block-size: var(--ansmm-image-thumb);
}

/*
 * "Large picture" (mm_image_style = cover) is the big square tile: the image sits ABOVE
 * the label rather than beside it, at --ansmm-image-lg square. The stacking is done by
 * a --stacked modifier the layout adds on the same condition, so it does not depend on
 * :has() support and a template override can restyle either half independently.
 */
/* The .ansmm prefix lifts these to 0,2,0 so they beat the per-renderer base sizes
   further down the file regardless of source order. inline-size is capped at 100% so a
   tile in a narrow column shrinks to fit instead of overflowing it, and aspect-ratio
   keeps it square at whatever width it lands on. */
.ansmm .ansmm__link-media--cover,
.ansmm .ansmm__tab-media--cover,
.ansmm .ansmm__col-media--cover,
.ansmm .ansmm__top-media--cover {
  inline-size: min(var(--ansmm-image-lg), 100%);
  block-size: auto;
  aspect-ratio: 1;
  background: var(--ansmm-hover);
  border-radius: var(--ansmm-radius);
}

.ansmm__link--stacked,
.ansmm__tab--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.ansmm__col-title--stacked .ansmm__col-link {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

/* A stacked tile is a block, so the chevron belongs back at the start, not pushed to
   a right edge that no longer exists. */
.ansmm__tab--stacked .ansmm__tab-chev {
  margin-inline-start: 0;
}

.ansmm__link-media img,
.ansmm__tab-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.ansmm__link-media--cover img,
.ansmm__tab-media--cover img {
  object-fit: cover;
}

.ansmm__link-glyph,
.ansmm__tab-glyph,
.ansmm__col-icon,
.ansmm__top-icon {
  flex: none;
  font-size: 1.125em;
  line-height: 1;
}

.ansmm__link-body,
.ansmm__tab-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

.ansmm__link-label,
.ansmm__tab-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--ansmm-fs-label);
}

.ansmm__link-teaser,
.ansmm__tab-teaser,
.ansmm__card-teaser {
  font-size: var(--ansmm-fs-small);
  line-height: 1.35;
  color: var(--ansmm-muted);
}

.ansmm__link-item.is-active > .ansmm__link,
.ansmm__tab.is-active {
  font-weight: 600;
  background: var(--ansmm-hover);
}

.ansmm__sublinks {
  display: flex;
  flex-direction: column;
  padding-inline-start: 2.625rem;
}

.ansmm__sublink {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 2rem;
  padding-inline: 0.5rem;
  font-size: var(--ansmm-fs-small);
  color: var(--ansmm-muted);
  border-radius: calc(var(--ansmm-radius) / 2);
}

.ansmm__sublink:hover {
  color: inherit;
  background: var(--ansmm-hover);
}

/* ============================================================================
   8. Renderer - big-picture cards and tiles
   ========================================================================= */

.ansmm__cards {
  display: grid;
  grid-template-columns: repeat(var(--ansmm-cols, 3), minmax(0, 1fr));
  gap: var(--ansmm-gap);
}

.ansmm__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  block-size: 100%;
  padding: 0.5rem;
  border-radius: var(--ansmm-radius);
}

.ansmm__card:hover {
  background: var(--ansmm-hover);
}

.ansmm__card-media {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--ansmm-radius) / 1.5);
  /* The box is reserved before the bytes arrive - no layout shift on first open. */
  aspect-ratio: var(--ansmm-card-ratio, 1);
  background: var(--ansmm-hover);
}

.ansmm__card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  transition: scale var(--ansmm-dur) var(--ansmm-ease);
}

.ansmm__card-media--cover img {
  object-fit: cover;
}

.ansmm__card:hover .ansmm__card-media img {
  scale: 1.03;
}

.ansmm__card-media--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.ansmm__cards--tiles {
  --ansmm-card-ratio: 1;
}

.ansmm__cards--tiles .ansmm__card {
  flex-direction: row;
  align-items: center;
}

.ansmm__cards--tiles .ansmm__card-media {
  flex: none;
  inline-size: 3.5rem;
}

.ansmm__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-inline-size: 0;
}

.ansmm__card-title {
  font-size: var(--ansmm-fs-title);
  font-weight: 600;
  line-height: 1.3;
}

.ansmm__card-links {
  display: flex;
  flex-direction: column;
  padding-block-start: 0.25rem;
  padding-inline-start: 0.5rem;
}

.ansmm__card-link {
  display: block;
  min-block-size: 2rem;
  padding-block: 0.25rem;
  font-size: var(--ansmm-fs-small);
  color: var(--ansmm-muted);
}

.ansmm__card-link:hover {
  color: inherit;
  text-decoration: underline;
}

/* ============================================================================
   9. Renderer - tabs with a category detail pane
   ========================================================================= */

.ansmm__tab {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: var(--ansmm-tap);
  padding: 0.5rem 0.625rem;
  border-radius: var(--ansmm-radius);
  touch-action: manipulation;
}

.ansmm__tab:hover {
  background: var(--ansmm-hover);
}

.ansmm__tab-media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--ansmm-image-thumb);
  block-size: var(--ansmm-image-thumb);
  overflow: hidden;
  border-radius: calc(var(--ansmm-radius) / 2);
}

.ansmm__tab-media--icon {
  inline-size: var(--ansmm-image-icon);
  block-size: var(--ansmm-image-icon);
}

.ansmm__tab-chev {
  margin-inline-start: auto;
  rotate: -90deg;
  opacity: 0.5;
}

.ansmm__detail {
  padding-block: 0.5rem;
  padding-inline-start: 2.875rem;
}

.ansmm__detail-title {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-end: 0.75rem;
  font-weight: 600;
}

.ansmm__detail-title:hover {
  text-decoration: underline;
}

/* No JS: every pane is shown. Taller, but complete and navigable - the menu never
   depends on JavaScript to be usable. */
.ansmm__detail {
  display: block;
}

/* JS present: exactly one pane at a time. The script sets [hidden]. */
.ansmm--js .ansmm__detail[hidden] {
  display: none;
}

/* ============================================================================
   10. Renderer - promo
   ========================================================================= */

.ansmm__promo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ansmm__promo-media {
  display: block;
  overflow: hidden;
  border-radius: var(--ansmm-radius);
  aspect-ratio: var(--ansmm-promo-ratio, 1);
  background: var(--ansmm-hover);
}

.ansmm__promo-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ansmm__promo-title {
  font-size: var(--ansmm-fs-title);
  font-weight: 600;
}

.ansmm__promo-text {
  font-size: var(--ansmm-fs-small);
  line-height: 1.4;
  color: var(--ansmm-muted);
}

.ansmm__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: var(--ansmm-tap);
  margin-block-start: 0.5rem;
  padding-inline: 1rem;
  font-size: var(--ansmm-fs-small);
  font-weight: 600;
  border-radius: var(--ansmm-radius);
}

.ansmm__btn--primary {
  color: var(--ansmm-accent-ink);
  background: var(--ansmm-accent);
}

.ansmm__btn--primary:hover {
  filter: brightness(1.08);
}

.ansmm__promo-links {
  display: flex;
  flex-direction: column;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--ansmm-rule);
}

.ansmm__promo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.25rem;
  font-size: var(--ansmm-fs-small);
}

.ansmm__promo-link:hover {
  text-decoration: underline;
}

/* ============================================================================
   11. Renderer - plain, badges, modules
   ========================================================================= */

.ansmm__plain {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ansmm__plain-link:hover {
  text-decoration: underline;
}

.ansmm__plain-teaser {
  display: block;
  font-size: var(--ansmm-fs-small);
  color: var(--ansmm-muted);
}

.ansmm__badge {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ansmm-accent-ink);
  background: var(--ansmm-accent);
  border-radius: 999px;
}

.ansmm__col-modules {
  margin-block-start: 1rem;
}

/* ============================================================================
   12. Burger, drawer shell, backdrop - mobile chrome
   ========================================================================= */

.ansmm__burger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--ansmm-tap);
  padding-inline: 0.75rem;
  border-radius: var(--ansmm-radius);
  touch-action: manipulation;
}

.ansmm__burger-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  inline-size: 1.25rem;
  block-size: 1rem;
}

.ansmm__burger-bar {
  display: block;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: translate var(--ansmm-dur) var(--ansmm-ease), rotate var(--ansmm-dur) var(--ansmm-ease), opacity var(--ansmm-dur) var(--ansmm-ease);
}

.ansmm__burger[aria-expanded='true'] .ansmm__burger-bar:nth-child(1) {
  translate: 0 6px;
  rotate: 45deg;
}

.ansmm__burger[aria-expanded='true'] .ansmm__burger-bar:nth-child(2) {
  opacity: 0;
}

.ansmm__burger[aria-expanded='true'] .ansmm__burger-bar:nth-child(3) {
  translate: 0 -6px;
  rotate: -45deg;
}

.ansmm__shell-head,
.ansmm__close,
.ansmm__backdrop {
  display: none;
}

/* ============================================================================
   13. DESKTOP tier - the bar, and the display:contents promotion
   ========================================================================= */

@media (min-width: 992px) {
  /* Closed panels: display:none removes them from the a11y tree, from the tab order
     and from find-in-page. aria-hidden is deliberately NOT used as the mechanism -
     aria-hidden over a subtree that still contains focusable links is a WCAG 4.1.2
     failure waiting for the first CSS change. */
  .ansmm--js .ansmm__panel[hidden] {
    display: none;
  }

  .ansmm--js .ansmm__panel {
    opacity: 0;
    translate: 0 -0.5rem;
    transition: opacity var(--ansmm-dur) var(--ansmm-ease), translate var(--ansmm-dur) var(--ansmm-ease);
  }

  .ansmm--js .ansmm__panel.is-open {
    opacity: 1;
    translate: 0 0;
  }

  /* No-JS fallback: CSS alone opens the panel. This works here - and did NOT work on
     the old build - because the panel is a descendant of its own <li>, so :hover and
     :focus-within actually match. */
  .ansmm:not(.ansmm--js) .ansmm__panel {
    visibility: hidden;
    opacity: 0;
  }

  .ansmm:not(.ansmm--js) .ansmm__top:hover .ansmm__panel,
  .ansmm:not(.ansmm--js) .ansmm__top:focus-within .ansmm__panel {
    visibility: visible;
    opacity: 1;
  }

  /* A mega panel centres on the VIEWPORT, not on the module position, so it looks the
     same whether the template puts the menu in the middle of the header or hard right.
     Centring on the viewport needs the panel's distance from the top of the window,
     which is one measurement - so this is the enhanced path. The script writes
     --ansmm-panel-top from the nav's own bounding rect; it never reads a template
     variable such as --header-height, which we do not own and cannot rely on.

     position:fixed is safe here because the placement probe has already switched to
     layer or portal mode if an ancestor transform would capture it. */
  .ansmm--js .ansmm__panel--mega:not([popover]) {
    position: fixed;
    inset-block-start: var(--ansmm-panel-top, 100%);
    inset-inline: var(--ansmm-gutter);
    margin-inline: auto;
    inline-size: min(var(--ansmm-panel-max), calc(100vw - 2 * var(--ansmm-gutter)));
    max-block-size: calc(100dvh - var(--ansmm-panel-top, 6rem) - var(--ansmm-gutter));
  }

  /* No JS: stay absolute and simply cap the width. It is anchored to the trigger rather
     than the viewport, which is less pretty and always correct. */
  .ansmm:not(.ansmm--js) .ansmm__panel--mega {
    inline-size: min(var(--ansmm-panel-max), calc(100vw - 2 * var(--ansmm-gutter)));
    max-inline-size: calc(100vw - 2 * var(--ansmm-gutter));
  }

  /* --- The tabs column ---------------------------------------------------
     display:contents promotes each tab trigger AND its detail pane into this grid:
     triggers auto-place down column 1, every pane shares one cell in column 2. One
     set of markup serves both the desktop two-pane layout and the mobile accordion;
     nothing is cloned, moved or rebuilt.

     role="list"/"listitem" in the layout is mandatory, not decorative: display:contents
     strips list semantics from the accessibility tree in Chrome and Safari. */
  .ansmm__col--tabs .ansmm__tabs-wrap {
    display: grid;
    grid-template-columns: var(--ansmm-nav-width) 1fr;
    column-gap: var(--ansmm-gap);
    align-items: start;
  }

  .ansmm__col--tabs .ansmm__tabs,
  .ansmm__col--tabs .ansmm__tab-item {
    display: contents;
  }

  .ansmm__col--tabs .ansmm__tab {
    grid-column: 1;
  }

  .ansmm__col--tabs .ansmm__detail {
    grid-column: 2;
    grid-row: 1 / -1;
    padding-block: 0;
    padding-inline-start: 0;
    border-inline-start: 1px solid var(--ansmm-rule);
    padding-inline-start: var(--ansmm-gap);
  }

  /* Without JS, stacking every pane in one cell would overlap them. Opt out of the
     overlay until the script confirms it can enforce exclusivity. */
  .ansmm:not(.ansmm--js) .ansmm__col--tabs .ansmm__detail {
    grid-row: auto;
  }

  .ansmm__col--tabs .ansmm__tab-chev {
    rotate: -90deg;
  }
}

/* ============================================================================
   14. TABLET tier - a real middle ground, not the phone drawer
   ========================================================================= */

/*
 * There is no separate tablet tier for the panel's internals, and there should not be:
 * below the breakpoint everything lives in the drawer, which is min(26rem, 100vw) wide
 * whether the device is a phone or an iPad. A block here previously set a larger image
 * and two columns for 768-991px, but every one of its rules was overridden by the wider
 * max-width block below it, so it never applied. Removed rather than left to mislead.
 */

/* ============================================================================
   15. MOBILE / DRAWER tier
   ========================================================================= */

@media (max-width: 991.98px) {
  /*
   * In the drawer a "large picture" goes back to a thumbnail IN FRONT of the label.
   * Stacked, each entry cost a 112px square plus its caption, so a handful of links
   * filled the whole screen and long labels wrapped under a picture that was already
   * as wide as the drawer. A list on a phone should read as a list.
   *
   * Card and tile grids keep their grid - those are meant to be looked at - and simply
   * drop to two across.
   */
  .ansmm {
    --ansmm-image-lg: 56px;
    --ansmm-gap: 0.75rem;
    --ansmm-panel-pad: 0.5rem;
  }

  /* Tighter rows: on a phone the list should feel like a list, not a stack of cards. */
  .ansmm__tab,
  .ansmm__link {
    padding-block: 0.25rem;
    gap: 0.625rem;
  }

  .ansmm__col-title {
    margin-block-end: 0.25rem;
  }

  .ansmm__col-intro,
  .ansmm__panel-intro {
    margin-block-end: 0.5rem;
  }

  .ansmm__overview {
    margin-block-end: 0.5rem;
  }

  .ansmm__link--stacked,
  .ansmm__tab--stacked {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .ansmm__col-title--stacked .ansmm__col-link {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .ansmm__burger {
    display: inline-flex;
  }

  .ansmm__shell {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    inline-size: min(26rem, 100vw);
    max-inline-size: 100vw;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ansmm-surface);
    color: var(--ansmm-ink);
    box-shadow: var(--ansmm-shadow);
    translate: 100% 0;
    transition: translate var(--ansmm-dur) var(--ansmm-ease);
  }

  .ansmm--accordion .ansmm__shell {
    position: static;
    inline-size: 100%;
    box-shadow: none;
    translate: none;
  }

  /* Only the script hides the shell. Without JS the whole menu is simply in flow -
     complete and usable, which is the whole point of not rebuilding it client-side. */
  .ansmm--js .ansmm__shell[hidden] {
    display: none;
  }

  .ansmm--js .ansmm__shell.is-open {
    translate: 0 0;
  }

  .ansmm__shell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--ansmm-rule);
  }

  .ansmm--accordion .ansmm__shell-head {
    display: none;
  }

  .ansmm__shell-title {
    font-weight: 600;
  }

  .ansmm__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--ansmm-tap);
    block-size: var(--ansmm-tap);
    border-radius: var(--ansmm-radius);
  }

  .ansmm__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: block;
    background: rgb(0 0 0 / 40%);
  }

  .ansmm--accordion .ansmm__backdrop {
    display: none;
  }

  /*
   * nowrap is not cosmetic here.
   *
   * The bar is flex-wrap: wrap for the horizontal desktop bar. Turned vertical inside
   * the drawer - which is a fixed-height scroll container - a WRAPPING COLUMN flex
   * container tries to wrap its items into further columns against that definite
   * height, and the item holding an open panel got stretched by ~340px of empty box
   * below its content. That was the huge gap before the next menu entry.
   */
  .ansmm__bar {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.5rem;
  }

  .ansmm__top {
    display: block;
    border-block-end: 1px solid var(--ansmm-rule);
  }

  .ansmm__top:last-child {
    border-block-end: 0;
  }

  /* In the drawer the rows are separated by rules, so the bar's pill outline would just
     add a box around every entry. Drop it and let the row run full width. */
  .ansmm__top-row,
  .ansmm__top.is-open > .ansmm__top-row {
    justify-content: space-between;
    background: none;
    border: 0;
  }

  .ansmm__top-link {
    flex: 1;
  }

  .ansmm__toggle {
    inline-size: var(--ansmm-tap);
    block-size: var(--ansmm-tap);
  }

  /* The panel is in normal flow under its trigger - an accordion, from the same DOM. */
  .ansmm__panel {
    position: static;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: none;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    translate: none;
  }

  .ansmm--js .ansmm__panel[hidden] {
    display: none;
  }

  .ansmm__canvas {
    padding: 0 0.5rem 0.75rem;
  }

  .ansmm__grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .ansmm__col {
    grid-column: auto;
  }

  /* A promo column drops to the end on a phone: the links are what people came for. */
  .ansmm__col--promo,
  .ansmm__col--modules {
    order: 99;
  }

  /*
   * Set grid-template-columns directly, not --ansmm-cols.
   *
   * The column count is written inline by the layout (style="--ansmm-cols:5"), and an
   * inline custom property beats any stylesheet rule - so overriding the variable here
   * could never win, and a column configured five-across on the desktop tried to be
   * five-across in a 375px drawer. Setting the property the variable feeds does win,
   * because the inline style never mentions it.
   */
  .ansmm__links {
    grid-template-columns: 1fr;
  }

  .ansmm__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ansmm__detail {
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--ansmm-rule);
  }

  .ansmm__tab-chev {
    rotate: 0deg;
  }

  .ansmm__tab[aria-expanded='true'] .ansmm__tab-chev {
    rotate: 180deg;
  }
}

/* ============================================================================
   16. Large tier
   ========================================================================= */

@container ansmm-panel (min-width: 60rem) {
  .ansmm__cards--cards {
    --ansmm-cols: var(--ansmm-cols-wide, 4);
  }
}

@media (min-width: 1440px) {
  .ansmm {
    --ansmm-gap: 2rem;
    --ansmm-panel-pad: 2.25rem;
  }
}

/* Only genuinely wide screens get a larger tile; 180px stays the desktop default. */
@media (min-width: 1680px) {
  .ansmm {
    --ansmm-image-lg: 200px;
  }
}

/* ============================================================================
   17. Motion, print, high contrast
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ansmm *,
  .ansmm *::before,
  .ansmm *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  .ansmm__panel,
  .ansmm__shell {
    translate: none !important;
  }

  .ansmm__panel--mega {
    translate: -50% 0 !important;
  }
}

@media print {
  .ansmm__panel,
  .ansmm__backdrop,
  .ansmm__burger {
    display: none !important;
  }
}

@media (forced-colors: active) {
  .ansmm__panel,
  .ansmm__shell {
    border: 1px solid CanvasText;
  }

  .ansmm__badge {
    border: 1px solid CanvasText;
  }
}