/*
Theme Name: OakTREE Block Theme
Theme URI: 
Author: Yoko Co
Author URI: 
Description: A modern, custom theme from the team at Yoko Co.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7  
Version: 1.31   
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoko-custom-core
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;}


/****************************************************/
/**************** Navigation styles *****************/
/****************************************************/

body .wp-block-navigation .wp-block-navigation-item__content {
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

body .wp-block-navigation > .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) .wp-block-navigation__submenu-container {
	border-color: var(--wp--preset--color--core-border) !important;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04) inset;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}
body .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0px !important;
}
body .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand);
}

@media screen and (min-width: 993px) {
	body .wp-block-navigation .wp-block-navigation__submenu-icon {
		margin-top: -8px;
		margin-left: 4px;
		height: 12px;
		width: 12px;
	}

	body .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	body .wp-block-navigation > .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation-item__content {
		text-decoration: underline;
	}
}
@media screen and (max-width: 992px) {
	body .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	body .wp-block-navigation > .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--brand);
	}
}

/****************************************************/
/************* Header navigation styles *************/
/****************************************************/

@media screen and (min-width: 993px) {
	header .wp-block-navigation > .wp-block-navigation-item {
		padding: var(--wp--preset--spacing--30) 0;
	}
}
@media screen and (max-width: 992px) {
	header .mobile-nav summary {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='28' viewBox='0 0 27 28' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.69995 6.91252C2.69995 6.35334 3.15326 5.90002 3.71245 5.90002H23.2874C23.8466 5.90002 24.2999 6.35334 24.2999 6.91252C24.2999 7.47171 23.8466 7.92502 23.2874 7.92502H3.71245C3.15326 7.92502 2.69995 7.47171 2.69995 6.91252ZM2.69995 14C2.69995 13.4408 3.15326 12.9875 3.71245 12.9875H23.2874C23.8466 12.9875 24.2999 13.4408 24.2999 14C24.2999 14.5592 23.8466 15.0125 23.2874 15.0125H3.71245C3.15326 15.0125 2.69995 14.5592 2.69995 14ZM2.69995 21.0875C2.69995 20.5283 3.15326 20.075 3.71245 20.075H23.2874C23.8466 20.075 24.2999 20.5283 24.2999 21.0875C24.2999 21.6467 23.8466 22.1 23.2874 22.1H3.71245C3.15326 22.1 2.69995 21.6467 2.69995 21.0875Z' fill='%230F172A'/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 27px;
		list-style-type: none;
		width: 27px;
		height: 27px;
		font-size: 0px;
	}
	header .mobile-nav[open] summary {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='28' viewBox='0 0 27 28' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.15338 6.65338C6.48288 6.32387 7.01712 6.32387 7.34662 6.65338L13.5 12.8068L19.6534 6.65338C19.9829 6.32387 20.5171 6.32387 20.8466 6.65338C21.1761 6.98288 21.1761 7.51712 20.8466 7.84662L14.6932 14L20.8466 20.1534C21.1761 20.4829 21.1761 21.0171 20.8466 21.3466C20.5171 21.6761 19.9829 21.6761 19.6534 21.3466L13.5 15.1932L7.34662 21.3466C7.01712 21.6761 6.48288 21.6761 6.15338 21.3466C5.82387 21.0171 5.82387 20.4829 6.15338 20.1534L12.3068 14L6.15338 7.84662C5.82387 7.51712 5.82387 6.98288 6.15338 6.65338Z' fill='%230F172A'/%3E%3C/svg%3E");
	}
	header .mobile-nav summary::before {
		display: none;
	}
	header .mobile-nav-col {
		position: absolute;
		left: 0;
		width: 100%;
		margin-top: var(--wp--preset--spacing--40);
	}
	header .mobile-nav-col:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
		overflow: scroll;
		height: 80vh;
	}

	header .mobile-nav .wp-block-navigation .wp-block-navigation-item {
		width: 100%;
		flex-wrap: wrap;
	}
	header .mobile-nav .wp-block-navigation > .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
		row-gap: var(--wp--preset--spacing--30);
		column-gap: 0px;
	}
	header .mobile-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		position: relative;
		top: 0;
	}

	header .mobile-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		left: 0px;
		top: 0px;
		margin: 0px var(--wp--preset--spacing--40);
	}

	header .mobile-nav .wp-block-navigation .wp-block-navigation-submenu__toggle {
		flex-basis: 30%;
		text-align: right;
	}
	header .mobile-nav .wp-block-navigation .wp-block-navigation-item__content {
		flex-basis: 70%;
	}
	header .mobile-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		flex-basis: 100%;
	}

	header .mobile-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
		padding-right: var(--wp--preset--spacing--30);
	}
	header .mobile-nav .wp-block-navigation .wp-block-navigation__submenu-icon {
		height: 14px;
		margin-left: 0px;
	}
	header .mobile-nav .wp-block-navigation .wp-block-navigation-item:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation-submenu__toggle svg {
		rotate: 180deg;
	}
}

@media screen and (min-width: 993px) {
	header .mobile-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		left: 100%;
		top: -1px;
	}
}

/*************************************************************/
/************ 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: 781px) {
    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 .is-layout-flex.mobile-stack  > :is(*, div), body .is-layout-flex.sm-stack  > :is(*, div) {width: 100%; margin-left: 0; margin-right: 0;} 
    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;}
}


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

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

.wp-block-buttons .wp-block-button__link {
	text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.25);
	-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: 0.2;
	mix-blend-mode: overlay;
	z-index: -1;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.wp-block-buttons .wp-block-button__link:hover::after {
	background-color: #D9D9D9;
	z-index: 1;
}
.wp-block-button .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--core-tint);
}

/****************************************************/
/***** Fixing default mobile navigation issues ******/
/****************************************************/

/* The following rules address numerous spacing and positioning issues with the mobile navigation */

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
    max-width: 100vw; 
    overflow: hidden; 
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    padding: 0px 10px; 
    background-color: rgba(0,0,0,0.1)!important;
    border-radius: 3px; 
    width: calc(100% - 20px);
}
 

.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
    padding: 10px 24px; 
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    padding: 10px;   
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    gap: 0px; 
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 24px!important; 
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
    width: 100%; 
}

/****************************************************/
/**************** Misc adjustments ******************/
/****************************************************/
 
/* Fixes default gaps when using prefixes on MFBPro */

.wp-block-mfb-meta-field-block.is-display-inline-block .prefix {
    margin-inline-end: var(--mfb--gap, 0);
}

[id] {
	scroll-margin-top: 190px;
}
@media screen and (max-width: 992px) {
	[id] {
		scroll-margin-top: 100px;
	}
}

body .seopress-user-consent button {
	border-radius: 100px;
	text-transform: uppercase;
	min-width: auto;
}