/************************************************************/
/*
/*      Block CSS
/*
/************************************************************/
.wp-block-post-content {
	/* Gutenberg style override */
	:root &:where(.is-layout-constrained) > * {
		margin-block-start: 0;
	}
	
	/* Full-width background support */
	& > .has-background:not(.alignfull, .no-full-size-bg) {
		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: inherit;
			z-index: -1;
		}
	}
	
	/* First block top margin adjustments (frontend only) */
	/* Remove if theme does not have blocks that go behind the header */
    body:not(.wp-admin) {
        & > :first-child {
            /* Move some blocks behind the header */
            &:is(.wp-block-cover) {
                margin-block-start: calc(var(--wp--custom--stickied-header-height) * -1) !important;
            }
            
            &:not(.wp-block-cover) {
                margin-block-start: max(var(--wp--preset--spacing--12-5), calc((var(--wp--custom--header-height) - var(--wp--custom--stickied-header-height)) + var(--wp--preset--spacing--12-5))) !important;
            }
        }
    }
	
	/* Block alignments */
	/* & > :not(.alignleft, .aligncenter, .alignright, .alignwide, .alignfull):is(:not(.alignleft, .aligncenter, .alignright, .alignwide, .alignfull)) {
		margin-left: 0 !important;
		margin-right: auto !important;
		
		body.wp-admin & {
			margin-left: var(--wp--custom--outer-pad) !important;
			
			&:has(> .components-placeholder) {
				margin-left: auto !important;
			}
		}
	} */
}

/************************************************************/
/* Core blocks
/************************************************************/
/******************************/
/* Cover
/******************************/
.wp-block-cover {
    position: relative;
    
    &[style*="min-height:100vh;"] {
        min-height: calc(100svh - var(--wp--custom--header-height) - var(--wp--custom--adminbar-height)) !important;
        max-height: calc(100svh - var(--wp--custom--header-height) - var(--wp--custom--adminbar-height)) !important;
    }

    &.alignfull {
        margin-inline: calc(var(--wp--custom--full-pad) * -1) !important;
    }

    & > .wp-block-cover__inner-container {
        max-width: var(--wp--custom--max-width);
    }

    body:not(.wp-admin, .block-editor-iframe__body) .wp-block-post-content > &:first-child::after {
        content: '';
        position: absolute;
        bottom: var(--wp--preset--spacing--0-75);
        right: var(--wp--preset--spacing--1);
        width: 32px;
        height: auto;
        aspect-ratio: 1;
        font-family: var(--wp--preset--font-family--fontawesome);
        font-size: 1.25rem;
        line-height: 32px;
        font-weight: 500;
        text-align: center;
        color: var(--wp--custom--color--current--bg);
        border: 2px solid currentcolor;
        border-radius: 50%;
        z-index: 1;
    }
}

/******************************/
/* Group
/******************************/
.wp-block-group {
    /* Group link hover color inheritance */
    &.is-linked[class*="focus-"] > :is(p, .wp-block-heading) {
        color: inherit !important;
        transition: color .3s !important;
    }
}

/******************************/
/* Image
/******************************/
.wp-block-image {
	position: relative;
	margin-block-end: unset;
	
	/* Fill style variations */
	:has(> &[class*="is-style-fill"]) {
		&.wp-block-column {
			align-self: stretch;
		}
		
		& > [class*="is-style-fill"] {
			&:not(.cover, .contain) * {
				object-fit: cover;
			}
			
			/* Fill width */
			&.is-style-fill-width,
			&.is-style-fill-width * {
				width: 100% !important;
                height: auto;
			}
			
			/* Fill height */
			&.is-style-fill-height,
			&.is-style-fill-height * {
                height: 100% !important;
                width: auto;
			}
			
			/* Fill both */	
			&.is-style-fill-both,
			&.is-style-fill-both * {
				width: 100% !important;
				height: 100% !important;

                &:has()

                &:not(figure) {
                    position: absolute;
                    inset: 0;

                    /* Support for Cake Tools focal points */
                    [style*="--focal-x"][style*="--focal-y"] > & {
                        left: 50%;
                        height: auto !important;
                        translate: calc(var(--focal-x, 50%) * -1) calc(50% - var(--focal-y, 50%)) !important;
                    }
                }
                
                /* If in a block with a defined minimum height, inherit it */
                [style*="min-height:"] > & {
                    min-height: inherit;
                }
			}
		}
	}
	
	/* Backend style */
    body.wp-admin & {
        &[class*="is-style-fill"]:not(.is-resized) .components-resizable-box__container {
            display: contents !important;
        }

        style + &.is-style-fill-both {
            /* Support for Cake Tools focal points */
            &.is-style-fill-both img {
                left: 50% !important;
                height: auto !important;
                translate: calc(var(--focal-x, 50%) * -1) calc(50% - var(--focal-y, 50%)) !important;
            }
        }
    }
	
	/* Responsive ****************************************************/
	@media (width <= 800px) {
		max-height: 50svh;
	}
}

/******************************/
/* List
/******************************/
ul.wp-block-list {
	&:is(ul) {
		padding-inline-start: unset !important;
		
		& > li {
			display: flex;
			align-items: baseline;
			column-gap: var(--wp--preset--spacing--0-50);
			list-style: unset;
			
			&::before {
				content: '-';
			}
			
			/* Uncomment if bullets are to be SVGs */
			/* &::before {
				--bullet: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 125 101"><path transform="translate(-0.000640869 0)" d="M124.17332 0L84.105522 99.542603L0 99.542603L40.069077 0L124.17332 0Z" fill-rule="evenodd"/></svg>');
				
				content: '';
				width: 10px;
				height: auto;
				aspect-ratio: 31/25;
				background-repeat: no-repeat;
				background-position: center;
				background-color: currentcolor;
				
				-webkit-mask: var(--bullet);
				mask: var(--bullet);
			} */
			
			& + li {
				margin-block-start: var(--wp--preset--spacing--0-25);
			}
			
			&:is(.block-editor-block-list__block:not(.is-selected), :not(.block-editor-block-list__block)) :is(div, b, strong, em, a):not([role="textbox"]) {
				display: contents;
			}
		}
	}
	
	&:is(ol) {
		padding-inline-start: 24px !important;
	}
}

/******************************/
/* Video
/******************************/
.wp-block-video {
	position: relative;
	
	&::before,
	&::after {
		content: '';
		position: absolute;
		opacity: 1;
		pointer-events: none;
		transition: opacity var(--wp--custom--duration--medium);
	}
	
	&.played::before,
	&.played::after {
		opacity: 0;
	}
	
	&::before {
		inset: 0;
		width: 100%;
		height: 100%;
		background-color: var(--wp--preset--color--black);
		opacity: .45;
		mix-blend-mode: multiply;
		z-index: 1;
	}
	
	&::after {
        top: 50%;
		left: 50%;
		width: 12.5%;
		height: auto;
		max-height: 50%;
		aspect-ratio: 1;
		background-image: url(../images/play.svg);
		background-size: contain;
		background-repeat: no-repeat;
		translate: -50% -50%;
		z-index: 2;
	}

    video {
        cursor: pointer;
    }
}

/************************************************************/
/* Custom blocks
/************************************************************/
/* Add Cake custom block style overrides here */

/************************************************************/
/* Other blocks/elements
/************************************************************/
/******************************/
/* Limited width
/* (For elements with no
/* max-width control in editor)
/******************************/
h1, h2, h3, h4, h5, h6, p {
	&.limited-width-l {
		&,
		.edit-post-visual-editor .is-root-container & {
			max-width: min(40rem, 100%);
		}
	}
	
	&.limited-width {
		&,
		.edit-post-visual-editor .is-root-container & {
			max-width: min(37.5rem, 100%);
		}
	}
	
	&.limited-width-s {
		&,
		.edit-post-visual-editor .is-root-container & {
			max-width: min(28.125rem, 100%);
		}
	}
	
	&.limited-width-xs {
		&,
		.edit-post-visual-editor .is-root-container & {
			max-width: min(20rem, 100%);
		}
	}
}

/******************************/
/* Groups/Columns with
/* "constrained" layout
/******************************/
body:not(.wp-admin, .block-editor-iframe__body) :is(.wp-block-group, .wp-block-column).is-layout-constrained {
    /**** Responsive ****/
    @media (width <= 1240px) {
        & > :not(.wp-block-image) {
            min-width: 50%;
        }
    }
    
    @media (width <= 1000px) {
        & > :not(.wp-block-image) {
            min-width: calc(100% * (2/3));
        }
    }

    @media (width <= 800px) {
        & > :not(.wp-block-image) {
            min-width: 75%;
        }
    }

    @media (width <= 600px) {
        & > :not(.wp-block-image) {
            min-width: 95%;
        }
    }

    @media (width <= 400px) {
        & > :not(.wp-block-image) {
            min-width: 100%;
        }
    }
}

/******************************/
/* Buttons
/******************************/
.wp-block-button,
.menu-item.btn,
body:not(.wp-admin, .login) .gfield--type-fileupload .ginput_container_fileupload,
body:not(.wp-admin, .login) .gform_footer {
	position: relative;
	max-width: 100%;
	
	& > :is(.wp-block-button__link, input[type="submit"], a) {
		display: inline-flex;
        align-items: center;
        gap: var(--wp--preset--spacing--0-50);
		width: max-content;
		max-width: 100%;
		height: 100%;
        font-family: var(--wp--preset--font-family--neue-haas-grotesk-display);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--equal);
        font-weight: 600;
        color: var(--wp--custom--color--default--accent);
        background-color: unset;
        border-radius: unset;
		transition: color var(--wp--custom--duration--short), scale var(--wp--custom--duration--medium);
		scale: 1;

        &::after {
            content: '';
            font-family: var(--wp--preset--font-family--fontawesome);
            font-size: .6em;
            line-height: inherit;
            color: inherit;
            translate: 0 2px;
            transition: color var(--wp--custom--duration--short), translate var(--wp--custom--duration--short);
        }

        /* !important needed to override Gravity Forms submit button */
        &:is(input[type="submit"]) {
            display: inline-block !important;
            font-family: var(--wp--preset--font-family--neue-haas-grotesk-display) !important;
            font-size: var(--wp--preset--font-size--small) !important;
            line-height: var(--wp--custom--line-height--equal) !important;
            font-weight: 600 !important;
            color: var(--wp--custom--color--default--accent) !important;
            background-color: unset !important;
            border-radius: unset !important;
            transition: color var(--wp--custom--duration--short), scale var(--wp--custom--duration--medium) !important;
        }
		
		&:is(:hover, :focus, :active) {
			color: var(--wp--custom--color--default--text--alt) !important;

            &::after {
                translate: var(--wp--preset--spacing--0-25) 2px;
            }
		}
		
		&:active {
			scale: 0.975;
		}
	}
}

/* Popup open/close buttons */
:is(.burger-popup-open, .burger-popup-close) {
    display: flex;
	position: relative;
	width: 28px;
	height: 28px;
	background-color: transparent;
	padding: unset;
	border: unset;
	cursor: pointer;

    &.burger-popup-open {
        height: auto;
        aspect-ratio: 30/13;
    }
	
	& > svg {
		width: 100%;
		height: 100%;
        fill: var(--wp--custom--color--default--accent);
        transition: fill var(--wp--custom--duration--short);

        .wp-site-blocks:has(#burger-popup-toggle:not(:checked)) & {
            opacity: 1;
            transition: fill var(--wp--custom--duration--short), opacity var(--wp--custom--duration--medium) var(--wp--custom--duration--short);
        }
        
        .wp-site-blocks:has(#burger-popup-toggle:checked) :not(:hover, :focus, :active) > & {
            fill: var(--wp--custom--color--current--text);
            
            .burger-popup-close > & {
                fill: var(--wp--custom--color--current--bg);
            }
        }

        path {
            fill: inherit;
        }
	}
	
	&:is(:hover, :focus, :active) {
		& > svg {
            fill: var(--wp--custom--color--current--text);

            .burger-popup-close > & {
                fill: var(--wp--custom--color--default--accent);
            }
		}
	}
}

/******************************/
/* Forms/inputs
/******************************/
body:not(.wp-admin, .login) .gform_wrapper {
	container-type: inline-size;
	container-name: form-wrapper;
	
	.gform_fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--1);
		row-gap: var(--wp--preset--spacing--2);
		
		/* Typo */
		:is(input, select, textarea):not([type="submit"], [type="button"], [class*="adminbar"]),
		.gfield_label {
			/* Add input/label typography here */
		}
		
		/* Labels */
		.gfield_label {
			gap: 0;
			/* Add label style here */
			
			.gfield_required {
				&,
				&::after {
					font-family: inherit !important;
					font-size: inherit !important;
					line-height: inherit !important;
					font-weight: inherit !important;
					color: inherit !important;
				}
				
				&::after {
					content: '*';
				}
				
				.gfield_required_text {
					display: none;
				}
			}
		}
		
		/* Fields */
		.gfield {
			grid-column: span 2;
			
			&.gfield--width-half {
				grid-column: span 1;
			}
			
			:is(input, select, textarea):not([type="submit"], [type="button"], [type="file"], [class*="adminbar"], [class*="ui-datepicker"]) {
				width: 100% !important;
				height: auto !important;
				color: var(--wp--custom--color--current--text);
				background-color: transparent;
				padding: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--2);
				border: unset;
				border-radius: var(--wp--custom--border-radius--large);
				box-sizing: border-box;
				box-shadow: unset !important;
				outline: unset !important;
				resize: none;
				
				&:is(textarea) {
					border-radius: var(--wp--custom--border-radius--small);
				}
			}
			
			/* TODO: ADD DEFAULT STYLE FOR CHECKBOXES AND RADIO BUTTONS */
			/* TODO: ADD DEFAULT STYLE FOR FILE UPLOAD INPUT */
		}
	}
	
	/* Form footer */
	.gform_footer {
		position: relative;
		width: max-content;
		margin-block-start: var(--wp--preset--spacing--2) !important;
		margin-inline: unset !important;
		overflow: clip;
		
		input[type="submit"] {
			font-family: inherit !important;
			font-size: inherit !important;
			font-weight: inherit !important;
			line-height: inherit !important;
			color: inherit !important;
			border: unset !important;
			border-radius: unset !important;
			outline: unset !important;
		}
	}
	
	/* Form error/confirmation messages & Loading icon */
	.gform_validation_errors {
		display: none;
	}
    
    .gfield_validation_message, 
    .gform_confirmation_message {
        /* Add confirmation/validation message common typography here */
        
        &.gfield_validation_message {
            /* Add validation message typography here */
        }
        
        &.gform_confirmation_message {
            &, & > * {
                /* Add confirmation message typography here */
                margin-block: unset;
            }
        }
    }
	
	.gform-loader {
		display: none;
	}
	
	form:has(.gform-loader) {
		position: relative;
		
		:is(.gfield, .gform_footer) {
			opacity: .5 !important;
			pointer-events: none !important;
		}
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100px;
			height: auto;
			aspect-ratio: 1;
			background: url(../images/loading.svg) no-repeat center;
			background-size: contain;
			translate: -50% -50%;
		}
	}
	
	/* Responsive */
	@container form-wrapper (width <= 800px) {
		.gfield {
			grid-column: span 2 !important;
		}
	}
	
	@media (width <= 1200px) {
		.gform_fields {
			column-gap: var(--wp--preset--spacing--1);
			row-gap: var(--wp--preset--spacing--1);
		}
	}
}