/************************************************************/
/*
/*      Site frame CSS
/*
/*      Author: Marc-Antoine Brassard
/*      Created: 2026-03-20
/*      Last modified: 2026-09-03
/*
/************************************************************/
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 {
	display: flex; 
	flex-direction: column;
    /* position: relative; */
	min-width: 100%;
	min-height: 100dvh;
	margin-inline: auto;
	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: 0;
        --stickied-header-pad-top: var(--wp--preset--spacing--2);
        --stickied-header-pad-bottom: 0;
		
		display: flex;
		justify-content: center;
		align-items: start;
		width: 100%;
        max-height: var(--wp--custom--stickied-header-height);
		z-index: 6;
        
        /******************************/
		/* Docking animation
		/******************************/
        /* When user scrolls to the bottom of the screen, docker header to its alternative position at the top of the footer */
        /* Use keyframe animation to transition header between the two positions */
        position: absolute;
        animation-name: dockToFooter;
        animation-play-state: paused;
        animation-fill-mode: forwards;
        animation-duration: var(--wp--custom--duration--long);
        animation-direction: normal;
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
        /* animation-composition: accumulate; */
		
        &:not(.docked-with-footer, .in-transition) {
            position: fixed;
            top: 0 !important;
            margin-block-start: 0px !important;
            translate: 0% 0% !important;
            animation-name: unset;
        }

        &.docked-with-footer {
            & > .site-header {
                translate: 0% var(--docked-header-adjustment);
                
                .site-nav {
                    & > .menu-item {
                        &.menu-item-has-children {
                            & > .sub-menu,
                            & > .sub-menu *,
                            & > a::after {
                                opacity: 0;
                                pointer-events: none;
                            }
                        }
                    }
                }
            }
        }

        &.in-transition {
            animation-play-state: running;
        }
        
        &.reverse-animation {
            animation-name: undockFromFooter;
        }
		
		/******************************/
		/* Site header
		/******************************/
		& > .site-header {
			container-type: inline-size;
			container-name: header;
			
			display: flex;
			justify-content: end;
			align-items: center;
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			padding-block: var(--header-pad-top) var(--header-pad-bottom);
            translate: 0% 0%;
			transition: height var(--wp--custom--duration--medium), translate var(--wp--custom--duration--long);

            /* Logo (only visible on mobile) */
            .wp-block-site-logo {
                display: none;
                width: 80px;

                * {
                    width: 100%;
                    max-width: 100%;
                    height: auto;
                    aspect-ratio: 281/270;
                    
                    &:is(svg) {
                        fill: var(--wp--custom--color--current--bg);
                        transition: fill var(--wp--custom--duration--short);
                        
                        .wp-block-site-logo:is(:hover, :focus, :active) & {
                            fill: var(--wp--custom--color--default--accent);
                        }
                    }
                }
            }
			
			/* Menus */
			.site-nav {
				/* Main menu */
				&.main {
                    gap: var(--wp--preset--spacing--4-5);
                    background-color: var(--wp--custom--color--default--accent);
                    padding: var(--wp--preset--spacing--0-75) var(--wp--preset--spacing--3-5);
                    border-radius: var(--wp--custom--border-radius--medium);
                    overflow: clip;

                    & > .menu-item {
                        & > a {
                            :is(:hover, :focus, :active) > & {
                                color: var(--wp--custom--color--default--bg);
                            }
                        }

                        &.menu-item-has-children {
                            & > a {
                                :is(:hover, :focus) > & {
                                    --color: var(--wp--custom--color--default--bg);
                                }
                            }
                        }
                    }

                    & > .burger-popup-open {
						display: none;
					}
				}
            }
        }

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

            &,
            &:not(.docked-with-footer, .in-transition) {
                position: relative !important;
                animation-name: unset !important;
            }
            
            & > .site-header {
                .wp-block-site-logo {
                    display: block;
                    margin-inline: 0 auto;
                    opacity: 1;
                    transition: opacity;
                }

                .site-nav {
                    &.main {
                        align-self: start;
                        gap: var(--wp--preset--spacing--1-5);
                        padding-inline: var(--wp--preset--spacing--2-5);
                    }
                }
            }
        }

        @media (width <= 720px) {
            & > .site-header {
                .wp-block-site-logo {
                    width: 150px;
                }

                .site-nav {
                    &.main {
                        padding-inline: var(--wp--preset--spacing--1-5);

                        & > :not(.burger-popup-open) {
                            display: none;
                        }
                        
                        & > .burger-popup-open {
							display: flex;
						}
                    }
                }
            }
        }
        
        @media (width <= 400px) {
            & > .site-header {
                .wp-block-site-logo {
                    width: 120px;
                }
            }
        }

        @media (width <= 320px) {
            & > .site-header {
                .wp-block-site-logo {
                    width: 100px;
                }
            }
        }

        /******************************/
		/* Burger popup
		/******************************/
        & > :is(#burger-popup, #burger-popup-backdrop) {
            position: fixed;
            inset: 0;
            height: 100dvh;
            background-color: var(--wp--custom--color--default--accent);
            transition: opacity var(--wp--custom--duration--medium), padding-block var(--wp--custom--duration--medium);

            /* Closed/Hidden state */
            body:not(.loaded) &,
			#burger-popup-toggle:not(:checked) ~ & {
                opacity: 0;
                
                &, * {
                    pointer-events: none;
                }
			}
        }

		& > #burger-popup {
			display: flex;
			justify-content: center;
			width: var(--wp--custom--viewport-width);
			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;
            overflow: clip;
            z-index: 19;
			
			& > * {
				position: relative;
				z-index: 2;
			}
			
			/* Close button */
			& > .burger-popup-close {
				position: absolute;
                top: var(--header-pad-top);
                right: var(--wp--custom--wide-pad);
			}
			
			/* Menus */
			& > .site-nav {
				& > .menu-item {
                    font-size: var(--wp--preset--font-size--x-large);
                    font-weight: 500;

					&:not(:hover, :focus, :active, [class*="current-menu-"]) > a {
						color: var(--wp--custom--color--current--text);
					}

                    &.menu-item-has-children {
                        & > a::after,
                        .sub-menu {
                            display: none;
                        }
                    }
					
				}
				
				/* Burger menu */
				&.burger {
                    justify-self: center;
					flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: max-content;
                    max-width: 100%;
				}
			}
		}

        & > #burger-popup-backdrop {
            opacity: .5;
            cursor: pointer;
            z-index: 18;
        }
    }

	/************************************************************/
	/* Footer
	/************************************************************/
	& > footer {
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-block-start: var(--wp--preset--spacing--15);
		margin-inline: auto;
		z-index: 5;
		
		& > .wp-block-group {
			margin-block: 0;
		}
		
		/******************************/
		/* Site footer
		/******************************/
		& > .site-footer {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto 1fr;
			grid-template-areas:
				'logo     sticky-header-end-point'
				'deco-img panel';
			gap: var(--wp--preset--spacing--1-5);
			justify-content: start;
			align-items: end;
			
			/* Logo */
			.wp-block-site-logo {
				grid-area: logo;
                width: max(100px, 30%);
				
				* {
					width: 100%;
                    max-width: 100%;
					height: auto;
					aspect-ratio: 281/270;
					
					&:is(svg) {
						fill: var(--wp--custom--color--current--text);
						transition: fill var(--wp--custom--duration--short);
						
						.wp-block-site-logo:is(:hover, :focus, :active) & {
							fill: var(--wp--custom--color--default--accent);
						}
					}
				}
			}
            
            /* Deco img */
            .footer-deco-img {
                grid-area: deco-img;
                width: 100%;
                height: auto;
                min-height: 100%;
                position: relative;
                border-radius: var(--wp--custom--border-radius--small);
                overflow: clip;

                img {
                    position: absolute;
                    inset: 0;
                    object-fit: cover;
                }
            }

            /* Panel */
            .panel {
                grid-area: panel;
                display: flex;
                justify-content: space-between;
                gap: var(--wp--preset--spacing--1);
                width: 100%;
                height: 100%;
                background-color: var(--wp--preset--color--peep-pink);
                padding-block: var(--wp--preset--spacing--3-5) var(--wp--preset--spacing--3);
                padding-inline: var(--wp--preset--spacing--3-5) var(--wp--preset--spacing--7-5);
                border-radius: var(--wp--custom--border-radius--small);
                box-sizing: border-box;

                /* Coordinates */
                & > .coordinates {
                    justify-content: space-between;
                    height: 100%;

                    /* Override default coordinates focus style */
                    p {
                        &:is(p):is(p) {
                            a {                                                                
                                &:is(:hover, :focus, :active) {
                                    color: var(--wp--custom--color--default--bg);
                                }
                            }
                        }
                    }
                }

                /* Social menu */
                & > .site-nav.social {
                    align-self: end;

                    & > .items > .menu-item {
                        & > a {
                            background-color: var(--wp--custom--color--default--bg);
                            
                            &::after {
                                color: var(--wp--custom--color--default--text);
                            }
                            
                            &:is(:hover, :focus, :active) {
                                background-color: var(--wp--custom--color--default--text);

                                &::after {
                                    color: var(--wp--custom--color--default--bg);
                                }
                            }
                        }
                    }
                }
            }
		}
		
		/******************************/
		/* Site credits
		/******************************/
		& > .site-credits {
			display: flex;
			align-items: center;
			background-color: var(--wp--custom--color--current--text);
			padding: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--5);
            margin-block: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--3-5);
            border-radius: var(--wp--custom--border-radius--large);

            @container style(--live-visible: 1) {
                body:has(&) {
                    opacity: 0;
                }
            }
			
			& > :is(p, .cake) {
				margin-block: unset;
			}
			
			& > p {
                font-size: var(--wp--preset--font-size--small);
				line-height: 1;
                color: var(--wp--preset--color--white);
				
				a {
					text-decoration: none;

                    &:is(:hover, :focus, :active) {
                        color: var(--wp--custom--color--default--accent);
                    }
				}
			}
			
			& > .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;
                margin-inline-end: calc(var(--wp--preset--spacing--3-5) * -1);
				
				svg {
					fill: var(--wp--custom--color--default--bg);
					transition: fill var(--wp--custom--duration--short);
				}
				
				a:is(:hover, :focus, :active) > svg {
					fill: var(--wp--custom--color--default--accent);
				}
				
				&, * {
					display: flex;
					align-items: center;
					height: 18px;
				}
			}
		}
        
        /* Responsive ****************************************************/
        @media (width <= 1200px) {
            & > .site-footer {
                display: grid;
                grid-template-columns: repeat(2, 1fr) 2fr;
                grid-template-areas:
                    'logo     logo  sticky-header-end-point'
                    'deco-img panel panel';
            }
        }

        @media (width <= 900px) {
            & > .site-credits {
                padding: var(--wp--preset--spacing--1-5);

                & > .cake {
                    margin-inline-end: unset;
                }
            }
        }

        @media (width <= 800px) {
            & > .site-footer {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: auto repeat(2, max-content);
                grid-template-areas:
                    'logo     sticky-header-end-point'
                    'panel    panel'
                    'deco-img deco-img';
                
                .footer-deco-img {
                    height: 250px;
                }
                
                .panel {
                    padding-block: var(--wp--preset--spacing--1-5);
                    padding-inline: var(--wp--preset--spacing--1-5);
                }
            }

            & > .site-credits {
                flex-direction: column;
                row-gap: var(--wp--preset--spacing--1);
                text-align: center;
                border-radius: var(--wp--custom--border-radius--small);

                & > .copyright {
                    padding-inline-end: unset;
                    border-inline-end: unset;
                    margin-inline-end: unset;
                }
                
                & > .cake {
                    margin-inline-start: unset;
                }
            }
        }

        @media (width <= 500px) {
            & > .site-footer {
                .panel {
                    flex-direction: column;
                    row-gap: var(--wp--preset--spacing--3-5);
                    
                    & > .coordinates {
                        align-self: center;
                        width: max-content;
                        text-align: center;
                    }

                    & > .site-nav.social {
                        align-self: center;
                    }
                    
                }
            }
        }
	}
	
	/************************************************************/
	/* Menus
	/************************************************************/
	.site-nav {
		display: flex;
		align-items: end;
		gap: var(--wp--preset--spacing--1-5);
		
		/******************************/
		/* Menu items
		/******************************/
		& > .menu-item {
			width: max-content;
			max-width: 100%;
            font-family: var(--wp--preset--font-family--late-serif-variable);
            font-size: var(--wp--preset--font-size--medium-small);
            line-height: var(--wp--custom--line-height--large);
            font-weight: 400;
			color: var(--wp--custom--color--current--text);
			list-style: none;
			
			& > a {
                position: relative;
				font-family: inherit;
				font-size: inherit;
				line-height: inherit;
                font-weight: inherit;
				color: inherit;
				text-decoration: none;
				transition: color var(--wp--custom--duration--short);
				
				:is(:hover, :focus, :active) > & {
                    color: var(--wp--custom--color--default--accent);
				}

                [class*="current-menu-"] > & {
                    font-weight: 600;
                }
			}
		}
		
		/******************************/
		/* Sub-menus
		/******************************/
        & > .menu-item-has-children {
            --submenu-x-offset: calc(var(--wp--preset--spacing--1-5) * -1);
            --submenu-y-offset: var(--wp--preset--spacing--0-25);
            --submenu-max-width: 200px;

            anchor-scope: --menu-item-anchor;
            margin-block-end: calc(var(--submenu-y-offset) * -1);
            padding-block-end: var(--submenu-y-offset);
            
            & > a {
                --color: var(--wp--custom--color--default--text);
                --svg: url('data:image/svg+xml, <svg viewBox="0 0 11.207146 7.7049122" xmlns="http://www.w3.org/2000/svg"><path d="M 9.2862501,0 5.6027484,3.7159388 1.9753067,0.05327511 0,2.046097 5.6571598,7.7049122 11.207146,1.9928219 Z" fill-rule="evenodd"/></svg>');

                anchor-name: --menu-item-anchor;

                &:is(:hover, :focus) {
                    --color: var(--wp--custom--color--default--accent);
                }
    
                &::after {
                    content: '';
                    display: inline-block;
                    width: auto;
                    height: 8px;
                    aspect-ratio: 16/11;
                    background-color: var(--color);
                    margin-inline-start: var(--wp--preset--spacing--0-50);
                    transition: background-color var(--wp--custom--duration--short), opacity var(--wp--custom--duration--long);

                    -webkit-mask: var(--svg);
                    mask: var(--svg);
                    mask-repeat: no-repeat;
                    mask-position: center;
                }
            }

            & > .sub-menu {
                display: flex;
                flex-direction: column;
                gap: var(--wp--preset--spacing--0-50);
                position: absolute;
                top: calc(anchor(--menu-item-anchor bottom) + var(--submenu-y-offset));
                left: calc(anchor(--menu-item-anchor left) + var(--submenu-x-offset));
                width: max-content;
                min-width: anchor-size(--menu-item-anchor width);
                max-width: min(var(--wp--custom--viewport-width), var(--submenu-max-width));
                background: var(--wp--custom--color--default--accent);
                padding: var(--wp--preset--spacing--1-5);
                box-sizing: border-box;
                border-radius: var(--wp--custom--border-radius--small);
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                list-style: unset;
                margin: 0;
                opacity: 0;
                pointer-events: none;
                transition: opacity var(--wp--custom--duration--medium);
                
                .menu-item-has-children:is(:hover, :focus) > & {
                    opacity: 1;
                    pointer-events: all;
                }

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

                    a {
                        text-decoration: none;
    
                        &:is(:hover, :focus) {
                            color: var(--wp--custom--color--default--bg);
                        }
                    }
                }
                
            }
        }
		
		/******************************/
		/* Social menu / Icon menu items
		/******************************/
		&.social,
		&:has(.menu-item.icon) {
            /* Social menu specific style */
            &.social {
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: var(--wp--preset--spacing--1);
                
                * {
                    margin-block: 0;
                }
                
                & > .items {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    gap: var(--wp--preset--spacing--1);
                }
            }
            
            /* Common style */
            &.social > .items > .menu-item,
            & > .menu-item.icon {
                list-style: none;
                
                & > 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: var(--wp--custom--color--default--text);
                    border-radius: 50%;
                    box-sizing: border-box;
                    transition: background-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.125rem;
                        font-weight: 400;
                        line-height: normal;
                        color: var(--wp--custom--color--default--bg);
                        translate: -50% -50%;
                        transition: color var(--wp--custom--duration--short);
                    }
                    
                    &:is(:hover, :focus, :active) {
                        background-color: var(--wp--custom--color--default--accent);
                    }
                    
                    .fb > &::after  { content: ''; }
                    .ig > &::after  { content: ''; }
                    .in > &::after  { content: ''; font-size: 1.33rem; }
                    .yt > &::after  { content: ''; }
                    .tk > &::after  { content: ''; }
                    .tel > &::after { content: ''; }
                }
            }
		}
	}
	
	/************************************************************/
	/* Misc.
	/************************************************************/
	/* Add miscellaneous site frame elements here (ex: sticky widgets on the side) */
}