/**
 * Carbon Based Studio — primary site nav (matches hub cbs-admin-nav tabs).
 * Source of truth for admin: cbs-plugins-hub/assets/cbs-admin-nav.css
 */

.cbs-site-nav {
	display: block;
	width: 100%;
	background: var(--cbs-brand-tab-track);
	border-bottom: none;
	padding: 0;
	line-height: inherit;
}

.cbs-site-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	width: 100%;
	font-size: var(--cbs-font-size-nav, 14px);
	height: var(--cbs-nav-track-height, 44px);
}

@media (min-width: 1025px) {
	/* Nav tabs on the left; search + cart grouped on the right. */
	.cbs-site-nav__list > .menu-item.cbsms-menu-search-item {
		margin-left: auto;
	}

	.cbs-site-nav__list > .menu-item.cbsmsc-menu-item {
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
	}

	.cbs-site-nav__list > .menu-item.cbsms-menu-search-item + .menu-item.cbsmsc-menu-item {
		margin-left: 0;
	}
}

.cbs-site-nav__list > .menu-item {
	margin: 0 4px 0 0;
}

.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item) > a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--cbs-nav-tab-height, 41px);
	cursor: pointer;
	padding: 0 16px;
	border: none;
	border-radius: var(--cbs-nav-tab-radius, 3px) var(--cbs-nav-tab-radius, 3px) 0 0;
	background: transparent;
	color: var(--cbs-brand-muted);
	font-weight: var(--cbs-font-weight-nav, 500);
	text-decoration: none;
	line-height: 1.4;
	box-shadow: none;
}

.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item):not(.current-menu-item):not(.current-menu-ancestor):not(.current_page_item) > a:hover,
.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item):not(.current-menu-item):not(.current-menu-ancestor):not(.current_page_item) > a:focus {
	background: var(--cbs-brand, #195a5b);
	color: var(--cbs-brand-contrast) !important;
}

/* Search toggle hover — background always; contrast colour yields when Menu Search sets a hover colour. */
.cbs-site-nav__list > .menu-item.cbsms-menu-search-item .cbsms-search-toggle:hover,
.cbs-site-nav__list > .menu-item.cbsms-menu-search-item .cbsms-search-toggle:focus {
	background: var(--cbs-brand, #195a5b);
}

body:not(.cbsms-has-toggle-icon-hover) .cbs-site-nav__list > .menu-item.cbsms-menu-search-item .cbsms-search-toggle:hover,
body:not(.cbsms-has-toggle-icon-hover) .cbs-site-nav__list > .menu-item.cbsms-menu-search-item .cbsms-search-toggle:focus {
	color: var(--cbs-brand-contrast) !important;
}

.cbs-site-nav__list > .menu-item.cbsmsc-menu-item > a:hover,
.cbs-site-nav__list > .menu-item.cbsmsc-menu-item > a:focus {
	background: var(--cbs-brand, #195a5b);
	color: var(--cbs-brand-contrast) !important;
}

.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current-menu-item > a,
.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current-menu-ancestor > a,
.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current_page_item > a {
	background: #fff;
	color: var(--cbs-brand);
	margin-bottom: 0;
	position: relative;
	z-index: 2;
}

/* Bridge active tab into white content — no teal seam. */
.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current-menu-item > a::after,
.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current-menu-ancestor > a::after,
.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: #fff;
}

/* Menu Search + Side Cart items appended via wp_nav_menu_items. */
.cbs-site-nav__list > .menu-item.cbsmsc-menu-item,
.cbs-site-nav__list > .menu-item.cbsms-menu-search-item {
	align-self: inherit;
	margin-bottom: 0;
}

/* Side cart — always white (plugin default); hover matches tab highlight. */
.cbs-site-nav__list > .menu-item.cbsmsc-menu-item > a,
.cbs-site-nav__list > .menu-item.cbsmsc-menu-item > a.cbsmsc-toggle-cart {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--cbs-nav-tab-height, 41px);
	gap: 10px;
	border-radius: var(--cbs-nav-tab-radius, 3px) var(--cbs-nav-tab-radius, 3px) 0 0;
	border: none;
	background: transparent;
	padding: 0 12px;
	color: var(--cbs-brand-contrast) !important;
	line-height: 1;
	font-weight: 700;
	text-decoration: none;
}

.cbs-site-nav__list > .menu-item.cbsmsc-menu-item .cbsmsc-cart-icon,
.cbs-site-nav__list > .menu-item.cbsmsc-menu-item .amount {
	color: inherit;
}

/* Menu Search toggle — match nav tabs (muted → white on hover).
   No !important / color:inherit on the icon so Appearance → toggle colour from the plugin can win. */
.cbs-site-nav__list > .menu-item.cbsms-menu-search-item .cbsms-search-toggle {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--cbs-nav-tab-height, 41px);
	gap: 10px;
	border-radius: var(--cbs-nav-tab-radius, 3px) var(--cbs-nav-tab-radius, 3px) 0 0;
	border: none;
	background: transparent;
	padding: 0 12px;
	color: var(--cbs-brand-muted);
	line-height: 1;
	font-weight: var(--cbs-font-weight-nav, 500);
	text-decoration: none;
	cursor: pointer;
}

.cbs-site-nav__list > .menu-item.cbsms-menu-search-item .cbsms-search-icon {
	stroke: currentColor;
}

@media (max-width: 1024px) {
	.cbs-site-nav-row .cbs-container {
		padding-left: var(--cbs-content-gutter);
	}

	.cbs-site-nav__list {
		flex-direction: column;
		align-items: stretch;
	}

	.cbs-site-nav__list > .menu-item {
		margin: 0;
	}

	.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item) > a {
		border-radius: 0;
		width: 100%;
	}

	.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current-menu-item > a::after,
	.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current-menu-ancestor > a::after,
	.cbs-site-nav__list > .menu-item:not(.cbsmsc-menu-item):not(.cbsms-menu-search-item).current_page_item > a::after {
		display: none;
	}

	.cbs-site-nav__list > .menu-item.cbsmsc-menu-item,
	.cbs-site-nav__list > .menu-item.cbsms-menu-search-item {
		margin-left: 0 !important;
		float: none !important;
		width: 100%;
	}

	.cbs-site-nav__list > .menu-item.cbsmsc-menu-item > a,
	.cbs-site-nav__list > .menu-item.cbsms-menu-search-item .cbsms-search-toggle {
		width: 100%;
		justify-content: flex-start;
	}
}