/*
 * Sainou Site Layout
 * Frontend
 */

:root {
	--sainou-content-width: 740px;
	--sainou-content-gutter: 25px;
	--sainou-content-breakpoint: 790px;
}

/*
 * 通常コンテンツ用。
 * PCでは740px固定、790px未満では左右25pxを確保します。
 *
 * 100vwを基準にすることで、親要素が740pxのときに
 * 740px - 50px = 690px となる問題を避けます。
 */
.sainou-content-inner,
:root .is-layout-constrained > .sainou-content-inner {
	box-sizing: border-box;
	width: var(--sainou-content-width);
	max-width: none !important;
	margin-inline: auto;
}

@media (width < 790px) {
	.sainou-content-inner,
	:root .is-layout-constrained > .sainou-content-inner {
		width: calc(100vw - (var(--sainou-content-gutter) * 2));
	}
}

/*
 * 背景色・背景画像などを画面幅いっぱいに広げる外側セクション。
 *
 * X-T9 が alignfull に付与する wrapper 基準の負マージンより
 * こちらを優先し、ビューポート中央を基準に全幅化します。
 */
.sainou-section {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

body .is-layout-constrained .sainou-section.alignfull,
body .is-layout-constrained > .sainou-section.alignfull,
body .wp-block-post-content .sainou-section.alignfull,
body .wp-block-group.sainou-section.alignfull {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/*
 * 任意機能:
 * 投稿コンテンツブロックに sainou-page-content を付けると、
 * 直下の通常ブロックを740px / スマホ左右25pxに揃えます。
 */
.sainou-page-content > :where(:not(.alignfull)) {
	box-sizing: border-box;
	width: var(--sainou-content-width);
	max-width: none;
	margin-inline: auto;
}

@media (width < 790px) {
	.sainou-page-content > :where(:not(.alignfull)) {
		width: calc(100vw - (var(--sainou-content-gutter) * 2));
	}
}

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