/* ============================================================
   anime-global-nav.css — TOP 以外の全ページ上部に出すサイトナビ
   archive-anime / anime-season と同じデザイントークン
   （max-width 1120px / primary #0ea5e9）
   ============================================================ */
:root {
  --agn-primary:        #0ea5e9;
  --agn-primary-dark:   #0369a1;
  --agn-primary-soft:   #e0f2fe;
  --agn-ink:            #1f2937;
  --agn-line:           #e5e7eb;
  /* archive の --aa-bg と同じ。タイトルカードと絞り込みカードの間に見える薄い blue-gray */
  --agn-bar-bg:         #f7fbfd;
}

/* バーは画面幅いっぱい、内側だけ 1120px 固定 */
.anime-global-nav {
  background: var(--agn-bar-bg);
  border-bottom: 1px solid var(--agn-line);
  font-size: 13px;
  /* スクロール追随（全ページ共通） */
  position: sticky;
  top: 0;
  z-index: 100;
}
.anime-global-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  list-style: none;
  margin: 0 auto;
  /* 内側リンクが padding-left 10px を持つので、ここは 6px にして
     リンクのテキスト先頭が container 左から 16px (= archive-header と同じ) に来るよう調整 */
  padding: 6px 6px;
  max-width: 1120px;
  width: 100%;
  box-sizing: border-box;
}
.anime-global-nav__item {
  position: relative;
}
.anime-global-nav__link,
.anime-global-nav__summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  color: var(--agn-ink);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.anime-global-nav__link:hover,
.anime-global-nav__summary:hover {
  background: #fff;
  color: var(--agn-primary-dark);
}

/* details/summary のデフォルトマーカー無効化 */
.anime-global-nav__summary {
  list-style: none;
}
.anime-global-nav__summary::-webkit-details-marker {
  display: none;
}
.anime-global-nav__caret {
  font-size: 10px;
  line-height: 1;
}

/* ドロップダウン */
.anime-global-nav__dropdown[open] .anime-global-nav__caret {
  transform: rotate(180deg);
}
.anime-global-nav__sublist {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 2px;
  margin: 4px 0 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--agn-line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  min-width: 220px;
}
.anime-global-nav__sublink {
  display: block;
  padding: 6px 10px;
  color: var(--agn-ink);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}
.anime-global-nav__sublink:hover {
  background: var(--agn-primary-soft);
  color: var(--agn-primary-dark);
}

/* 配信サイト別はラベルが長いので列幅を広めに、件数が多いので 2 列表示 */
.anime-global-nav__sublist--services {
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  min-width: 320px;
}

/* スマホ表示 */
@media (max-width: 640px) {
  /*
   * スマホ時のサブメニュー: タップ項目の直下にインラインで展開（アコーディオン）
   *
   * 旧実装は overflow-x: auto + position: fixed の下部シート方式だったが、
   * シートが画面下端に出るためタップ位置から視線が離れ、開いたことに気付かれない
   * 不具合があった。広告ユニットを覆わない / iOS Safari の details + fixed
   * 問題の影響を受けない、CSS のみで成立する点を優先してインライン展開に変更。
   */
  .anime-global-nav__list {
    /* スマホはコンテナ padding が 0.8rem になるページに合わせる */
    padding: 6px calc(.8rem - 10px);
  }

  /* ドロップダウン項目は常に 1 行を占有して、開いたときの幅を確保する */
  .anime-global-nav__item--dropdown {
    flex: 0 0 100%;
  }
  .anime-global-nav__dropdown {
    width: 100%;
  }
  .anime-global-nav__summary {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }

  /* サブリストはインライン（通常フロー）にしてタップ項目の真下に展開 */
  .anime-global-nav__sublist {
    position: static;
    margin: 4px 0 8px;
    padding: 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .anime-global-nav__sublist--services {
    grid-template-columns: repeat(2, 1fr);
    min-width: 0;
  }

  /*
   * サブリンクのタップ領域を 44×44 CSS px 以上に拡大
   * display: flex + min-height: 44px + padding 調整で縦方向を保証。
   */
  .anime-global-nav__sublink {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    white-space: normal;
  }
}