/********************************************************/
/*
/*      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--8	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--8-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--9	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--9-5	: var(--wp--preset--spacing--7-5);
			--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--5-5	: var(--wp--preset--spacing--5);
			--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 <= 600px) {
		body {
			--wp--preset--spacing--4-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--5-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--6	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--7-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--8	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--8-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--9	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--9-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--10	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--10-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--11	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--11-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--12	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--12-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--13	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--13-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--14	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--14-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--15	: var(--wp--preset--spacing--4);
		}
	}
	
	/* @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;
		
		& > *,
		& > :is(header, footer) :where(.is-layout-flow) > *,
		& > :is(header, footer) :where(.is-layout-flow) > * + .site-nav {
			margin-block-start: 0;
		}
		
		& > :is(header, footer) > :is(.site-head, .site-foot).has-background,
		& > :is(header, footer) > :is(.site-head, .site-foot) > .has-background {
			position: relative;
			
			&::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 */
		& > header {
			display: flex;
			align-items: start;
			position: sticky;
			top: 0;
			width: 100%;
			max-height: var(--wp--custom--stickied-header-height);
			margin-block-start: 0;
			z-index: 5;
		}
		
		/* Main */
		& > main {
			flex-grow: 2;
			position: relative;
			
			& > .entry-content > * {
				box-sizing: border-box;
			}
		}
		
		/* Footer */
		& > footer {
			z-index: 3;
		}
	}
	
	/******************************/
	/* Header
	/******************************/
	.site-head {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		grid-template-rows: 1fr auto;
		grid-template-areas:
			'logo utility-nav'
			'logo main-nav';
		row-gap: var(--wp--preset--spacing--1);
		justify-content: space-between;
		align-items: center;
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		background-color: transparent;
		padding-block: var(--wp--preset--spacing--2-5) var(--wp--preset--spacing--1);
		margin-inline: auto;
		transition: background-color var(--wp--custom--speed--medium), padding-block var(--wp--custom--speed--medium);
		
		&::before {
			border: 2px solid transparent;
			transition: border-color var(--wp--custom--speed--medium);
		}
		
		/* Stickied header changes */
		header.stickied > & {
			background-color: var(--wp--custom--color--default--bg);
			padding-block: var(--wp--preset--spacing--1) var(--wp--preset--spacing--0-75);
			
			&::before {
				border-color: var(--wp--preset--color--mercury-gray);
			}
			
			/* Logo */
			.wp-block-site-logo * {
				width: 300px;
			}
		}
		
		/* Logo */
		.wp-block-site-logo {
			grid-area: logo;
			
			* {
				width: 430px;
				height: auto;
				aspect-ratio: 437/102;
				transition: width var(--wp--custom--speed--medium);
			}
		}
		
		/* Menus */
		.site-nav {
			align-self: end;
			justify-content: end;
			
			/* Utility menu */
			&.utility {
				grid-area: utility-nav;
				
				& > .menu-item {
					font-weight: 400;
				} 		
			} 
			
			/* Main menu */
			&.main {
				grid-area: main-nav;
				
				/* Mobile button display breakpoint */
				& > .burger-popup-open {
					display: none;
				}
				
				@media (width <= 1px) {
					& > .burger-popup-open {
						display: block;
					}
				}
			} 
		}
	}
	
	/******************************/
	/* Footer
	/******************************/
	.site-foot {
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		
		& > .wp-block-group {
			margin-block: 0;
		}
		
		/* Foot: main */
		& > .foot-main {
			display: grid;
			grid-template-columns: 1fr repeat(2, max-content);
			grid-template-rows: repeat(2, auto) 1fr;
			grid-template-areas:
				'logo social-nav footer-nav'
				'logo email	 	 footer-nav'
				'logo address	 phone';
			column-gap: var(--wp--preset--spacing--3);
			row-gap: unset;
			justify-content: start;
			align-items: end;
			background-color: var(--wp--custom--color--default--text);
			padding-block: var(--wp--preset--spacing--12-5) var(--wp--preset--spacing--3);
			
			/* Logo */
			.wp-block-site-logo {
				grid-area: logo;
				margin-block-start: var(--wp--preset--spacing--1-5);
				
				* {
					width: 910px;
					height: auto;
					aspect-ratio: 437/102;
				}
			}
			
			/* Menus */
			.site-nav {
				align-self: end;
				
				/* Social menu */
				&.social {
					grid-area: social-nav;
					
					& > .menu-item > a {
						border-color: var(--wp--custom--color--default--bg);
						
						&::after {
							color: var(--wp--custom--color--default--bg);
						}
						
						&:is(:hover, :focus, :active) {
							background-color: var(--wp--custom--color--default--accent);
							border-color: var(--wp--custom--color--default--accent);
							
							&::after {
								color: var(--wp--custom--color--default--text);
							}
						}
					}
				}
				
				/* Footer menu */
				&.footer {
					grid-area: footer-nav;
					display: block;
					width: 100%;
					column-count: 2;
					margin-block-start: var(--wp--preset--spacing--1-5);
					overflow: visible;
					
					& > .menu-item {
						font-size: calc(var(--wp--preset--font-size--medium) * 1.055);
						
						& + .menu-item {
							margin-block-start: var(--wp--preset--spacing--0-25);
						}
						
						&:not(:hover, :focus, :active, [class*="current-menu-"]) > a {
							color: var(--wp--custom--color--default--bg);
						}
					}
				} 
			}
			
			/* Coordinates */
			.coordinates {
				justify-self: end;
				align-self: end;
				width: max-content;
				margin-block-start: var(--wp--preset--spacing--3);
				
				:not(a),
				a:not(:hover, :focus, :active) {
					color: var(--wp--custom--color--default--bg);
				}
				
				/* Email  */
				&.coord-email {
					grid-area: email;
				}
				
				/* Address */
				&.coord-address {
					grid-area: address;
					
					& > div {
						max-width: 80%;
					}
				}
				
				/* Phone */
				&.coord-phone {
					grid-area: phone;
					
					a {
						font-family: var(--wp--preset--font-family--publish-gothic);
						font-size: var(--wp--preset--font-size--x-large);
						font-weight: 700;
						line-height: 1;
						color: var(--wp--custom--color--default--accent);
						
						&:is(:hover, :focus, :active) {
							color: var(--wp--custom--color--default--bg);
						}
					}
				}
			}
		}
		
		/* Foot: credits */
		& > .foot-credits {
			display: flex;
			align-items: center;
			padding-block: var(--wp--preset--spacing--1);
			
			& > :is(p, .cake) {
				margin-block: unset;
			}
			
			& > p {
				font-size: var(--wp--preset--font-size--small);
				line-height: 1;
				
				a {
					text-decoration: none;
				}
			}
			
			& > .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);
			}
			
			& > .cake {
				position: relative;
				margin-inline-start: auto;
				
				svg {
					fill: var(--wp--custom--color--default--text);
					transition: fill var(--wp--custom--speed--fast);
				}
				
				a:is(:hover, :focus, :active) > svg {
					fill: var(--wp--custom--color--default--focus);
				}
				
				&, * {
					display: flex;
					align-items: center;
					height: 20px;
				}
			}
		}
	}
	
	/******************************/
	/* Burger popup
	/******************************/
	#burger-popup {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24px;
		grid-template-rows: calc(var(--wp--custom--header-height) - var(--wp--preset--spacing--2-5)) max-content minmax(0, 1fr);
		grid-template-areas:
			'logo 		close-btn'
			'burger-nav burger-nav'
			'social-nav social-nav';
		gap: var(--wp--preset--spacing--3);
		justify-content: space-evenly;
		width: var(--wp--custom--viewport-width);
		height: 100dvh;
		background-color: var(--wp--preset--color--mercury-gray);
		padding-block: calc(var(--wp--custom--adminbar-height) + var(--wp--preset--spacing--2-5))  var(--wp--preset--spacing--2-5);
		padding-inline: var(--wp--custom--wide-pad);
		border: unset;
		box-sizing: border-box;
		transition: opacity var(--wp--custom--speed--medium);
		
		body:not(.loaded) &,
		&:not(:popover-open),
		&:not(:popover-open) * {
			opacity: 0;
			pointer-events: none;
		}
		
		& > * {
			position: relative;
			z-index: 2;
		}
		
		/* Logo */
		.wp-block-site-logo {
			grid-area: logo;
			
			* {
				width: 430px;
				height: auto;
				aspect-ratio: 437/102;
			}
		}
		
		/* Close button */
		& > .burger-popup-close {
			grid-area: close-btn;
			justify-self: end;
			align-self: end;
		}
		
		/* Burger menu */
		& > .site-nav.burger {
			grid-area: burger-nav;
			display: block;
			width: max-content;
			column-count: 2;
			overflow: visible;
			
			& > .menu-item {
				& + .menu-item {
					margin-block-start: var(--wp--preset--spacing--1);
				}
				
				& > a {
					font-size: var(--wp--preset--font-size--medium-large);
					
					&:not(:hover, :focus, :active) {
						color: var(--wp--custom--color--default--text);
					}
				}
				
				.sub-menu {
					display: none;
				}
			}
		}
		
		/* Social menu */
		& > .site-nav.social {
			grid-area: social-nav;
			
			& > .menu-item > a:is(:hover, :focus, :active)::after {
				color: var(--wp--preset--color--mercury-gray);
			}
		}
	}
	
	/******************************/
	/* Menus
	/******************************/
	.site-nav {
		display: flex;
		align-items: end;
		gap: var(--wp--preset--spacing--2-5);
		
		& > .menu-item {
			position: relative;
			width: max-content;
			font-family: var(--wp--preset--font-family--publish-gothic);
			font-size: calc(var(--wp--preset--font-size--medium) * 1.1);
			font-weight: 600;
			line-height: 1;
			color: var(--wp--custom--color--default--text);
			list-style: none;
			
			& > a {
				font-family: inherit;
				font-size: inherit;
				line-height: inherit;
				color: inherit;
				text-decoration: none;
				transition: color var(--wp--custom--speed--medium);
				
				:is(:hover, :focus, :active, [class*="current-menu-"]) > & {
					color: var(--wp--custom--color--default--focus);
				}
				
				.menu-item-has-children > &::after {
					content: '';
					font-family: var(--wp--preset--font-family--fontawesome);
					font-size: .7em;
					margin-inline-start: var(--wp--preset--spacing--0-25);
				}
			}
		}
		
		/* Sub menu */
		.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 var(--wp--custom--speed--medium);
			
			.menu-item-has-children:is(:hover, :focus) > & {
				opacity: 1;
				pointer-events: all;
			}
		}
		
		/* Social menu */
		&.social {
			display: grid;
			grid-template-rows: max-content;
			grid-auto-columns: max-content;
			gap: var(--wp--preset--spacing--0-50);
			
			&:has(> :not(.menu-item)) {
				grid-template-rows: repeat(2, max-content);
				
				& > :not(.menu-item) {
					grid-column: 1 / -1;
				}
				
				& > .menu-item {
					grid-row: 2;
				}
			}
			
			& > * {
				margin-block: 0;
			}
			
			& > .menu-item {
				grid-row: 1;
				
				& > a {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 42px;
					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%;
					transition: background-color var(--wp--custom--speed--fast), border-color var(--wp--custom--speed--fast);
					
					&::after {
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						font-family: var(--wp--preset--font-family--fontawesome);
						font-size: 1.25rem;
						font-weight: 400;
						line-height: normal;
						color: var(--wp--custom--color--default--text);
						translate: -50% -50%;
						transition: color var(--wp--custom--speed--fast);
					}
					
					&:is(:hover, :focus, :active) {
						background-color: var(--wp--custom--color--default--accent);
						border-color: var(--wp--custom--color--default--accent);
						
						&::after {
							color: var(--wp--custom--color--default--bg);
						}
					}
					
					.fb > &::after { content: ''; 	font-size: 1.125rem; }
					.ig > &::after { content: ''; }
					.in > &::after { content: ''; }
					.yt > &::after { content: ''; }
					.tk > &::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--preset--color--mercury-gray);
		padding: 12.5vh 0 7.5vh;
		box-sizing: border-box;
		opacity: 1;
		transition: opacity var(--wp--custom--speed--medium);
		pointer-events: all;
		z-index: 20;
		
		body:is(.loaded, .hide-loading-overlay) & {
			opacity: 0;
			pointer-events: none;
		}
		
		& > * {
			height: 100%;
			object-fit: contain;
			margin: auto;
			user-select: none;
			pointer-events: none;
			filter: var(--wp--custom--color--desert-storm-gray--filter);
		}
		
		& > .logo {
			grid-row: 1;
			width: min(1000px, calc(100% * (2/3)));
			max-height: 50svh;
		}
		
		& > .loading {
			grid-row: 2;
			width: min(250px, 50vw);
			max-height: 30svh;
			z-index: 21;
			transform: skew(-20deg, 0);
		}
	}
	
	/******************************/
	/* Singles
	/******************************/
	body[class*="single-cke_"] main > .wp-block-post-content > * + * {
		margin-block-start: 2em;
	}
	
	/******************************/
	/* Other templates
	/******************************/
	/* 404 error page */
	body.error404 .wp-site-blocks > main {
		display: flex;
		justify-content: center;
		align-items: center;
	}