/*--------------------------------------------------------------
# Mobile header (< 1200px)
# Hidden by default; activated below the breakpoint.
--------------------------------------------------------------*/
.hvv-mobile-bar { display: none; }
.hvv-mobile-menu { display: none; }

/* ---- Desktop compact range: 1200px – 1430px ----
   The full desktop header doesn't fit ~1200–1430px, so we
   compress paddings, gaps, logo and nav font here. */
@media screen and (min-width: 1200px) and (max-width: 1430px) {
	.header-container {
		gap: 24px;
		padding: 10px 16px;
	}
	.site-branding a {
		width: 110px;
		height: auto;
		aspect-ratio: 194 / 211;
	}
	.site-branding a img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}
	.main-navigation ul.menu { gap: 16px; }
	.main-navigation a {
		font-size: 15px;
		gap: 4px;
	}
	.main-navigation .dropdown-icon svg {
		width: 18px;
		height: 18px;
	}
	.header-right-actions { gap: 12px; }
	.header-actions-group { gap: 20px; }
	.header-search .search-submit svg { width: 22px; height: 22px; }
	.header-donate-btn .donate-btn {
		font-size: 14px;
		padding: 8px 16px;
	}
	.header-lang-switch .lang-current { font-size: 14px; padding: 6px 12px; }
}

@media screen and (max-width: 1199px) {
	/* ---- Hide desktop layout ---- */
	.site-header .header-container { display: none; }

	/* ---- Mobile top bar ---- */
	.hvv-mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 16px 20px;
		background: #FFFFFF;
		border-bottom: 1px solid #f0f0f0;
		box-sizing: border-box;
	}

	.hvv-mobile-bar__logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}
	.hvv-mobile-bar__logo img {
		display: block;
		width: 70px;
		height: 49px;
		object-fit: cover;
		flex-shrink: 0;
	}

	.hvv-mobile-bar__actions {
		display: inline-flex;
		align-items: center;
		gap: 14px;
	}

	.hvv-mobile-bar__donate,
	.hvv-mobile-bar__donate:link,
	.hvv-mobile-bar__donate:visited {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px 14px;
		border-radius: 26px;
		background: #FC7405;
		color: #FFFFFF;
		font-family: Montserrat, sans-serif;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		letter-spacing: 0.4px;
		line-height: 1;
		transition: background 0.25s ease;
	}
	.hvv-mobile-bar__donate:hover {
		background: #1A8DA1;
		color: #FFFFFF;
	}

	.hvv-mobile-bar__lang {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px 12px;
		border-radius: 26px;
		background: #1A8DA1;
		color: #FFFFFF;
		font-family: Montserrat, sans-serif;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		border: 0;
		cursor: pointer;
		line-height: 1;
		transition: background 0.25s ease;
	}
	.hvv-mobile-bar__lang:hover { background: #15707F; }

	/* ---- Burger ---- */
	.hvv-mobile-bar__burger {
		position: relative;
		width: 36px;
		height: 28px;
		border: 0;
		background: transparent;
		padding: 0;
		cursor: pointer;
		flex-shrink: 0;
	}
	.hvv-mobile-bar__burger span {
		position: absolute;
		left: 2px;
		right: 2px;
		height: 4px;
		background: #FC7405;
		border-radius: 26px;
		transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
	}
	.hvv-mobile-bar__burger span:nth-child(1) { top: 3px; }
	.hvv-mobile-bar__burger span:nth-child(2) { top: 12px; }
	.hvv-mobile-bar__burger span:nth-child(3) { top: 21px; }

	.hvv-mobile-bar__burger.is-open span:nth-child(1) {
		top: 12px;
		transform: rotate(45deg);
	}
	.hvv-mobile-bar__burger.is-open span:nth-child(2) { opacity: 0; }
	.hvv-mobile-bar__burger.is-open span:nth-child(3) {
		top: 12px;
		transform: rotate(-45deg);
	}

	/* ---- Slide-out menu ---- */
	.hvv-mobile-menu {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: rgba(246, 250, 253, 0.96);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.hvv-mobile-menu[hidden] { display: none; }

	.hvv-mobile-menu__inner {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 40px;
	}

	.hvv-mobile-bar--open {
		background: transparent;
		border-bottom: 0;
	}

	.hvv-mobile-menu__nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 36px 20px 24px;
	}

	/* ---- List items ---- */
	.hvv-mobile-menu__list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hvv-mobile-menu__list > li {
		width: 100%;
		max-width: 300px;
		list-style: none;
		margin: 0;
	}

	.hvv-mobile-menu__list > li > a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		background: #FFFFFF;
		border-radius: 26px;
		padding: 12px 20px;
		box-sizing: border-box;
		color: #000;
		font-family: Montserrat, sans-serif;
		font-size: 20px;
		font-weight: 400;
		line-height: normal;
		text-transform: uppercase;
		text-decoration: none;
		box-shadow: 0 4px 2px rgba(0, 0, 0, 0.18);
		transition: color 0.2s ease, background 0.2s ease;
	}

	.hvv-mobile-menu__list > li > a:hover { color: #1A8DA1; }

	.hvv-mobile-menu__list > li.current-menu-item > a,
	.hvv-mobile-menu__list > li.current_page_item > a,
	.hvv-mobile-menu__list > li.current-menu-ancestor > a {
		color: #BD0707;
		font-weight: 700;
	}

	/* Items with sub-menu: show arrow */
	/* Hide the inline .dropdown-icon injected by the walker (we draw our own arrow below) */
	.hvv-mobile-menu__list .dropdown-icon { display: none !important; }

	.hvv-mobile-menu__list > li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 18px;
		height: 18px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'><path d='M8.11337 8.33419L16.8842 8.33419C17.2305 8.33369 17.5698 8.43125 17.8629 8.6156C18.156 8.79995 18.3909 9.06354 18.5405 9.37585C18.7155 9.74642 18.7829 10.1587 18.735 10.5657C18.6871 10.9727 18.5259 11.3581 18.2696 11.6779L13.8842 16.9904C13.7121 17.189 13.4993 17.3483 13.2603 17.4574C13.0213 17.5666 12.7616 17.623 12.4988 17.623C12.236 17.623 11.9763 17.5666 11.7373 17.4574C11.4982 17.3483 11.2855 17.189 11.1134 16.9904L6.72795 11.6779C6.47169 11.3581 6.31044 10.9727 6.26255 10.5657C6.21467 10.1587 6.28209 9.74642 6.45712 9.37585C6.60664 9.06354 6.84156 8.79995 7.13467 8.6156C7.42778 8.43126 7.76711 8.33369 8.11337 8.33419Z' fill='%23BD0707'/></svg>");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		transition: transform 0.25s ease;
	}

	.hvv-mobile-menu__list > li.menu-item-has-children.is-open > a::after {
		transform: rotate(180deg);
	}

	/* Sub-menu (collapses inside the pill stack) */
	.hvv-mobile-menu__list .sub-menu {
		display: none;
		list-style: none;
		padding: 8px 0 0;
		margin: 0;
		width: 100%;
	}
	.hvv-mobile-menu__list .sub-menu li {
		list-style: none;
		margin: 6px 0 0;
	}
	.hvv-mobile-menu__list .sub-menu li:first-child { margin-top: 0; }
	.hvv-mobile-menu__list .sub-menu a {
		display: block;
		text-align: center;
		padding: 10px 14px;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 18px;
		color: #393737;
		font-family: Montserrat, sans-serif;
		font-size: 15px;
		font-weight: 400;
		text-transform: uppercase;
		text-decoration: none;
		letter-spacing: 0.5px;
		transition: color 0.2s ease, background 0.2s ease;
	}
	.hvv-mobile-menu__list .sub-menu a:hover {
		color: #BD0707;
		background: #FFFFFF;
	}

	.hvv-mobile-menu__list > li.menu-item-has-children.is-open .sub-menu {
		display: block;
	}

	/* ---- Search pill ---- */
	.hvv-mobile-menu__search-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 100%;
		max-width: 300px;
		background: #FFFFFF;
		border: 0;
		border-radius: 26px;
		padding: 12px 20px;
		box-sizing: border-box;
		color: #000;
		font-family: Montserrat, sans-serif;
		font-size: 20px;
		font-weight: 400;
		line-height: normal;
		text-transform: uppercase;
		cursor: pointer;
		box-shadow: 0 4px 2px rgba(0, 0, 0, 0.18);
		order: -1; /* show after "Про нас" — actually we want it 2nd in list, JS-controlled */
		transition: color 0.2s ease;
	}
	.hvv-mobile-menu__search-item:hover { color: #1A8DA1; }
	.hvv-mobile-menu__search-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #1A8DA1;
	}

	.hvv-mobile-menu__search-form {
		display: none;
		width: 100%;
		max-width: 300px;
		background: #FFFFFF;
		border-radius: 26px;
		padding: 8px 8px 8px 18px;
		box-sizing: border-box;
		align-items: center;
		gap: 8px;
		box-shadow: 0 4px 2px rgba(0, 0, 0, 0.18);
	}
	.hvv-mobile-menu__search-form.is-open { display: flex; }
	.hvv-mobile-menu__search-input {
		flex: 1;
		min-width: 0;
		border: 0;
		background: transparent;
		font-family: Montserrat, sans-serif;
		font-size: 16px;
		color: #000;
		outline: none;
	}
	.hvv-mobile-menu__search-submit {
		border: 0;
		background: #1A8DA1;
		color: #FFFFFF;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		flex-shrink: 0;
		transition: background 0.25s ease;
	}
	.hvv-mobile-menu__search-submit:hover { background: #15707F; }
	.hvv-mobile-menu__search-submit svg {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		fill: currentColor;
		color: #FFFFFF;
	}
	.hvv-mobile-menu__search-submit svg path { fill: currentColor; }

	/* When body has mobile menu open — lock background scroll */
	body.is-hvv-mobile-menu-open { overflow: hidden; }
}

/* Very small phones — tighten paddings */
@media screen and (max-width: 380px) {
	.hvv-mobile-bar { padding: 12px 14px; }
	.hvv-mobile-bar__actions { gap: 10px; }
	.hvv-mobile-bar__donate,
	.hvv-mobile-bar__lang { font-size: 12px; padding: 6px 10px; }
	.hvv-mobile-menu__list > li > a,
	.hvv-mobile-menu__search-item { font-size: 18px; }
}

/* ----- Language switcher dropdown in mobile bar ----- */
@media screen and (max-width: 1199px) {
	.hvv-mobile-bar__lang-wrap {
		position: relative;
	}
	.hvv-mobile-bar__lang-dropdown {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		min-width: 72px;
		margin: 0;
		padding: 8px 6px;
		list-style: none;
		background: #FFFFFF;
		border-radius: 14px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
		z-index: 10000;
	}
	.hvv-mobile-bar__lang-dropdown[hidden] { display: none !important; }
	.hvv-mobile-bar__lang-dropdown li {
		list-style: none;
		margin: 0;
	}
	.hvv-mobile-bar__lang-dropdown a,
	.hvv-mobile-bar__lang-dropdown a:link,
	.hvv-mobile-bar__lang-dropdown a:visited {
		display: block;
		padding: 6px 12px;
		border-radius: 8px;
		font-family: Montserrat, sans-serif;
		font-size: 13px;
		font-weight: 700;
		color: #1A8DA1;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background 0.2s ease;
	}
	.hvv-mobile-bar__lang-dropdown a:hover {
		background: #D8EEEF;
	}
}