/* ============================================================================================
	HEADER WITH SEARCH / PATTERN
============================================================================================ */
:root {
	--search-button-width: 40px;
	--search-button-min_height: 46px;
	--logo-height: 120px;
	--navi-height: 66px;
}

.kasai-header {
	position: sticky !important;
	top: 0;
	z-index: 10;
	width: 100%;
}
/* admin bar */
@media screen and (min-width: 601px) {
	.admin-bar .kasai-header {
		top: 46px !important;
	}
}
@media screen and (min-width: 781px) {
	.admin-bar .kasai-header {
		top: 32px !important;
	}
}
.kasai-header-with-search-inner {
	padding-right: 2% !important;
	padding-left: 2% !important;
}
@media screen and (min-width: 821px)  {
	.kasai-header-with-search-inner {
		padding-right: 4% !important;
		padding-left: 4% !important
	}
}

/* ============================================================================================
	LOGO SIZE
============================================================================================ */
.kasai-logo-group {
	height: var(--logo-height);
	overflow: hidden;
	transition: height .6s
}
.kasai-logo-image {
	height: 60px !important;
	transition: transform .6s
}
.kasai-logo-shrink .kasai-logo-group {
	height: 0;
}
.kasai-logo-shrink .kasai-logo-image {
	transform: scale(0)
}
.kasai-logo-heading::after {
	content: "depuis 2025";
	display: block;
	margin: 3px 0 0;
	font-size: 10px;
	text-align: center
}
.kasai-logo-small {
	flex-shrink: 0;
	margin-right: 8px !important
}
.kasai-logo-small:not(.kasai-logo-small-visible) {
	opacity: 0;
	transition: opacity .6s
}
.kasai-header-with-search.kasai-logo-shrink .kasai-logo-small {
	opacity: 1
}

/* ============================================================================================
	BUTTONS
============================================================================================ */

.kasai-header-with-search-buttons {
	gap: 0 16px;
	margin-left: auto !important
}

/* ============================================================================================
	NAVIGATION
============================================================================================ */
.kasai-header-with-search-navigation {
	display: flex;
	justify-content: flex-start !important;
	gap: 0 !important;
	height: var(--navi-height)
}
.kasai-header-with-search-navigation li {
	flex-shrink: 0;
	flex-grow: 0;
	height: 100%;
	padding: 0 1.5em !important
}
.kasai-header-with-search-navigation li a {
	display: flex !important;
	justify-content: center;
	align-items: center;
	height: 100%
}

/* override wordpress default breakpoint */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
        left: 0
    }
}
@media screen and (min-width: 1501px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        background-color:inherit;
        display: block;
        position: relative;
        width: 100%;
        z-index: auto
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
        left: 0
    }
	.kasai-header-with-search-navigation li {
		position: relative;
	}
	.kasai-header-with-search-navigation li::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 100%;
		height: 0;
		background: var(--wp--preset--color--translucent-w);
		transform: translateX(-50%);
		pointer-events: none;
		transition: height .3s
	}
	.kasai-header-with-search-navigation li:hover::before {
		height: 100%
    }
}

/* ============================================================================================
	NAVIGATION DRAWER
============================================================================================ */
.wp-block-navigation__responsive-container-open {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 36px;
	height: 36px
}
@media screen and (max-width: 1500px) {
	.kasai-header-with-search .wp-block-navigation__responsive-container {
		display: flex !important;
		position: fixed !important;
		animation: none;
		transform: translateX(100%);
		transition: .5s 
	}
	.kasai-header-with-search .wp-block-navigation__responsive-container.is-menu-open {
		left: initial;
		width: 80%;
		max-width: 400px;
		animation: none;
		transform: translateX(0)
	}
	.kasai-header-with-search::before {
		content: "";
		opacity: 0;
		visibility: hidden;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,.7);
		backdrop-filter: blur(3px);
		transition: opacity .3s, visibility .3s
	}
	.kasai-header-with-search:has(.is-menu-open)::before {
		opacity: 1;
		visibility: visible;
	}
	.wp-block-navigation .wp-block-navigation-item {
		margin-bottom: 1rem
	}
}
@media screen and (min-width: 1501px) {
	.kasai-header-with-search .wp-block-navigation__responsive-container {
		display: none
	}
}
.kasai-header-with-search-inner {
	position: relative
}
.kasai-header-site-title a {
	text-decoration: none
}
.kasai-header-with-search-site-search.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper button {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: var(--site-search-button-width);
	height: 100%;
	min-height: var(--site-search-button-min_height);
	padding: 0
}
.kasai-header-with-search-site-search.wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
	max-width: initial
}
.kasai-header-with-search-site-search.wp-block-search.wp-block-search__button-only .wp-block-search__input {
	position: absolute;
	right: var(--site-search-button-width);
	top: 50%;
	width: calc(100% - var(--site-search-button-width));
	height: calc(100% - 12px);
	max-height: 4em;
	transform: translateY(-50%)
}
@media screen and (min-width: 783px) {
	.kasai-header-with-search-site-search.wp-block-search.wp-block-search__button-only .wp-block-search__input {
		max-width: 600px
	}
}
.kasai-header-with-search-site-search.wp-block-search.wp-block-search__button-only .wp-block-search__input:focus {
	outline: none
}

/* ============================================================================================
   element order
============================================================================================ */
.kasai-header-with-search-navigation {
	order: 10
}
@media screen and (min-width: 1501px) {
	.kasai-header-with-search-navigation {
		order: initial
	}
}

/* ============================================================================================
	SEARCH BLOCK
============================================================================================ */
.kasai-search-form-wrapper {
	opacity: 0;
	visibility: hidden;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: rgba(0,0,0,.7);
	backdrop-filter: blur(8px);
	transform: scale(1.1);
	transition: opacity .3s, visibility .3s, transform .3s;
}

.kasai-search-form-is-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1)
}
.kasai-search-form {
	width: 98%;
	max-width: 800px;
	font-size: 16px
}
.kasai-search-form .kasai-search-input {
	height: 100%;
	padding: 1em
}
.kasai-search-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--search-button-width);
	height: var(--search-button-width);
	cursor: pointer
}
.kasai-search-button-close {
	display: flex;
	justify-content: flex-end;
	width: 98% !important;
	max-width: 800px
}


/* ============================================================================================
	ICON ADJUSTMENT
============================================================================================ */
.kasai-search-button .icon-text {
	display: none !important
}
.kasai-search-button-close {
	width: var(--search-button-width);
	height: var(--search-button-width);
	color: var(--wp--preset--color--white)
}


/* ============================================================================================
	GTRANSLATE
============================================================================================ */
.editor-styles-wrapper .kasai-language-button {
	display: none
}