/* LAYOUT */

/* Settings */

body{
--grid-gap: 2rem;
--site-width: max(80vw,96rem);
--root-padding: 2rem;
--sidebar-width: min(22rem,30vw);
}
body.full-width{
--site-width: 100vw;
--root-padding: 0rem;
}

/* Calc */

body{
--root-padding-block: var(--root-padding);
--root-padding-inline: max(var(--root-padding),calc((100vw - var(--site-width)) / 2));
--layout-padding-inline: minmax(var(--grid-gap),calc((100% - var(--wide-width)) / 2));
--layout-wide: minmax(0,calc((var(--wide-width) - var(--content-width)) / 2));
--layout-content: min(var(--content-width), 100% - var(--grid-gap) * 2);
}

/* GRIDS */

/* ROOT: content wrapper */

body{
--root-grid-rows:
	auto
	1fr
	auto;

--root-grid-columns:
	[full-start] 1fr [full-end];

--root-grid-areas:
	"header"
	"main"
	"footer";
}

body.has-sidebar{
--root-grid-rows:
	auto
	1fr
	auto;

--root-grid-columns:
	[full-start] 1fr auto [full-end];

--root-grid-areas:
	"header sidebar"
	"main sidebar"
	"footer sidebar";
}

/* HEADER */

body{
--header-grid-columns:
	[full-start] var(--layout-padding-inline)
	[wide-start] var(--layout-wide)
	[content-start] var(--layout-content) [content-end]
	var(--layout-wide) [wide-end]
	var(--layout-padding-inline) [full-end];

--header-container-grid-rows:
	auto;

--header-container-grid-columns:
	max-content 1fr auto;

--header-container-grid-areas:
	"website-identity main-navigation widgets";
}

/* MAIN */

body{
--main-grid-rows:
	[main-start article-start]
	1fr
	[article-end navigation-start]
	auto
	[navigation-end main-end];
}

/* ARTICLE VERTICAL GRID */

body{
--article-grid-rows:
	[article-start header-start]
	auto
	[header-end content-start]
	1fr
	[content-end footer-start]
	auto
	[footer-end article-end];
}
body:has(main > article > #comments){
--article-grid-rows:
	[article-start header-start]
	auto
	[header-end content-start]
	auto
	[content-end footer-start]
	auto
	[footer-end comments-start]
	minmax(0,1fr)
	[comments-end article-end];
}

/* ARTICLE HORIZONTAL GRID */

body{
--article-grid-columns:
	[full-start] var(--layout-padding-inline)
	[wide-start] var(--layout-wide)
	[content-start] var(--layout-content) [content-end]
	var(--layout-wide) [wide-end]
	var(--layout-padding-inline) [full-end];
}

/* FOOTER */

body{
--footer-grid-columns:
	[full-start] var(--layout-padding-inline)
	[wide-start] var(--layout-wide)
	[content-start] var(--layout-content) [content-end]
	var(--layout-wide) [wide-end]
	var(--layout-padding-inline) [full-end];

/*--footer-container-grid-rows:
	min-content 1fr auto;*/

--footer-container-grid-columns:
	[left-start] auto [left-end right-start] 1fr [right-end];

--footer-container-grid-areas:
	"widgets footer-menu"
	"credits .";
}