/* ===== カスタムブロック共通レイアウト =====
 * ブロック用の変数定義・アラインメント・ページコンテンツラッパー
 * 別テーマへの移植時はこのファイルごと持っていく
 */

/* ----- セクション間隔の変数定義 ----- */
:root {
	--oc-section-gap: var(--wp--preset--spacing--4-xl, 8.75rem);
	--oc-content-width: calc(var(--wp--style--global--content-size, 1248px) - var(--wp--preset--spacing--md, 1.5rem) * 2);
}

@media (max-width: 768px) {

	:root {
		--oc-section-gap: var(--wp--preset--spacing--2-xl, 4rem);
	}
}

/* ----- WordPress ブロックアラインメント ----- */
.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.alignwide {
	max-width: var(--wp--style--global--wide-size, 1248px);
	margin-left: auto;
	margin-right: auto;
}

/* ----- 固定ページ全体のオーバーフロー制御 -----
 * .alignfull の 100vw はスクロールバー幅を含むため、
 * 親要素で overflow-x を clip して横スクロールを防ぐ。
 * hidden ではなく clip を使うことで sticky 等に影響しない。
 */
.page-general,
.page-beginner {
	overflow-x: clip;
}

/* ----- 固定ページ: ブロックコンテンツのレイアウト ----- */
.oc-page-content {
	max-width: var(--wp--style--global--content-size, 1248px);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--md);
}

.oc-page-content > .alignfull {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* ----- エディター内: 100vw ルールを無効化 -----
 * エディターは独自の alignfull 処理を持つ。
 * フロント用の 100vw / calc(50% - 50vw) がエディター iframe 内で
 * 適用されると横スクロールが発生するため、リセットする。
 */
.editor-styles-wrapper .alignfull,
.editor-styles-wrapper .oc-page-content > .alignfull {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* エディター内の全 octheme ブロックが親幅を超えないようにする */
.editor-styles-wrapper [class*="wp-block-octheme-"] {
	max-width: 100%;
	overflow-x: auto;
	box-sizing: border-box;
}

/* ----- セクションブロック共通スタイル -----
 * 各ブロックの <section> に .oc-section を付与すると、
 * セクション間隔・隣接ブロック間の二重padding解消が自動適用される
 */
.oc-section {
	padding-top: var(--oc-section-gap);
	padding-bottom: var(--oc-section-gap);
}

/* 隣接セクションの二重padding解消：
 * 原則として後続セクションの padding-top を 0 にし、
 * 前のセクションの padding-bottom だけで間隔を取る。
 * 背景色が異なる場合（色の切れ目）のみ padding-top を復元する。
 */
.oc-section + .oc-section {
	padding-top: 0;
}

/* 背景色の切れ目（bg あり→なし、なし→あり）：padding-top を復元 */
.oc-section.oc-section--has-bg + .oc-section:not(.oc-section--has-bg),
.oc-section:not(.oc-section--has-bg) + .oc-section.oc-section--has-bg {
	padding-top: var(--oc-section-gap);
}

/* 非セクション要素（見出し・段落等）の直後のセクション：
 * 前の要素の margin-bottom だけで十分な間隔があるため、
 * セクション自体の padding-top を除去して二重余白を防ぐ。
 */
.oc-page-content > :not(.oc-section) + .oc-section {
	padding-top: 0;
}

/* ----- エディター内: セクション間隔の適用 -----
 * エディターではブロックが .wp-block-octheme-* の div でラップされるため、
 * .oc-section の隣接セレクタが効かない。ブロックラッパーレベルで制御する。
 */
.editor-styles-wrapper [class*="wp-block-octheme-"] {
	padding-top: var(--oc-section-gap);
	padding-bottom: var(--oc-section-gap);
}

.editor-styles-wrapper [class*="wp-block-octheme-"] + [class*="wp-block-octheme-"] {
	padding-top: 0;
}

/* 非ブロック要素（見出し等）の直後の octheme ブロック：padding-top を除去 */
.editor-styles-wrapper :not([class*="wp-block-octheme-"]) + [class*="wp-block-octheme-"] {
	padding-top: 0;
}

/* サブセクション（direction-stepsなど、小さめの余白） */
.oc-section--sub {
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--xl);
}

/* ----- セクション区切り（角丸バリエーション） -----
 * 背景色付きセクション同士の重なりで角丸の視覚効果を作る。
 * ::before で次セクションの背景色レイヤーを敷き、
 * セクション自体に border-radius を設定して区切りを表現する。
 */
.oc-section--rounded {
	position: relative;
	z-index: 1;
}

.oc-section--rounded::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* 角丸パターン: 左下のみ (0 0 0 50px) */
.oc-section--round-bl {
	border-radius: 0 0 0 50px;
}

/* 角丸パターン: 左上＋右下 (0 50px 0 50px) */
.oc-section--round-tr-bl {
	border-radius: 0 50px 0 50px;
}

/* 角丸パターン: 右上のみ (0 50px 0 0) */
.oc-section--round-tr {
	border-radius: 0 50px 0 0;
}

/* 角丸パターン: 上部両方 (50px 50px 0 0) */
.oc-section--round-top {
	border-radius: 50px 50px 0 0;
}

/* ::before に前後セクションの背景色を設定（サイト固有CSSで上書き） */
.oc-section--rounded::before {
	background: var(--oc-section-behind-bg, transparent);
}

@media (max-width: 768px) {

	.oc-section--round-bl {
		border-radius: 0 0 0 30px;
	}

	.oc-section--round-tr-bl {
		border-radius: 0 30px 0 30px;
	}

	.oc-section--round-tr {
		border-radius: 0 30px 0 0;
	}

	.oc-section--round-top {
		border-radius: 30px 30px 0 0;
	}
}