/**
 * c-mokuji
 * 目次（横スクロール1行メニュー）
 */

@layer components {
  :where(.c-mokuji) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background-color: var(--wp--preset--color--white);
    border-bottom: 1px solid var(--wp--preset--color--primary-lighter);

    transition:
      top var(--wp--custom--transition--duration--fast, 150ms)
        var(--wp--custom--transition--timing--ease-out),
      background-color var(--wp--custom--transition--duration--fast, 150ms)
        var(--wp--custom--transition--timing--ease-out),
      border-color var(--wp--custom--transition--duration--fast, 150ms)
        var(--wp--custom--transition--timing--ease-out);
  }

  :where(.c-mokuji__inner) {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--lg);
  }

  /* PC（通常時）: 1行3つまで（均等幅） */
  :where(.c-mokuji__track) {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--wp--preset--spacing--xs);

    overflow: visible;
  }

  :where(.c-mokuji__track::-webkit-scrollbar) {
    display: none;
  }

  :where(.c-mokuji__item) {
    margin: 0;
    padding: 0;
  }

  :where(.c-mokuji__link) {
    display: grid;
    place-items: center;
    width: 100%;

    text-decoration: none;
    white-space: normal;
    text-align: center;

    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.2;

    padding: 0.7em 1.1em;
    border-radius: var(--wp--custom--border--radius--full, 9999px);

    background-color: var(--wp--preset--color--primary-lightest);
    color: var(--wp--preset--color--basic-text);

    border: 1px solid var(--wp--preset--color--primary-lighter);

    transition:
      opacity var(--wp--custom--transition--duration--fast, 150ms)
        var(--wp--custom--transition--timing--ease-out),
      background-color var(--wp--custom--transition--duration--fast, 150ms)
        var(--wp--custom--transition--timing--ease-out),
      color var(--wp--custom--transition--duration--fast, 150ms)
        var(--wp--custom--transition--timing--ease-out),
      border-color var(--wp--custom--transition--duration--fast, 150ms)
        var(--wp--custom--transition--timing--ease-out);
    text-decoration: none !important;
  }

  :where(.c-mokuji__link:hover) {
    opacity: 0.85;
  }

  :where(.c-mokuji__link:focus-visible) {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
  }

  /* スクロール時：ヘッダー直下に固定 */
  :where(.c-mokuji.is-fixed) {
    position: fixed;
    top: 114px !important;
    left: 0;
    right: 0;
    z-index: calc(var(--wp--custom--z-index--fixed, 1030) - 1);
    @media screen and (max-width: 768px) {
      top: 87px !important;
    }
  }

  /* スナッチ（固定）時: 1行横スライド + ボタン風をやめる */
  :where(.c-mokuji.is-fixed) :where(.c-mokuji__track) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  :where(.c-mokuji.is-fixed) :where(.c-mokuji__link) {
    width: auto;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    padding: 0.6em 0.8em;
    white-space: nowrap;
    color: var(--wp--preset--color--basic-text);
    text-decoration: none !important;
  }

  :where(.c-mokuji.is-fixed) :where(.c-mokuji__link.is-active),
  :where(.c-mokuji.is-fixed) :where(.c-mokuji__link[aria-current="true"]) {
    background-color: var(--wp--preset--color--primary-lightest) !important;
    border-color: transparent !important;
    color: var(--wp--preset--color--primary-darkest) !important;
    text-decoration: none !important;
  }

  :where(.c-mokuji.is-empty) {
    display: none;
  }

  :where(.c-mokuji__placeholder) {
    height: 0;
  }

  @media (max-width: 768px) {
    :where(.c-mokuji__inner) {
      padding-inline: var(--wp--preset--spacing--base);
    }

    :where(.c-mokuji__link) {
      font-size: var(--wp--preset--font-size--xs);
    }

    /* SP（通常時）: grid 2列 */
    :where(.c-mokuji__track) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: visible;
    }

    /* SP（スナッチ/固定時）: 1行横スライド */
    :where(.c-mokuji.is-fixed) :where(.c-mokuji__track) {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: max-content;

      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }

    /* SP: ボタン風をやめる（角丸なし） */
    :where(.c-mokuji__link) {
      border-radius: 0;
      background-color: transparent;
      border: 0;
      padding: 0.6em 0.8em;
      white-space: normal;
      color: var(--wp--preset--color--basic-text);
      text-decoration: none !important;
    }

    :where(.c-mokuji.is-fixed) :where(.c-mokuji__link) {
      width: auto;
      white-space: nowrap;
    }

    :where(.c-mokuji.is-fixed) :where(.c-mokuji__link.is-active),
    :where(.c-mokuji.is-fixed) :where(.c-mokuji__link[aria-current="true"]) {
      background-color: var(--wp--preset--color--primary-lightest) !important;
      border-color: transparent !important;
      color: var(--wp--preset--color--primary-darkest) !important;
      text-decoration: none !important;
    }
  }
}