/************************************************************/
/*
/*      Site frame CSS
/*
/************************************************************/
html {
	&:not(:has(> body.wp-admin)) {
        overflow-x: clip;
        overflow-y: scroll;
        scroll-behavior: smooth;
        margin-block-start: 0 !important;
    }
	
	body {
		width: 100%;
		max-width: var(--wp--custom--viewport-width);
		
		&:not(.wp-admin) #wpadminbar {
			position: relative !important;
		}
	}
	
	/* Required since Chrome's scrollbar-aware change (145+) */
	#vw-measurer {
		position: fixed;
		width: 100vw !important;
		min-width: 100vw !important;
		max-width: 100vw !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: unset !important;
		padding: unset !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) > .has-background,
	& > :is(header, footer) > * > .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--2);
		--header-pad-bottom: var(--wp--preset--spacing--1-5);
		
		position: relative;
		display: flex;
		justify-content: center;
		align-items: start;
		width: 100%;
        max-height: var(--wp--custom--header-height);
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .3) 0%,
                transparent 100%
            );
		margin-block-start: 0;
		z-index: 6;
		
		/******************************/
		/* Site header
		/******************************/
		& > .site-header {
			container-type: inline-size;
			container-name: header;
			
			display: grid;
			grid-template-columns: repeat(2, max-content);
			grid-template-rows: 100%;
			grid-template-areas:
				'logo main-nav';
			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);
			
			/* Logo */
			.wp-block-site-logo {
				grid-area: logo;
				
				* {
					width: 200px;
                    max-width: 100%;
					height: auto;
					aspect-ratio: 331/106;
					
					&:is(svg) path {
						fill: var(--wp--custom--color--current--text);
						transition: fill var(--wp--custom--duration--short);

                        &.fill-1 {
                            fill: var(--wp--custom--color--default--bg--1);
                        }

                        &.fill-2 {
                            fill: #64C6F2;
                        }

                        .wp-block-site-logo:is(:hover, :focus, :active) & {
                            &.fill-1 {
                                fill: var(--wp--custom--color--default--accent--light);
                            }
						}
					}
				}
			}
			
			/* Menus */
			.site-nav {
				align-self: end;
				justify-content: end;
				
				/* Main menu */
				&.main {
					grid-area: main-nav;
					
					& > .burger-popup-open {
						display: none;
					}
				}
			}
		}

        /******************************/
		/* Responsive
		/******************************/
        @media (width <= 1100px) {
            & > .site-header {
                .site-nav {
                    &.main {
                        gap: var(--wp--preset--spacing--1-5);

                        & > .menu-item {
                            font-size: var(--wp--preset--font-size--medium);
                        }
                    }
                }
            }
        }

        @media (width <= 900px) {
            & > .site-header {
                display: flex;
                flex-direction: column;
                gap: var(--wp--preset--spacing--1);

                .site-nav {
                    &.main {
                        align-self: center;
                    }
                }
            }
        }

        @media (width <= 700px) {
            & > .site-header {
                .site-nav {
                    &.main {
                        flex-wrap: wrap;
                        justify-content: center;
                        column-gap: var(--wp--preset--spacing--1);
                        row-gap: var(--wp--preset--spacing--0-50);

                        & > .menu-item-has-children {
                            & > a::after,
                            & > .sub-menu {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
        
        @media (width <= 400px) {
            & > .site-header {
                .site-nav {
                    &.main {
                        row-gap: var(--wp--preset--spacing--0-25);
                    }
                }
            }
        }
	}
	
	/************************************************************/
	/* Footer
	/************************************************************/
	& > footer {
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		z-index: 5;
		
		& > .wp-block-group {
			margin-block: 0;
		}
		
		/******************************/
		/* Site footer
		/******************************/
		& > .site-footer {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto max-content;
			grid-template-rows: repeat(2, auto) 1fr;
			grid-template-areas:
                'coordinates addresses addresses'
				'coordinates main-nav  social-nav'
				'alt-logo    alt-logo  alt-logo';
			column-gap: var(--wp--preset--spacing--3);
			row-gap: var(--wp--preset--spacing--3);
			justify-content: start;
			align-items: end;
            background: var(--wp--custom--color--default--accent--dark);
            padding-block: var(--wp--preset--spacing--4-5) var(--wp--preset--spacing--2);
			
            /* Coordinates */
			.main-coordinates {
				grid-area: coordinates;
                flex-direction: column;
                gap: unset;
                align-self: start;

                p {
                    font-family: var(--wp--preset--font-family--degular);
                    font-size: var(--wp--preset--font-size--large);
                    line-height: var(--wp--custom--line-height--small);
                    font-weight: 600;
                    color: var(--wp--custom--color--default--bg--1);

                    a:hover {
                        color: var(--wp--custom--color--default--accent--light);
                    }
                }
			}
            
            /* Addresses */
			.addresses {
                --items-per-row: 3;
                --col-gap: 7.5%;

				grid-area: addresses;
                flex-wrap: wrap;
                column-gap: var(--col-gap);
                row-gap: var(--wp--preset--spacing--2-5);
                justify-content: end;

                & > .coordinates-group {
                    width: max-content;
                    /* min-width: calc((100% - (var(--col-gap) * (var(--items-per-row) - 1))) / var(--items-per-row)); */
                    /* max-width: calc((100% - (var(--col-gap) * (var(--items-per-row) - 1))) / var(--items-per-row)); */
                    max-width: 100%;
                }
            }
			
			/* Menus */
			.site-nav {
                padding-block-end: var(--wp--preset--spacing--1-5);
                box-sizing: border-box;

                /* Main menu */
				&.main {
					grid-area: main-nav;
                    align-items: center;
                    height: 100%;

                    & > .menu-item-has-children {
                        & > .sub-menu,
                        & > a::after {
                            display: none;
                        }
                    }
				} 

				/* Social menu */
				&.social {
					grid-area: social-nav;
                    width: max-content;
				}
			}

            /* Alt logo */
			.alt-logo {
				grid-area: alt-logo;
                margin-block-start: var(--wp--preset--spacing--3-5);
				
				&, * {
					width: 100%;
                    max-width: 100%;
					height: auto;
					aspect-ratio: 1823/295;
				}
			}
		}
		
		/******************************/
		/* Site credits
		/******************************/
		& > .site-credits {
			display: flex;
            flex-wrap: wrap;
			align-items: end;
            column-gap: var(--wp--preset--spacing--1);
            row-gap: var(--wp--preset--spacing--1-5);
			background-color: var(--wp--custom--color--default--accent--light);
			padding-block: var(--wp--preset--spacing--1);
			
			& > * {
				margin-block: unset;
			}

            & > figure {
                display: flex;
                align-items: end;

                &.cake > a > svg,
                &.sante-quebec > a > svg path:not([fill], [class]) {
                    transition: fill var(--wp--custom--duration--short);
                }

                &.cake > a:is(:hover, :focus, :active) > svg,
                &.sante-quebec > a:is(:hover, :focus, :active) > svg path:not([fill], [class]) {
                    fill: var(--wp--custom--color--default--text--main);
                }
                
                &:is(.sante-quebec, .securite-interieure-quebec, .moisson-estrie, .moisson-outaouais) {
                    margin-inline-end: var(--wp--preset--spacing--4);
                    
                    &, * {
                        height: 75px;
                    }
                }

                &.sante-quebec {
                    svg path:not([fill], [class]) {
                        fill: #170A72;
                    }
                }

                &.cake {
                    margin-inline-start: auto;

                    &, * {
                        height: 20px;
                    }

                    svg {
                        fill: var(--wp--custom--color--default--bg--1);
                    }
                }
            }
			
			& > p {
				font-size: var(--wp--preset--font-size--small);
				line-height: var(--wp--custom--line-height--x-large);
				
				a {
					text-decoration: none;
				}
			}
			
			& > .copyright {
				padding-inline-end: var(--wp--preset--spacing--0-75);
				border-inline-end: 2px solid currentcolor;
			}
		}

        /******************************/
        /* Responsive
        /******************************/
        @media (width <= 1440px) {
            & > .site-footer {
                grid-template-columns: max-content minmax(0, 1fr);
                grid-template-rows: repeat(3, auto) 1fr;
                grid-template-areas:
                    'coordinates coordinates'
                    'addresses   addresses'
                    'main-nav    social-nav'
                    'alt-logo    alt-logo';

                .addresses {
                    justify-content: start;
                    width: max-content;
                }

                .site-nav {
                    &.main {
                        gap: var(--wp--preset--spacing--1-5);
                        
                        & > .menu-item {
                            font-size: var(--wp--preset--font-size--medium);
                        }
                    }
                }
            }
            
            & > .site-credits {
                justify-content: space-between;
                
                & > figure {
                    &:is(.sante-quebec, .securite-interieure-quebec, .moisson-estrie, .moisson-outaouais) {
                        margin-inline-end: unset;
                    }
                }
            }
        }
        
        @media (width <= 1250px) {
            & > .site-credits {
                & > figure {
                    &:is(.sante-quebec, .securite-interieure-quebec, .moisson-estrie, .moisson-outaouais) {
                        &, * {
                            height: 60px;
                        }
                    }
                }
            }
        }

        @media (width <= 1100px) {
            & > .site-footer {
                row-gap: var(--wp--preset--spacing--2);

                .site-nav {
                    &.main {
                        flex-wrap: wrap;
                        column-gap: var(--wp--preset--spacing--1);
                        row-gap: var(--wp--preset--spacing--0-50);
                    }
                }
            }
        }

        @media (width <= 1000px) {
            & > .site-credits {
                justify-content: center;
                column-gap: var(--wp--preset--spacing--2-5);
                padding-block-start: var(--wp--preset--spacing--2);
                
                & > figure {
                    &.cake {
                        margin-block-start: var(--wp--preset--spacing--1-5);
                        margin-inline-start: auto;
                        margin-inline-end: auto;
                    }
                }
                
                & > .copyright,
                & > .privacy-policy {
                    width: 100%;
                    text-align: center;
                }
                
                & > .copyright {
                    padding-inline-end: unset;
                    margin-inline-start: unset;
                    margin-inline-end: unset;
                    margin-block-start: var(--wp--preset--spacing--1-5);
                    border-inline-end: unset;
                }
                
                & > .privacy-policy {
                    margin-block-start: calc(var(--wp--preset--spacing--0-50) * -1);
                }
            }
        }

        @media (width <= 920px) {
            & > .site-footer {
                .addresses {
                    --items-per-row: 1;
                    
                    row-gap: var(--wp--preset--spacing--2);
                    
                    div, p, span {
                        & + :is(p, span):not(.email) {
                            margin-block-start: var(--wp--preset--spacing--0-75);
                        }
                    }
                }
            }
        }

        @media (width <= 800px) {
            & > .site-footer {
                grid-template-columns: 100%;
                grid-template-rows: repeat(4, auto) 1fr;
                grid-template-areas:
                    'coordinates'
                    'addresses'
                    'main-nav'
                    'social-nav'
                    'alt-logo';
            }
        }
        
        @media (width <= 550px) {
            & > .site-footer {
                .main-coordinates {
                    p {
                        font-size: var(--wp--preset--font-size--medium);
                    }
                }
            }
            
            & > .site-credits {
                & > figure {
                    &:is(.sante-quebec, .securite-interieure-quebec, .moisson-estrie, .moisson-outaouais) {
                        &, * {
                            height: 50px;
                        }
                    }
                }
            }
        }
	}
	
	/************************************************************/
	/* Menus
	/************************************************************/
	.site-nav {
		display: flex;
		align-items: end;
		gap: var(--wp--preset--spacing--3);
		
		/******************************/
		/* Menu items
		/******************************/
		& > .menu-item {
			width: max-content;
			max-width: 100%;
            font-size: var(--wp--preset--font-size--medium-large);
			color: var(--wp--custom--color--current--bg);
			list-style: none;
			
			& > a {
                position: relative;
				font-family: inherit;
				font-size: inherit;
				line-height: inherit;
				color: inherit;
				text-decoration: none;
				transition: color var(--wp--custom--duration--short);

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 2px;
                    background: currentcolor;
                    scale: 0 1;
                    transform-origin: right;
                    transition: scale var(--wp--custom--duration--medium);
                }
				
				:is(:hover, :focus, :active) > & {
                    color: var(--wp--custom--color--default--accent--light);
				}
                
                :is(:hover, :focus, :active, [class*="current-menu-"]) > &::before {
                    scale: 1 1;
                    transform-origin: left;
				}

                [class*="current-menu-"] > & {
                    font-weight: 700;

                    &::before {
                        height: 3px;
                    }
                }
			}
		}
		
		/******************************/
		/* Sub-menus
		/******************************/
        & > .menu-item-has-children {
            --submenu-y-offset: var(--wp--preset--spacing--1);
            --submenu-max-width: 350px;

            anchor-scope: --menu-item-anchor;
            margin-block-end: calc(var(--submenu-y-offset) * -1);
            padding-block-end: var(--submenu-y-offset);
            
            & > a {
                anchor-name: --menu-item-anchor;
    
                &::before {
                    width: calc(100% - .5em - var(--wp--preset--spacing--0-50));
                }

                &::after {
                    content: '';
                    display: inline-block;
                    font-family: var(--wp--preset--font-family--fontawesome);
                    font-size: .66em;
                    font-weight: 900;
                    margin-inline-start: var(--wp--preset--spacing--0-50);
                    rotate: 0deg;
                    transition: rotate var(--wp--custom--duration--medium);
                }

                :is(:hover, :focus) > &::after {
                    rotate: 45deg;
                }
            }

            & > .sub-menu {
                display: flex;
                flex-direction: column;
                gap: var(--wp--preset--spacing--1);
                position: fixed;
                position-anchor: --menu-item-anchor;
                position-area: bottom span-right;
                position-try-fallbacks: bottom span-all;
                width: min(var(--wp--custom--viewport-width), var(--submenu-max-width));
                background:
                    linear-gradient(
                        180deg,
                        var(--wp--custom--color--default--bg--1) 0%,
                        var(--wp--custom--color--default--bg--2) 100%
                    );
                padding: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--2);
                border-radius: var(--wp--custom--border-radius--small);
                list-style: unset;
                margin: 0;
                opacity: 0;
                pointer-events: none;
                translate: 0 calc(-1px + var(--submenu-y-offset));
                transition: opacity var(--wp--custom--duration--medium);
                
                & > .menu-item {
                    font-size: var(--wp--preset--font-size--small);
                    color: var(--wp--custom--color--default--text--alt);
                    padding-inline-end: var(--wp--preset--spacing--2);
    
                    & + * {
                        padding-block-start: var(--wp--preset--spacing--1);
                        border-block-start: 2px solid var(--wp--custom--color--default--accent--light);
                    }
                }
                
                .menu-item-has-children:is(:hover, :focus) > & {
                    opacity: 1;
                    pointer-events: all;
                }
                
                a {
                    text-decoration: none;
                }
            }
        }
		
		/******************************/
		/* Social menu
		/******************************/
		&.social {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--wp--preset--spacing--1);
			
			* {
				margin-block: 0;
			}
			
			& > .items {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: var(--wp--preset--spacing--0-25);
				
				& > .menu-item {
					list-style: none;
					
					& > a {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 38px;
						height: auto;
						aspect-ratio: 1;
						font-size: 0;
						color: transparent;
						background-color: var(--wp--custom--color--default--text--alt);
						border: 2px solid var(--wp--custom--color--default--text--alt);
						border-radius: 50%;
						transition: background-color var(--wp--custom--duration--short), border-color var(--wp--custom--duration--short);
						
						&::after {
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							font-family: var(--wp--preset--font-family--fontawesome);
							font-size: 1.5rem;
							font-weight: 400;
							line-height: normal;
							color: var(--wp--custom--color--default--accent--dark);
							translate: -50% -50%;
							transition: color var(--wp--custom--duration--short);
						}
						
						&:is(:hover, :focus, :active) {
							background-color: var(--wp--custom--color--default--accent--light);
							border-color: var(--wp--custom--color--default--accent--light);
						}
						
						.fb > &::after { content: ''; }
						.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) */
}