/*!
 * MM Feed Merger
 *
 * 設計方針
 * 1. 余白は padding だけで作る（margin は 0 に潰すリセット用途のみ）。
 *    行全体を a 要素が覆っているので、余白に見える部分もすべてクリックできる。
 * 2. 干渉しない / されない
 *    - すべてのセレクタが .mmfm を含むので、テーマ側の要素には一切影響しない。
 *    - 逆にテーマ側は `.widget ul li`（詳細度 0,1,2）や `.widget ul li:before`
 *      （0,1,3）で margin / dotted border / "・" を差し込んでくるため、こちらは
 *      常にクラス2個以上（0,2,x）で書いて確実に上書きする。!important は使わない。
 * 3. 色は currentColor 由来の相対値だけを使う。明るいテーマでも暗いテーマでも、
 *    どんなアクセントカラーのサイトでも自動で馴染む。
 *
 * 調整用のカスタムプロパティ（テーマ側の追加CSSで上書き可能）
 *   --mmfm-title-lines : タイトルの最大行数（既定 2、全文表示したいなら 99）
 *   --mmfm-pad-y / --mmfm-pad-x : クリック領域の余白
 *   --mmfm-radius      : ホバー時の背景の角丸
 */

.mmfm {
	--mmfm-radius: 10px;
	--mmfm-pad-y: 0.8em;
	--mmfm-pad-x: 0.6em;
	--mmfm-title-lines: 2;
	/* color-mix 非対応ブラウザ向けのフォールバック。中間グレーなので明暗どちらの背景でも破綻しない */
	--mmfm-line: rgba(128, 128, 128, 0.26);
	--mmfm-hover: rgba(128, 128, 128, 0.1);
	--mmfm-chip: rgba(128, 128, 128, 0.16);
}

@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
	.mmfm {
		--mmfm-line: color-mix(in srgb, currentColor 16%, transparent);
		--mmfm-hover: color-mix(in srgb, currentColor 7%, transparent);
		--mmfm-chip: color-mix(in srgb, currentColor 10%, transparent);
	}
}

/* `.mmfm *` のようなワイルドカードは詳細度が足りずテーマに負けうるので、対象を明示する */
.mmfm.mmfm-list,
.mmfm .mmfm-item,
.mmfm .mmfm-link,
.mmfm .mmfm-body,
.mmfm .mmfm-title,
.mmfm .mmfm-meta,
.mmfm .mmfm-site,
.mmfm .mmfm-date,
.mmfm .mmfm-arrow,
.mmfm .mmfm-heading {
	box-sizing: border-box;
}

.mmfm.mmfm-list {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* テーマの `.widget ul li` が入れてくる padding / margin-bottom / dotted border を打ち消し、
   自前のヘアラインだけを残す */
.mmfm .mmfm-item {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--mmfm-line);
	line-height: inherit;
	list-style: none;
}

.mmfm .mmfm-item:first-child {
	border-top: 0;
}

/* テーマが li に差し込む装飾（"・" などの行頭記号）を無効化する */
.mmfm .mmfm-item::before,
.mmfm .mmfm-item::after {
	content: none;
	display: none;
}

/* 行全体がクリック領域。余白はすべてこの padding が担う */
.mmfm .mmfm-link {
	display: flex;
	align-items: center;
	padding: var(--mmfm-pad-y) var(--mmfm-pad-x);
	border: 0;
	border-radius: var(--mmfm-radius);
	background-color: transparent;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease;
}

/* hover 時の文字色はあえて指定しない。テーマがアクセントカラーを持っていれば
   それがそのまま効き、無ければ背景と矢印だけが反応する */
.mmfm .mmfm-link:hover,
.mmfm .mmfm-link:focus-visible {
	background-color: var(--mmfm-hover);
}

.mmfm .mmfm-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.mmfm .mmfm-body {
	flex: 1 1 auto;
	min-width: 0;
}

.mmfm .mmfm-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mmfm-title-lines);
	line-clamp: var(--mmfm-title-lines);
	color: inherit;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.mmfm .mmfm-link:hover .mmfm-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.mmfm .mmfm-meta {
	display: flex;
	align-items: center;
	padding-top: 0.4em;
	font-size: 0.75em;
	line-height: 1.4;
	opacity: 0.68;
}

.mmfm .mmfm-site {
	display: inline-block;
	overflow: hidden;
	max-width: 62%;
	padding: 0.16em 0.55em;
	border-radius: 999px;
	background-color: var(--mmfm-chip);
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mmfm .mmfm-date {
	padding-left: 0.55em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mmfm .mmfm-arrow {
	display: flex;
	flex: none;
	padding-left: 0.5em;
	opacity: 0.32;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.mmfm .mmfm-arrow svg {
	display: block;
	width: 0.85em;
	height: 0.85em;
}

.mmfm .mmfm-link:hover .mmfm-arrow,
.mmfm .mmfm-link:focus-visible .mmfm-arrow {
	opacity: 0.85;
	transform: translateX(2px);
}

/* ショートコードで title="" を指定したときの見出し */
.mmfm .mmfm-heading {
	margin: 0;
	padding: 0 var(--mmfm-pad-x) 0.5em;
	font-weight: 700;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {

	.mmfm .mmfm-link,
	.mmfm .mmfm-arrow {
		transition: none;
	}

	.mmfm .mmfm-link:hover .mmfm-arrow,
	.mmfm .mmfm-link:focus-visible .mmfm-arrow {
		transform: none;
	}
}