/********************************************************/
/*
/*      Site frame 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;
}

.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-header, .site-foot).has-background,
	& > :is(header, footer) > :is(.site-header, .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 {
		--header-pad-top: var(--wp--preset--spacing--1);
		--header-pad-bottom: var(--wp--preset--spacing--1);
		
		position: relative;
		display: flex;
		justify-content: center;
		align-items: start;
		width: 100%;
		margin-block-start: 0;
		z-index: 5;
		
		/* Uncomment if header is to be sticky */
		/* position: sticky;
		top: 0;
		max-height: var(--wp--custom--stickied-header-height); */
		
		/******************************/
		/* Site header
		/******************************/
		& > .site-header {
			container-type: inline-size;
			container-name: header;
			
			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);
			padding-block: var(--header-pad-top) var(--header-pad-bottom);
			/* Add theme-specific header style here */
			
			/* Logo */
			.wp-block-site-logo {
				grid-area: logo;
				
				* {
					width: 200px;
					height: auto;
					aspect-ratio: 50/13;
					
					/* Use if logo is a colorable SVG */
					/* &:is(svg) {
						fill: var(--wp--custom--color--default--text);
						transition: fill var(--wp--custom--speed--fast);
						
						.wp-block-site-logo:is(:hover, :focus, :active) & {
							fill: var(--wp--custom--color--default--focus);
						}
					} */
				}
			}
			
			/* Menus */
			.site-nav {
				align-self: end;
				justify-content: end;
				
				/* Utility menu */
				&.utility {
					grid-area: utility-nav;
				} 
				
				/* Main menu */
				&.main {
					grid-area: main-nav;
					
					& > .burger-popup-open {
						display: none;
					}
				}
			}
			
			/* Stickied header changes */
			.stickied > & {
				/* Add theme-specific stickied header changes, if necessary */
			}
			
			/* Responsive */
			@container header (width <= 1px) { /* Replace with actual mobile menu display breakpoint */
				/* Menus */
				.site-nav {
					/* Main menu */
					&.main {
						& > .burger-popup-open {
							display: block;
						}
					}
				}
			}
		}
		
		/******************************/
		/* Burger popup
		/******************************/
		& > #burger-popup {
			display: grid;
			grid-template-columns: minmax(0, 1fr) 24px;
			grid-template-rows: calc(var(--wp--custom--stickied-header-height) - var(--header-pad-top)) max-content minmax(0, 1fr);
			grid-template-areas:
				'logo 		close-btn'
				'burger-nav burger-nav'
				'social-nav social-nav';
			gap: var(--wp--preset--spacing--2);
			justify-content: space-evenly;
			width: var(--wp--custom--viewport-width);
			height: 100dvh;
			background-color: var(--wp--custom--color--default--text);
			padding-block: calc(var(--wp--custom--adminbar-height) + var(--header-pad-top)) var(--header-pad-top);
			padding-inline: var(--wp--custom--wide-pad);
			border: unset;
			box-sizing: border-box;
			transition: opacity var(--wp--custom--speed--medium), padding-block var(--wp--custom--speed--medium);
			
			body:not(.loaded) &,
			&:not(:popover-open) {
				opacity: 0;
			}
			
			body:not(.loaded) &,
			&:not(:popover-open),
			&:not(:popover-open) * {
				pointer-events: none;
			}
			
			& > * {
				position: relative;
				z-index: 2;
			}
			
			/* Logo */
			.wp-block-site-logo {
				grid-area: logo;
				
				* {
					width: 200px;
					height: auto;
					aspect-ratio: 50/13;
					
					/* Use if logo is a colorable SVG */
					/* &:is(svg) {
						fill: var(--wp--custom--color--default--text);
						transition: fill var(--wp--custom--speed--fast);
						
						.wp-block-site-logo:is(:hover, :focus, :active) & {
							fill: var(--wp--custom--color--default--focus);
						}
					} */
				}
			}
			
			/* Close button */
			& > .burger-popup-close {
				grid-area: close-btn;
				justify-self: end;
				align-self: end;
			}
			
			/* Menus */
			& > .site-nav {
				& > .menu-item {
					&:not(:hover, :focus, :active, [class*="current-menu-"]) > a,
					&:not(:hover, :focus, :active, [class*="current-menu-"]) > a {
						color: var(--wp--custom--color--default--bg);
					}
					
					.sub-menu {
						display: none;
					}
				}
				
				/* Burger menu */
				&.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);
						}
					}
				}
				
				/* Social menu */
				&.social {
					grid-area: social-nav;
					
					& > .menu-item > a::after {
						color: inherit;
					}
				}
			}
			
			/* Stickied header changes */
			.stickied > & {
				/* Add theme-specific stickied burger changes, if necessary */
			}
		}
	}
	
	/************************************************************/
	/* Footer
	/************************************************************/
	& > footer {
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		z-index: 3;
		
		& > .wp-block-group {
			margin-block: 0;
		}
		
		/******************************/
		/* Site footer
		/******************************/
		& > .site-footer {
			display: grid;
			grid-template-columns: 1fr max-content;
			grid-template-rows: repeat(2, auto) 1fr;
			grid-template-areas:
				'logo social-nav'
				'footer-nav coordinates'
				'footer-nav opening-hours';
			column-gap: var(--wp--preset--spacing--3);
			row-gap: unset;
			justify-content: start;
			align-items: end;
			/* Add theme-specific header style here */
			
			/* Logo */
			.wp-block-site-logo {
				grid-area: logo;
				
				* {
					width: 200px;
					height: auto;
					aspect-ratio: 50/13;
					
					/* Use if logo is a colorable SVG */
					/* &:is(svg) {
						fill: var(--wp--custom--color--default--text);
						transition: fill var(--wp--custom--speed--fast);
						
						.wp-block-site-logo:is(:hover, :focus, :active) & {
							fill: var(--wp--custom--color--default--focus);
						}
					} */
				}
			}
			
			/* Menus */
			.site-nav {
				/* Social menu */
				&.social {
					grid-area: social-nav;
				}
				
				/* Footer menu */
				&.footer {
					grid-area: footer-nav;
				} 
			}
			
			/* Coordinates */
			.coordinates {
				grid-area: coordinates;
			}
			
			/* Opening hours */
			.opening-hours {
				grid-area: opening-hours;
			}
		}
		
		/******************************/
		/* Site credits
		/******************************/
		& > .site-credits {
			display: flex;
			align-items: center;
			background-color: var(--wp--custom--color--default--bg);
			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;
				}
			}
		}
	}
	
	/************************************************************/
	/* Menus
	/************************************************************/
	.site-nav {
		display: flex;
		align-items: end;
		gap: var(--wp--preset--spacing--1-5);
		
		/******************************/
		/* Menu items
		/******************************/
		& > .menu-item {
			position: relative;
			width: max-content;
			max-width: 100%;
			/* Add theme-specific menu typography here */
			color: var(--wp--custom--color--default--text);
			list-style: none;
			
			:has(.menu-item-has-children) > & {
				margin-block-end: var(--wp--preset--spacing--0-50);
				
				&.menu-item-has-children {
					padding-block-end: var(--wp--preset--spacing--0-50);
					margin-block-end: unset;
					
					& > a::after {
						content: '';
						font-family: var(--wp--preset--font-family--fontawesome);
						font-size: .7em;
						margin-inline-start: var(--wp--preset--spacing--0-25);
					}
				}
			}
			
			& > a {
				font-family: inherit;
				font-size: inherit;
				line-height: inherit;
				color: inherit;
				text-decoration: none;
				transition: color var(--wp--custom--speed--fast);
				
				:is(:hover, :focus, :active, [class*="current-menu-"]) > & {
					color: var(--wp--custom--color--default--focus);
				}
			}
		}
		
		/******************************/
		/* Sub-menus
		/******************************/
		.sub-menu {
			position: absolute;
			top: 100%;
			left: 50%;
			padding: var(--wp--preset--spacing--1);
			background-color: var(--wp--custom--color--default--bg);
			border: 1px solid var(--wp--custom--color--default--text);
			border-radius: var(--wp--custom--border-radius--large);
			list-style: unset;
			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;
			}
			
			a {
				text-decoration: none;
			}
		}
		
		/******************************/
		/* 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: ''; }
				}
			}
		}
	}
	
	/************************************************************/
	/* Misc.
	/************************************************************/
	/* Add miscellaneous site frame elements here (ex: sticky widgets on the side) */
}