@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-mega-menu {
    position: relative;
    display: grid;
    gap: var(--cinder-space-2);
  }

  .cinder-mega-menu__list {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  .cinder-mega-menu__trigger {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    padding: var(--cinder-space-2) var(--cinder-space-3);
    border-radius: var(--cinder-radius-md);
    font: inherit;
    cursor: pointer;
  }

  .cinder-mega-menu__trigger[aria-expanded='true'] {
    background: var(--cinder-surface-hover);
    border-color: var(--cinder-border-muted);
  }

  @media (hover: hover) {
    .cinder-mega-menu__trigger:hover {
      background: var(--cinder-surface-hover);
    }
  }

  .cinder-mega-menu__trigger:focus-visible {
    /* cinder-focus-ring-owner: parent */
    outline: none;
    box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
  }

  /*
   * CIN-603: this track is a persistent state indicator (it shows which item
   * the active-indicator animation is tracking), so it moved from
   * `border.muted` (a 1.4:1 decorative-hairline tier) to `border.control`
   * (the 3:1 functional tier).
   */
  .cinder-mega-menu__indicator-track {
    position: relative;
    height: 2px;
    background: var(--cinder-border);
    border-radius: var(--cinder-radius-full);
    overflow: hidden;
  }

  .cinder-mega-menu__indicator {
    position: absolute;
    inset-block: 0;
    /* Physical `left`, not `inset-inline-start`: the JS-computed offset
       (mega-menu.svelte) is `triggerRect.left - navRect.left` from
       getBoundingClientRect(), always a physical measurement, applied via
       `transform: translateX()`. A logical anchor would move to the
       opposite physical edge under RTL while the translateX offset stayed
       physical, moving the indicator in the wrong direction. */
    left: 0;
    inline-size: 0;
    background: var(--cinder-accent-solid);
    transition:
      inline-size 160ms ease,
      transform 160ms ease;
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-mega-menu__indicator {
      transition: none;
    }
  }

  .cinder-mega-menu__viewport {
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-lg);
    background: var(--cinder-surface-raised);
    padding: var(--cinder-space-4);
    box-shadow: var(--cinder-shadow-lg);
  }

  .cinder-mega-menu__content {
    display: grid;
    gap: var(--cinder-space-4);
  }

  .cinder-mega-menu__content[data-motion='from-start'] {
    animation: cinder-mega-menu-from-start 160ms ease;
  }

  .cinder-mega-menu__content[data-motion='from-end'] {
    animation: cinder-mega-menu-from-end 160ms ease;
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-mega-menu__content[data-motion='from-start'],
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-mega-menu__content[data-motion='from-end'] {
      animation: none;
    }
  }

  .cinder-mega-menu__sections {
    display: grid;
    gap: var(--cinder-space-4);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  .cinder-mega-menu__sub .cinder-mega-menu__sections {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    border-inline-start: 1px solid var(--cinder-border-muted);
    padding-inline-start: var(--cinder-space-4);
  }

  .cinder-mega-menu__section-title {
    margin: 0 0 var(--cinder-space-2);
    font: var(--cinder-font-semibold) var(--cinder-text-sm) / 1.3 var(--cinder-font-sans);
  }

  .cinder-mega-menu__links,
  .cinder-mega-menu__submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--cinder-space-2);
  }

  .cinder-mega-menu__link {
    display: grid;
    gap: var(--cinder-space-1);
    text-decoration: none;
    color: inherit;
    /*
     * CIN-123: links and submenu triggers are sibling rows in one panel, so their
     * resting boxes have to match. Equal padding-block is not enough on its own —
     * the trigger carries a 1px transparent border on both block edges, which made
     * every trigger 2px taller than a single-line link. The link takes the same
     * transparent border so the two contribute identical box height, and the same
     * radius so a hover or active fill paints the same shape on both.
     */
    border: 1px solid transparent;
    border-radius: var(--cinder-radius-md);
    padding-block: var(--cinder-space-2);
    padding-inline: 0;
  }

  .cinder-mega-menu__link-description {
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  .cinder-mega-menu__sub {
    display: grid;
    gap: var(--cinder-space-4);
    grid-template-columns: minmax(min(10rem, 42%), 14rem) minmax(0, 1fr);
    align-items: start;
  }

  .cinder-mega-menu__submenu-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-2);
    width: 100%;
    text-align: start;
    font: inherit;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--cinder-radius-md);
    padding-block: var(--cinder-space-2);
    padding-inline: 0;
    cursor: pointer;
  }

  .cinder-mega-menu__submenu-trigger[data-active='true'] {
    border-color: transparent;
    background: var(--cinder-surface-hover);
    font-weight: var(--cinder-font-semibold);
  }

  @media (hover: hover) {
    .cinder-mega-menu__link:hover {
      background: var(--cinder-surface-hover);
    }

    .cinder-mega-menu__submenu-trigger:hover {
      background: var(--cinder-surface-hover);
    }
  }

  .cinder-mega-menu__submenu-trigger:focus-visible,
  .cinder-mega-menu__link:focus-visible {
    /* cinder-focus-ring-owner: parent */
    outline: none;
    box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
  }

  @media (forced-colors: active) {
    .cinder-mega-menu__trigger:focus-visible,
    .cinder-mega-menu__submenu-trigger:focus-visible,
    .cinder-mega-menu__link:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: var(--cinder-ring-width);
      box-shadow: none;
    }
  }

  @keyframes cinder-mega-menu-from-start {
    from {
      opacity: 0;
      transform: translateX(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes cinder-mega-menu-from-end {
    from {
      opacity: 0;
      transform: translateX(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}