/* ==========================================================================
   octheme: 共通セクション見出しシステム
   ----------------------------------------------------------------------------
   構造 (structure):
     .oc-heading--simple        JA タイトル単体
     .oc-heading--bilingual     EN サブタイトル + JA メインタイトル
     .oc-heading--with-lead     JA タイトル + リード文
     .oc-heading--with-sub-lead JA タイトル + サブタイトル + リード文

   装飾 (variant):
     [なし]                  シンプル（既定）
     .oc-heading--rounded    ピル型ボーダー枠
     .oc-heading--underline  下線アクセント

   独自バリアントの追加方法:
     1. 本ファイル末尾 もしくは案件用 CSS で .oc-heading--{slug} を定義
     2. functions.php で octheme_heading_variants フィルタに登録
        (ACF サイト共通設定の選択肢に追加される)
   ========================================================================== */

.oc-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	line-height: 1;
}

.oc-heading[data-align="center"] {
	align-items: center;
	text-align: center;
}

.oc-heading__en {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.oc-heading__ja {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text);
	margin: 0;
}

.oc-heading__sub {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	margin: 0.625rem 0 0;
}

.oc-heading__lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text);
	margin: 1.25rem 0 0;
}

/* Variant: rounded — ピル型ボーダー枠 */

.oc-heading--rounded {
	align-items: center;
}

.oc-heading--rounded .oc-heading__ja {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: 0 1.875rem;
	height: 3.5rem;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--background);
}

/* Variant: underline — 下線アクセント */

.oc-heading--underline .oc-heading__ja {
	display: inline-block;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

/* Mobile
   ========================================================================== */

@media (max-width: 768px) {

	.oc-heading__en {
		font-size: var(--wp--preset--font-size--base);
	}

	.oc-heading__ja {
		font-size: var(--wp--preset--font-size--2-xl);
	}

	.oc-heading__sub {
		font-size: var(--wp--preset--font-size--lg);
	}

	.oc-heading--rounded .oc-heading__ja {
		font-size: var(--wp--preset--font-size--base);
		height: auto;
		padding: 0.5rem 1.5rem;
	}
}