/**
 * ONEsta — 見出しデザインパターン
 *
 * data-onesta-heading 属性に応じて5パターンのスタイルを適用。
 * カラーは theme.json の CSS カスタムプロパティを参照。
 */

/* === underline — 下線 === */
[data-onesta-heading="underline"] {
	padding-bottom: 0.3em;
	border-bottom: 3px solid var(--wp--preset--color--primary, currentColor);
}

/* === left-border — 左ボーダー === */
[data-onesta-heading="left-border"] {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding-left: 0;
}

[data-onesta-heading="left-border"]::before {
	content: "";
	display: inline-block;
	width: 1.8em;
	height: 0.24em;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, currentColor);
}

/* === band — 帯 === */
[data-onesta-heading="band"] {
	padding: 0.4em 0.8em;
	background: var(--wp--preset--color--primary, #333);
	color: var(--wp--preset--color--neutral-50, #fff);
}

/* === bubble — 吹き出し === */
[data-onesta-heading="bubble"] {
	position: relative;
	padding: 0.6em 1em;
	background: var(--wp--preset--color--surface-card, #f5f5f5);
	border-radius: 8px;
}

[data-onesta-heading="bubble"]::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 1.5em;
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--surface-card, #f5f5f5);
	transform: rotate(45deg);
}