/* Header search – pill on desktop, icon + slide-down bar on mobile */

.header-right .vn-search {
	--vs-red: #C80000;
	position: relative;
	display: flex;
	align-items: center;
	width: 230px;
	height: 40px;
	margin-left: auto;
	padding: 0 4px 0 14px;
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: width .35s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s;
}
.header-right .vn-search:hover { border-color: rgba(200, 0, 0, .35); }
.header-right .vn-search:focus-within {
	width: 300px;
	background: #fff;
	border-color: var(--vs-red);
	box-shadow: 0 0 0 4px rgba(200, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .12);
}

.vn-search .vn-search-ico {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #8a8a8a;
	transition: color .2s;
}
.vn-search:focus-within .vn-search-ico { color: var(--vs-red, #C80000); }

.vn-search .vn-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0 6px 0 8px;
	padding: 0;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	letter-spacing: 0;
	color: #141414;
	background: transparent;
	border: 0 !important;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.vn-search .vn-search-input::placeholder { color: #8a8a8a; opacity: 1; font-size: 14px; letter-spacing: 0; font-weight: 400; }
.vn-search .vn-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.vn-search .vn-search-kbd {
	flex: 0 0 auto;
	margin-right: 6px;
	padding: 1px 7px;
	font: 600 11px/16px 'Noto Sans', sans-serif;
	color: #8a8a8a;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #f7f7f7;
}
.vn-search:focus-within .vn-search-kbd,
.vn-search.has-value .vn-search-kbd { display: none; }

.vn-search .vn-search-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: #fff;
	background: linear-gradient(135deg, #e01b1b 0%, #a80000 100%);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(200, 0, 0, .35);
	transition: transform .15s, box-shadow .2s;
}
.vn-search .vn-search-btn:hover { transform: scale(1.06); box-shadow: 0 4px 10px rgba(200, 0, 0, .45); }
.vn-search .vn-search-btn:active { transform: scale(.96); }
.vn-search .vn-search-btn svg { width: 16px; height: 16px; }

/* Compact when header is sticky */
.scroll-sticky .header-right .vn-search { height: 34px; }
.scroll-sticky .vn-search .vn-search-btn { width: 28px; height: 28px; }

/* Mobile trigger icon */
.header-right .vn-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #C80000;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	cursor: pointer;
}
.header-right .vn-search-toggle svg { width: 18px; height: 18px; }

/* Mobile slide-down bar */
.header-search.vn-search-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000000;
	padding: 12px 14px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	animation: vnSearchDown .25s ease-out;
}
.header-search.vn-search-panel::before { display: none; }
@keyframes vnSearchDown {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
.vn-search-panel .vn-search-panel-row { display: flex; align-items: center; gap: 10px; }
.vn-search-panel .vn-search {
	flex: 1;
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 4px 0 14px;
	background: #f4f4f4;
	border: 1px solid transparent;
	border-radius: 999px;
}
.vn-search-panel .vn-search:focus-within { background: #fff; border-color: #C80000; box-shadow: 0 0 0 3px rgba(200, 0, 0, .12); }
.vn-search-panel .vn-search .vn-search-input { font-size: 16px; } /* 16px stops iOS zoom */
.vn-search-panel .vn-search .vn-search-btn { width: 36px; height: 36px; }
.vn-search-panel .vn-search-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #444;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.vn-search-panel .vn-search-close:hover { background: #f1f1f1; }
.vn-search-panel .vn-search-close svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
	.header-right .search-box { display: none !important; }
	.header-right .vn-search-toggle { display: inline-flex; }
}
@media (min-width: 768px) {
	.header-search.vn-search-panel { display: none !important; }
}

/* ---------- WordPress admin bar (logged-in users only) ----------
   The header is position:fixed at top:0, so it slid under #wpadminbar.
   Shift the header with a transform: that also makes it the containing block for the fixed
   elements inside it (.main-header, logo, sub-menus), so they move down with it.
   Fixed elements outside the header get an explicit offset below. */
body.admin-bar { --vn-ab: 32px; }

body.admin-bar .header-wrapper { transform: translateY(var(--vn-ab)); }

body.admin-bar .toggle-menu-items,
body.admin-bar .header-search,
body.admin-bar .header-nav-menu.mobile-main-menu {
	top: calc(var(--header-height) + var(--top-bar-height) + var(--vn-ab));
}
body.admin-bar.scroll-sticky .header-search,
body.admin-bar.scroll-sticky .header-nav-menu.mobile-main-menu {
	top: calc(var(--header-height) + var(--vn-ab));
}
body.admin-bar .header-search.vn-search-panel { top: var(--vn-ab); }

/* WP's admin bar is 46px tall below 783px */
@media (max-width: 782px) {
	body.admin-bar { --vn-ab: 46px; }
}

/* Below 601px WP lets the admin bar scroll away; keep it fixed so the header offset stays correct */
@media (max-width: 600px) {
	body.admin-bar #wpadminbar { position: fixed; }
	/* Too many items wrap the account avatar onto a 2nd row over the header – drop the rarely used ones on phones */
	#wpadminbar #wp-admin-bar-site-editor,
	#wpadminbar #wp-admin-bar-customize { display: none !important; }
}