/**
 * BayFirst navigation visual styles.
 * Typography is controlled via block settings (CSS custom properties on .bf-nav).
 */

.bf-nav .bf-nav__link--top {
	font-family: var(--bf-nav-l1-font-family, inherit);
	font-size: var(--bf-nav-l1-font-size, 1.3rem);
	font-weight: var(--bf-nav-l1-font-weight, 700);
	color: var(--bf-nav-l1-color, #02461b);
	background-color: #fff;
	border-bottom: 2px solid var(--bf-nav-accent-color, #ff8400);
	line-height: 1em;
	padding: 5px;
	margin-top: 10px;
	text-decoration: none;
}

.bf-nav .bf-nav__link--top:hover,
.bf-nav .bf-nav__link--top:focus {
	color: var(--bf-nav-l1-hover-color, var(--bf-nav-l1-color, #02461b));
}

.bf-nav .bf-nav__column-header {
	font-family: var(--bf-nav-l2-font-family, inherit);
	font-size: var(--bf-nav-l2-font-size, 1.1rem);
	font-weight: var(--bf-nav-l2-font-weight, 700);
	color: var(--bf-nav-l2-color, #02461b);
	padding: 0.35rem 0.95rem;
	text-decoration: none;
}

.bf-nav .bf-nav__column-header:hover,
.bf-nav .bf-nav__column-header:focus {
	color: var(--bf-nav-l2-hover-color, var(--bf-nav-l2-color, #02461b));
}

.bf-nav .bf-nav__link--panel {
	font-family: var(--bf-nav-l3-font-family, inherit);
	font-size: var(--bf-nav-l3-font-size, 1.125rem);
	font-weight: var(--bf-nav-l3-font-weight, 400);
	color: var(--bf-nav-l3-color, #4a4f55);
	text-decoration: underline;
	line-height: 1.3;
	padding: 0.25rem 1.25rem;
}

.bf-nav .bf-nav__link--panel:hover,
.bf-nav .bf-nav__link--panel:focus {
	color: var(--bf-nav-l3-hover-color, var(--bf-nav-l3-color, #4a4f55));
	background-color: var(--bf-nav-l1-color, #02461c);
	text-decoration: none;
}

.bf-nav .bf-nav__subheading {
	font-family: var(--bf-nav-l4-font-family, inherit);
	font-size: var(--bf-nav-l4-font-size, 1rem);
	font-weight: var(--bf-nav-l4-font-weight, 700);
	color: var(--bf-nav-l4-color, #02461b);
}

.bf-nav .bf-nav__panel {
	background: var(--bf-nav-panel-bg, #fafafa);
}

.bf-search .bf-search__toggle {
	border-radius: 4px;
	color: var(--bf-nav-l1-color, #02461b);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
}

.bf-search .bf-search__panel {
	background: var(--bf-nav-panel-bg, #fafafa);
}

.bf-search .bf-search__input {
	border: 1px solid #02461b !important;
	border-radius: 0 !important;
}

.bf-search .bf-search__input:focus {
	outline: 2px solid #4a8f63;
	outline-offset: 1px;
}

.bf-search .bf-search__submit {
	background: var(--bf-olb-button-bg, #02461c);
	border-radius: 4px;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400 !important;
	text-transform: uppercase;
}

.bf-olb .bf-olb__button {
	position: relative;
	border: 0;
	border-radius: 4px;
	background: var(--bf-olb-button-bg, #02461c);
	color: #fff;
	font-family: var(--bf-nav-l1-font-family, Metropolis, sans-serif);
	font-size: 20.8px;
	font-weight: 700;
}

.bf-olb .bf-olb__button::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 4px;
	height: 2px;
	background: var(--bf-nav-accent-color, #ff8400);
}

.bf-olb .bf-olb__links a {
	color: var(--bf-nav-l1-color, #02461c);
}

.bf-olb .bf-olb__panel {
	background: var(--bf-nav-panel-bg, #fafafa);
}

.bf-olb .bf-olb__submit {
	background: var(--bf-olb-button-bg, #02461c) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 4px;
	font-family: "Open Sans", sans-serif !important;
	font-size: 16px;
	font-weight: 400 !important;
	text-transform: uppercase;
	padding: 14px 34px;
}

.bf-olb .bf-olb__form--compact .bf-olb__submit {
	border-radius: 0 4px 4px 0 !important;
	padding: 0.5rem 1rem;
}

.bf-olb .bf-olb__input {
	border: 1px solid #02461b !important;
	border-radius: 0 !important;
	background: #fff !important;
}

.bf-olb .bf-olb__drawer-form legend {
	font-family: "Open Sans", sans-serif;
	font-size: 24px;
	font-weight: 700;
	text-align: left;
	color: var(--bf-nav-l1-color, #02461c);
}

.bf-olb .bf-olb__input:focus {
	outline: 2px solid #4a8f63;
	outline-offset: 1px;
}

.bf-olb .bf-olb__enroll {
	border: 0;
	border-radius: 4px;
	background: var(--bf-nav-accent-color, #ff8400);
	color: #fff;
	font-family: "Open Sans", sans-serif !important;
	font-weight: 400 !important;
}

.bf-olb .bf-olb__link-note a {
	color: var(--bf-nav-l1-color, #02461c);
}

@media (min-width: 1200px) {
	.bf-nav .bf-nav__link--top {
		margin: 0 20px;
		padding: 1px 10px;
		line-height: 2rem;
	}

	.bf-nav .bf-nav__link--panel {
		text-decoration: underline;
	}

	.bf-nav .bf-nav__link--panel:hover,
	.bf-nav .bf-nav__link--panel:focus {
		color: var(--bf-nav-l3-hover-color, var(--bf-nav-l3-color, #4a4f55));
		background-color: transparent;
		text-decoration: none;
	}

	.bf-nav .bf-nav__column-header:hover,
	.bf-nav .bf-nav__column-header:focus {
		color: var(--bf-nav-l2-hover-color, var(--bf-nav-l2-color, #02461c));
		background: transparent;
	}
}

@media (max-width: 1199px) {
	.bf-nav .bf-nav__panel {
		background: #fff !important;
	}

	.bf-nav .bf-nav__column-header {
		background: transparent;
		color: var(--bf-nav-l2-color, #02461b);
	}

	.bf-nav .bf-nav__column.is-open > .bf-nav__column-header {
		background: #fafafa;
		color: var(--bf-nav-l2-color, #02461b);
	}

	.bf-nav .bf-nav__column-body {
		border-bottom: 2px solid var(--bf-nav-accent-color, #ff8400);
		padding-bottom: 0.5rem;
		background: #fff;
	}

	.bf-nav .bf-nav__link--panel {
		color: var(--bf-nav-l1-color, #02461b);
		text-decoration: none;
		text-align: left;
	}

	.bf-nav .bf-nav__link--panel:hover,
	.bf-nav .bf-nav__link--panel:focus {
		color: #fff;
		background-color: var(--bf-nav-l1-color, #02461c);
		text-decoration: none;
	}
}