/**
 * 共通ページネーション - c-pagination-001
 * wp_pagenaviとWordPress標準ページネーションの両方に対応
 */

/* ============================================
   ページネーションコンテナ
   ============================================ */
.c-pagination-001,
.wp-pagenavi,
.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  margin: var(--wp--preset--spacing--3-xl) auto;
  padding: var(--wp--preset--spacing--base);
}

@media (min-width: 768px) {
  .c-pagination-001,
  .wp-pagenavi,
  .pagination,
  .nav-links {
    gap: var(--wp--preset--spacing--sm);
    padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--base);
  }
}

/* ============================================
   ページネーションアイテム（共通）
   ============================================ */
.c-pagination-001 a,
.c-pagination-001 span,
.wp-pagenavi a,
.wp-pagenavi span,
.nav-links a,
.nav-links span,
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--basic-text);
  background: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--gray-light);
  border-radius: var(--wp--custom--border--radius--md);
  text-decoration: none;
  transition: all var(--wp--custom--transition--duration--fast)
    var(--wp--custom--transition--timing--ease-in-out);
  cursor: pointer;
}

@media (min-width: 768px) {
  .c-pagination-001 a,
  .c-pagination-001 span,
  .wp-pagenavi a,
  .wp-pagenavi span,
  .nav-links a,
  .nav-links span,
  .page-numbers {
    min-width: 4.8rem;
    height: 4.8rem;
    font-size: var(--wp--preset--font-size--lg);
  }
}

/* ============================================
   リンクのホバー状態
   ============================================ */
.c-pagination-001 a:hover,
.wp-pagenavi a:hover,
.nav-links a:hover,
.page-numbers:hover {
  background: var(--wp--preset--color--primary-lightest);
  border-color: var(--wp--preset--color--primary-light);
  color: var(--wp--preset--color--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--wp--custom--shadow--sm);
}

.c-pagination-001 a:active,
.wp-pagenavi a:active,
.nav-links a:active,
.page-numbers:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ============================================
   現在のページ（カレント）
   ============================================ */
.c-pagination-001 .current,
.wp-pagenavi .current,
.nav-links .current,
.page-numbers.current {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-weight: var(--wp--custom--font-weight--bold);
  cursor: default;
  box-shadow: var(--wp--custom--shadow--sm);
}

.c-pagination-001 .current:hover,
.wp-pagenavi .current:hover,
.nav-links .current:hover,
.page-numbers.current:hover {
  transform: none;
}

/* ============================================
   前へ・次へボタン
   ============================================ */
.c-pagination-001 .prev,
.c-pagination-001 .next,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.nav-links .nav-previous a,
.nav-links .nav-next a {
  font-weight: var(--wp--custom--font-weight--bold);
  padding-left: var(--wp--preset--spacing--base);
  padding-right: var(--wp--preset--spacing--base);
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.c-pagination-001 .prev:hover,
.c-pagination-001 .next:hover,
.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover,
.nav-links .nav-previous a:hover,
.nav-links .nav-next a:hover {
  background: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
}

/* 前へボタンにアイコンを追加 */
.c-pagination-001 .prev::before,
.wp-pagenavi .previouspostslink::before,
.nav-links .nav-previous a::before {
  content: "←";
  margin-right: var(--wp--preset--spacing--4-xs);
}

/* 次へボタンにアイコンを追加 */
.c-pagination-001 .next::after,
.wp-pagenavi .nextpostslink::after,
.nav-links .nav-next a::after {
  content: "→";
  margin-left: var(--wp--preset--spacing--4-xs);
}

/* ============================================
   最初・最後へのリンク
   ============================================ */
.c-pagination-001 .first,
.c-pagination-001 .last,
.wp-pagenavi .first,
.wp-pagenavi .last {
  font-weight: var(--wp--custom--font-weight--bold);
}

.c-pagination-001 .first::before,
.wp-pagenavi .first::before {
  content: "«";
  margin-right: var(--wp--preset--spacing--4-xs);
}

.c-pagination-001 .last::after,
.wp-pagenavi .last::after {
  content: "»";
  margin-left: var(--wp--preset--spacing--4-xs);
}

/* ============================================
   省略記号（dots）
   ============================================ */
.c-pagination-001 .dots,
.wp-pagenavi .extend,
.page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--wp--preset--color--gray);
  cursor: default;
  pointer-events: none;
}

.c-pagination-001 .dots:hover,
.wp-pagenavi .extend:hover,
.page-numbers.dots:hover {
  background: transparent;
  border: none;
  transform: none;
  box-shadow: none;
}

/* ============================================
   ページ情報テキスト
   ============================================ */
.wp-pagenavi .pages {
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-dark);
  background: transparent;
  border: none;
}

/* ============================================
   WordPress標準ページネーション調整
   ============================================ */
.nav-links .nav-previous,
.nav-links .nav-next {
  display: inline-block;
}

.nav-links .nav-previous a,
.nav-links .nav-next a {
  display: inline-flex;
}

/* ============================================
   レスポンシブ調整
   ============================================ */
@media (max-width: 767px) {
  /* モバイルでページ番号を一部非表示 */
  .c-pagination-001 a:not(.prev):not(.next):not(.current):not(.first):not(.last),
  .wp-pagenavi a:not(.previouspostslink):not(.nextpostslink):not(.current):not(.first):not(.last),
  .page-numbers:not(.prev):not(.next):not(.current) {
    display: none;
  }

  /* 現在のページと前後1ページのみ表示 */
  .c-pagination-001 .current,
  .c-pagination-001 .current + a,
  .c-pagination-001 a + .current,
  .wp-pagenavi .current,
  .wp-pagenavi .current + a,
  .wp-pagenavi a + .current,
  .page-numbers.current {
    display: inline-flex;
  }

  /* dotsは表示 */
  .c-pagination-001 .dots,
  .wp-pagenavi .extend,
  .page-numbers.dots {
    display: inline-flex;
  }
}

/* ============================================
   アクセシビリティ
   ============================================ */
.c-pagination-001 a:focus,
.wp-pagenavi a:focus,
.nav-links a:focus,
.page-numbers:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* ============================================
   ローディング状態（オプション）
   ============================================ */
.c-pagination-001.is-loading,
.wp-pagenavi.is-loading,
.nav-links.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.c-pagination-001.is-loading *,
.wp-pagenavi.is-loading *,
.nav-links.is-loading * {
  cursor: wait;
}