/* ============================================================
   スタイル見出し (possweb/style-heading)
   ============================================================ */

/* --- 共通 -------------------------------------------------- */
.wp-block-possweb-style-heading {
	box-sizing: border-box;
}

/*
 * font-size は CSS 変数 --sh-font-size を参照。未設定時はラッパーの値を継承。
 * レスポンシブ値はブロックインスタンスごとに生成される <style> タグ
 * （.sh-block-{id} セレクタ）でメディアクエリを使って設定する。
 * color は CSS 変数 --sh-text-color を参照。未設定時はラッパーの値を継承（デフォルト #3A3A3A）。
 * text-align は sh-align-* クラスが設定する CSS 変数 --sh-text-align を参照する。
 */
.wp-block-possweb-style-heading h1,
.wp-block-possweb-style-heading h2,
.wp-block-possweb-style-heading h3,
.wp-block-possweb-style-heading h4,
.wp-block-possweb-style-heading h5,
.wp-block-possweb-style-heading h6 {
	margin: 0;
	padding: 0;
	font-size: var(--sh-font-size, inherit);
	color: var(--sh-text-color, inherit);
	font-weight: var(--sh-font-weight, 600);
	line-height: var(--sh-line-height, inherit);
	letter-spacing: var(--sh-letter-spacing, normal);
	text-align: var(--sh-text-align, inherit);
}

/* --- フォントサイズ（レスポンシブ）/ テキストカラー デフォルト ------------ */
/*
 * ラッパーにヘッドタグ別のデフォルト値を定義。
 * すべての値はプラグイン内で完結させ、テーマ変数には依存しない。
 * エディタから font-size / color を指定するとラッパーのインラインスタイルが
 * 優先されるため、ブロックエディタの各コントロールも引き続き機能する。
 */

/* PC */
.wp-block-possweb-style-heading:has(h1) { font-size: 40px; color: #3A3A3A; }
.wp-block-possweb-style-heading:has(h2) { font-size: 28px; color: #3A3A3A; }
.wp-block-possweb-style-heading:has(h3) { font-size: 24px; color: #3A3A3A; }
.wp-block-possweb-style-heading:has(h4) { font-size: 20px; color: #3A3A3A; }
.wp-block-possweb-style-heading:has(h5) { font-size: 18px; color: #3A3A3A; }
.wp-block-possweb-style-heading:has(h6) { font-size: 16px; color: #3A3A3A; }

/* SP */
@media screen and (max-width: 639px) {
	.wp-block-possweb-style-heading:has(h1) { font-size: 28px; }
	.wp-block-possweb-style-heading:has(h2) { font-size: 22px; }
	.wp-block-possweb-style-heading:has(h3) { font-size: 20px; }
	.wp-block-possweb-style-heading:has(h4) { font-size: 18px; }
	.wp-block-possweb-style-heading:has(h5) { font-size: 16px; }
	.wp-block-possweb-style-heading:has(h6) { font-size: 14px; }
}

/* --- 線の配置アライメント変数 ------------------------------ */
/*
 * sh-align-* クラスで CSS 変数を定義し、上記 h* の text-align に反映する。
 * インラインスタイルではなく CSS クラス経由にすることで保存済みブロックとの
 * 互換性を保ちつつ、テーマの h* スタイルより高い詳細度で上書きできる。
 */
.sh-align-left   { --sh-text-align: left;   }
.sh-align-center { --sh-text-align: center; }
.sh-align-right  { --sh-text-align: right;  }

/* --- 左縦線スタイル (left-border) -------------------------- */
.wp-block-possweb-style-heading.possweb-style-heading--left-border {
	border-left-width: var(--sh-thickness, 3px);
	border-left-style: var(--sh-line-style, solid);
	border-left-color: var(--sh-color, #333333);
	padding-left: var(--sh-margin, 12px);
}

/* --- 下線（全幅）スタイル (bottom-line) -------------------- */
.wp-block-possweb-style-heading.possweb-style-heading--bottom-line::after {
	content: '';
	display: block;
	width: 100%;
	border-top-width: var(--sh-thickness, 3px);
	border-top-style: var(--sh-line-style, solid);
	border-top-color: var(--sh-color, #333333);
	margin-top: var(--sh-margin, 12px);
}

/* --- 両サイドラインスタイル (both-sides) ------------------- */
/*
 * 文字とラインをまとめて中央寄せにし、合計幅がコンテナを超えた場合は
 * overflow: hidden でラインを左右均等にクリップする。
 * justify-content: center により文字は常に中央に留まる。
 */
.wp-block-possweb-style-heading.possweb-style-heading--both-sides {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sh-margin, 12px);
	overflow: hidden;
}

.wp-block-possweb-style-heading.possweb-style-heading--both-sides::before,
.wp-block-possweb-style-heading.possweb-style-heading--both-sides::after {
	content: '';
	flex: 0 0 var(--sh-line-width, 50px);
	border-top-width: var(--sh-thickness, 3px);
	border-top-style: var(--sh-line-style, solid);
	border-top-color: var(--sh-color, #333333);
}

.wp-block-possweb-style-heading.possweb-style-heading--both-sides h1,
.wp-block-possweb-style-heading.possweb-style-heading--both-sides h2,
.wp-block-possweb-style-heading.possweb-style-heading--both-sides h3,
.wp-block-possweb-style-heading.possweb-style-heading--both-sides h4,
.wp-block-possweb-style-heading.possweb-style-heading--both-sides h5,
.wp-block-possweb-style-heading.possweb-style-heading--both-sides h6 {
	flex: 0 0 auto;
	text-align: center;
}

/* --- アンダーラインスタイル (underline) -------------------- */
.wp-block-possweb-style-heading.possweb-style-heading--underline::after {
	content: '';
	display: block;
	width: var(--sh-line-width, 50px);
	border-top-width: var(--sh-thickness, 3px);
	border-top-style: var(--sh-line-style, solid);
	border-top-color: var(--sh-color, #333333);
	margin-top: var(--sh-margin, 12px);
}

/* 左揃え：線は左、文字も左（デフォルト） */
.wp-block-possweb-style-heading.possweb-style-heading--underline.sh-align-left {
	text-align: left;
}
.wp-block-possweb-style-heading.possweb-style-heading--underline.sh-align-left::after {
	margin-right: auto;
	margin-left: 0;
}

/* 中央揃え：線も文字も中央 */
.wp-block-possweb-style-heading.possweb-style-heading--underline.sh-align-center {
	text-align: center;
}
.wp-block-possweb-style-heading.possweb-style-heading--underline.sh-align-center::after {
	margin-left: auto;
	margin-right: auto;
}

/* 右揃え：線も文字も右 */
.wp-block-possweb-style-heading.possweb-style-heading--underline.sh-align-right {
	text-align: right;
}
.wp-block-possweb-style-heading.possweb-style-heading--underline.sh-align-right::after {
	margin-left: auto;
	margin-right: 0;
}

/* --- オーバーラインスタイル (overline) --------------------- */
.wp-block-possweb-style-heading.possweb-style-heading--overline::before {
	content: '';
	display: block;
	width: var(--sh-line-width, 50px);
	border-top-width: var(--sh-thickness, 3px);
	border-top-style: var(--sh-line-style, solid);
	border-top-color: var(--sh-color, #333333);
	margin-bottom: var(--sh-margin, 12px);
}

/* 左揃え：線は左、文字も左（デフォルト） */
.wp-block-possweb-style-heading.possweb-style-heading--overline.sh-align-left {
	text-align: left;
}
.wp-block-possweb-style-heading.possweb-style-heading--overline.sh-align-left::before {
	margin-right: auto;
	margin-left: 0;
}

/* 中央揃え：線も文字も中央 */
.wp-block-possweb-style-heading.possweb-style-heading--overline.sh-align-center {
	text-align: center;
}
.wp-block-possweb-style-heading.possweb-style-heading--overline.sh-align-center::before {
	margin-left: auto;
	margin-right: auto;
}

/* 右揃え：線も文字も右 */
.wp-block-possweb-style-heading.possweb-style-heading--overline.sh-align-right {
	text-align: right;
}
.wp-block-possweb-style-heading.possweb-style-heading--overline.sh-align-right::before {
	margin-left: auto;
	margin-right: 0;
}