/* Pills (tag/category nav)
   - レイヤ: comp
   - 依存: utilities 後（--cd-* 変数）
   - マークアップ: <nav class="pill-nav"><ul class="pill-group">…</ul></nav>
*/
@layer comp {

  /* ----------------------------------------
     ラッパ: 横スクロール（タッチ/マウス両対応）
     ※ 余白（margin）はページ側（home.css 等）で制御
  ---------------------------------------- */
  .pill-nav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    padding-inline: 2px; /* フォーカスリングの欠け防止 */
    touch-action: pan-x;

    /* スクロールバー（Firefox） */
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 224, 255, .55) transparent;
	  margin: 10px 0 12px;
    padding: 0 0 10px 0;
  }

  /* スクロールバー（Chrome / Edge / Safari） */
  .pill-nav::-webkit-scrollbar{
    height: 1px; /* 横スクロールなので height を指定 */
  }

  .pill-nav::-webkit-scrollbar-track{
    background: transparent;
  }

  .pill-nav::-webkit-scrollbar-thumb{
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      rgba(102, 224, 255, 0),
      rgba(102, 224, 255, .7),
      rgba(102, 224, 255, 0)
    );
  }

  .pill-nav:hover::-webkit-scrollbar-thumb{
    background: linear-gradient(
      90deg,
      rgba(102, 224, 255, 0),
      rgba(102, 224, 255, .9),
      rgba(102, 224, 255, 0)
    );
  }

  /* ----------------------------------------
     UL: デスクトップは折返し可、モバイルは1行スクロール
  ---------------------------------------- */
  .pill-nav .pill-group,
  .pill-nav .menu{
    display: flex;
    gap: 10px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  @media (max-width: 767px){
    .pill-nav .pill-group,
    .pill-nav .menu{
      flex-wrap: nowrap;      /* 1行化して横スクロール */
      white-space: nowrap;
    }
  }

  /* LI は素通し（幅固定化） */
  .pill-nav .pill-group > li,
  .pill-nav .menu > li{
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ----------------------------------------
     A: ピル本体（.pill クラス直打ちにも対応）
  ---------------------------------------- */
  .pill-nav .pill-group > li > a,
  .pill-nav .menu > li > a,
  .pill{
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 9999px;
border: 1px solid rgba(125,227,255,.25); /* 水色をうっすら */
    /* フォールバック → 変数ベース */
    background: rgba(255,255,255,.04);
    background: color-mix(in oklab, var(--cd-bg), white 4%);
    color: var(--cd-muted);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    font-size: 14px;
  }

  /* バリエーション（既存互換） */
  .pill.is-sm{
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
  .pill.is-outline{
    background: transparent;
  }

  /* Hover */
  .pill-nav .pill-group > li > a:hover,
  .pill-nav .menu > li > a:hover,
  .pill:hover{
    border-color: color-mix(in oklab, var(--cd-accent), var(--cd-border) 60%);
    color: var(--cd-accent);
  }

  /* 現在地（WP自動クラス & aria-current 併用） */
  .pill-nav .pill-group > li.current-menu-item > a,
  .pill-nav .menu > li.current-menu-item > a,
  .pill-nav .pill-group a[aria-current],
  .pill-nav .menu a[aria-current]{
    background: var(--cd-accent);
    color: #000;
    border-color: transparent;
  }

  /* アクセシビリティ: フォーカスリング */
  .pill-nav .pill-group > li > a:focus-visible,
  .pill-nav .menu > li > a:focus-visible,
  .pill:focus-visible{
    outline: 2px solid var(--cd-accent);
    outline-offset: 2px;
  }
}