/*
 * sidebar.css — サイドバーとウィジェット。
 * ウィジェットエリア ID は STORK19 と同一（sidebar1 / sidebar-sp）だが、
 * クラス名は PICICO 独自（pc-widget）。
 */

.pc-sidebar {
	display: grid;
	gap: var(--picico-space-lg);
	margin-block-start: var(--picico-space-xxl);
	min-width: 0;
}

.pc-widget {
	min-width: 0;
}

.pc-widget + .pc-widget {
	margin-block-start: var(--picico-space-lg);
}

/*
 * ウィジェットのタイトルは STORK19 と同じ「明るいシアンの塗り帯」に戻す。
 * #3bbad3 に白文字は 1.9:1 で読めないので、載せる文字は必ず
 * --picico-color-on-primary-fill（= ink、6.80:1）にする。
 */
.pc-widget__title {
	margin-block-end: var(--picico-space-sm);
	padding: 0.45em 0.8em;
	border-left: 4px solid var(--picico-color-primary);
	border-radius: 0 var(--picico-radius-sm) var(--picico-radius-sm) 0;
	color: var(--picico-color-on-primary-fill);
	background-color: var(--picico-color-primary-fill);
	font-size: var(--picico-font-size-sm);
	letter-spacing: 0.04em;
}

.pc-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-widget li {
	font-size: var(--picico-font-size-sm);
	line-height: 1.7;
}

.pc-widget li + li {
	margin-block-start: var(--picico-space-xs);
	padding-block-start: var(--picico-space-xs);
	border-top: 1px solid var(--picico-color-border);
}

/*
 * ウィジェットのリンクは縦に積む一覧なので、指で押せる高さを確保する（Phase 4）。
 * 検査で 16px しかなく、隣の行と押し間違えやすかった。
 */
.pc-widget li > a {
	display: flex;
	align-items: center;
	min-height: var(--picico-tap-size);
}

.pc-widget a {
	color: var(--picico-color-text);
	text-decoration: none;
}

.pc-widget a:hover {
	color: var(--picico-color-primary);
	text-decoration: underline;
}

/* 入れ子（子カテゴリー）は罫線を引かずに一段下げるだけ。 */
.pc-widget li ul {
	margin-block-start: var(--picico-space-xs);
	margin-inline-start: var(--picico-space-sm);
}

.pc-widget li ul li + li {
	border-top: 0;
	padding-block-start: 0;
}

/* カテゴリー件数。 */
.pc-widget .post-count,
.pc-widget li .count {
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

/* アーカイブなどの <select>。 */
.pc-widget select {
	width: 100%;
	padding: 0.5em 0.6em;
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-surface);
}

.pc-widget img {
	height: auto;
	border-radius: var(--picico-radius-sm);
}

/* SP 用ウィジェットエリアは狭い幅でだけ出す。PC 幅では sidebar1 のみ。 */
.pc-sidebar__area--sp {
	display: block;
}

@media (min-width: 64rem) {
	.pc-sidebar {
		margin-block-start: 0;
	}

	.pc-sidebar__area--sp {
		display: none;
	}
}