/* =============================================
   Snow Monkey Heading Designs - フロントエンドスタイル
   Snow Monkey の CSS変数に完全追従
   --accent-color / --sub-accent-color ほかを使用
   ============================================= */

/* ─────────────────────────────────────────────
   共通
───────────────────────────────────────────── */
[class*="smhd-style-"] {
	position: relative;
}

/* =============================================
   1. 横線挟み（タイトル左右に横線）
      ウィジェットタイトルと同じ構造を見出しに応用
   ============================================= */
.smhd-style-hr-sandwich {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
	letter-spacing: 0.08em;
	/* ブロック要素として横幅いっぱいに広がる */
	width: 100%;
}

.smhd-style-hr-sandwich::before,
.smhd-style-hr-sandwich::after {
	content: "";
	display: block;
	flex: 1 0 0%;
	min-width: 20px;
	height: 1px;
	background-color: var(--accent-color, #cd162c);
}

/* =============================================
   2. 横線挟み・太め（どっしり系）
   ============================================= */
.smhd-style-hr-bold {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 0.7em;
	letter-spacing: 0.05em;
	width: 100%;
}

.smhd-style-hr-bold::before,
.smhd-style-hr-bold::after {
	content: "";
	display: block;
	flex: 1 0 0%;
	min-width: 20px;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--accent-color, #cd162c),
		var(--light-accent-color, #ed5c6d)
	);
	border-radius: 2px;
}

/* =============================================
   3. 横線挟み・ドット（点線）
   ============================================= */
.smhd-style-hr-dot {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
	letter-spacing: 0.06em;
	width: 100%;
}

.smhd-style-hr-dot::before,
.smhd-style-hr-dot::after {
	content: "";
	display: block;
	flex: 1 0 0%;
	min-width: 20px;
	height: 2px;
	background-image: repeating-linear-gradient(
		to right,
		var(--accent-color, #cd162c) 0,
		var(--accent-color, #cd162c) 4px,
		transparent 4px,
		transparent 10px
	);
}

/* =============================================
   4. Snow Monkey 標準 H2 スタイル準拠
      （左ボーダー＋グレー背景 をそのまま踏襲）
   ============================================= */
.smhd-style-sm-default {
	border-left: var(--entry-content-h2-border-left, 4px solid var(--accent-color, #cd162c));
	background-color: var(--entry-content-h2-background-color, #f7f7f7);
	padding: var(--entry-content-h2-padding,
		0.45em 0.45em 0.45em 0.9em
	);
}

/* =============================================
   5. 左ボーダー2色（アクセント＋サブアクセント）
   ============================================= */
.smhd-style-dual-border {
	padding: 0.4em 0.8em 0.4em 1em;
	border-left: 6px solid var(--accent-color, #cd162c);
	box-shadow: -10px 0 0 0 var(--lighter-accent-color, #f49aa5);
}

/* =============================================
   6. 下線スタイル（Snow Monkey H3準拠 + アクセント）
   ============================================= */
.smhd-style-underline-accent {
	padding-bottom: 0.4em;
	border-bottom: var(--entry-content-h3-border-bottom, 1px solid #eee);
	position: relative;
}

.smhd-style-underline-accent::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 2.5em;
	height: 3px;
	background: var(--accent-color, #cd162c);
	border-radius: 2px;
}

/* =============================================
   7. 角マーク付き（左上下に角飾り）
   ============================================= */
.smhd-style-corner-mark {
	padding: 0.3em 0.6em 0.3em 1.1em;
}

.smhd-style-corner-mark::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 8px;
	border-top: 3px solid var(--accent-color, #cd162c);
	border-left: 3px solid var(--accent-color, #cd162c);
}

.smhd-style-corner-mark::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 8px;
	height: 8px;
	border-bottom: 3px solid var(--accent-color, #cd162c);
	border-left: 3px solid var(--accent-color, #cd162c);
}

/* =============================================
   8. 背景ベタ塗り（アクセントカラー）
   ============================================= */
.smhd-style-filled {
	background-color: var(--accent-color, #cd162c);
	color: #fff !important;
	padding: 0.4em 1em;
	border-radius: 3px;
}

/* =============================================
   9. サブアクセントカラー横線挟み
   ============================================= */
.smhd-style-hr-sub {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
	letter-spacing: 0.06em;
	width: 100%;
}

.smhd-style-hr-sub::before,
.smhd-style-hr-sub::after {
	content: "";
	display: block;
	flex: 1 0 0%;
	min-width: 20px;
	height: 1px;
	background-color: var(--sub-accent-color, #707593);
}

/* =============================================
   10. 二重下線
   ============================================= */
.smhd-style-double-underline {
	padding-bottom: 0.5em;
	border-bottom: 3px solid var(--accent-color, #cd162c);
	box-shadow: 0 4px 0 0 var(--lighter-accent-color, #f49aa5);
}