/**
 * @file menu_toc.css
 * @component Menu TOC (Navigation)
 * @description Styles the native TOC subtree and native disclosure controls.
 *
 * @section Public custom properties
 * --menuToc-length-headerExtent : Occupied extent from viewport top; defaults to 0px.
 * --menuToc-space-stickyGap     : Sticky clearance; defaults to --marsal-space-s.
 *
 * @section Private custom properties
 * --_space-rowPadding : Density padding; defaults to --marsal-space-3xs.
 * --_space-stickyGap  : Resolved sticky clearance, reset on each root.
 * --_length-stickyTop : Maximum of Drupal top displacement and header extent,
 *   plus the resolved gap; reset on each root.
 * --_length-controlSize : Minimum link/summary target size.
 * --_space-listIndent  : Inherited indentation of a list level.
 * --_space-linkIndent  : Inherited indentation of its links.
 */
:where([data-component-id="marsal_sdc:menu_toc"]) {
  --_space-rowPadding: var(--marsal-space-3xs);
  --_length-controlSize: max(44px, 2.75rem);
  --_space-stickyGap: var(--menuToc-space-stickyGap, var(--marsal-space-s));
  --_length-stickyTop: calc(max(var(--drupal-displace-offset-top, 0px), var(--menuToc-length-headerExtent, 0px)) + var(--_space-stickyGap));
  --_space-listIndent: 0px;
  --_space-linkIndent: var(--marsal-space-s);

  &[data-density="comfortable"] {
    --_space-rowPadding: var(--marsal-space-2xs);
  }

  /* The full list is the fallback, including browsers without native popovers. */
  & > .marsal-menu-toc__content {
    display: block;
    position: static;
    inset: auto;
    inline-size: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    font-family: var(--marsal-fontFamily-body-small);
    font-size: var(--marsal-fontSize-body-small);
    font-weight: var(--marsal-fontWeight-body-small);
    line-height: var(--marsal-lineHeight-body-small);
    letter-spacing: var(--marsal-letterSpacing-body-small);
    color: var(--marsal-color-textPrimary);
  }

  & > .marsal-menu-toc__label,
  & > .marsal-menu-toc__toggle {
    font-family: var(--marsal-fontFamily-label-small);
    font-size: var(--marsal-fontSize-label-small);
    font-weight: var(--marsal-fontWeight-label-small);
    line-height: var(--marsal-lineHeight-label-small);
    letter-spacing: var(--marsal-letterSpacing-label-small);
    text-transform: uppercase;
    color: var(--marsal-color-textMuted);
  }

  & > .marsal-menu-toc__label {
    margin-block-end: var(--marsal-space-xs);
  }

  & > .marsal-menu-toc__toggle {
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--marsal-space-s);
    inline-size: 100%;
    min-block-size: var(--_length-controlSize);
    margin: 0;
    padding: var(--marsal-space-2xs) var(--marsal-space-s);
    border: 1px solid var(--marsal-color-borderInteractive);
    border-radius: 0;
    background: var(--marsal-color-surfacePrimary);
    text-align: start;
    cursor: pointer;

    &::after {
      content: "";
      flex: 0 0 auto;
      inline-size: 0.5em;
      block-size: 0.5em;
      border-inline-end: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
      transform: rotate(45deg);
    }

    &:focus-visible {
      outline: 3px solid var(--marsal-color-focusRing);
      outline-offset: 3px;
      box-shadow: 0 0 0 2px var(--marsal-color-focusRingContrast);
    }
  }

  &:has(> .marsal-menu-toc__content:popover-open) > .marsal-menu-toc__toggle::after {
    transform: rotate(225deg);
  }

  @media (forced-colors: active) {
    & > .marsal-menu-toc__toggle,
    & > .marsal-menu-toc__content[popover] {
      border-color: ButtonText;
      background: Canvas;
      color: CanvasText;
    }

    & > .marsal-menu-toc__toggle:focus-visible {
      outline-color: Highlight;
    }
  }
}

/* Anchor positioning keeps the panel below its own bar, even before it sticks.
   Without either feature, retain the ordinary full menu and no toggle. */
@supports selector(:popover-open) and (position-area: block-end) and (inline-size: anchor-size(inline)) {
  @media screen {
    :where([data-component-id="marsal_sdc:menu_toc"]) {
      /*
       * The bar and the open panel paint a fixed light surface, so they own its
       * colour roles, as Card does. The panel keeps its links' focus rings inside
       * that surface; the bar's own ring sits outside it, on the inherited
       * background, so the bar keeps the inherited focus pair.
       */
      & > .marsal-menu-toc__toggle,
      & > .marsal-menu-toc__content:popover-open {
        --marsal-color-textPrimary: var(--marsal-color-textPrimaryTheme);
        --marsal-color-textStrong: var(--marsal-color-textStrongTheme);
        --marsal-color-textMuted: var(--marsal-color-textMutedTheme);
        --marsal-color-textBrand: var(--marsal-color-textBrandTheme);
        --marsal-color-link: var(--marsal-color-linkTheme);
        --marsal-color-borderSubtle: var(--marsal-color-borderSubtleTheme);
        --marsal-color-borderDefault: var(--marsal-color-borderDefaultTheme);
        --marsal-color-borderControl: var(--marsal-color-borderControlTheme);
        --marsal-color-borderInteractive: var(--marsal-color-borderInteractiveTheme);
        --marsal-color-borderAccent: var(--marsal-color-borderAccentTheme);
        --marsal-color-dividerAccent: var(--marsal-color-dividerAccentTheme);
      }

      & > .marsal-menu-toc__content:popover-open {
        --marsal-color-focusRing: var(--marsal-color-focusRingTheme);
        --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastTheme);
      }
    }

    @container marsal-sdc-grid (width < 30rem) {
      :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="narrow"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) :where([data-component-id="marsal_sdc:menu_toc"]):not([data-db-root], [data-db-root] *) {
        & > .marsal-menu-toc__label {
          display: none;
        }

        & > .marsal-menu-toc__toggle {
          display: flex;
        }

        & > .marsal-menu-toc__content[popover] {
          display: none;
          position: fixed;
          position-area: block-end;
          box-sizing: border-box;
          inline-size: anchor-size(inline);
          max-inline-size: 100%;
          max-block-size: calc(100% - var(--drupal-displace-offset-bottom, 0px) - var(--_space-stickyGap));
          margin-block-end: calc(var(--drupal-displace-offset-bottom, 0px) + var(--_space-stickyGap));
          padding: 6px;
          border: 1px solid var(--marsal-color-borderInteractive);
          background: var(--marsal-color-surfacePrimary);
          overflow: auto;
          scroll-padding: 6px;
        }

        & > .marsal-menu-toc__content:popover-open {
          display: block;
        }

        & > .marsal-menu-toc__content :focus-visible {
          scroll-margin: 6px;
        }
      }
    }

    @container marsal-sdc-grid (width < 48rem) {
      :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="standard"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) :where([data-component-id="marsal_sdc:menu_toc"]):not([data-db-root], [data-db-root] *) {
        & > .marsal-menu-toc__label {
          display: none;
        }

        & > .marsal-menu-toc__toggle {
          display: flex;
        }

        & > .marsal-menu-toc__content[popover] {
          display: none;
          position: fixed;
          position-area: block-end;
          box-sizing: border-box;
          inline-size: anchor-size(inline);
          max-inline-size: 100%;
          max-block-size: calc(100% - var(--drupal-displace-offset-bottom, 0px) - var(--_space-stickyGap));
          margin-block-end: calc(var(--drupal-displace-offset-bottom, 0px) + var(--_space-stickyGap));
          padding: 6px;
          border: 1px solid var(--marsal-color-borderInteractive);
          background: var(--marsal-color-surfacePrimary);
          overflow: auto;
          scroll-padding: 6px;
        }

        & > .marsal-menu-toc__content:popover-open {
          display: block;
        }

        & > .marsal-menu-toc__content :focus-visible {
          scroll-margin: 6px;
        }
      }
    }

    @container marsal-sdc-grid (width < 64rem) {
      :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="wide"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) :where([data-component-id="marsal_sdc:menu_toc"]):not([data-db-root], [data-db-root] *) {
        & > .marsal-menu-toc__label {
          display: none;
        }

        & > .marsal-menu-toc__toggle {
          display: flex;
        }

        & > .marsal-menu-toc__content[popover] {
          display: none;
          position: fixed;
          position-area: block-end;
          box-sizing: border-box;
          inline-size: anchor-size(inline);
          max-inline-size: 100%;
          max-block-size: calc(100% - var(--drupal-displace-offset-bottom, 0px) - var(--_space-stickyGap));
          margin-block-end: calc(var(--drupal-displace-offset-bottom, 0px) + var(--_space-stickyGap));
          padding: 6px;
          border: 1px solid var(--marsal-color-borderInteractive);
          background: var(--marsal-color-surfacePrimary);
          overflow: auto;
          scroll-padding: 6px;
        }

        & > .marsal-menu-toc__content:popover-open {
          display: block;
        }

        & > .marsal-menu-toc__content :focus-visible {
          scroll-margin: 6px;
        }
      }
    }
  }
}

:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__content > nav.marsal-toc-block {
  /* Owned nav and child-list selectors outweigh marsal_toc_block's 1.5rem child indent regardless of load order. */
  & > ul,
  & ul.marsal-toc-block__children {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & :is(ul, ul.marsal-toc-block__children) > li {
    --_space-linkIndent: calc(var(--_space-listIndent) + var(--marsal-space-s));

    position: relative;
    display: block;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
  }

  & li > a {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    min-inline-size: 0;
    min-block-size: var(--_length-controlSize);
    padding-block: var(--_space-rowPadding);
    padding-inline: var(--_space-linkIndent) var(--_length-controlSize);
    overflow-wrap: anywhere;
    text-decoration: none;
    text-underline-offset: 0.2em;

    &:hover,
    &:focus {
      text-decoration: underline solid;
    }
  }
}

/* @todo WORKAROUND: behavioursoe base.css:440-458 forces link color; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__content > nav.marsal-toc-block li > a:any-link {
  color: var(--marsal-color-link);
}

:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__content > nav.marsal-toc-block {
  & details.marsal-toc-block__branch {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;

    /* Each summary belongs to its details but occupies its parent's link row. */
    & > summary {
      box-sizing: border-box;
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      display: grid;
      place-items: center;
      inline-size: var(--_length-controlSize);
      min-block-size: var(--_length-controlSize);
      margin: 0;
      padding: var(--_space-rowPadding) 0;
      border: 1px solid var(--marsal-color-borderInteractive);
      border-radius: 0;
      background: transparent;
      color: var(--marsal-color-textPrimary);
      font: inherit;
      list-style: none;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }

      &::before {
        content: "";
        inline-size: 0.5em;
        block-size: 0.5em;
        border-block-start: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
        transform: rotate(45deg);
      }

      &:dir(rtl)::before {
        transform: rotate(-45deg);
      }
    }

    &[open] > summary::before {
      transform: rotate(135deg);
    }

    &[open] > summary:dir(rtl)::before {
      transform: rotate(-135deg);
    }
  }

  /* The full translated name remains available to assistive technology. */
  & summary > .marsal-toc-block__toggle-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  & li > a:hover,
  & details.marsal-toc-block__branch > summary:hover {
    background: var(--marsal-color-surfaceSubtle);
  }

  & li > a:focus-visible,
  & details.marsal-toc-block__branch > summary:focus-visible {
    outline: 3px solid var(--marsal-color-focusRing);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--marsal-color-focusRingContrast);
  }

  /* Native disclosure has no animation, including with reduced motion enabled. */

  /* The menu shares one rail; nested text moves, but nested lists do not. */
  & > ul {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      border-inline-start: 1px solid var(--marsal-color-borderSubtle);
    }
  }

  & ul.marsal-toc-block__children {
    --_space-listIndent: var(--_space-linkIndent);
  }

  @media (forced-colors: active) {
    & > ul::before {
      border-inline-start-color: CanvasText;
    }

    & details.marsal-toc-block__branch > summary {
      border-color: ButtonText;
      color: ButtonText;
    }

    & :is(li > a, details.marsal-toc-block__branch > summary):focus-visible {
      outline-color: Highlight;
    }
  }
}

@supports (scroll-target-group: auto) and selector(a:target-current) {
  :where([data-component-id="marsal_sdc:menu_toc"])[data-highlight-current="true"] > .marsal-menu-toc__content > nav.marsal-toc-block {
    /* One group includes every nested link, so the browser selects one current item. */
    & > ul {
      scroll-target-group: auto;
    }

    /* The pointer spans only the current link's row, not its open children. */
    & li > a:target-current::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      border-inline-start: var(--marsal-length-dividerAccent) solid var(--marsal-color-maize);
    }

    & li > a:target-current {
      font-weight: var(--marsal-fontWeight-emphasis);
    }

    & li:has(> details.marsal-toc-block__branch a:target-current) > a {
      color: var(--marsal-color-textStrong);
    }

    @media (forced-colors: active) {
      & li > a:target-current::before {
        border-inline-start-color: Highlight;
      }
    }
  }
}

/*
 * The caller's named container promises an expanded layout at 48rem. Sticky
 * applies only on screens both tall and wide enough to keep the TOC
 * scrollable beside its content, matching the container's own condition.
 */
@media screen and (min-width: 64rem) and (min-height: 30rem) {
  @container marsal-menu-toc-layout (min-width: 48rem) {
    :where([data-component-id="marsal_sdc:menu_toc"]):not([data-db-root] *).marsal-menu-toc--sticky {
      position: sticky;
      inset-block-start: var(--_length-stickyTop);
      align-self: start;
      block-size: auto;

      & > .marsal-menu-toc__content {
        max-block-size: calc(100dvh - var(--_length-stickyTop) - var(--drupal-displace-offset-bottom, 0px) - var(--_space-stickyGap));
        overflow: auto;
        scroll-padding: 6px;

        /* 6px = 3px outline + 3px offset: padding, scroll-padding and scroll-margin keep focus rings inside the scrollport. */
        & > nav.marsal-toc-block {
          padding: 6px;

          & :is(li > a, details.marsal-toc-block__branch > summary) {
            scroll-margin: 6px;
          }
        }
      }
    }
  }
}