.subnav .link a {
	text-decoration: none;
	color: var(--black, #000);
	font: var(--font-button-19);
	padding: 0 20px;
	font-weight: var(--font-weight-bold);
	display: flex;
	align-items: center;
	height: 40px;
}

.subnav .link a,
.subnav .link a:visited,
.subnav .link a:active,
.subnav .link a:focus,
.subnav .link a:hover {
	text-decoration: none;
}

.subnav .link a:hover,
.subnav .link a:focus,
.subnav .link a.active {
	background: var(--white, #fff);
	color: var(--medium-teal, #007981);
	text-decoration: underline;
}


.subnav {
	box-sizing: border-box;
	align-items: stretch;
	display: flex;
	flex-direction: row;
	background: var(--silver, #d0d4d9);
	padding: 0 calc((var(--col24-2) - 20px));
}

@media (width >= 1200px) {
	.subnav {
		flex-direction: row;
		display: flex;
	}

	.subnav-header {
		display: none;
	}
}

@media (width <= 1199px) {
	.subnav {
		flex-direction: column;
		position: relative;
		background: var(--platinum, #f2f0f1);
		width: 100%;
		padding: 0;
		transition: max-height 0.3s ease;
		max-height: 56px;

		/* collapsed height, adjust as needed */
		overflow: hidden;
	}

	.subnav.open {
		max-height: 1000px;

		/* large enough to show all links */
		overflow: visible;
	}

	.subnav .link {
		width: 100%;
		border-bottom: 1px solid var(--platinum, #f2f0f1);
		display: none;
	}

	.subnav.open .link {
		display: block;
	}

	.subnav .link a {
		width: 100%;
		display: block;
		padding: 12px 30px;
		box-sizing: border-box;
	}

	.subnav-header {
		display: flex;
		align-items: center;
		width: 100%;
		background: var(--silver, #d0d4d9);
		padding: 10px 20px;
		box-sizing: border-box;
		cursor: pointer;
		z-index: 1;
	}

	.subnav-label {
		font: var(--font-16-24);
		font-weight: var(--font-weight-bold);
		color: var(--black, #000);
		padding-left: 0;
	}

	.subnav-caret {
		margin-left: auto;
		font-size: 1.5em;
		cursor: pointer;
		transition: transform 0.2s;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.subnav-caret img {
		width: 24px;
		height: 24px;
		color: var(--black, #000);
	}
}


@media (width <= 425px) {
	.subnav-caret img {
		width: 20px;
		height: 20px;
	}
}