@charset "utf-8";

/* --------------------------------------------------------------------------
   Header
-------------------------------------------------------------------------- */

	body > header {

		display: flex;
		height: var(--public-header-height);
		align-items: center;
		gap: var(--space-48);
		box-sizing: border-box;
		padding: var(--space-12) var(--space-56);
		background: var(--color-neutral-white);

		> a {

			display: flex;
			flex: 0 0 auto;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: var(--color-neutral-content-medium-low);
			text-decoration: none;

			img {
				display: block;
			}

			span {
				color: var(--color-brand-content-medium);
				font-size: var(--font-size-body-s);
				font-weight: var(--font-weight-regular);
				line-height: var(--line-height-body-s);
				white-space: nowrap;
				opacity: .4;
			}

		}

		> nav {

			display: flex;
			flex: 1;
			min-width: 0;
			align-items: center;

			a {

				display: inline-flex;
				min-height: 3rem;
				align-items: center;
				box-sizing: border-box;
				padding: var(--space-12);
				color: var(--color-brand-content-medium);
				font-size: var(--font-size-body-m);
				line-height: var(--line-height-body-m);
				text-decoration: none;
				white-space: nowrap;
				transition: color var(--transition-default);

				&:hover, &.selected {
					color: var(--color-brand-primary);
				}

			}

		}

		> div {

			display: flex;
			flex: 0 0 auto;
			align-items: center;
			gap: 2.625rem;

			> button {

				display: flex;
				min-height: 3rem;
				align-items: center;
				gap: var(--space-4);
				box-sizing: border-box;
				padding: var(--space-4);
				color: var(--color-neutral-content-high);
				background: var(--color-brand-surface-low);
				border: 0;
				border-radius: var(--radius-400);
				font: inherit;
				cursor: pointer;
				appearance: none;
				transition: background-color var(--transition-default);

				&:hover {
					background: var(--color-brand-surface-medium);
				}

				span {
					display: flex;
					min-width: 4rem;
					min-height: 2.5rem;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					padding: var(--space-8);
					background: var(--color-neutral-white);
					border-radius: var(--radius-400);
				}

				&::after {
					width: .5rem;
					height: .5rem;
					margin: 0 var(--space-12) 0 var(--space-4);
					border-right: .125rem solid currentColor;
					border-bottom: .125rem solid currentColor;
					opacity: .4;
					content: '';
					transform: rotate(45deg) translateY(-.125rem);
				}

			}

			> div {

				display: flex;
				gap: var(--space-12);

				.button {
					width: 7.5rem;
				}

			}

		}

	}