/*
 * Rental Hua Hin header and responsive layout fixes.
 * Scoped to the existing Impreza header elements used on rentalhuahin.com.
 */

/* The theme currently forces a 1300px-wide page on every device. */
body,
.l-header.pos_fixed {
	min-width: 0 !important;
}

/* Keep the main navigation and the language switcher as separate flex items. */
.l-subheader.at_middle .l-subheader-cell.at_right {
	column-gap: 22px;
	flex-wrap: nowrap;
}

.header_hor .l-subheader.at_middle .l-subheader-cell.at_right > .w-nav {
	margin-left: 0;
}

.l-subheader.at_middle .ush_menu_1,
.l-subheader.at_middle .ush_menu_4 {
	flex-shrink: 0;
}

/* Language flags: predictable spacing, alignment, and click areas. */
.ush_menu_4 {
	margin-top: 0 !important;
}

.ush_menu_4.type_desktop > .w-nav-list.level_1 {
	align-items: center;
	column-gap: 8px;
}

.ush_menu_4.type_desktop > .w-nav-list.level_1 > .menu-item {
	margin-left: 0;
	margin-right: 0;
}

.header_hor .ush_menu_4.type_desktop > .w-nav-list.level_1 > .menu-item > .w-nav-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.ush_menu_4 .w-nav-title,
.ush_menu_4 .w-nav-title img {
	display: block;
}

.ush_menu_4 .w-nav-title img {
	height: 20px;
	width: auto;
	max-width: none;
}

/* Preserve the full menu near its 1020px desktop breakpoint without collisions. */
@media (min-width: 1020px) and (max-width: 1199px) {
	.l-subheader.at_middle .l-subheader-cell.at_right {
		column-gap: 12px;
	}

	.ush_menu_1 {
		font-size: 18px !important;
	}

	.header_hor .ush_menu_1.type_desktop > .w-nav-list.level_1 > .menu-item > .w-nav-anchor {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* On tablets the main menu is a button; keep it separated from the flags. */
@media (min-width: 602px) and (max-width: 1019px) {
	.l-subheader.at_middle .l-subheader-cell.at_right {
		column-gap: 10px;
	}
}

/* Mobile header: vertically centered flags with comfortable touch targets. */
@media (max-width: 601px) {
	.l-subheader.at_middle .l-subheader-cell.at_left,
	.l-subheader.at_middle .l-subheader-cell.at_right {
		min-width: 0;
	}

	.header_hor .ush_menu_4.type_desktop > .w-nav-list.level_1 {
		column-gap: 2px;
	}

	.header_hor .ush_menu_4.type_desktop > .w-nav-list.level_1 > .menu-item > .w-nav-anchor {
		min-width: 34px;
		height: 44px;
		padding-left: 5px !important;
		padding-right: 5px !important;
	}
}