/* PAGE : ELEMENTS >>> */
/* Scroll only main-content > body  >>> */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width:100vw;
}
body {
    overflow: hidden;
    
}
.pg {
	width:100vw;
    height:   100vh;
    overflow: hidden;
    display:  grid;
	grid-template-areas:   var(--pg--gridAreas);
	grid-template-rows:    var(--pg--gridRows);
	grid-template-columns: var(--pg--gridColumns);
	.zone--main {
		min-height: 0;
		overflow-y: auto;
	}
}
/* <<< Scroll only main-content > body */

.pg{
	/* The red "bar" is only for "menubar" >>> */
	> .zone--banner,
	> .zone--content-info,
	> .zone--footer{
		width:       var(--pg--contentWidth);
		margin-left: var(--pg--horizontalSpace);
	}
	> .zone--main,
	> .zone--menubar{
		width:100vw;
		padding-left:  var(--pg--horizontalSpace);
		padding-right: var(--pg--horizontalSpace);
	}
	/* <<< The red "bar" is only for "menubar" 
	 * */
	> .zone--banner{
		display:grid; 
		align-items: stretch;
		margin-top: var(--banner--marginTop);
		gap:        var(--banner--gap);
		> .pe--site_logo	{ grid-area:logo;}
		> .pe--site_name	{ grid-area:name;}
		> .toolsbar			{ grid-area:toolsbar;}
		
		grid-template-areas:   var(--banner--gridAreas);
		grid-template-columns: var(--banner--gridColumns);
		grid-template-rows:    var(--banner--gridRows);
		> .toolsbar{
			padding: var(--banner_toolbar--padding);
			display:flex;
			align-items:flex-end;
		}
	}
	> .zone--menubar{
		background:   var(--menubar--backgroundColor);
		font-weight:  var(--menubar--fontWeight);
		> .site-menu {
			display:flex; flex-direction:row; 
			gap:var(--menubar_siteMenu--gap);
			.ui_button{
				--ui_button--fontSize:var(--menubar_siteMenu_button--fontSize);
				--ui_button--borderWidth:0;
			}
		}
	}
	/* Blur just after menu bar >>> */
	> .zone--menubar {
		position: relative;
		z-index: 1;
	}
	.zone--menubar::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -10px;
		height: 10px;

		background: rgba(255, 255, 255, 0.4);
		backdrop-filter: blur(0.5px);
		-webkit-backdrop-filter: blur(3px);

		pointer-events: none;
	}
	/* <<< Blur just after menu bar */

	> .zone--content-info{}
	
	> .zone--footer{
		display:flex;
		font-size: var(--footer--fontSize);
		color:     var(--footer--color);
	}
}