@charset 'utf-8';
@use '../global' as *;

/* container
---------------------------------------------*/
%l-container {
	width: min(var(--container-width), 100%);
	margin-inline: auto;
	padding-inline: var(--container-spacing--x);
}

.l-container {
	@extend %l-container;
}

.l-container.l-container--full-width {
	max-width: 100%;
	width: 100%;
	padding: 0;
}


/* header
---------------------------------------------*/
.l-header {
	width: 100%;
}

/* footer
---------------------------------------------*/
.l-footer {
	// padding: 16px 0;
}

.l-footer-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


/* contents
---------------------------------------------*/

.l-content-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--contents-spacing) var(--content-sidebar-gap);
	padding-block: var(--contents-spacing);
	@extend %l-container;


	@include mq('lg', '>=') {
		flex-flow: row wrap;
		justify-content: space-between;
	}
}

.l-content-area {
	max-width: 100%;
	min-width: 0; // flex 内でのテキスト溢れ防止
	margin: 0 0 var(--contents-spacing);
	@include mq('lg', '>=') {
		// サイドバーありレイアウトでは残りの幅をすべて使う
		flex: 1;
	}
}


// 投稿ナビゲーション、コメントエリア
.l-post-nav {
	margin-block: var(--contents-spacing) 0;
}
.l-comments {
	@extend .l-post-nav;
}


// サイドバーエリア
.l-sidebar-area {
	max-width: 100%;
	@include mq('lg', '>=') {
		max-width: var(--sidebar-width, 25%);
		flex-shrink: 0;
	}
}

.l-sidebar {
	height: 100%;
}

.sidebar .widget {

}

// 左サイドバーレイアウト
.l-content-sidebar--sc {
	.l-content-area {
		@include mq('lg', '>=') {
			order: 1;
		}
	}
}

// サイドバーなし
.l-content-sidebar:is(.l-content-sidebar--no-sidebar, .l-content-sidebar--full-width) {
	// サイドバーなしのときはコンテンツエリアを最大幅に
	display: block;
}

// --content-width でコンテンツ最大幅を制御（archive / single / page の個別設定も同変数を上書きして使用）
.l-content-sidebar--no-sidebar {
	.l-content-area {
		max-width: var(--content-width, 100%);
		margin-inline: auto;
	}
}

.l-content-sidebar--full-width {
	width: 100%;
	padding-inline: 0;
	.l-content-area {
		margin-inline: auto;
	}

	.l-main-content {
		> :where(:not(.l-article)) {
			padding-inline: var(--container-spacing--x);
		}
	}
}

// 縦のスペースなし
.l-content-sidebar.is-no-spacing-y {
	padding-block: 0;
}