/**
 * 121 Platform
 * Global Header – Signature
 *
 * @package 121_Platform
 */

.nd-site-header {
	position: relative;
	z-index: 10;
	margin: 0;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.nd-site-header__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--custom--layout--gutter);
	gap: var(--wp--preset--spacing--50);
}

.nd-site-header__inner > *,
.nd-site-header__brand > *,
.nd-site-header__navigation-area > *,
.nd-site-header__actions > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.nd-site-header__brand {
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	min-width: 0;
}

.nd-site-header__brand .wp-block-site-logo {
	flex: 0 0 auto;
	width: var(--wp--custom--layout--header-logo-width);
	max-width: 100%;
}

.nd-site-header__brand .wp-block-site-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.nd-site-header__title {
	white-space: nowrap;
}

.nd-site-header__title a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.nd-site-header__navigation-area {
	flex: 1 1 auto;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	min-width: 0;
}

.nd-site-header__actions {
	flex: 0 0 auto;
}

.nd-site-header__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--40);

	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--typography--weight-medium);
}

@media (min-width: 1101px) {
	.nd-site-header__inner {
		position: relative;
	}

	.nd-site-header__navigation-area > .nd-navigation {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0;
		transform: translate(-50%, -50%);
	}
}

@media (max-width: 1100px) {
	.nd-site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		width: 100%;
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--custom--layout--gutter);
		gap: var(--wp--preset--spacing--20);
	}

	.nd-site-header__brand {
		grid-column: 1;
		justify-self: start;
		min-width: 0;
	}

	.nd-site-header__brand .wp-block-site-logo {
		width: var(--wp--custom--layout--header-logo-width-mobile);
	}

	.nd-site-header__navigation-area {
		display: contents;
	}

	.nd-site-header__navigation-area > .wp-block-shortcode {
		grid-column: 2;
		justify-self: center;
		margin: 0;
	}

	/*
	 * Centre the mobile menu trigger on the actual header width,
	 * independent of the brand and CTA widths.
	 *
	 * The dropdown panel remains positioned against .nd-site-header,
	 * so centring the button does not change panel width or placement.
	 */
	.nd-site-header .nd-navigation__toggle {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.nd-site-header__actions {
		grid-column: 3;
		justify-self: end;
		display: flex;
	}
}