/* header.header-nav.menu_style_home_six has a fixed height (80px), but its
   .container child just sizes to its content (nav's natural height, which is
   often well under 80px - e.g. the course-overview header is only ~50px of
   logo/button). With no centering, that leaves dead space at the bottom of
   the bar and everything reads as pinned to the top instead of centered.
   Stretching .container to the header's full height and centering nav
   inside it fixes that for every header variant (header.jsp,
   profile-header.jsp, overview-header.jsp) that shares this markup shape. */
header.header-nav.menu_style_home_six > .container {
	display: -webkit-flex;
	display: flex;
	align-items: center;
	height: 100%;
}

/* Header nav layout: the desktop nav row (logo + search + menu) relied on
   floated children inside an unclearfixed <nav>, which collapsed the row's
   height and left every child top-aligned instead of vertically centered.
   Making nav a real flex row fixes that; li's inside #respMenu keep their
   original float-based layout untouched, so the Courses submenu positioning
   is unaffected. */
header.header-nav.menu_style_home_six > .container > nav {
	display: -webkit-flex;
	display: flex;
	align-items: center;
	width: 100%;
	gap: 16px;
}

header.header-nav.menu_style_home_six > .container > nav > #respMenu.ace-responsive-menu {
	width: auto;
	flex: 0 0 auto;
	background: transparent;
}

/* Everything after the search bar (the nav-links list on the logged-out
   header, or the account dropdown + nav-links list on the logged-in header)
   should sit flush together at the right edge. Only the first such sibling
   gets the auto margin, so the group stays flush instead of each item
   spreading apart with its own gap. */
header.header-nav.menu_style_home_six > .container > nav > .global-search + * {
	margin-left: auto;
}

/* Flex items shrink by default when the row runs out of room. The logo and
   the logged-in account widget (name + avatar) must keep their natural
   width instead - otherwise the account widget gets squeezed and the
   customer's name wraps awkwardly. The search bar is the one element meant
   to give up space, via its own flex-shrink below. */
header.header-nav.menu_style_home_six > .container > nav > .navbar_brand,
header.header-nav.menu_style_home_six > .container > nav > .header_top_lang_widget.mt-1,
header.header-nav.menu_style_home_six > .container > nav > .lms-account {
	flex-shrink: 0;
}

/* style.css centers the logo with an extra margin-top that only made sense
   under the old float layout; under the flex nav it just pushes the logo
   below the row's true center, so it's zeroed out here. */
header.header-nav.menu_style_home_six a.navbar_brand {
	margin-top: 0 !important;
}

.header-account-name {
	display: inline-block;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	font-size: 14px !important;
}

/* rounded-50 crops broken profile photos with object-fit:cover, which turns
   the wordmark logo fallback into an unreadable cropped sliver. Showing the
   whole mark instead reads as a deliberate placeholder rather than a
   rendering glitch. */
.header-account-avatar-fallback {
	object-fit: contain !important;
	background: #eceef7;
	padding: 6px;
	box-sizing: border-box;
}

.global-search {
	position: relative;
	flex: 1 1 360px;
	width: 100%;
	min-width: 280px;
	max-width: 520px;
	margin: 0 16px;
}

.global-search-input-wrap {
	position: relative;
	width: 100%;
}

.global-search-input-wrap .global-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #9a9a9a;
	font-size: 13px;
	pointer-events: none;
}

.global-search-input {
	width: 100%;
	height: 40px;
	border: 1px solid #e5e5e5;
	border-radius: 20px;
	background: #f6f7fb;
	padding: 0 15px 0 36px;
	font-size: 14px;
	color: #222;
	outline: none;
	transition: border-color .2s ease, background-color .2s ease;
}

.global-search-input:focus {
	border-color: #2D368F;
	background: #ffffff;
}

.global-search-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 100%;
	min-width: 320px;
	max-width: 90vw;
	max-height: 440px;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	padding: 8px 0;
	text-align: left;
}

.global-search.active .global-search-dropdown {
	display: block;
}

.global-search-section {
	padding: 6px 0;
}

.global-search-section + .global-search-section {
	border-top: 1px solid #f0f0f0;
}

.global-search-section.is-empty {
	display: none;
}

.global-search-section-title {
	padding: 6px 18px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #9a9a9a;
}

.global-search-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.global-search-item a {
	display: -webkit-flex;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 18px;
	font-size: 14px;
	color: #222222;
	text-decoration: none;
}

.global-search-item a:hover {
	background: #f5f6fb;
	color: #2D368F;
}

.global-search-item .global-search-item-thumb {
	width: 32px;
	height: 32px;
	margin-top: 2px;
	border-radius: 50%;
	object-fit: contain;
	background: #eceef7;
	padding: 3px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.global-search-item-title {
	white-space: normal;
	word-break: break-word;
	line-height: 1.3;
	padding-top: 2px;
}

.global-search-message {
	display: none;
	padding: 18px;
	font-size: 13px;
	color: #9a9a9a;
	text-align: center;
}

.global-search-message.is-visible {
	display: block;
}

@media only screen and (max-width: 1199.98px) {
	.global-search {
		display: none;
	}
}