/********************************************************/
/*
/*      Layout CSS
/*
/********************************************************/

	html {
		overflow-x: clip;
		scroll-behavior: smooth;
		margin-block-start: 0 !important;
	}

	body {
		width: 100%;
		max-width: var(--wp--custom--viewport-width);
	}
	
	body:not(.wp-admin) #wpadminbar {
		position: relative !important;
	}
	
	/******************************/
	/* Layout variables adjustment
	/******************************/
	@media (width <= 1200px) {
		body {
			--wp--preset--spacing--10	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--10-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--11	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--11-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--12	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--12-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--13	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--13-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--14	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--14-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--15	: var(--wp--preset--spacing--7-5);
		}
	}
	
	@media (width <= 800px) {
		body {
			--wp--preset--spacing--6	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--7-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--8	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--8-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--9	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--9-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--10	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--10-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--11	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--11-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--12	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--12-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--13	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--13-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--14	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--14-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--15	: var(--wp--preset--spacing--5);
		}
		#wpadminbar { display: none !important; }
	}
	
	@media (width <= 475px) {
		body {
			--wp--custom--header-height: 7.125rem;
		}
	}
	
	@media (width <= 320px) {
		body {
			--wp--custom--header-height: 5rem;
		}
	}

	/******************************/
	/* Content grid
	/******************************/
	.wp-site-blocks {
		min-width: 100%;
		min-height: 100dvh;
		margin-inline: auto;
		display: flex; 
		flex-direction: column;
		overflow-x: clip;
	}
	
	.wp-site-blocks > * {
		margin-block-start: 0;
	}
	
	.wp-site-blocks > header {
		display: flex;
		align-items: end;
		position: sticky;
		top: 0;
		width: 100%;
		max-height: var(--wp--custom--sticky-header-height);
		margin-block-start: 0;
		z-index: 5;
	}
	
	.wp-site-blocks main {
		flex-grow: 2;
		position: relative;
	}
	
	.wp-site-blocks > main > .entry-content > * {
		box-sizing: border-box;
	}
	
	.wp-site-blocks > footer {
		z-index: 3;
	}
	
	.wp-site-blocks > :is(header, footer) > :is(.site-head, .site-foot) > .has-background {
		position: relative;
	}
	
	.wp-site-blocks > :is(header, footer) > :is(.site-head, .site-foot) > .has-background::before {
		content: '';
		position: absolute;
		top: 0;
		left: calc((var(--wp--custom--viewport-width) - 100%) / 2 * -1);
		width: var(--wp--custom--viewport-width);
		height: 100%;
		background-color: inherit;
		z-index: -1;
	}
	
	/******************************/
	/* Header
	/******************************/
	.site-head {
		align-self: start;
		display: grid;
		grid-template-areas:
			'logo 	  utility-nav'
			'main-nav main-nav';
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-rows: max-content;
		justify-content: space-between;
		align-items: center;
		column-gap: var(--wp--preset--spacing--4-5);
		row-gap: var(--wp--preset--spacing--2);
		width: 100%;
		max-width: var(--wp--custom--viewport-width);
		background-color: var(--wp--custom--color--default--bg);
		padding-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
		padding-inline: var(--wp--custom--wide-pad);
		border-block-end: 2px solid var(--wp--custom--color--default--text);
		margin-inline: auto;
		transition: row-gap .3s, padding-block .3s;
	}
	
	.site-head > .wp-block-site-logo,
	.site-head > .wp-block-site-logo * {
		transition: width .3s, height .3s, max-width .3s !important;
	}
	
	.site-head > .wp-block-site-logo {
		grid-area: logo;
		width: max-content;
	}
	
	.site-head:where(.is-layout-flow) > * + .site-nav {
		margin-block-start: unset;	
	}
	
	/* Utility menu */
	.site-head > .site-nav.utility {
		grid-area: utility-nav;
		justify-content: end;
		gap: var(--wp--preset--spacing--7-5);
	}
	
	/* Main menu */
	.site-head > .site-nav.main {
		grid-area: main-nav;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--0-50);
	}
	
	.site-nav.main > .menu-item {
		text-transform: uppercase;
	}
	
	/* Mobile button display breakpoint */
	.site-nav.main > .burger-popup-open {
		display: none;
	}
	
	@media (width <= 1px) {
		.site-nav.main > .burger-popup-open {
			display: block;
		}
	}
	
	/* Sticky header */
	.stickied > .site-head {
		row-gap: var(--wp--preset--spacing--1);
		padding-block: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--1);
	}
	
	.stickied > .site-head > .wp-block-site-logo img {
		width: 320px;
		max-width: 320px;
	}
	
	/******************************/
	/* Footer
	/******************************/
	.site-foot {
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
	}
	
	.site-foot > .wp-block-group {
		margin-block: 0;
	}
	
	/* Foot: main */
	.site-foot > .site-foot-main {
		display: grid;
		grid-template-areas:
			'logo	footer-main-nav footer-utility-nav'
			'coords	empty	 		social-nav';
		grid-auto-columns: max-content;
		grid-auto-rows: max-content;
		justify-content: space-between;
		column-gap: unset;
		row-gap: var(--wp--preset--spacing--1);
		background-color: var(--wp--custom--color--default--text);
		padding-block: var(--wp--preset--spacing--5);
	}
	
	.site-foot-main > .wp-block-site-logo {
		grid-area: logo;
		align-self: center;
		background: url(../images/logo-pmercier-light.png) no-repeat center / 100%;
		margin-inline-end: auto;
	}
	
	.site-foot-main > .wp-block-site-logo img {
		opacity: 0;
	}
	
	.site-foot-main > :is(.site-nav, .coordinates) {
		margin-block-start: unset;
	}
	
	.site-foot-main > .site-nav {
		flex-direction: column;
		align-items: start;
		max-width: calc(var(--wp--style--global--wide-size) * .175);
	}

	.site-foot-main > .site-nav > .menu-item {
		width: 100%;
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.15;
		font-weight: 600;
		color: var(--wp--custom--color--default--bg);
	}
	
	/* Main menu */
	.site-foot-main > .site-nav.footer-main {
		grid-area: footer-main-nav;
		gap: var(--wp--preset--spacing--0-75);
		margin-inline-start: var(--wp--preset--spacing--10-5);
	}
	
	.site-nav.footer-main > .menu-item {
		text-transform: uppercase;
	} 
	
	/* Utility menu */
	.site-foot-main > .site-nav.footer-utility {
		grid-area: footer-utility-nav;
		gap: var(--wp--preset--spacing--1);
	}
	
	/* Coordinates */
	.site-foot-main > .coordinates {
		grid-area: coords;
	}
	
	.site-foot-main > .coordinates p {
		font-weight: 700;
		color: var(--wp--custom--color--default--bg);
	}
	
	.site-foot-main > .coordinates :is(.phone, .email)  {
		color: var(--wp--custom--color--default--accent);
	}
	
	.site-foot-main > .coordinates .phone {
		font-size: var(--wp--preset--font-size--medium-large);
		line-height: 1;
	}
	
	/* Social menu */
	.site-foot-main > .site-nav.social {
		grid-area: social-nav;
		align-self: center;
		gap: var(--wp--preset--spacing--1);
	}
	
	.site-foot-main > .site-nav.social > :not(.menu-item) {
		color: var(--wp--custom--color--default--bg);
	}
	
	.site-foot-main > .site-nav.social > .menu-item a {
		border: 2px solid var(--wp--preset--color--gray);
	}
	
	.site-foot-main > .site-nav.social > .menu-item a:is(:hover, :focus, :active) {
		background-color: var(--wp--preset--color--gray);
	}
	
	.site-foot-main > .site-nav.social > .menu-item a:is(:hover, :focus, :active)::after {
		color: var(--wp--custom--color--default--text);
	}

	/* Foot: credits */
	.site-foot > .site-foot-credits {
		display: flex;
		align-items: center;
		padding-block: var(--wp--preset--spacing--1);
	}
	
	.site-foot-credits > :is(p, .cake) {
		margin-block: unset;
	}
	
	.site-foot-credits > p {
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1;
	}
	
	.site-foot-credits > p a {
		text-decoration: none;
	}
	
	.site-foot-credits > .copyright {
		padding-inline-end: var(--wp--preset--spacing--0-50);
		border-inline-end: 2px solid currentcolor;
		margin-inline-end: var(--wp--preset--spacing--0-50);
	}
	
	.site-foot-credits > .rbq {
		padding-inline-start: var(--wp--preset--spacing--0-50);
		border-inline-start: 2px solid currentcolor;
		margin-inline-start: var(--wp--preset--spacing--0-50);
	}
	
	.site-foot-credits > .cake {
		margin-inline-start: auto;
	}
	
	.site-foot-credits > .cake,
	.site-foot-credits > .cake * {
		display: flex;
		align-items: center;
		height: 20px;
	}
	
	/******************************/
	/* Burger popup
	/******************************/
	#burger-popup {
		--inline-padding: var(--wp--preset--spacing--11);
		--inline-offset: calc(var(--inline-padding) - var(--wp--custom--outer-pad));
		
		display: grid;
		grid-template-columns: minmax(0, 1fr) 22.5%;
		grid-template-rows: var(--wp--custom--header-height) minmax(0, 1fr) repeat(2, max-content);
		grid-template-areas:
			'close-btn	close-btn'
			'burger-nav social-nav'
			'burger-nav coords'
			'logo		logo';
		gap: var(--wp--preset--spacing--3);
		justify-content: space-evenly;
		width: var(--wp--custom--viewport-width);
		height: 100dvh;
		background-color: var(--wp--custom--color--default--text);
		padding-block: var(--wp--preset--spacing--1-5);
		padding-inline: var(--inline-padding);
		box-sizing: border-box;
		transition: opacity .3s;
	}
	
	#burger-popup:not(:popover-open),
	#burger-popup:not(:popover-open) * {
		opacity: 0;
		pointer-events: none;
	}
	
	#burger-popup > * {
		position: relative;
		z-index: 2;
	}
	
	#burger-popup > .burger-popup-close {
		grid-area: close-btn;
		justify-self: end;
		align-self: end;
		background-color: transparent;
		margin-inline-end: calc(var(--inline-offset) * -1);
		border: unset;
		cursor: pointer;
	}
	
	#burger-popup > .burger-popup-close::after {
		content: '';
		display: inline-block;
		font-family: var(--wp--preset--font-family--fontawesome);
		font-size: 2rem;
		color: var(--wp--custom--color--default--accent);
		transition: color .3s;
	}
	
	#burger-popup > .burger-popup-close:is(:hover, :focus)::after {	
		color: var(--wp--custom--color--default--bg);
	}
	
	/* Burger menu */
	#burger-popup > .site-nav.burger {
		grid-area: burger-nav;
		display: block;
		column-count: 2;
		overflow: visible;
	}

	.site-nav.burger .menu-item a {
		color: var(--wp--custom--color--default--bg);
	}
	
	.site-nav.burger .sub-menu {
		display: none;
	}
	
	/******************************/
	/* Menus
	/******************************/
	.site-nav {
		display: flex;
		align-items: end;
		gap: var(--wp--preset--spacing--2);
	}
	
	.site-nav > .menu-item {
		position: relative;
		width: max-content;
		font-family: var(--wp--preset--font-family--aktiv-grotesk);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1;
		color: var(--wp--custom--color--default--text);
		list-style: none;
	}
	
	.site-nav > .menu-item > a {
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		color: inherit;
		text-decoration: none;
		transition: color .3s;
	}
	
	.site-nav > .menu-item:is(:hover, :focus, :active) > a {
		color: var(--wp--custom--color--default--focus);
	}
	
	.site-nav > .menu-item-has-children > a::after {
		content: '';
		font-family: var(--wp--preset--font-family--fontawesome);
		font-size: .7em;
		margin-inline-start: .25rem;
	}
	
	/* Sub menu */
	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		padding: var(--wp--preset--spacing--2);
		background-color: var(--wp--preset--color--white);
		margin: 0;
		opacity: 0;
		pointer-events: none;
		translate: -50% -1px;
		transition: opacity .3s;
	}
	
	.site-nav .menu-item-has-children:hover > .sub-menu {
		opacity: 1;
		pointer-events: all;
	}
	
	/* Social menu */
	.site-nav.social {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-rows: repeat(2, max-content);
		gap: var(--wp--preset--spacing--0-50);
	}
	
	.site-nav.social > :not(.menu-item) {
		grid-column: 1 / -1;
		grid-row: 1;
		line-height: 1;
		font-weight: 700;
		margin-block: 0;
	}
	
	.site-nav.social > .menu-item {
		grid-row: 2;
	}
	
	.site-nav.social > .menu-item a {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 48px;
		height: auto;
		aspect-ratio: 1;
		font-size: 0;
		color: transparent;
		background-color: transparent;
		border: 2px solid var(--wp--custom--color--default--text);
		border-radius: 50%;
		box-sizing: border-box;
		transition: background-color .3s;
	}
	
	.site-nav.social > .menu-item a::after {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		font-family: var(--wp--preset--font-family--fontawesome);
		font-size: 1.25rem;
		line-height: normal;
		color: var(--wp--custom--color--default--accent);
		translate: -50% -50%;
		transition: color .3s;
	}
	
	.site-nav.social > .menu-item a:is(:hover, :focus, :active) {
		background-color: var(--wp--custom--color--default--text);
	}
	
	.site-nav.social > .menu-item a:is(:hover, :focus, :active)::after {
		color: var(--wp--preset--color--gray);
	}
	
	.site-nav.social > .menu-item.fb a::after { content: ''; }
	.site-nav.social > .menu-item.ig a::after { content: ''; }
	.site-nav.social > .menu-item.in a::after { content: ''; }
	.site-nav.social > .menu-item.yt a::after { content: ''; }
	.site-nav.social > .menu-item.tk a::after { content: ''; }
	
	/********************************************************/
	/* Loading transition
	/********************************************************/
	body:not(.wp-admin):not(.loaded, .hide-loading-overlay) {
		overflow-y: hidden;
	}
	
	.loading-overlay {
		display: grid;
		grid-template-rows: 2fr 1fr;
		grid-template-columns: 1fr;
		justify-content: center;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
		background-color: var(--wp--custom--color--default--text);
		padding: 12.5vh 0 7.5vh;
		box-sizing: border-box;
		opacity: 1;
		transition: opacity .3s;
		pointer-events: all;
		z-index: 20;
	}
	
	.loading-overlay > * {
		height: 100%;
		object-fit: contain;
		margin: auto;
		user-select: none;
		pointer-events: none;
	}
	
	.loading-overlay .logo {
		grid-row: 1;
		width: min(600px, calc(100% * (2/3)));
		max-height: 50svh;
	}
	
	.loading-overlay .loading {
		grid-row: 2;
		width: min(150px, 50vw);
		max-height: 30svh;
		/* filter: var(--wp--custom--color--filter--cream); */
		z-index: 21;
	}
	
	body:is(.loaded, .hide-loading-overlay) .loading-overlay {
		opacity: 0;
		pointer-events: none;
	}
	
	/******************************/
	/* Singles
	/******************************/
	body[class*="single-cke_"] main > .wp-block-post-content > * + * {
		margin-block-start: 2em;
	}
	
	body[class*="single-cke_"] main > .wp-block-post-content > .back-to-archive {
		margin-block-end: var(--wp--preset--spacing--6);
	}
	
	/******************************/
	/* Other templates
	/******************************/
	
	/* 404 error page */
	body.error404 .wp-site-blocks > main {
		display: flex;
		justify-content: center;
		align-items: center;
	}