/* ========================================
   Hitasur@ - サイドバー目次コンポーネント
   PC (769px~): 左固定サイドバー
   スマホ (~768px): 横スクロール式スティッキーメニュー
======================================== */

/* ========================================
   共通スタイル
======================================== */
.sidebar-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav__link {
  display: block;
  text-decoration: none;
  color: var(--color-black);
  font-weight: 400; /* 500から変更 - フォント軽量化 */
  transition: all 0.2s ease;
}

.sidebar-nav__link:visited {
  color: var(--color-black);
}

.sidebar-nav__link:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* アクティブ状態：背景暗め＋文字色反転（詳細度を上げてbase.cssに勝つ） */
.sidebar-nav__item.is-active a.sidebar-nav__link,
.sidebar-nav__item.is-active a.sidebar-nav__link:link,
.sidebar-nav__item.is-active a.sidebar-nav__link:visited {
  background: var(--color-black);
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
}

/* ========================================
   スマホ版（768px以下）：横スクロール式
======================================== */
@media (max-width: 768px) {
  /* スマホ用スティッキーメニュー */
  .sidebar-nav--mobile {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: top 0.3s ease;
  }

  /* ヘッダー表示時：目次を下げる */
  .sidebar-nav--mobile.header-visible {
    top: var(--header-height-actual, var(--header-height-mobile));
  }

  .sidebar-nav--mobile .sidebar-nav__list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
    padding: 0 0.75rem;
  }

  .sidebar-nav--mobile .sidebar-nav__list::-webkit-scrollbar {
    display: none;
  }

  .sidebar-nav--mobile .sidebar-nav__item {
    flex-shrink: 0;
  }

  .sidebar-nav--mobile .sidebar-nav__link {
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* PC用サイドバーを非表示 */
  .sidebar-nav--pc {
    display: none;
  }

  /* レイアウト：サイドバーなし */
  .has-sidebar-nav {
    display: block;
  }

  .has-sidebar-nav__sidebar {
    display: none;
  }

  .has-sidebar-nav__content {
    width: 100%;
  }
}

/* ========================================
   PC・タブレット版（769px以上）：左固定サイドバー
======================================== */
@media (min-width: 769px) {
  /* スマホ用メニューを非表示 */
  .sidebar-nav--mobile {
    display: none;
  }

  /* サイドバー付きレイアウト：左端固定 */
  .has-sidebar-nav {
    display: flex;
    gap: 2rem;
    padding: 0 2rem;
  }

  .has-sidebar-nav__sidebar {
    flex-shrink: 0;
    width: 200px;
  }

  .has-sidebar-nav__content {
    flex: 1;
    min-width: 0;
  }

  /* サイドバー本体 */
  .sidebar-nav--pc {
    position: sticky;
    top: 5rem; /* 80px = 8の倍数 */
    max-height: calc(100vh - 6.25rem);
    overflow-y: auto;
  }

  .sidebar-nav--pc .sidebar-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .sidebar-nav--pc .sidebar-nav__link {
    padding: 0.75rem 1rem;
    font-size: 1rem; /* 16px */
    border-left: 3px solid transparent;
  }

  /* PC版アクティブ状態 */
  .sidebar-nav--pc .sidebar-nav__item.is-active a.sidebar-nav__link,
  .sidebar-nav--pc .sidebar-nav__item.is-active a.sidebar-nav__link:link,
  .sidebar-nav--pc .sidebar-nav__item.is-active a.sidebar-nav__link:visited {
    border-left-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
    -webkit-text-fill-color: var(--color-white);
  }
}

/* ========================================
   アクセシビリティ
======================================== */
.sidebar-nav__link:focus {
  outline: 2px solid var(--color-black);
  outline-offset: -2px;
}

.sidebar-nav__link:focus:not(:focus-visible) {
  outline: none;
}

.sidebar-nav__link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: -2px;
}