/* Item 09 (Joel, 13 Oct): "My connections and all connections tabs are not responsive from this page: /members/".
   The members directory tab row (All Members / My Connections) as one segmented control in the live brand:
   - phones (<600 px): the row spans the column, the tabs share it equally, 44 px tap targets; if the labels ever outgrow
     the row it scrolls sideways inside itself (never the page) and the selected tab is kept in view (09-members-tabs.js);
   - tablets: the same control at its natural width, still 44 px;
   - desktop (>=1024 px): 46 px tall, the same height as the search pill at the top of the filter column beside it, and the
     block under it starts level with the filter card.
   The theme's "more" (three dots) menu folds tabs away when it thinks they do not fit; 09-members-tabs.js puts them back.
   The equal-width rule only applies once that script has marked the row (.smesa-mt), so without it the tabs keep their own
   width and the theme never folds them.
   Scoped to the members directory as smesa-network draws it (body.smesa-net-dir); the #buddypress id outranks network.css. */

body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs {
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	max-width: 100%;
	min-width: 0;
}

/* the track */
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 4px;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 !important;
	padding: 3px !important;
	border: 1px solid #E3E8EE !important;
	border-radius: 999px !important;
	background: #EEF2F5 !important;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation::-webkit-scrollbar { display: none; }

body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li:not(.hideshow) {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	scroll-snap-align: start;
	list-style: none;
}

/* one tab */
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	height: 100%;
	min-height: 44px;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #33454F !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li > a .bb-component-nav-item-point {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: inherit !important;
	background: none !important;
	font: inherit !important;
	white-space: nowrap;
}
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li:not(.selected) > a:hover,
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li:not(.selected) > a:hover * {
	color: #0A2C3D !important;
	background-color: rgba(255, 255, 255, .75) !important;
}
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li:not(.selected) > a:hover * { background-color: transparent !important; }
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li > a:focus { outline: none; }
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li > a:focus-visible {
	box-shadow: inset 0 0 0 2px #9C1C1F !important;
}

/* the selected tab: navy, as before */
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li.selected > a,
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li.selected > a:hover {
	background: #0A2C3D !important;
	color: #fff !important;
	box-shadow: 0 1px 3px rgba(10, 44, 61, .22) !important;
}
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li.selected > a *,
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li.selected > a:hover * {
	color: #fff !important;
	background-color: transparent !important;
}
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li.selected > a:focus-visible {
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #9C1C1F !important;
}

/* a tap answers at once: a small ring next to the label while BuddyBoss loads that list */
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li.loading > a .bb-component-nav-item-point::after {
	content: "";
	display: inline-block !important;
	flex: none;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: smesa-mt-spin .7s linear infinite;
}
@keyframes smesa-mt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li.loading > a .bb-component-nav-item-point::after { animation-duration: 2s; }
}

/* phones: the control spans the column and the tabs share it equally (only once the script keeps the theme from folding them) */
@media (max-width: 599px) {
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs {
		margin-bottom: 16px !important;
	}
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation {
		display: flex !important;
		width: 100%;
	}
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs.smesa-mt > ul.component-navigation > li:not(.hideshow) {
		flex: 1 1 0 !important;
		min-width: max-content;
	}
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li > a {
		padding: 0 14px !important;
	}
}

/* desktop: the height of the search pill in the filter column, so the two rows line up */
@media (min-width: 1024px) {
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs {
		margin-bottom: 24px !important;
	}
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation {
		height: 46px;
	}
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li > a {
		min-height: 38px;
	}
}

/* touch screens wide enough for the filter column (tablets in landscape): keep 44 px tap targets */
@media (min-width: 1024px) and (pointer: coarse) {
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation { height: auto; }
	body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs > ul.component-navigation > li > a { min-height: 44px; }
}

/* never a number on these tabs: the community head-count is not shown to anyone (Joel, 14 Oct). 09-members-tabs.js also takes
   any count BuddyBoss prints out of the page. */
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs .count,
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs .bb-count,
body.smesa-net-dir #buddypress nav.members-type-navs.dir-navs .bp-count {
	display: none !important;
}

/* the empty bar BuddyBoss prints under the tabs (its sort menu and view switch are hidden on this page) takes no room */
body.smesa-net-dir #buddypress .members-directory-container > .bp-secondary-header {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}