/*
 * Shared desktop header
 *
 * The primary navigation is rendered by header.php on every template. This
 * final stylesheet gives it one stable layout even when a page loads a
 * specialised stylesheet (home, shop, product, article, etc.).
 */

@media screen and (min-width: 1025px) {
	.wzd-nav-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		height: 84px;
		min-height: 84px;
		gap: 14px;
	}

	.wzd-nav-menu {
		position: relative;
		left: auto;
		transform: none;
		z-index: 1;
		display: flex;
		min-width: 0;
		justify-content: center;
	}

	.wzd-nav-items {
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		gap: 0;
	}

	.wzd-nav-items > li > a {
		padding: 8px 8px;
		border-radius: 8px;
		white-space: nowrap;
	}

	/* Give comparison the same visual prominence as the calculator tool:
	 * a slim divider on each side makes it a distinct, easy-to-scan action. */
	.wzd-nav-compare-item {
		display: inline-flex;
		align-items: center;
	}

	.wzd-nav-compare-item::before,
	.wzd-nav-compare-item::after {
		content: '';
		flex: 0 0 1px;
		width: 1px;
		height: 24px;
		margin: 0 8px;
		background: rgba(46, 46, 49, 0.12);
	}

	.wzd-nav-actions {
		align-items: center;
		gap: 8px;
		margin-left: auto;
	}

	.wzd-header-separator {
		display: block;
		flex: 0 0 1px;
		width: 1px;
		height: 24px;
		margin: 0 8px;
		background: rgba(46, 46, 49, 0.12);
	}

	.wzd-header-calculator {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 4px;
		color: var(--c-charcoal, #2E2E31);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		text-decoration: none;
		white-space: nowrap;
		transition: color .15s ease;
	}

	.wzd-header-calculator .ti {
		color: var(--c-brick, #8E2521);
		font-size: 17px;
		line-height: 1;
	}

	.wzd-header-calculator:hover,
	.wzd-header-calculator:focus-visible {
		color: var(--c-brick, #8E2521);
	}

	/* The quote CTA intentionally shares the language switcher's outer height. */
	.wzd-cta-quote {
		height: 37px;
		min-height: 37px;
		display: inline-flex !important;
		padding: 0 14px !important;
		font-size: 13.5px !important;
		line-height: 1;
		border-radius: 10px !important;
	}
}

/* Keep the full desktop navigation comfortable on compact laptops without
 * changing its information architecture. The drawer takes over below 1025px. */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
	.wzd-nav-inner {
		gap: 10px;
		padding-right: 24px;
		padding-left: 24px;
	}

	.wzd-nav-items > li > a {
		padding-right: 6px;
		padding-left: 6px;
		font-size: 13px !important;
	}

	.wzd-nav-compare-item::before,
	.wzd-nav-compare-item::after {
		margin-right: 5px;
		margin-left: 5px;
	}

	.wzd-header-separator {
		margin-right: 5px;
		margin-left: 5px;
	}

	.wzd-header-calculator {
		gap: 4px;
		padding-right: 2px;
		padding-left: 2px;
		font-size: 13px;
	}

	.wzd-lang-opt {
		padding-right: 9px;
		padding-left: 9px;
	}

	.wzd-cta-quote {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}
}

/* The drawer already exposes the calculator. Do not duplicate desktop tools
 * in the mobile header. */
@media screen and (max-width: 1024px) {
	.wzd-header-separator,
	.wzd-header-calculator {
		display: none !important;
	}
}

/* Keep the navigation within the space between the brand and the actions.
 * This prevents it from ever painting over the calculator controls. */
@media screen and (min-width: 1025px) {
	.wzd-nav-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.wzd-nav-menu {
		position: relative;
		left: auto;
		transform: none;
		display: flex;
		min-width: 0;
		justify-content: center;
	}

	.wzd-nav-items {
		flex: 0 0 auto;
	}
}

/* Language segments stay stable when translated nav labels become longer. */
@media screen and (min-width: 1025px) {
	.wzd-nav-actions,
	.wzd-lang-pill {
		flex-shrink: 0;
	}

	.wzd-lang-pill {
		min-width: 126px;
		justify-content: center;
	}

	.wzd-lang-opt {
		min-width: 39px;
		text-align: center;
		white-space: nowrap;
	}

	.wzd-lang-opt[data-lang="zh-CN"] {
		min-width: 48px;
	}
}

/* Keep the desktop navigation inside the reserved centre column on compact
 * laptop widths, without allowing translated labels to paint over actions. */
@media screen and (min-width: 1025px) and (max-width: 1160px) {
	.wzd-nav-inner {
		gap: 7px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.wzd-nav-items > li > a {
		padding-right: 3px;
		padding-left: 3px;
		font-size: 12px !important;
	}

	.wzd-nav-actions {
		gap: 4px;
	}

	.wzd-header-calculator {
		gap: 3px;
		font-size: 12px;
	}

	.wzd-lang-pill {
		min-width: 116px;
	}

	.wzd-lang-opt {
		min-width: 35px;
		padding-right: 6px;
		padding-left: 6px;
	}

	.wzd-lang-opt[data-lang="zh-CN"] {
		min-width: 43px;
	}

	.wzd-cta-quote {
		padding-right: 8px !important;
		padding-left: 8px !important;
		font-size: 12px !important;
	}
}