/**
 * Header Component Styles
 * Desktop and mobile navigation
 */

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

.site-header {
	background-color: transparent;
	width: 100%;
	padding: 24px 0;
	border-bottom: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-index-fixed);
	backdrop-filter: none;
	transition: background-color 0.3s ease, border-bottom 0.3s ease, backdrop-filter 0.3s ease;
}

/* Scrolled state */
.site-header.scrolled {
	background-color: var(--color-pure-white);
	border-bottom: 1px solid var(--color-border);
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.95);
}

.header-container {
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-xl);
	max-width: 1760px;
}

/* ============================================
   LOGO
   ============================================ */

.site-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-logo a {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.site-logo img {
	width: clamp(70px, 8vw, 113px);
	height: clamp(10px, 1.2vw, 16px);
	display: block;
	object-fit: contain;
	transition: opacity 0.3s ease;
}

/* ============================================
   NAVIGATION - DESKTOP
   ============================================ */

.main-navigation {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	flex-wrap: wrap;
}

.main-navigation li {
	position: relative;
	margin: 0;
}

.main-navigation > ul > li > a {
	font-family: var(--font-family-body);
	font-size: 14px;
	font-weight: var(--font-weight-regular);
	line-height: 1.5;
	color: var(--color-pure-white);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) 0;
	transition: color var(--transition-base);
	position: relative;
}

.main-navigation > ul > li > a:hover,
.main-navigation > ul > li > a:focus {
	color: var(--color-pure-white);
	opacity: 0.8;
}

.main-navigation > ul > li.current-menu-item > a,
.main-navigation > ul > li.current-page-ancestor > a {
	color: var(--color-pure-white);
}

/* Scrolled state - black links */
.site-header.scrolled .main-navigation > ul > li > a {
	color: var(--color-night-core);
}

.site-header.scrolled .main-navigation > ul > li > a:hover,
.site-header.scrolled .main-navigation > ul > li > a:focus {
	color: var(--color-night-core);
	opacity: 0.7;
}

.site-header.scrolled .main-navigation > ul > li.current-menu-item > a,
.site-header.scrolled .main-navigation > ul > li.current-page-ancestor > a {
	color: var(--color-night-core);
}

/* Dropdown Arrow Icon */
.main-navigation .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: clamp(1rem, 1.5vw, 1.5rem);
	height: clamp(1rem, 1.5vw, 1.5rem);
	/* Arrow icon SVG - white color */
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform var(--transition-base);
	flex-shrink: 0;
}

/* Scrolled state - black arrow */
.site-header.scrolled .main-navigation .menu-item-has-children > a::after {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677Z' fill='%231F1F1F'/%3E%3C/svg%3E");
}

.main-navigation .menu-item-has-children > a:hover::after,
.main-navigation .menu-item-has-children > a:focus::after {
	transform: rotate(180deg);
}

/* Dropdown Menu */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #ffffffe6;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-lg);
	min-width: 200px;
	padding: 4px 0;
	margin-top: var(--spacing-xs);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all var(--transition-base);
	z-index: var(--z-index-dropdown);
	gap: 0;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu li {
	width: 100%;
}

.main-navigation .sub-menu a {
	display: block;
	padding: var(--spacing-sm) var(--spacing-lg);
	color: var(--color-night-core);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--font-size-body);
	white-space: nowrap;
	text-decoration: none;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
	background-color: #dde3eabf;
	color: #4F6478;
	text-decoration: none;
	border-radius: 8px;
}

/* ============================================
   MOBILE MENU TOGGLE
   ============================================ */

.mobile-menu-close {
	display: none;
}

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: clamp(2rem, 4vw, 2.5rem);
	height: clamp(2rem, 4vw, 2.5rem);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	gap: 4px;
	position: relative;
	z-index: var(--z-index-fixed);
}

.mobile-menu-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-pure-white);
	transition: all var(--transition-base);
	border-radius: 2px;
}

/* Scrolled state - black hamburger */
.site-header.scrolled .mobile-menu-toggle span {
	background-color: var(--color-night-core);
}

.mobile-menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -6px);
}

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

@media (max-width: 1024px) {
	.header-container {
		max-width: 100%;
		overflow-x: hidden;
		padding: 0 var(--container-padding);
	}
	
	.mobile-menu-toggle {
		display: flex;
	}
	
	/* Mobile navigation - fixed position */
	.main-navigation {
		position: fixed;
		top: 0;
		right: -100%;
		max-width: 100vw;
		width: min(clamp(280px, 80vw, 400px), calc(100vw - 32px));
		height: 100vh;
		background-color: var(--color-pure-white);
		box-shadow: var(--shadow-lg);
		z-index: var(--z-index-modal);
		transition: right var(--transition-base);
		overflow-y: auto;
		padding: var(--spacing-4xl) var(--spacing-xl) var(--spacing-xl);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		display: flex;
	}
	
	.mobile-menu-close {
		position: absolute;
		top: var(--spacing-xl);
		right: var(--spacing-xl);
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		color: var(--color-night-core);
		transition: opacity var(--transition-base);
		z-index: 100;
		pointer-events: auto;
	}
	
	.mobile-menu-close:hover,
	.mobile-menu-close:focus {
		opacity: 0.7;
	}
	
	.mobile-menu-close svg {
		width: 24px;
		height: 24px;
		display: block;
	}
	
	/* Hide menu-item-10 in mobile menu (if it still exists) */
	.main-navigation .menu-item-10 {
		display: none !important;
	}
	
	.main-navigation.active {
		right: 0;
	}
	
	.main-navigation ul {
		flex-direction: column;
		width: 100%;
		gap: 0;
		align-items: stretch;
	}
	
	.main-navigation > ul > li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}
	
	.main-navigation > ul > li > a {
		padding: var(--spacing-md) 0;
		width: 100%;
		justify-content: space-between;
		color: var(--color-night-core) !important;
		transition: opacity 0.2s ease;
	}
	
	.main-navigation > ul > li > a:hover,
	.main-navigation > ul > li > a:focus {
		color: var(--color-night-core) !important;
		opacity: 0.7;
	}
	
	.main-navigation > ul > li.current-menu-item > a,
	.main-navigation > ul > li.current-page-ancestor > a {
		color: var(--color-night-core) !important;
	}
	
	/* Reset active state for non-active items */
	.main-navigation > ul > li:not(.active) > a {
		opacity: 1;
	}
	
	.main-navigation .menu-item-has-children > a::after {
		transform: rotate(0deg) !important;
		/* Dark arrow for mobile menu */
		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677Z' fill='%231F1F1F'/%3E%3C/svg%3E") !important;
		width: 20px;
		height: 20px;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.main-navigation .menu-item-has-children.active > a::after {
		transform: rotate(180deg) !important;
	}
	
	.main-navigation .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-radius: 0;
		margin: 0;
		padding: 0;
		background-color: var(--color-background-alt);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.main-navigation .sub-menu.active {
		max-height: 1000px;
		padding: var(--spacing-sm) 0;
		transition: background-color 0.2s ease;
	}
	
	.main-navigation .sub-menu.active:hover {
		background-color: rgba(221, 227, 234, 0.3);
	}
	
	.main-navigation .sub-menu a {
		padding-left: var(--spacing-xl);
		color: var(--color-night-core) !important;
	}
	
	.main-navigation .sub-menu a:hover,
	.main-navigation .sub-menu a:focus {
		color: var(--color-night-core) !important;
		background-color: #dde3eabf;
	}
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: calc(var(--z-index-modal) - 1);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.mobile-menu-overlay.active {
	display: block;
	opacity: 1;
}

@media (max-width: 1024px) {
	.mobile-menu-overlay.active {
		display: block;
	}
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1024px) {
	.header-container {
		padding: 0 var(--spacing-lg);
	}
}

@media (max-width: 768px) {
	.header-container {
		padding: 0 var(--spacing-md);
		gap: var(--spacing-md);
	}
	
	.site-header {
		padding: var(--spacing-md) 0;
	}
	
	.main-navigation {
		max-width: 100vw;
		width: min(clamp(280px, 80vw, 400px), calc(100vw - 32px));
	}
}

@media (max-width: 456px) {
	.main-navigation {
		width: 100vw;
		max-width: 100vw;
		right: -100vw;
	}
	
	.main-navigation.active {
		right: 0;
	}
	
	.global-presence-page {
		overflow-x: hidden;
	}
}

@media (max-width: 320px) {
	.main-navigation {
		width: 100vw !important;
		max-width: 100vw !important;
		right: -100vw !important;
	}
	
	.main-navigation.active {
		right: 0 !important;
	}
	
	.global-presence-page {
		overflow-x: hidden !important;
		width: 100%;
		max-width: 100vw;
	}
	
	body {
		overflow-x: hidden;
	}
}