@layer wpsa.modules {
	.wpsa-module--navigation {
		padding-block: var(--wpsa-space-sm);
		border-block-end: 1px solid var(--wpsa-color-border);
	}

	.wpsa-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wpsa-space-md);
		flex-wrap: wrap;
	}

	.wpsa-nav__brand {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		font-weight: 700;
	}

	.wpsa-nav__logo {
		max-height: 2.75rem;
		width: auto;
	}

	.wpsa-nav__menu {
		display: flex;
		align-items: center;
		gap: var(--wpsa-space-md);
	}

	.wpsa-nav__list {
		display: flex;
		align-items: center;
		gap: var(--wpsa-space-md);
		flex-wrap: wrap;
	}

	.wpsa-nav__link {
		text-decoration: none;
		font-weight: 550;
		padding-block: var(--wpsa-space-3xs);
	}

	.wpsa-nav__link:hover {
		color: var(--wpsa-color-accent);
	}

	.wpsa-nav__toggle {
		display: none;
		background: none;
		border: 0;
		padding: var(--wpsa-space-2xs);
		cursor: pointer;
	}

	.wpsa-nav__bars,
	.wpsa-nav__bars::before,
	.wpsa-nav__bars::after {
		display: block;
		width: 1.5rem;
		height: 2px;
		background: currentColor;
		transition: transform var(--wpsa-transition);
	}

	.wpsa-nav__bars::before,
	.wpsa-nav__bars::after {
		content: "";
		position: relative;
	}

	.wpsa-nav__bars::before { top: -6px; }
	.wpsa-nav__bars::after { top: 4px; }

	@media (width < 52rem) {
		.wpsa-nav__toggle {
			display: block;
		}

		.wpsa-nav__menu {
			display: none;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			padding-block: var(--wpsa-space-md);
		}

		.wpsa-nav__menu.is-open {
			display: flex;
		}

		.wpsa-nav__list {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--wpsa-space-sm);
		}
	}
}