/****************************
* サイドバー共通
****************************/

.sidebar {
  border-radius: 8px;
}

/* ウィジェットを収める ul のブラウザ既定の左余白を消す。
   single.css は ul 全体に指定を持っているが、category.php など
   他のテンプレートでも効くようにサイドバー側でも持たせている。 */
.sidebar ul {
  padding-left: 0;
}

/****************************
* サイドバーのリンク色
****************************/

/* 記事リストはリスト自体が押せると伝わるため、色ではなく文字色を落として整える。
   活動のあしあと一覧（activities.css）の記事リンクと同じ考え方に揃えている。
   :visited を指定しないとブラウザ既定の紫になり、薄ピンクの背景で濁って見える。 */
.sidebar a,
.sidebar a:visited {
  color: #575757;
  text-decoration: none;
  transition: color 0.3s linear;
}

.sidebar a:hover,
.sidebar a:focus-visible {
  color: #a33d52;
  text-decoration: underline;
}

/* 日付は記事タイトルより一段弱く */
.sidebar .wp-block-latest-posts__post-date {
  color: #767676;
}

/****************************
* ウィジェットの間隔
****************************/

/* 見出しウィジェットの手前を空け、見出しと直後のリストがひと組に見えるようにする */
.sidebar .widget_text:not(:first-child) {
  margin-top: 34px;
}

.sidebar .widget_text p {
  margin-bottom: 12px;
}

/****************************
* カテゴリー一覧
****************************/

.sidebar .wp-block-categories {
  margin: 0;
}

.sidebar .cat-item {
  border-bottom: 1px solid #f0dde2;
}

.sidebar .cat-item:first-child {
  border-top: 1px solid #f0dde2;
}

/* 行全体を押せる面にする。文字だけのリンクより狙いやすく、スマホでも押しやすい */
.sidebar .cat-item a {
  display: block;
  position: relative;
  padding: 12px 4px 12px 20px;
}

/* 行が押せることを示す矢印 */
.sidebar .cat-item a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 5px;
  height: 5px;
  border-top: 2px solid #d09aa8;
  border-right: 2px solid #d09aa8;
  transform: translateY(-50%) rotate(45deg);
}

/* 面で示すので下線は出さず、背景と矢印の色で反応させる */
.sidebar .cat-item a:hover,
.sidebar .cat-item a:focus-visible {
  background-color: #f9e6eb;
  text-decoration: none;
}

.sidebar .cat-item a:hover::before,
.sidebar .cat-item a:focus-visible::before {
  border-color: #a33d52;
}