/**
 * Thuy Bich Vinh Long — Header Legacy Split
 * File: css/tb-header.css
 *
 * Owner:
 * - Header desktop navigation legacy behavior migrated from Yellow Pencil.
 * - Header underline hover/active state, centered nav, dropdown micro spacing.
 * - Header responsive nav spacing from Yellow Pencil.
 *
 * Not owner:
 * - Footer layout. Use css/tb-legacy-overrides.css until a footer phase replaces it.
 * - Blog Hub / Blog Single / Blog Archive.
 * - PLP / PDP / Product Card.
 *
 * Phase 12F-A:
 * - Behavior-preserving split only.
 * - No redesign.
 * - Tiny technical corrections only: transform-origin typo and duplicate transform removed.
 */

/* Header nav underline hover / active */
.medium-logo-center .header-nav-main > li.menu-item > a::after {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	bottom: -4px;
	height: 3px;
	background: #C89B3C;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}

.medium-logo-center .header-nav-main > li.menu-item:hover > a::after,
.medium-logo-center .header-nav-main > li.current-menu-item > a::after,
.medium-logo-center .header-nav-main > li.current-menu-parent > a::after {
	transform: scaleX(1);
}

/* Header container */
.header-main .header-inner.container {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 200px;
	padding-right: 200px;
}

/* Desktop right icons spacing */
.header-main .header-nav.nav-right.nav-spacing-xsmall > li {
	margin-left: -20px;
}

/* Header shell */
#masthead .medium-logo-center {
	transform: translatex(0px) translatey(0px);
}

.medium-logo-center .flex-left {
	display: flex;
	align-items: center;
}

.medium-logo-center .header-nav-main {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.medium-logo-center .header-nav-main > li.menu-item {
	position: relative;
	display: inline-block;
}

.medium-logo-center .menu-item > a {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	padding: 0;
	color: #111111;
	transition: color .28s ease, opacity .28s ease;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 44px;
	position: relative;
}

.medium-logo-center .header-nav-main > li.menu-item:hover > a,
.medium-logo-center .header-nav-main > li.current-menu-item > a,
.medium-logo-center .header-nav-main > li.current-menu-parent > a {
	color: #C89B3C;
}

.medium-logo-center .header-nav-main > li.menu-item.menu-item-has-block > a i.icon-angle-down,
.medium-logo-center .header-nav-main > li.menu-item.menu-item-has-children > a i.icon-angle-down {
	position: relative;
	top: 1px;
	margin-left: 6px;
	font-size: 0.8em;
}

/* Header dropdown */
.medium-logo-center .header-nav-main > li.menu-item > .nav-dropdown {
	top: 100%;
	margin-top: 0;
}

.nav-dropdown .ux-menu-link,
.nav-dropdown .ux-menu-link.menu-item {
	margin: 0 !important;
	padding: 0 !important;
	margin-bottom: -12px !important;
}

.nav-dropdown .ux-menu-link__link {
	display: flex;
	align-items: center;
	padding-top: 1px !important;
	padding-bottom: 1px !important;
	color: #111111;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.15 !important;
	text-decoration: none;
	position: relative;
	transition: text-decoration-color .14s ease;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.nav-dropdown .ux-menu-link__text {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.15 !important;
}

/* Top simple nav text */
.nav-simple a span {
	text-transform: uppercase;
	font-size: 15px;
	border-top-left-radius: 0px;
	background-color: #ffffff;
	margin-top: -5px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.header-nav-main {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
	}

	.header-nav-main.nav-spacing-xsmall > li.menu-item {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.header-nav-main.nav-right.nav-spacing-xsmall > li {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}
}

@media only screen and (max-width: 849px) {
	.home .header-wrapper:after {
		display: none;
	}
}

@media (max-width: 767px) {
	.header-nav-main.nav-spacing-xsmall > li.menu-item {
		margin-left: 2px !important;
		margin-right: 0 !important;
	}

	.header-nav-main.nav-right.nav-spacing-xsmall > li {
		margin-left: 2px !important;
		margin-right: 0 !important;
	}
}

/* =============================================
   TB Mobile Header — Vertical centering
   Migrated from css/tb-footer-mobile.css in Phase 12I.

   Scope:
   - Mobile header vertical alignment only.
   - Does not change layout/display strategy beyond existing legacy patch.
   ============================================= */

@media only screen and (max-width: 849px) {
	#masthead .header-inner {
		align-items: center !important;
	}

	.flex-col.logo,
	.flex-col.logo a {
		display: flex !important;
		align-items: center !important;
	}

	.mobile-nav .icon-menu {
		vertical-align: middle !important;
		line-height: 50px !important;
	}

	.header-cart-link {
		display: flex !important;
		align-items: center !important;
	}
}