/* =========================================================
   Custom Header Override — front-end styles
   Recreates: logo left | search box + button | hamburger icon
   with a horizontally SCROLLABLE nav menu row underneath.
   ========================================================= */

#cho-header {
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #ffffff;
	border-bottom: 1px solid #e6e6e6;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Top row: logo + search + hamburger ---------- */

.cho-header-top {
	padding: 14px 20px;
}

.cho-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

.cho-logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.cho-logo-img {
	max-height: 42px;
	width: auto;
	display: block;
}

.cho-logo-text {
	font-size: 26px;
	font-weight: 800;
	color: #d8232a;
	letter-spacing: -0.5px;
}

.cho-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* Search box: light grey input fused with a solid red/accent button,
   matching the reference screenshot's pill-shaped combo. */

.cho-search-form {
	display: flex;
	align-items: stretch;
	height: 44px;
	border-radius: 6px;
	overflow: hidden;
}

.cho-search-input {
	border: none;
	background: #ececec;
	padding: 0 16px;
	font-size: 15px;
	color: #444;
	width: 180px;
	outline: none;
}

.cho-search-input::placeholder {
	color: #8a8a8a;
}

.cho-search-submit {
	border: none;
	background: var(--cho-accent, #d8232a);
	color: #fff;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.cho-search-submit:hover {
	background: var(--cho-accent-hover, #b81c22);
}

/* ---------- Nav row: horizontally scrollable menu ---------- */

.cho-nav-wrapper {
	border-top: 1px solid #eee;
	background: #fff;
}

.cho-nav-scroll {
	/* This is what makes the menu scrollable left-to-right, like the
	   screenshot, instead of wrapping to multiple lines or overflowing. */
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
	scrollbar-width: thin;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.cho-nav-scroll::-webkit-scrollbar {
	height: 4px;
}

.cho-nav-scroll::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 4px;
}

.cho-nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap; /* keeps every item on one line so the row scrolls instead of wrapping */
}

.cho-nav-menu li {
	flex-shrink: 0; /* each item keeps its natural width inside the scroll row */
}

.cho-nav-menu li a {
	display: block;
	padding: 14px 18px;
	color: #333;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.cho-nav-menu li a:hover,
.cho-nav-menu li.current-menu-item a {
	color: var(--cho-accent, #d8232a);
}

.cho-nav-menu li.current-menu-item a {
	background: #fdeceb;
	border-radius: 4px;
}

.cho-nav-placeholder a {
	color: #999 !important;
	font-style: italic;
	font-weight: 400 !important;
}

/* ---------- Responsive: collapse top row search on small screens ---------- */

@media (max-width: 600px) {
	.cho-search-input {
		width: 120px;
	}

	.cho-header-top {
		padding: 10px 14px;
	}

	.cho-nav-scroll {
		padding: 0 14px;
	}

	.cho-nav-menu li a {
		padding: 12px 14px;
		font-size: 14px;
	}
}