/* ==================================================

	Site header

	@related stacking_order

================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);

	height: var(--header-h);

	border-bottom: var(--border-w) solid var(--color-border-card);
	background-color: var(--color-bg-surface);
}

.site-header__inner {
	display: flex;
	align-items: flex-start;

	height: 100%;
}

/* -------------------------------------
	=Logo
------------------------------------- */

:root {
	--logo-color-bg: var(--blue);
	--logo-color-fg: var(--white);
}

.site-header__logo {
	position: relative;
	flex: 0 0 31px;

	width:  31px;
	height: 31px;
	margin-top: 2.5px;
	transform: translateX(0px);
	transform-origin: left top;

	border-radius: var(--radius-logo);
	color: var(--logo-color-fg);
}

/* pin the svg box: global svg height:auto would rederive height from the 36x35 ratio and collapse the letterboxing the margin-tops offset */
.site-header__logo svg {
	width: 31px;
	height: 35px;
}

.site-header__logo-mark {
	position: absolute;
	top: 3px;
	left: -4px;

	width: 35px;
	height: 31px;
}

/* -------------------------------------

	=Search box

------------------------------------- */

.site-header__search {
	position: relative;
	flex: 0 0 329px;

	height: 30.5px;
	margin-top: 5px;
	margin-left: 8px;
	/* padding-top: 0px; */
}

.site-header__search-icon {
	position: absolute;
	top: 10px;
	left: 12.5px;

	width: 14px;
	height: 12.5px;
	transform: scale(1.11) translateX(-1px);

	color: var(--color-fg-default);
}

.site-header__search-field {
	height: 100%;
	padding-left: 36px;

	border: var(--border-w) solid var(--color-border-field);
	border-radius: var(--radius-pill);

	font-size: var(--text-search);

	background-color: var(--color-bg-surface);
	color: var(--gray-mid);
}

/* -------------------------------------
	=Nav
------------------------------------- */

.site-nav {
	display: flex;
	align-items: flex-start;
	gap: 35px;

	height: 100%;
	margin-left: auto;
}

.site-nav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;

	height: 100%;

	color: var(--color-fg-muted);
}

.site-nav__item:not([aria-pressed="true"]):hover {
	filter: brightness(.9);
}

  .has-skin-deel .site-nav__item:not([aria-pressed="true"]):hover,
.has-skin-bombay .site-nav__item:not([aria-pressed="true"]):hover {
	filter: brightness(1.07);
}

.site-nav__icon-well {
	display: flex;
	align-items: flex-end;

	height: 24.5px;
}

.site-nav__item--home {
	transform: translateX(-2px);
}

.site-nav__label {
	margin-top: 1.5px;

	font-size:      var(--text-nav);
	font-weight:    var(--font-weight-medium);
	line-height:    1.2;
	letter-spacing: var(--tracking-nav);
	white-space: nowrap;
}

.site-nav__item--home          .site-nav__icon { width: 20px; height: 17.5px; }
.site-nav__item--network       .site-nav__icon { width: 17px; height: 19px; }
.site-nav__item--jobs          .site-nav__icon { width: 18.5px; height: 16.5px; }
.site-nav__item--messaging     .site-nav__icon { width: 20px; height: 16.5px; }
.site-nav__item--notifications .site-nav__icon { width: 18.5px; height: 18.5px; }

/* -------------------------------------
	=Active nav item
------------------------------------- */

.site-nav__item.is-active,
.site-nav__item[aria-pressed="true"] {
	color: var(--color-fg-default);
}

/* -------------------------------------
	=Mobile

	`position: sticky` creates a stacking context regardless of z-index, so the header goes static here to let the fixed nav escape it.

	@related stacking_order
------------------------------------- */

@media ( max-width: 1076px ) {

	.site-header {
		position: static;
		z-index: auto;

		height: var(--header-h-mobile);
	}

	.site-header__inner {
		padding-inline: 17px 15.5px;
	}

	.site-header__logo {
		flex: 0 0 25.25px;

		width:  25.25px;
		height: 25.25px;
		margin-top: 2.75px;
	}

	.site-header__logo svg {
		width: 25.25px;
	}

	.site-header__search {
		flex: 1 1 auto;

		height: 25.25px;
		margin-top: 7.5px;
		margin-left: 10px;
	}

	.site-header__search-icon {
		top: 7px;
		left: 9.5px;

		width:  11.25px;
		height: 10px;
	}

	.site-header__search-field {
		width: 100%;
		padding-left: 31px;

		font-size: 11px;
	}

	.site-nav {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--z-nav-mobile);

		align-items: center;
		justify-content: space-between;
		gap: 0;

		width: 100%;
		/* max-width: var(--mobile-col-w); */
		height: var(--nav-h-mobile);
		margin-inline: auto;
		padding-inline: 19.5px;

		border-top: var(--border-w) solid var(--color-border-card);
		background-color: var(--color-bg-surface);
	}

	.site-nav__item {
		justify-content: flex-end;

		height: auto;
	}

	.site-nav__item--home {
		transform: none;
	}

	.site-nav__icon-well {
		height: 17.5px;
	}

	.site-nav__label {
		margin-top: 1.5px;

		font-size:      9px;
		letter-spacing: 0.18px;
	}

	.site-nav__item--home          .site-nav__icon { width: 18.25px; height: 16px; }
	.site-nav__item--network       .site-nav__icon { width: 15.5px; height: 17.25px; }
	.site-nav__item--jobs          .site-nav__icon { width: 16.5px; height: 15px; }
	.site-nav__item--messaging     .site-nav__icon { width: 18.25px; height: 15px; }
	.site-nav__item--notifications .site-nav__icon { width: 16.75px; height: 16.75px; }

	.site-main {
		padding-bottom: var(--nav-h-mobile);
		/* padding-top: 20px; */
		/* padding-left:  17px;
		padding-right: 17px; */
	}

}