/*
Theme Name: NGI Block Theme
Theme URI: 
Author: Yoko Co
Author URI: 
Description: A modern, custom theme from the team at Yoko Co.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoko-ngi-main
Tags: 

/*************************************************************/

/*************************************************************/
/*************** Gutenberg and FSE quirk fixes ***************/
/*************************************************************/

/* Fixes default gaps between blocks when stacking groups or rows at the highest level */
:where(.wp-site-blocks) > * {margin-block-start: 0; margin-block-end: 0;}
/****/

.wp-block-cover {
	min-height: 100%;
}
.wp-block-post-terms p {
	margin: 0;
}
.wp-block-separator {
	min-height: 2px;
}
.wp-block-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	height: 16px;
	width: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 0 0-1.41 1.41L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z'/%3E%3C/svg%3E%0A");
	cursor: pointer;
}

/*************************************************************/
/************ Utility classes for responsive fixes ***********/
/*************************************************************/

/* Handles responsive left-right padding by default by target top level groups. Can be undone by using .esc-pad class on a top level group */

@media screen and (max-width: 1240px) {
.wp-site-blocks > .wp-block-group:not(.esc-pad), 
.wp-site-blocks > .wp-block-template-part > .wp-block-group:not(.esc-pad), 
.wp-block-template-part > .wp-block-template-part > .wp-block-group:not(.esc-pad), 
.wp-block-template-part > .wp-block-template-part > .wp-block-template-part > .wp-block-group:not(.esc-pad), .wp-site-blocks > .entry-content > .wp-block-group:not(.esc-pad) 
{
    padding-left: 20px; 
    padding-right: 20px;
}
}
 
/* utility classes for responsive layouts on medium devices */

@media screen and (max-width: 1024px) {
    body .is-layout-flex.md-reverse {flex-direction: row-reverse; justify-content: flex-end;} 
    body .is-layout-flex.md-stack {flex-direction: column;}  
    body .is-layout-flex.md-stack.md-reverse {flex-direction: column-reverse; justify-content: flex-end;} 
    body .is-layout-flex.md-stack  > :is(*, div) {display: block; width: 100%; margin-left: 0; margin-right: 0;} 
    body .wp-block-columns.is-layout-flex.md-reverse {flex-direction: column-reverse; justify-content: flex-end;}
}

/* utility classes for responsive layouts on small devices */
@media screen and (max-width: 992px) {
    body .is-layout-flex.mobile-reverse, body .is-layout-flex.sm-reverse {flex-direction: row-reverse; justify-content: flex-end;} 
    body .is-layout-flex.mobile-stack, body .is-layout-flex.sm-stack {flex-direction: column;} 
    body .is-layout-flex.mobile-stack.mobile-reverse, body .is-layout-flex.sm-stack.sm-reverse {flex-direction: column-reverse; justify-content: flex-end;} 
    body .wp-block-columns.is-layout-flex.mobile-reverse, body .wp-block-columns.is-layout-flex.sm-reverse {flex-direction: column-reverse; justify-content: flex-end;}

	.mobile-center:not(.is-layout-flex) {text-align: center;}
	.mobile-center.is-layout-flex {justify-content: center;}
	.mobile-center.wp-block-image {width: 100%;}
}


/****************************************************/
/************* Button default effects ***************/
/****************************************************/

/* Button hover states that adapt and work on most buttons */

.wp-block-buttons .wp-block-button__link {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	position: relative;
}
.wp-block-buttons .wp-block-button__link::after {
	content: ' ';
	position: absolute;
	border-radius: inherit;
	background-color: transparent;
	top: -2px;
	right: 0;
	left: -2px;
	bottom: 0;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	opacity: 1;
	mix-blend-mode: overlay;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.wp-block-buttons .wp-block-button__link:hover::after {
	background-color: #D9D9D9;
	opacity: 0.5;
}

/****************************************************/
/************* Desktop Navigation Block *************/
/****************************************************/

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: 0;
}

.wp-block-navigation__submenu-container > li.wp-block-navigation-item .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--30);
}
.wp-block-navigation__submenu-container > li.wp-block-navigation-item:not(:last-of-type) {
	border-bottom: 1px solid var(--wp--preset--color--contrast-border);
}

.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item__content {
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}
.wp-block-navigation__submenu-container > li.wp-block-navigation-item:has(.wp-block-navigation-item__content):hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--core-heading);
}

@media screen and (min-width: 993px) {
	.wp-block-navigation__container > li.wp-block-navigation-item {
		padding: var(--wp--preset--spacing--30) 0;
	}
	.wp-block-navigation__container > li.wp-block-navigation-item.has-child {
		gap: var(--wp--preset--spacing--20);
	}
	.wp-block-navigation__submenu-container {
		border-radius: 8px;
	}
	.wp-block-navigation__submenu-container > li.wp-block-navigation-item:first-of-type {
		border-radius: 8px 8px 0 0;
	}
	.wp-block-navigation__submenu-container > li.wp-block-navigation-item:last-of-type {
		border-radius: 0 0 8px 8px;
	}
	.wp-block-navigation__submenu-container > li.wp-block-navigation-item:only-of-type {
		border-radius: 8px;
	}

	.wp-block-navigation__container > li.wp-block-navigation-item > .wp-block-navigation-item__content {
		position: relative;
		padding: var(--wp--preset--spacing--20) 0;
	}
	.wp-block-navigation__container > li.wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: '';
		position: absolute;
		left: 0; /* make it grow from left to right */
		bottom: 0;
		width: 0;
		height: 1px;
		background-color: var(--wp--preset--color--core-border);
		transition: width 0.2s ease;
	}
	.wp-block-navigation__container > li.wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
		width: 100%;
	}
}

/****************************************************/
/************** Mobile Navigation Block *************/
/****************************************************/

.has-modal-open body:not(.admin-bar) .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}
.has-modal-open body.admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 52px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	background-color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: transparent !important;
	padding: 0px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 72px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
	background-color: var(--wp--preset--color--contrast) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	padding: 0px;
	min-width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child:has(button[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
	display: block;
	padding-left: 0px;
	padding-right: 0px;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.2636 9.86358C6.61508 9.51211 7.18492 9.51211 7.5364 9.86358L12 14.3272L16.4636 9.86358C16.8151 9.51211 17.3849 9.51211 17.7364 9.86358C18.0879 10.2151 18.0879 10.7849 17.7364 11.1364L12.6364 16.2364C12.4676 16.4052 12.2387 16.5 12 16.5C11.7613 16.5 11.5324 16.4052 11.3636 16.2364L6.2636 11.1364C5.91213 10.7849 5.91213 10.2151 6.2636 9.86358Z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: center right 20px;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child:has(button[aria-expanded="true"]) > .wp-block-navigation-item__content {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='scale(1, -1) translate(0, -24)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.2636 9.86358C6.61508 9.51211 7.18492 9.51211 7.5364 9.86358L12 14.3272L16.4636 9.86358C16.8151 9.51211 17.3849 9.51211 17.7364 9.86358C18.0879 10.2151 18.0879 10.7849 17.7364 11.1364L12.6364 16.2364C12.4676 16.4052 12.2387 16.5 12 16.5C11.7613 16.5 11.5324 16.4052 11.3636 16.2364L6.2636 11.1364C5.91213 10.7849 5.91213 10.2151 6.2636 9.86358Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item:last-of-type.is-button {
	margin-top: 20px;
}

.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.is-button > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--contrast);
	border-radius: 40px;
	border-color: var(--wp--preset--color--contrast);
	border-width: 1px;
	border-style: solid;
	color: var(--wp--preset--color--contrast-text);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: var(--wp--preset--font-size--body-default);
	text-align: center;
	width: calc(100% - 48px);
	padding: 10px 24px;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.is-button > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--contrast-tint);
	border-color: var(--wp--preset--color--contrast-tint);
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation > li.wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 24px 20px;
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation > li.wp-block-navigation-item:not(:last-of-type, :only-of-type) > .wp-block-navigation-item__content {
	border-bottom: 1px solid var(--wp--preset--color--contrast-border);
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation > li.wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--core-border);
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container li.wp-block-navigation-item {
	border: 0;
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container li.wp-block-navigation-item .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--contrast-tint);
	font-size: var(--wp--preset--font-size--body-small);
	padding: 16px;
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container li.wp-block-navigation-item:not(:last-of-type, :only-of-type) .wp-block-navigation-item__content {
	border-bottom: 1px solid rgba(236, 230, 223, 0.10);
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container li.wp-block-navigation-item:hover .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--core-heading);
}