@charset "utf-8";

/* Topics一覧。共通シェルの主カラム内でカードグリッドを構成する。 */
#content {
  width: auto;
  max-width: none;
  padding: 0;
}

/* 一覧はサイドバーを持たず、カードを全幅で並べる（2026-10-05 ユーザー判断）。
   カテゴリ・年・検索は見出しの行のバーへ移し、Recent Posts は一覧そのものと重なるので外した。 */
#main.topics-layout--listing {
  grid-template-columns: minmax(0, 1fr);
}

.topics-list {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.topics-list #items,
.topics-list .pager {
  width: 100%;
}

/* --- ページ送り（functions.php の custom_pagination）-----------------------------
   見出しの行と同じ書き方にそろえる（2026-10-05 ユーザー指摘。旧来の角丸の箱と黒塗りが新しいデザインと合っていなかった）。
   上に全幅の罫を引き、今のページはその罫に濃い 1px を重ねて示す（見出しの下の罫と対で、一覧を上下で閉じる）。
   数字は Helvetica 14px の #717171、今のページだけ濃くする。旧来の指定（css/style.css の .pager）はここで打ち消す。 */
.topics-list .pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-2xs);
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.topics-list .pager .page-numbers {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 44px;
  margin: 0;
  padding: 0 var(--space-3xs);
  border: 0;
  border-radius: 0;
  background: none;
  color: #717171;
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.topics-list .pager .current {
  color: var(--color-heading);
}

/* 今のページの罫。上の罫に重ねる。長さは数字の箱（最小 32px）と同じ。 */
.topics-list .pager .current::after {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-heading);
  content: "";
}

.topics-list .pager .dots {
  min-width: 0;
}

.topics-list .pager svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

/* スマホは項目が最大11個（前後・最初と最後・前後2つ・… 2つ）並ぶので、詰めて1行に収める。 */
@media (max-width: 480px) {
  .topics-list .pager {
    gap: 0;
  }

  .topics-list .pager .page-numbers {
    min-width: 28px;
  }
}

/* 320px 幅（iPhone SE）は 28px でも2行に折り返したので、押せる大きさの下限 24px まで詰める。 */
@media (max-width: 360px) {
  .topics-list .pager .page-numbers {
    min-width: 24px;
  }
}

/* 前後の矢印の読み上げ用の文字。見た目には出さない。 */
.pager__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.topics-list .pager a.page-numbers:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

@media (hover: hover) {
  .topics-list .pager a.page-numbers:hover {
    color: var(--color-link-hover);
  }
}

/* --- 絞り込み（template-parts/topics-filter.php）---------------------------------
   タブは見出しの行の右（Company の行で言語切替がある位置）に置き、見出しと同じ罫の上に載せる。
   全ての幅で出す（2026-10-05 ユーザー判断。PC で罫の上に見出ししか無いと、線だけが急に出てきたように見えた）。
   月での絞り込みは持たない（試しに外した）。

   ⚠️ 行の右側（タブ・虫眼鏡・検索欄）は見出しより目立たせない（2026-10-05 ユーザー指摘。今いるタブを見出しと
   同じ濃さにしていたら、右側のほうが目立った）。文字は全部 #717171（#f8f8f8 上で AA の下限 4.60:1。これより
   薄くはできない）の 14px にそろえ、濃さは使わない。今いるタブは、その真下の罫に濃い 1px を重ねて示す
   （Recruit / Company の左カラムの現在地の罫と同じ示し方）。 */
.topics-filter {
  --topics-filter-ink: #717171;

  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--color-line);
}

/* 項目は引き伸ばさず下端にそろえる。引き伸ばすと、行で一番高い検索欄の高さに合わせて伸び、
   リンクだけ文字が上に寄って、ボタンより 3px 浮いた（All のリンクがあった頃）。 */
.topics-filter__tabs {
  display: flex;
  align-items: flex-end;
  /* 今いるタブの罫を文字の左右へ 8px ずつ広げるので、間隔も広めに取る（罫どうしの間は 16px 残る）。 */
  gap: 0 var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 見出しと同じく、本文の行の高さの中にタブを載せない（載ると行が高くなり、見出しが下がる）。 */
.topics-filter__tabs > li {
  display: flex;
}

.topics-filter__tab {
  position: relative;
  display: inline-block;
  padding: var(--topics-heading-pad-top) 0 6px;
  border: 0;
  background: none;
  color: var(--topics-filter-ink);
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-snug);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

/* 押せる範囲だけを上と左右へ広げる（行の高さは見出しに合わせたまま、44px 前後を確保する）。 */
.topics-filter__tab::before {
  position: absolute;
  inset: -16px -8px 0;
  content: "";
}

/* 今いるタブの罫。開いている箱のタブに引く。どれも開いていなければ、今のページのタブ（.is-current・下）に引く。
   全件のページではどのタブにも引かない（全件へ戻るのは見出しの「Topics」）。左右へ 8px ずつ広げる（2026-10-05 ユーザー指摘）。 */
.topics-filter__tab::after {
  position: absolute;
  right: -8px;
  bottom: -1px;
  left: -8px;
  height: 1px;
  background: var(--color-heading);
  content: "";
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.topics-filter__tab[aria-expanded="true"]::after {
  opacity: 1;
}

.topics-filter__tab:focus-visible,
.topics-filter__option:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* 候補は押したタブの真下に、縦に並べた箱で重ねて出す（2026-10-05 ユーザー判断）。
   罫の下に横一列で出すと、候補の数（Category 5・Year 9）がタブの間隔より長く、どこにそろえてもどちらかのタブから外れた。
   箱は一覧の上に重ねる（開いても記事は下へ動かない）。候補の文字の左端はタブの文字の左端にそろえ、
   画面の右に入りきらないときだけ右端をそろえる（.is-align-end。js/topics-filter.js が開くときに測る）。
   出方はフェードだけ（サイト共通の決まり）。閉じた箱は visibility: hidden でフォーカスと読み上げから外し、
   消え終わってから外れるよう visibility だけ遅らせる。 */
.topics-filter__menu {
  position: relative;
}

.topics-filter__panel {
  position: absolute;
  top: calc(100% + 1px);
  /* 候補の文字（左右の余白 --space-sm + 枠 1px の内側）の左端を、タブの文字の左端にそろえる。 */
  left: calc(-1 * (var(--space-sm) + 1px));
  z-index: var(--z-dropdown);
  margin: 0;
  padding: var(--space-2xs) 0;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--ease),
    visibility 0s linear var(--dur-fast);
}

.topics-filter__panel.is-align-end {
  right: calc(-1 * (var(--space-sm) + 1px));
  left: auto;
}

.topics-filter__panel.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-fast) var(--ease),
    visibility 0s;
}

/* カテゴリ・年のページでは、そのタブに現在地の罫を引く（箱は開かない）。 */
.topics-filter:not(:has([aria-expanded="true"])) .topics-filter__tab.is-current::after {
  opacity: 1;
}

/* 1つの高さは 32px（押せる大きさの下限 24px は上回る）。 */
.topics-filter__option {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--space-sm);
  white-space: nowrap;
  color: var(--topics-filter-ink);
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.topics-filter__option[aria-current] {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* 検索。虫眼鏡の右に枠なしの入力欄を置く。769px 以上は最初から開いていて、スマホは虫眼鏡で開く。
   ⚠️ タッチ端末では入力する文字を 16px より小さくしない。iOS は 16px 未満の入力欄にフォーカスすると画面を拡大する。
   マウスの端末（pointer: fine）と表示の「Search」（placeholder）はタブと同じ 14px。 */
.topics-filter__search {
  display: flex;
  align-items: flex-end;
}

.topics-filter__search-toggle,
.topics-filter__search-close {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--topics-heading-pad-top) 0 8px;
  border: 0;
  background: none;
  color: var(--topics-filter-ink);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

/* タブと同じく、押せる範囲だけを上と左右へ広げる。 */
.topics-filter__search-toggle::before,
.topics-filter__search-close::before {
  position: absolute;
  inset: -16px -10px 0;
  content: "";
}

.topics-filter__search-toggle svg,
.topics-filter__search-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.topics-filter__search-close {
  display: none;
}

.topics-filter__search-input {
  width: 0;
  min-width: 0;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: var(--lh-snug);
  opacity: 0;
  visibility: hidden;
  -webkit-appearance: none;
  appearance: none;
  transition:
    width var(--dur) var(--ease),
    margin var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    visibility 0s linear var(--dur);
}

/* ブラウザが type="search" に付ける消去の × は残し、絵柄だけ虫眼鏡や閉じるボタンと同じ線の細い灰色に差し替える
   （2026-10-05 ユーザー指摘。既定の丸い × が浮いていた）。色はデータ URI の中なので #717171 を直に書く
   （--topics-filter-ink と同じ値）。Firefox はこのボタン自体を持たない。 */
.topics-filter__search-input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.topics-filter__search-input::-webkit-search-cancel-button {
  width: 12px;
  height: 12px;
  margin-left: var(--space-2xs);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='%23717171' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.topics-filter__search-input::placeholder {
  color: var(--topics-filter-ink);
  font-size: var(--fs-sm);
  opacity: 1;
}

/* 入力中は、欄の下の罫（見出しの罫と同じ位置）を現在地の罫と同じ濃さにする（枠の輪は重いので使わない）。 */
.topics-filter__search-input:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 var(--color-heading);
}

.topics-filter__search-toggle:focus-visible,
.topics-filter__search-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* マウスで操作する端末では、入力する文字もタブと同じ 14px にそろえる（2026-10-05 ユーザー指摘。16px だと
   隣のカテゴリ名より大きく見えた）。iOS の拡大はタッチ端末のフォーカスでしか起きないので、そちらは 16px のまま。 */
@media (pointer: fine) {
  .topics-filter__search-input {
    font-size: var(--fs-sm);
  }
}

/* 769px 以上は入力欄を最初から開いておく（2026-10-05 ユーザー判断。押して伸びる動きがうるさかった）。
   幅は 10rem に抑え、普段は罫を濃くしない（14rem と濃い罫では検索だけが目立った）。
   虫眼鏡は検索ボタンになる（js/topics-filter.js）。 */
@media (min-width: 769px) {
  .topics-filter__search-input {
    width: 10rem;
    margin-left: var(--space-2xs);
    opacity: 1;
    visibility: visible;
  }
}

/* スマホは行に収まらないので、虫眼鏡で開く。開いている間だけ Category / Year を隠して入力欄に場所を譲り、
   右端に閉じるボタンを出す（隠れたタブへの戻り方を見せる。2026-10-05 ユーザー指摘）。 */
@media (max-width: 768px) {
  .topics-filter.is-searching .topics-filter__tabs > li:not(.topics-filter__search-item) {
    display: none;
  }

  /* 幅は 12rem まで。狭い画面では「Topics」・虫眼鏡・× と間の 24px（計 7.5rem）を引いた幅に縮める
     （320px で入力欄が「Topics」に重なっていた）。 */
  .topics-filter__search.is-open .topics-filter__search-input {
    width: min(12rem, calc(100vw - 2 * var(--gutter) - 7.5rem));
    margin-inline: var(--space-2xs);
    box-shadow: 0 1px 0 var(--color-line-strong);
    opacity: 1;
    visibility: visible;
    transition:
      width var(--dur) var(--ease),
      margin var(--dur) var(--ease),
      opacity var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease),
      visibility 0s;
  }

  .topics-filter__search.is-open .topics-filter__search-input:focus-visible {
    box-shadow: 0 1px 0 var(--color-heading);
  }

  .topics-filter__search.is-open .topics-filter__search-close:not([hidden]) {
    display: grid;
  }

  /* スマホは右端に閉じる × があるので、消去の × は出さない（意味の違う × が2つ並ぶと紛らわしい）。 */
  .topics-filter__search-input::-webkit-search-cancel-button {
    display: none;
  }
}

@media (hover: hover) {
  .topics-filter__tab:hover,
  .topics-filter__option:hover,
  .topics-filter__search-toggle:hover,
  .topics-filter__search-close:hover {
    color: var(--color-link-hover);
  }
}