/* =========================================================================
   Unified site header — one header for both flavors (mondo + mk).

   Loaded after the per-flavor stacks (css/app*.css + style*.css); the header
   rules that used to live in those four files were removed and replaced by
   this file. Behavior merged from both origins:
   - sticky bar (mk model) on both sites,
   - search panel opens ABOVE the bar while the bar slides down, overlaying
     the banner/page instead of pushing content down (mondo model),
   - flexbox menu row: any number of top-level items spaces out evenly,
   - donate button = menu item with class "btn-donate" (color per flavor),
   - mobile menu = mk model (fixed full-screen, page behind stays put).
   ========================================================================= */

/* --- header bar ---------------------------------------------------------- */
.site-header {
	box-sizing: border-box;
	position: sticky;
	top: 0;
	width: 100%;
	/* above the hero slider (z:1) and mondo's positioned .site-content */
	z-index: 1000;
}
.site-header .row {
	position: relative;
}
.site-header .upper-menu {
	box-sizing: border-box;
	position: relative;
	background: #FFF;
	padding: 0 15px;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
	min-height: 77px;
	/* slides down to make room for the search panel above it */
	transition: transform 0.2s;
}
.site-header a {
	padding-bottom: 0;
}
.site-header a:hover {
	border-bottom: 0;
}
.site-header .logo {
	/* flex-center: several child-site logos are not square (height:auto img
	   is shorter than the 60px box) and sat at the top of the box without this */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: none;
}
.site-header .logo svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* max-sizing, no distortion: child-site logo PNGs come in all ratios — the
   talkpeacefully dove is taller than wide (width:100% made it 88px, spilling
   out of the 77px bar), the mk one is 90x98. Fit the box on both axes. */
.site-header .logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* --- search panel: opens ABOVE the bar; the bar slides down over the page
       (the header keeps its 77px flow height, so content never moves) ------ */
.site-header .search {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 77px;
	background: #EEEEEE;
	transform: translateY(-100%);
	visibility: hidden;
	/* keep the panel visible while it slides shut, hide it after */
	transition: transform 0.2s, visibility 0s 0.2s;
}
.site-header.search-active .search {
	transform: translateY(0);
	/* visible instantly (no transition) so the search box can take focus
	   synchronously in the toggle's click handler */
	visibility: visible;
	transition: transform 0.2s;
}
.site-header.search-active .upper-menu {
	transform: translateY(77px);
}
.search .row {
	vertical-align: middle;
	text-align: center;
	padding-top: 10px;
}
.search .search-box {
	font-family: 'Bebas Neue Regular';
	font-size: 2.5em;
	line-height: 1.1em;
	border: none;
	background: none;
	height: 70px;
	padding: 5px 0;
	color: #000;
	box-shadow: none;
	text-align: center;
	text-transform: uppercase;
}
.search ::-webkit-input-placeholder { color: #454545; }
.search ::-moz-placeholder { color: #454545; }
.search :-ms-input-placeholder { color: #454545; }
.search ::placeholder { color: #454545; }

/* --- header icons --------------------------------------------------------- */
.site-header .fa {
	font-size: 1.5em;
}
#search-toggle,
#search-close,
#menu-toggle,
#menu-toggle-times {
	cursor: pointer;
}
#search-close {
	display: none;
	color: #000;
}
.search-active .upper-menu #search-close { display: inline-block; }
.search-active .upper-menu #search-toggle { display: none; }
#header_calendar i {
	font-size: 1.4em;
}
#header_cart span {
	font-size: 18px;
	color: #555;
	font-weight: 700;
}
/* social icons: a tight group of equal-width slots — glyph widths differ
   (facebook is narrow, instagram wide), so each anchor is a fixed 30px slot
   with the icon centered in it */
#header_social {
	display: inline-flex;
	align-items: center;
}
#header_social a {
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
}
#header_icons #header_social i {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}

/* language switch (desktop dropdown) */
#lang_switch {
	position: relative;
	background: #fff;
	margin: 0;
}
#lang_switch ul {
	margin: 0;
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	background: #fff;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
#lang_switch.down ul {
	display: block;
}
#lang_switch ul li {
	display: block;
	padding: 0;
}
#lang_switch ul li a,
#cur_lang {
	display: block;
	padding: 3px 10px;
	font-family: "Bebas Neue Regular";
	font-size: 16px;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}
#cur_lang:hover {
	background: #eee;
}
#cur_lang::after {
	font-family: FontAwesome;
	content: " \f0d7";
}

/* mobile language row (inside the mobile menu) */
#mob_lang_ul {
	display: none;
	border-bottom: 1px solid #ccc;
}
#mob_lang_ul > li {
	float: left;
	width: 50px;
	text-transform: uppercase;
}
#mob_lang_ul > li a {
	padding-left: 7px !important;
	padding-right: 7px !important;
}
#mob_lang_ul > li a.active {
	background-color: #fff;
}
@media (min-width: 540px) {
	#mob_lang_ul > li:nth-of-type(3) { width: 85px; }
}
@media (max-width: 539px) {
	ul#mob_lang_ul a.active { display: none; }
}

/* --- donate button (menu item with class btn-donate) ----------------------- */
.site-header ul li.btn-donate > a {
	box-sizing: border-box;
	display: inline-block;
	padding: 0.6em 1em;
	background-color: #f7c7d6; /* mk pink */
}
body.flavor-mondo .site-header ul li.btn-donate > a {
	background-color: #F2AF1C; /* mondo yellow */
}
.site-header ul li.btn-donate:hover {
	background-color: transparent;
}
.site-header ul li.btn-donate > a:hover {
	background-color: rgb(238, 238, 238);
}

/* --- menu item state/color helpers ---------------------------------------- */
.main.menu > li.red > a {
	font-weight: 600;
}
ul.menu.main > li.current-menu-item.not_active > a {
	background: initial;
	font-weight: 400;
}
#kliimamenuu ul > li.current-menu-item > a {
	font-weight: 400;
}
.site-header nav ul li {
	text-align: center;
}

/* =========================================================================
   Desktop (≥64em): flex bar — logo | evenly spaced menu | icons
   ========================================================================= */
@media screen and (min-width: 64em) {
	.site-header .upper-menu > .row {
		display: flex;
		align-items: stretch;
		min-height: 77px;
	}
	.site-header .logo-link {
		flex: 0 0 auto;
		align-self: center;
	}
	.site-header nav {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
	}
	#mob_lang_ul {
		display: none;
	}
	/* the menu itself: items share the leftover space evenly no matter how
	   many there are */
	.site-header nav > ul.menu {
		flex: 1 1 auto;
		display: flex;
		align-items: stretch;
		justify-content: space-evenly;
		flex-wrap: wrap;
		margin: 0;
		width: auto;
	}
	.site-header nav > ul.menu > li {
		display: flex;
		align-items: stretch;
		position: relative;
		padding: 0;
		transition: background 0.2s;
	}
	/* the link fills the whole item, so the entire hovered area is clickable */
	.site-header nav > ul.menu > li:not(.btn-donate) > a {
		display: flex;
		align-items: center;
		padding: 0 15px;
	}
	.site-header nav > ul.menu > li.btn-donate {
		align-items: center;
	}
	.site-header nav > ul.menu > li:hover,
	.site-header ul .active {
		background: #EEEEEE;
	}
	.site-header nav > ul.menu > li.btn-donate:hover {
		background: transparent;
	}
	.site-header nav ul > li.current-page-ancestor > a,
	.site-header .current-menu-parent > a,
	.site-header .current-menu-item > a,
	.site-header .current_page_item > a {
		font-weight: 900;
	}

	/* dropdowns */
	.site-header ul li ul {
		width: 300px;
		position: absolute;
		top: 100%;
		left: 50%;
		margin: 0 0 0 -150px;
		display: none;
		padding: 15px 0 10px 0;
		background: #fff;
		box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
	}
	.site-header ul li:hover ul {
		display: block;
	}
	.site-header ul li ul h2 {
		margin: 26px 0 8px 0;
	}
	.site-header ul li ul li {
		padding: 0;
		padding-bottom: 0.5em;
		width: 100%;
	}
	.site-header ul li ul li:hover {
		background: #FFF;
	}
	.site-header ul li ul li a {
		padding-bottom: 1px;
		display: inline-block;
	}
	.site-header ul li ul li a:hover {
		border-bottom: 1px solid;
		padding-bottom: 0px;
	}
	.site-header ul li ul li.green:first-child, .site-header ul li ul li.blue:first-child,
	.site-header ul li ul li.red:first-child, .site-header ul li ul li.yellow:first-child {
		margin-top: -15px;
	}
	.site-header ul li ul li.green:last-child, .site-header ul li ul li.blue:last-child,
	.site-header ul li ul li.red:last-child, .site-header ul li ul li.yellow:last-child {
		margin-bottom: -10px;
	}
	.site-header ul li ul li.green a:hover, .site-header ul li ul li.blue a:hover,
	.site-header ul li ul li.yellow a:hover, .site-header ul li ul li.red a:hover {
		border: 0;
		padding-bottom: 1px;
	}

	/* icons block as flex row */
	#header_icons {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		margin-left: 15px;
	}
	#header_icons > * {
		margin-left: 12px;
	}
	#header_icons > :first-child {
		margin-left: 0;
	}
	#menu-toggle,
	#menu-toggle-times {
		display: none;
	}
}

/* =========================================================================
   Mobile (<64em): compact bar + full-screen menu (mk model)
   ========================================================================= */
@media screen and (max-width: 63.9375em) {
	.site-header .upper-menu {
		padding: 0;
	}
	.site-header .logo {
		position: absolute;
		top: 8px;
		left: 15px;
	}
	.site-header ul .menu {
		width: 100vw;
		margin: 0;
	}
	/* menu items hidden until the menu is opened */
	.site-header .upper-menu ul li {
		display: none;
		width: 100%;
		background: #FFF;
	}
	/* donate button stays visible in the bar (if the menu has one);
	   absolute against the .row, whose in-flow height is 0 on mobile — so
	   position from the top of the 77px bar, not with top:50%. The button
	   centers in the free strip between the logo (ends ~90px) and the icons
	   block (widest case, mk: search+calendar+cart+socials+burger ≈ 200px). */
	.site-header:not(.opened) nav ul li.btn-donate {
		display: block;
		position: absolute;
		top: 19px;
		left: 90px;
		right: 200px;
		text-align: center;
		white-space: nowrap;
		width: auto;
		background: transparent;
	}
	/* very narrow screens: logo + donate + full icon row don't fit, so drop
	   the social icons from the bar — only when a donate button is present */
	@media (max-width: 379px) {
		.site-header:not(.opened):has(li.btn-donate) #header_social {
			display: none;
		}
		.site-header:not(.opened) nav ul li.btn-donate {
			right: 130px;
		}
	}
	.site-header:not(.opened) nav ul li.btn-donate > a {
		padding: 0.7rem !important;
	}

	/* icons pinned right */
	#header_icons {
		display: block;
		position: absolute;
		right: 10px;
		top: 27px;
	}
	#header_icons i {
		position: static;
		float: left;
		margin-right: 15px;
	}
	#header_icons #header_cart i {
		margin-right: 3px;
	}
	#search-toggle, #header_calendar, #header_calendar i,
	#header_cart, #header_cart i, #header_cart span {
		display: inline-block;
		vertical-align: middle;
	}
	#header_calendar, #header_cart {
		float: left;
	}
	#lang_switch {
		display: none;
	}
	#header_social {
		float: left;
		/* slight gap between the cart and the social group */
		margin-left: 10px;
	}
	#menu-toggle, #menu-toggle-times {
		margin: 0 0 0 20px;
		width: 20px;
		float: left;
	}
	#menu-toggle-times {
		display: none;
	}
	.opened #menu-toggle {
		display: none;
	}
	.opened #menu-toggle-times {
		display: block;
	}
	.search-active #search-close {
		display: inline-block;
	}

	/* --- opened menu: fixed full-screen, page behind does not scroll ------ */
	.site-header.opened {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		max-height: 100%;
		overflow-y: scroll;
		overscroll-behavior: contain;
		z-index: 10000;
	}
	/* hard scroll lock for the page behind the opened menu */
	html:has(.site-header.opened) {
		overflow: hidden;
	}
	.opened .logo {
		display: none;
	}
	.opened .upper-menu {
		background: #EEE;
	}
	.opened .upper-menu ul {
		padding: 20px 0;
		background: #eee;
	}
	.opened .upper-menu ul li {
		display: block;
		background: #EEE;
		padding: 0;
	}
	.opened .upper-menu ul li a {
		color: #000;
		font-size: 1em;
	}
	.opened .upper-menu nav > ul > li > a {
		font-weight: 900;
	}
	.site-header nav ul li a {
		padding: 15px !important;
		display: block;
		margin: 0;
	}
	.site-header nav ul li ul a {
		padding: 0.4rem 1rem !important;
	}
	.site-header a:hover {
		background: #fff;
		border: 0 !important;
	}
	ul.menu.main li.current-menu-item > a { background: #fff; }
	ul.menu.main li.current_page_item > a { background: #fff; }
	ul.menu.main li.current_page_item > a > h2 { background: #fff; }
	ul.menu.main li.current_page_ancestor > a { font-weight: 900; }
	ul.menu.main li.current_page_parent > a { font-weight: 900; }
	ul.menu.main > li > a { text-transform: uppercase; font-weight: 900; }

	/* submenus rendered inline in the list */
	.site-header ul li ul {
		display: block !important;
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		box-shadow: none;
		margin: 0;
		padding: 0 !important;
	}
	.site-header ul li ul h2,
	.site-header ul li ul a {
		font-size: 1em;
		font-family: "Raleway Mondo Regular", Helvetica, Roboto, Arial, sans-serif;
		text-transform: none;
		margin: 0;
		line-height: 25px;
	}
	.site-header ul li ul li a {
		display: block;
	}
	.site-header ul li ul li.green:first-child { margin-top: 0px; }
	.site-header ul li ul li.red:last-child { margin-bottom: 0px; }
	.empty {
		display: none !important;
	}

	/* donate inside the opened menu: plain centered item */
	.site-header.opened ul li.btn-donate {
		margin-bottom: 10px;
	}
	.site-header.opened ul li.btn-donate > a {
		background-color: unset;
	}
	body.flavor-mk .site-header.opened ul li.btn-donate > a {
		color: #EB1C24 !important;
	}

	/* fixed top rows of the opened menu: [lang bar] + icons, and the search
	   panel above them when active */
	.opened #mob_lang_ul {
		position: fixed;
		/* opaque: menu items scrolling under the fixed rows must not show through */
		background: #EEE;
		top: 0;
		left: 0;
		height: 77px;
		width: 100%;
		display: block;
		margin: 0;
		padding-left: 5px;
		padding-top: 12px;
		z-index: 1;
		border-top: 1px solid rgb(204, 204, 204);
	}
	.opened.search-active #mob_lang_ul {
		top: 77px;
	}
	.opened #header_icons {
		position: fixed;
		z-index: 2;
	}
	.opened.search-active #header_icons {
		top: 104px;
	}
	.opened ul.menu.main {
		margin-top: 70px;
	}
	.opened.search-active ul.menu.main {
		margin-top: 147px;
	}
	.opened .search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		transform: none;
		transition: none;
		z-index: 1;
	}
	.opened:not(.search-active) .search {
		display: none;
	}
	/* in the opened menu the search overlays the top rows instead of
	   pushing the full-screen menu container down */
	.site-header.opened.search-active .upper-menu {
		transform: none;
	}
}