/*--------------------------------------------------------------
# Site Header Topbar
--------------------------------------------------------------*/
.header-topbar {
	position: relative;
	z-index: 10;
	text-align: right;
	font-size: 18px;
	line-height: 50px;
	font-weight: 400;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}

.header-topbar .container {
	position: relative;
}

.header-topbar .header-row {
	display: flex;
	align-items: center;
	justify-content: right;
	padding: 0;
	min-height: 26px;
	transition: 0.3s var(--ease-out);
	transition-property: background-color, color;
}

.header-topbar .header-row .topbar-widget {
	margin-left: 15px;
}

.header-topbar .header-row .topbar-widget:first-child {
	margin-left: 0;
}

.header-topbar .header-row .topbar-widget p {
	margin: 0;
}

.header-topbar .header-row .topbar-widget p a {
	font-size: 16px;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}
.header-topbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-topbar ul li {
	list-style: none;
	margin: 0 0 0 40px;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.header-topbar ul li::after {
	content: "|";
	color: var(--wp--preset--color--primary);
	position: absolute;
	right: -21px;
}

.header-topbar ul li:last-child::after {
	display: none;
}

.header-topbar ul li:first-child {
	margin-left: 0;
}

.header-topbar ul li a {
	text-decoration: none;
	letter-spacing: 0;
}

.header-topbar ul li a:hover,
.header-topbar ul li.current_page_item a,
.header-topbar ul li.current-menu-item a,
.header-topbar ul li.current_page_parent a {
	color: var(--wp--preset--color--white);
}
.header-widget .search-icon {
	display: none !important;
}

.header-widget .search-icon a {
	position: relative;
	display: block;
	padding: 0;
}

.secondary-menu-widget ul li.search-icon > a {
	position: relative;
	font-size: 0;
	line-height: 0;
}

.header-widget .search-icon a:before,
.secondary-menu-widget ul li.search-icon > a:before {
	content: "\e835";
	font-family: "ienso_icons";
	display: block;
	font-size: 26px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 70px;
}

.header-widget .search-icon a:hover {
	color: var(--wp--preset--color--primary);
	background-position: bottom center;
}

@media screen and (max-width: 1024px) {
	.header-topbar .header-row {
		min-height: 70px;
		position: relative;
		top: auto;
		color: var(--wp--preset--color--black);
		display: none;
	}

	.header-topbar {
		height: 20px;
	}

	.header-topbar .header-row .topbar-widget p a {
		color: var(--wp--preset--color--black);
	}
}

@media screen and (max-width: 600px) {
	.header-topbar {
		font-size: 12px;
	}

	.header-topbar .header-row .topbar-widget p a {
		font-size: 12px;
	}
}

@media screen and (max-width: 480px) {
	.header-topbar .header-row .topbar-widget p {
		line-height: 15px;
	}

	.header-topbar .header-row .topbar-widget p a {
		display: block;
	}
}
/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: block;
}

.custom-logo-link img {
	display: block;
	transition: 0.3s var(--ease-out);
	transition-property: opacity, filter, transform;
}
.site-branding {
	position: relative;
	padding: 22px 0;
	transition: 0.3s var(--ease-out);
	transition-property: filter, background-color, border-radius;
}

.site-branding img {
	height: auto;
	max-width: 341px;
}
.nav_style_transparent .site-branding img,
.nav_style_green .site-branding img {
	filter: brightness(0) invert(1);
}

body.fixed-header .open_m .site-branding {
	filter: none;
}
.site-header {
	color: var(--wp--preset--color--black);
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99;
}

body.fixed-header .site-header {
	position: fixed;
	top: 0;
	left: 0;
	transform: translateY(0);
	border-bottom: 1px solid rgba(50, 208, 84, 0.5);
	transition: var(--dur-medium) var(--ease-out);
	transition-property: background-color, border-color, color, transform, top, margin-top;
}
body.nav_style_transparent .site-header,
body.nav_style_green .site-header {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.5);
}
body.fixed-header.scrolled .site-header {
	transform: translateY(-100%);
}

.divide_fixed_header {
	display: none;
}

body.fixed-header .divide_fixed_header {
	min-height: 124px;
	display: block;
}
body.nav_style_transparent .divide_fixed_header {
	display: none;
}

body.fixed-header.admin-bar .site-header,
body.absolute-header.admin-bar .site-header {
	margin-top: 32px;
}

body.absolute-header .site-main > .hentry,
body.absolute-header .site-main .entry-content,
body.absolute-header .site-main .entry-content > * {
	margin-top: 0;
}

.header-bg {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	opacity: 1;
	background-color: var(--wp--preset--color--white);
	top: 0;
	width: 100%;
	z-index: 1;
	transition: 0.3s var(--ease-out);
	transition-property: opacity, height, background-size;
}
body.nav_style_transparent .header-bg {
	display: none;
}
body.nav_style_green .header-bg {
	background-color: var(--wp--preset--color--darkgreen);
	background-image: url(../../images/bg_nav.jpg);
	background-size: cover;
}

.header-inner {
	margin: 0 auto;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 10;
}

body.fixed-header.scrolled:not(.nav_style_transparent) .header-bg,
body.fixed-header:not(.nav_style_transparent) .open_m .header-bg {
	background-size: cover !important;
	display: block;
	opacity: 1;
}

.header-right p {
	margin: 0;
}

.header-right a {
	text-decoration: none;
}

.header-right a:hover {
	color: var(--wp--preset--color--black);
}
@media screen and (max-width: 1100px) {
	body.fixed-header .divide_fixed_header {
		min-height: 96px;
	}
}
@media screen and (max-width: 1024px) {
	body.fixed-header.scrolled .site-branding {
		background-color: transparent;
		border-radius: 0;
	}

	body.fixed-header.scrolled .header-bg {
		height: 100% !important;
	}
}
@media screen and (max-width: 768px) {
	body.fixed-header .divide_fixed_header {
		min-height: 80px;
	}
}

.site-header a {
	color: inherit;
}
.header-left > div {
	display: inline-block;
	vertical-align: middle;
	margin-right: 30px;
}

.header-right > .secondary-menu-widget {
	margin-left: 20px;
}

.header-right > div,
.header-right > nav {
	display: inline-block;
	vertical-align: middle;
}

.header-center {
	display: flex;
	align-items: center;
	flex: 1;
	padding-right: 109px;
}
@media screen and (max-width: 1800px) {
	.header-center {
		padding-right: 209px;
	}
}
@media screen and (max-width: 1600px) {
	.header-center {
		padding-right: 150px;
	}
}

@media screen and (max-width: 1100px) {
	.header-center {
		padding-right: 0px;
	}
	.header-right > .secondary-menu-widget {
		margin-left: 0px;
		margin-right: 10px;
	}
	.header-inner {
		justify-content: end;
	}

	.header-inner .header-left {
		margin-right: auto;
	}
	.custom-logo-link {
		display: block;
	}
}

@media screen and (max-width: 1024px) {
	.header-left > div {
		display: block;
		margin-right: 0;
	}
}
@media screen and (max-width: 768px) {
	.site-branding img {
		width: 241px;
	}
}
/* ===================================
    Search header
=================================== */

.header_search {
	position: absolute;
	width: 100%;
	left: 0;
	background-color: var(--wp--preset--color--white);
	z-index: 999999;
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: 0.3s var(--ease-out);
	transition-property: opacity, height, background-color;
	top: 100%;
	border-bottom: 1px solid #e3e6eb;
}

.header_search .container {
	position: relative;
}

.header_search.open {
	opacity: 1;
	height: auto;
}

.header_search .gutenberg_search_form input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
	visibility: hidden;
}

.gutenberg_search_form .gutenberg_icon_in_search {
	color: #959595;
	font-size: 16px;
	display: inline-block;
	padding: 0 0 0 15px;
	float: left;
	line-height: 50px;
}

.header_search .gutenberg_search_form input,
.header_search .gutenberg_search_form input:focus {
	background-color: transparent;
	border: none;
	box-shadow: none;
	color: #404041;
	display: inline-block;
	font-size: 16px;
	line-height: 20px;
	height: 20px;
	margin: 15px 0;
	width: 90%;
	padding: 0 0 0 10px;
	font-family: inherit;
	outline: 0;
	outline-offset: 0;
	-webkit-appearance: none;
	border-radius: 0;
	float: left;
}

.gutenberg_search_form .gutenberg_search_close {
	color: #959595;
	font-size: 16px;
	position: absolute;
	line-height: 50px;
	height: 50px;
	top: 0;
	right: 15px;
}
/* ===================================
    Site Title
=================================== */
.site-title {
	margin: 0;
	font-size: 1.33em;
	font-weight: bold;
	line-height: 1.2;
	text-transform: uppercase;
}

.site-title a {
	text-decoration: none;
	color: inherit;
}

.site-description {
	margin: 0.4375em 0 0;
	font-size: 17px;
	font-weight: inherit;
	line-height: 1.4;
	overflow-wrap: break-word;
	color: #929292;
}
/* ===================================
    toggle Menu
=================================== */
.toggle-menu {
	display: block;
	cursor: pointer;
	position: relative;
	margin-top: 0px;
	width: 70px;
	z-index: 10;
}

#primary-menu-triger {
	display: none;
}

@media screen and (max-width: 1100px) {
	#primary-menu-triger {
		display: none;
		background-color: var(--wp--preset--color--primary);
		line-height: 50px;
		padding: 0 12px;
		box-sizing: border-box;
		width: 50px;
		border-radius: 50px;
		aspect-ratio: 1;
	}

	#site-navigation {
		display: none;
		max-height: 80vh;
		overflow: auto;
		position: absolute;
		left: 0;
		top: 94px;
		width: 100%;
	}
}
@media screen and (max-width: 980px) {
	#primary-menu-triger {
		border-left: 0;
	}
}

.site-header a.side_menu_icon {
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--darkgreen);
	color: var(--wp--preset--color--white);
	width: 122px;
	height: 100%;
	font-size: 35px;
	z-index: 10;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
}
body.nav_style_transparent .site-header a.side_menu_icon,
body.nav_style_green .site-header a.side_menu_icon {
	background-color: transparent;
}

a.collapse-menu-icon {
	position: fixed;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--darkgreen);
	color: var(--wp--preset--color--white);
	width: var(--toggle-w);
	height: var(--toggle-h);
	font-size: var(--toggle-icon);
	z-index: 15;
	transform: translateY(-100%);
	transition: 0.3s var(--ease-out);
	transition-property: transform, top;
}
body.admin-bar a.collapse-menu-icon {
	top: 32px;
}
body.fixed-header.scrolled a.collapse-menu-icon {
	transform: translateY(0);
}
@media screen and (max-width: 1100px) {
	.site-header a.side_menu_icon {
		width: 96px;
		font-size: 28px;
	}
}
@media screen and (max-width: 768px) {
	.site-header a.side_menu_icon {
		width: 80px;
		font-size: 24px;
	}
}

/* toggle size: the header's toggle cell, the floating toggle and the persistent menu button
   match at every width */
:root {
	--toggle-w: 122px;
	--toggle-h: 125px;
	--toggle-icon: 35px;
}
@media screen and (max-width: 1100px) {
	:root {
		--toggle-w: 96px;
		--toggle-h: 96px;
		--toggle-icon: 28px;
	}
}
@media screen and (max-width: 768px) {
	:root {
		--toggle-w: 80px;
		--toggle-h: 80px;
		--toggle-icon: 24px;
	}
}
/* ===================================
   Persistent menu button (inc/menus.php prints it, assets/js/navigation.js runs it)
   One fixed button, the same size as the header's toggle cell. Its icon is drawn from 9 dots,
   4 bars and a ring, which rearrange between three states:
     .is-grid  (top of page)  3 x 3 dots
     .is-star  (scrolled)     asterisk + colon (two of the dots become the colon)
     .is-x     (menu open)    two bars cross, the ring draws around them
   Hover: the grid ripples, the asterisk turns a quarter, the cross turns.
   Each state's transitions belong to the state being entered:
   - to the grid: bars and ring retract quickly (no bounce), then the dots bloom out from the
     centre (centre, then edges, then corners: --r) on a smooth ease-out;
   - to the cross: the dots gather in quickly, then the bars grow and the ring draws;
   - to the asterisk: the springy morph (the base transition).
   The header's own toggle cell, the floating toggle and the menu's close link stay in the
   markup, hidden.
=================================== */
.has-menu-toggle .site-header a.side_menu_icon {
	pointer-events: none;
}
.has-menu-toggle .site-header a.side_menu_icon > i,
.has-menu-toggle a.collapse-menu-icon,
.has-menu-toggle .full_screen_menu a.closed-menu-icon {
	visibility: hidden;
}
.has-menu-toggle a.collapse-menu-icon {
	display: none;
}

html.has-menu-toggle button.menu-toggle {
	all: unset;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 1px narrower than the header's toggle cell, with no border of its own: the hairline on its
     left is the header cell's, so it belongs to the navigation bar and leaves with it on scroll */
	width: calc(var(--toggle-w, 122px) - 1px);
	height: var(--toggle-h, 125px);
	background-color: var(--wp--preset--color--darkgreen);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color var(--dur-short) var(--ease-out);
}
/* printed in the page (inc/menus.php) but shown only once its script has run */
button.menu-toggle[hidden] {
	display: none !important;
}
html.has-menu-toggle button.menu-toggle::before,
html.has-menu-toggle button.menu-toggle::after {
	content: none;
}
html.has-menu-toggle body.admin-bar button.menu-toggle {
	top: 32px;
}
@media screen and (max-width: 782px) {
	html.has-menu-toggle body.admin-bar button.menu-toggle {
		top: 46px;
	}
}
html.has-menu-toggle body:is(.nav_style_transparent, .nav_style_green):not(.scrolled) button.menu-toggle.is-grid {
	background-color: transparent;
}
html.has-menu-toggle button.menu-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: -6px;
}
html.has-menu-toggle button.menu-toggle svg {
	width: calc(var(--toggle-icon, 35px) * 1.5);
	height: auto;
	overflow: visible;
	fill: currentColor;
}

/* parts: positioned by --x/--y, turned by --a (+ --spin on hover), sized by --k */
.menu-toggle .mt-dot,
.menu-toggle .mt-ln {
	--spin: 0deg;
	transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--a, 0deg) + var(--spin)))
		scale(var(--k, 1));
	transition: transform 650ms var(--ease-overshoot);
}
.menu-toggle .mt-dot {
	transition-delay: calc(var(--j, 0) * 25ms);
}
.menu-toggle .mt-ring {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	/* dash slightly longer than the circle so it closes with no seam; hidden = offset past the end,
     plus opacity 0 (a zero-length dash still left a speck at the top) */
	stroke-dasharray: 1.06 1.06;
	stroke-dashoffset: 1.06;
	opacity: 0;
	transform: rotate(-90deg);
	transform-origin: 20px 20px;
	transition:
		stroke-dashoffset 500ms var(--ease-in),
		opacity 0s linear 500ms;
}

/* grid */
.menu-toggle .mt-dot-0 {
	--x: 10;
	--y: 10;
	--j: 0;
}
.menu-toggle .mt-dot-1 {
	--x: 20;
	--y: 10;
	--j: 1;
}
.menu-toggle .mt-dot-2 {
	--x: 30;
	--y: 10;
	--j: 2;
}
.menu-toggle .mt-dot-3 {
	--x: 10;
	--y: 20;
	--j: 1;
}
.menu-toggle .mt-dot-4 {
	--x: 20;
	--y: 20;
	--j: 2;
	--r: 0;
}
.menu-toggle .mt-dot-5 {
	--x: 30;
	--y: 20;
	--j: 3;
}
.menu-toggle .mt-dot-6 {
	--x: 10;
	--y: 30;
	--j: 2;
}
.menu-toggle .mt-dot-7 {
	--x: 20;
	--y: 30;
	--j: 3;
}
.menu-toggle .mt-dot-8 {
	--x: 30;
	--y: 30;
	--j: 4;
}
.menu-toggle .mt-ln {
	--x: 20;
	--y: 20;
	--k: 0;
}
.menu-toggle .mt-ln-0 {
	--a: 0deg;
}
.menu-toggle .mt-ln-1 {
	--a: 45deg;
}
.menu-toggle .mt-ln-2 {
	--a: 90deg;
}
.menu-toggle .mt-ln-3 {
	--a: 135deg;
}
/* ripple order for the bloom: centre 0, edges 1, corners 2 */
.menu-toggle :is(.mt-dot-1, .mt-dot-3, .mt-dot-5, .mt-dot-7) {
	--r: 1;
}
.menu-toggle :is(.mt-dot-0, .mt-dot-2, .mt-dot-6, .mt-dot-8) {
	--r: 2;
}
.menu-toggle.is-grid .mt-dot {
	transition: transform 560ms var(--ease-out) calc(170ms + var(--r, 0) * 55ms);
}
.menu-toggle.is-grid .mt-ln {
	transition: transform 260ms var(--ease-in);
}
.menu-toggle.is-grid .mt-ring {
	transition:
		stroke-dashoffset 280ms var(--ease-in),
		opacity 0s linear 280ms;
}

/* asterisk + colon */
.menu-toggle.is-star .mt-dot {
	--x: 15;
	--y: 20;
	--k: 0;
}
.menu-toggle.is-star .mt-dot-2 {
	--x: 34;
	--y: 15;
	--k: 0.9;
}
.menu-toggle.is-star .mt-dot-8 {
	--x: 34;
	--y: 25;
	--k: 0.9;
}
.menu-toggle.is-star .mt-ln {
	--x: 15;
	--y: 20;
	--k: 1;
}

/* close */
.menu-toggle.is-x .mt-dot {
	--x: 20;
	--y: 20;
	--k: 0;
	transition: transform 280ms var(--ease-in) calc((2 - var(--r, 0)) * 25ms);
}
.menu-toggle.is-x .mt-ln {
	--x: 20;
	--y: 20;
	--k: 0.95;
	transition: transform 560ms cubic-bezier(0.22, 1.15, 0.36, 1) 200ms;
}
.menu-toggle.is-x .mt-ln-0 {
	--a: 45deg;
	--k: 0;
}
.menu-toggle.is-x .mt-ln-2 {
	--a: 135deg;
	--k: 0;
}
.menu-toggle.is-x .mt-ring {
	stroke-dashoffset: 0;
	opacity: 1;
	transition:
		stroke-dashoffset 700ms var(--ease-out) 260ms,
		opacity 0s linear 260ms;
}

/* hover */
/* grid hover: a ripple across the dots, each shrinking and growing back in place (the scale is on
   the square itself, around its own centre; scaling the group moved the dots toward the corner) */
.menu-toggle .mt-dot rect {
	transform-box: fill-box;
	transform-origin: center;
}
.menu-toggle.is-grid:is(:hover, :focus-visible) .mt-dot rect {
	animation: mt-ripple 620ms var(--ease-in-out) both;
	animation-delay: calc(var(--j, 0) * 70ms);
}
@keyframes mt-ripple {
	0%,
	100% {
		transform: scale(1);
	}
	45% {
		transform: scale(0.45);
	}
}
/* the asterisk and the cross turn a quarter; hover turns respond at once */
.menu-toggle:is(.is-x, .is-star):is(:hover, :focus-visible) .mt-ln {
	--spin: 90deg;
	transition: transform 520ms var(--ease-overshoot);
}
.menu-toggle.is-star:is(:hover, :focus-visible) .mt-dot-2 {
	--y: 13;
}
.menu-toggle.is-star:is(:hover, :focus-visible) .mt-dot-8 {
	--y: 27;
}
.menu-toggle:active svg {
	scale: 0.92;
	transition: scale 120ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
	.menu-toggle .mt-dot,
	.menu-toggle .mt-ln,
	.menu-toggle .mt-ring {
		transition: none;
		animation: none !important;
	}
}