/*
 * member-menu.css
 *
 * Namespaced extraction of the SEOChorus topbar + responsive navigation.
 * Includes the source site's desktop and <=1180px compact/mobile behavior.
 */

/*
 * i-w-d.com navigation theme ==o==
 *
 * This stylesheet is intentionally scoped to the primary navigation system.
 * It contains no general page, hero, content, footer, form, cookie-banner,
 * pricing, utility, or other site-wide styles.
 */

:root {
	--sc-nav-bg: #000;
	--sc-nav-bg-soft: #123654;
	--sc-nav-text: #47a0df;
	--sc-nav-border: #453869;
	--sc-nav-shadow: 0 2px 16px #042e39;
	--sc-nav-radius-sm: 12px;
	--sc-nav-radius-md: 18px;
	--sc-nav-radius-lg: 22px;

	--member-menu-blue-primary: #093662;
	--member-menu-green-primary: #087d50;
	--member-menu-link-accent: #7bd5fb;

	--member-menu-bg-elevated: #ffffff;
	--member-menu-bg-soft: #e9f0f3;
	--member-menu-text: #1f2933;
	--member-menu-border: rgba(9, 54, 98, 0.16);

	--member-menu-shadow: 0 22px 50px rgba(9, 54, 98, 0.16);

	--member-menu-radius-sm: 12px;
	--member-menu-radius-md: 18px;
	--member-menu-radius-lg: 22px;
	--member-menu-content-max: 1440px;
	--member-menu-space-2: 1.25rem;
}

[data-theme="dark"] {
	--sc-nav-bg: #000;
	--sc-nav-bg-soft: #123654;
	--sc-nav-text: #47a0df;
	/* --sc-nav-border: #453869; */
	--sc-nav-border: #453869;
	--sc-nav-shadow: 0 2px 16px #042e39;

	--member-menu-blue-primary: #093662;
	--member-menu-green-primary: #087d50;
	--member-menu-link-accent: #7bd5fb;

	--member-menu-bg-elevated: #ffffff;
	--member-menu-bg-soft: #e9f0f3;
	--member-menu-text: #1f2933;
	--member-menu-border: rgba(9, 54, 98, 0.16);

	--member-menu-shadow: 0 22px 50px rgba(9, 54, 98, 0.16);

	--member-menu-radius-sm: 12px;
	--member-menu-radius-md: 18px;
	--member-menu-radius-lg: 22px;
	--member-menu-content-max: 1440px;
	--member-menu-space-2: 1.25rem;
}

.member-menu {
	--member-menu-blue-primary: #093662;
	--member-menu-green-primary: #087d50;
	--member-menu-link-accent: #7bd5fb;

	--member-menu-bg-elevated: #ffffff;
	--member-menu-bg-soft: #e9f0f3;
	--member-menu-text: #1f2933;
	--member-menu-border: rgba(9, 54, 98, 0.16);

	--member-menu-shadow: 0 22px 50px rgba(9, 54, 98, 0.16);

	--member-menu-radius-sm: 12px;
	--member-menu-radius-md: 18px;
	--member-menu-radius-lg: 22px;
	--member-menu-content-max: 1440px;
	--member-menu-space-2: 1.25rem;

	position: relative;
	z-index: 50;

	width: 100%;
	margin: 0;
	padding: 0;

	color: var(--member-menu-text);
	font-family: Verdana, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

.member-menu[data-member-menu-theme="dark"] {
	--member-menu-bg-elevated: #0d2841;
	--member-menu-bg-soft: #123654;
	--member-menu-text: #e9f0f3;
	--member-menu-border: rgba(233, 240, 243, 0.18);
	--member-menu-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	border: 1px solid var(--color-divider);
	border-radius: 10px;
}

.member-menu,
.member-menu *,
.member-menu *::before,
.member-menu *::after {
	box-sizing: border-box;
}

.member-menu a {
	text-decoration: none;
	text-underline-offset: 0.18em;
}

.member-menu button,
.member-menu a {
	font: inherit;
}

.member-menu__container {
	width: min(100% - 2rem, var(--member-menu-content-max));
	margin-inline: auto;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.member-menu__topbar {
	background: var(--member-menu-blue-primary);
	color: #ffffff;
	font-size: 0.92rem;
}

.member-menu__topbar-inner {
	min-height: 40px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 1rem;
	padding-block: 0.4rem;
}

.member-menu__utility-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;

	gap: 0.5rem 1.25rem;

	margin: 10px 0 10px auto;
	padding: 0;

	list-style: none;
	text-align: right;
}

.member-menu__utility-control {
	min-height: 28px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.25rem 0.75rem;

	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;

	box-shadow: none;

	font-size: 0.84rem;
	line-height: 1;

	cursor: pointer;
}

.member-menu__utility-control:hover,
.member-menu__utility-control:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	text-decoration: none;
}

/* =========================================================
   HEADER
   ========================================================= */

.member-menu__header {
	position: relative;
	z-index: 50;

	/* background: var(--member-menu-bg-elevated); */
	border-bottom: none;
}

.member-menu__header-inner {
	min-height: 61px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--member-menu-space-2);
}

.member-menu__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* .member-menu__logo-image {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
    max-height: 75px;
    margin: 0;
    object-fit: cover;
    object-position: left center;
    border-radius: 10px;
	border: 1px solid var(--color-divider, rgba(127, 127, 127, 0.35));
	margin-left: 15px;
} */

.member-menu[data-member-menu-theme="light"] .member-menu__logo-image--light {
	display: block;
}

.member-menu[data-member-menu-theme="dark"] .member-menu__logo-image--dark {
	display: block;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.member-menu__nav-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.member-menu__nav-toggle .container-listings button {
	display: none;

	border: 1px solid var(--member-menu-border);
	border-radius: 999px;

	background: var(--member-menu-bg-elevated);
	color: var(--color-mnav-link);

	padding: 0.7rem 0.9rem;

	cursor: pointer;
}

#lst-panel-1 > div > article > div > div > div.member-menu > header > div > div > button {
	color: var(--color-mnav-link) !important;
}

#lst-panel-1 > div > article > div > div > div.member-menu > header > div > div > button:hover {
	color: var(--color-co-feature-link) !important;
}

#company-tab-navigation{

	z-index: 9999;

}

#company-tab-navigation > ul > li > button:first-child {
	/* color: var(--color-co-feature-link) !important;
	background: var(--sc-nav-bg-soft); */

	text-decoration: none;
	color: var(--color-link, #007bff);
	font-weight: bold;
	margin-right: -1px;
	scroll-behavior: auto !important;
	text-align: center;
	box-sizing: border-box !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.6em !important;
	vertical-align: middle !important;
	touch-action: manipulation !important;
	user-select: none !important;
	border: 1px solid var(--nav-vten-purple-400) !important;
	border-radius: 6px !important;
	/* background: transparent !important; */
	background: #000 !important;
	font-family: "Golos Text", sans-serif !important;
	font-weight: 300 !important;
	line-height: 1.2 !important;
	letter-spacing: 0em !important;
	word-spacing: 2px !important;
	white-space: wrap !important;
	text-decoration: none !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent !important;
	box-shadow: inset 0 0 24px 0 rgba(71, 160, 223, 0.6) !important;
	transition:
		transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
		background-color 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
		color 0.18s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
}

/* =========================================================
   COMPANY TAB NAVIGATION — HAMBURGER / CLOSE ICON
   ========================================================= */

#company-tab-navigation > ul > li > button:first-child::before {
	content: "" !important;

	display: inline-block !important;
	position: static !important;

	flex: 0 0 20px !important;

	width: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;

	height: 16px !important;
	min-height: 16px !important;
	max-height: 16px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background-color: transparent !important;

	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor) !important;

	background-size:
		20px 2px,
		20px 2px,
		20px 2px !important;

	background-position:
		center top,
		center center,
		center bottom !important;

	background-repeat: no-repeat !important;

	box-shadow: none !important;

	transform: none !important;
	transform-origin: center !important;

	opacity: 1 !important;

	transition:
		background-position 0.2s ease,
		transform 0.2s ease !important;
}


/* =========================================================
   OPEN STATE — CHANGE HAMBURGER TO X
   ========================================================= */

#company-tab-navigation > ul > li > button:first-child[aria-expanded="true"]::before {
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor) !important;

	background-size:
		20px 2px,
		20px 2px !important;

	background-position:
		center center,
		center center !important;

	background-repeat: no-repeat !important;

	transform: rotate(45deg) !important;
}


/*
 * Second stroke of X.
 * Rotate the second background layer internally.
 *
 * Because CSS cannot independently rotate background layers,
 * use an inset diagonal gradient arrangement instead.
 */

#company-tab-navigation > ul > li > button:first-child[aria-expanded="true"]::before {
	background-image:
		linear-gradient(
			45deg,
			transparent 44%,
			currentColor 44%,
			currentColor 56%,
			transparent 56%
		),
		linear-gradient(
			-45deg,
			transparent 44%,
			currentColor 44%,
			currentColor 56%,
			transparent 56%
		) !important;

	background-size:
		100% 100%,
		100% 100% !important;

	transform: none !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	#company-tab-navigation > ul > li > button:first-child::before {
		transition: none !important;
	}

}

/* end Hamburger Menu */

#company-tab-navigation > ul > li > button:first-child:hover {
	/* color: var(--color-mnav-link) !important; */
	color: var(--color-primary-hover) !important;
}

#company-tab-navigation > ul > li > button:first-child:active {
	color: var(--color-co-listing-hl-active) !important;
}

.member-menu__list,
.member-menu__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.member-menu__list {
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

.member-menu__item {
	position: relative;
}

.member-menu__button,
.member-menu__link {
	min-height: 44px;

	/* display: inline-flex; */
	align-items: center;

	padding: 0.72rem 1rem;

	border-radius: 999px;

	color: var(--member-menu-text);

	font-size: 1.04rem;
	font-weight: 300;

	white-space: nowrap;
}

.member-menu__button {
	gap: 0.45rem;

	border: 0;
	background: transparent;

	cursor: pointer;
}

.member-menu__button:hover,
.member-menu__button:focus-visible,
.member-menu__button[aria-expanded="true"],
.member-menu__link:hover,
.member-menu__link:focus-visible {
	background: #123654;
	color: #fff;
	text-decoration: none;
}

/* =========================================================
   DESKTOP SUBMENUS
   ========================================================= */

.member-menu__submenu {
	position: absolute;

	top: calc(100% + 0.6rem);
	right: 0;

	width: max-content;
	min-width: max-content;
	max-width: min(620px, calc(100vw - 2rem));

	padding: 0.6rem;

	border: 1px solid var(--member-menu-border);
	border-radius: var(--member-menu-radius-md);

	background: var(--member-menu-bg-elevated);
	box-shadow: var(--member-menu-shadow);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);

	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0.18s ease;
}

.member-menu__button[aria-expanded="true"] + .member-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.member-menu__submenu a {
	display: block;

	padding: 0.72rem 0.75rem;

	border-radius: var(--member-menu-radius-sm);

	color: var(--member-menu-text);

	font-size: 1rem;
	white-space: nowrap;
}

.member-menu__submenu a:hover,
.member-menu__submenu a:focus-visible {
	background: var(--member-menu-bg-soft);
	color: var(--member-menu-text);
	text-decoration: none;
}

/* =========================================================
   MOBILE / COMPACT NAV
   Mirrors the source breakpoint.
   ========================================================= */

/* @media (max-width: 1180px) { */

.member-menu__nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.member-menu__nav {
	position: absolute;

	left: 0px;
	right: 1rem;
	top: calc(100% + 0.5rem);

	max-height: calc(100vh - 130px);
	overflow: auto;

	display: none;

	padding: 0.65rem;

	border: 1px solid var(--member-menu-border);
	border-radius: var(--member-menu-radius-lg);

	background: var(--member-menu-bg-elevated);
	box-shadow: var(--member-menu-shadow);
}

.member-menu__nav[data-open="true"] {
	display: block;
}

.member-menu__list {
	display: grid;
	gap: 0.25rem;
}

.member-menu__button,
.member-menu__link {
	width: 100%;
	border-radius: var(--member-menu-radius-sm);
	font-size: 1rem;
	color: var(--color-primary-hover);
}

.member-menu__button {
	justify-content: space-between;
}

.member-menu__link {
	justify-content: space-between;
}

.member-menu__submenu {
	position: static;

	width: auto;
	min-width: 0;
	max-width: none;

	display: none;

	margin: 0.25rem 0 0.6rem;
	padding: 0.6rem;

	opacity: 1;
	visibility: visible;
	transform: none;

	box-shadow: none;
	background: var(--member-menu-bg-soft);
}

.member-menu__button[aria-expanded="true"] + .member-menu__submenu {
	display: block;
}

.member-menu__submenu a {
	white-space: normal;
}
/* } */

#filter-button-left,
#filter-button-right {
	min-height: 20px;
	padding: 0px;
}

.container-filter-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
	margin-bottom: 30px;
	gap: 2px;
}

/* =========================================================
   SMALLER VIEWPORT REFINEMENTS
   ========================================================= */

@media (max-width: 720px) {
	.member-menu__topbar-inner {
		align-items: stretch;
		flex-direction: column;
	}

	.member-menu__utility-list {
		width: 100%;
		justify-content: flex-end;
	}

	/* .listings-search-panel__company-actions .member-menu__button:first-child{
		gap: 0rem;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.listings-search-panel__company-actions .member-menu__button:last-child{
		gap: 0rem;
		border: 0;
		background: transparent;
		cursor: pointer;	
	} */
}

@media (max-width: 560px) {
	.member-menu__container {
		width: min(100% - 1rem, var(--member-menu-content-max));
	}

	.member-menu__header-inner {
		min-height: 68px;
	}
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.member-menu button:focus-visible,
.member-menu a:focus-visible {
	outline: 2px solid var(--member-menu-link-accent);
	outline-offset: 3px;
}

.container-co-lisitng-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;
	gap: 8px;
	/* padding: clamp(14px, 2.2vw, 24px); */
	padding: 5px 26px 5px 26px !important;
	padding-bottom: 0px;
	background-color: #087d50;
	background-color: var(--color-gray-500) !important;
	border: 0px solid var(--color-divider, rgba(127, 127, 127, 0.35));
	border-radius: 10px;
}


/* This style activates only once the wrap occurs */
.container-co-lisitng-header.is-wrapped {
  /* Your extra padding */
  /* see footer-global_vlive.php for dynamic wrap detection */
  padding: 20px 14px 20px 26px; 
}

/* @media (max-width: 1100px) { */

.container-co-lisitng-header {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

div.container-co-lisitng-header > div:nth-child(1) > header > h2 {
	font-size: 1.4rem;
	margin-top: 0px !important;
    margin-bottom: 0px !important;
    /* color: #000 !important; */
}

div.container-co-lisitng-header > div:nth-child(1) > header > h2 > a{
	    color: #000 !important;
}

div.container-co-lisitng-header > div:nth-child(1) > header > h2 > a:hover{
	    color: #000 !important;
}

#company-tab-navigation > ul > li > button{
	
	margin: 0px !important;
	border-radius: 10px !important;

}

/* } */