/* ==========================================================
   Visit Bedford - Explore Navigation
   ========================================================== */

.vb-explore-navigation {
	position: relative;
}


/* ----------------------------------------------------------
   Explore Toggle
   ---------------------------------------------------------- */

.vb-explore-toggle {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.vb-explore-toggle-icon {
	margin-left: auto;
	font-size: 13px !important;
	color: var(--vb-muted) !important;
	transition: transform .2s ease;
}

.vb-explore-navigation.is-open .vb-explore-toggle-icon {
	transform: rotate(180deg);
}


/* ----------------------------------------------------------
   Explore Panel
   ---------------------------------------------------------- */

.vb-explore-panel {
	padding: 4px 0 8px;
}

.vb-explore-view[hidden] {
	display: none;
}


/* ----------------------------------------------------------
   View Heading
   ---------------------------------------------------------- */

.vb-explore-view-title {
	padding: 10px 14px 7px;

	color: var(--vb-text);

	font-size: 13px;
	font-weight: 700;

	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
}


/* ----------------------------------------------------------
   Back Button
   ---------------------------------------------------------- */

.vb-explore-back {
	display: flex;
	align-items: center;
	gap: 8px;

	width: 100%;
	min-height: 34px;

	padding: 4px 14px;

	border: 0;
	border-radius: 8px;

	background: transparent;

	color: var(--vb-muted);

	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;

	text-align: left;
	text-decoration: none;

	cursor: pointer;

	transition:
		background-color .2s ease,
		color .2s ease;
}

.vb-explore-back:hover {
	background: #f1f6fb;
	color: var(--vb-primary);
}

.vb-explore-back i {
	flex: 0 0 auto;

	font-size: 12px;
}


/* ----------------------------------------------------------
   Category Items
   ---------------------------------------------------------- */

.vb-explore-item {
	display: flex;
	align-items: center;

	width: 100%;
	min-height: 40px;

	padding: 6px 14px;

	border: 0;
	border-radius: 9px;

	background: transparent;

	color: var(--vb-text);

	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;

	text-align: left;
	text-decoration: none;
	text-transform: none;

	cursor: pointer;

	box-sizing: border-box;

	transition:
		background-color .2s ease,
		color .2s ease;
}

.vb-explore-item:hover {
	background: #f1f6fb;
	color: var(--vb-primary);
	text-decoration: none;
}


/* ----------------------------------------------------------
   Category Icon
   ---------------------------------------------------------- */

.vb-explore-item-icon {
	flex: 0 0 22px;

	width: 22px;

	margin-right: 10px;

	color: var(--vb-muted);

	font-size: 15px;

	text-align: center;

	transition: color .2s ease;
}

.vb-explore-item:hover .vb-explore-item-icon {
	color: var(--vb-primary);
}


/* ----------------------------------------------------------
   Category Text
   ---------------------------------------------------------- */

.vb-explore-item-label {
	flex: 1;

	min-width: 0;

	color: inherit;

	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}


/* ----------------------------------------------------------
   Category Arrow
   ---------------------------------------------------------- */

.vb-explore-item > .fa-chevron-right {
	flex: 0 0 auto;

	margin-left: 8px;

	color: var(--vb-muted);

	font-size: 10px;

	transition:
		color .2s ease,
		transform .2s ease;
}

.vb-explore-item:hover > .fa-chevron-right {
	color: var(--vb-primary);
	transform: translateX(2px);
}


/* ----------------------------------------------------------
   Cuisine Section
   ---------------------------------------------------------- */

.vb-explore-section-label {
	padding: 16px 14px 6px;

	color: var(--vb-muted);

	font-size: 11px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.3;
}

.vb-explore-item-cuisine {
	min-height: 36px;

	font-size: 14px;
}


/* ----------------------------------------------------------
   Open / Active State
   ---------------------------------------------------------- */

.vb-explore-navigation.is-open .vb-explore-toggle {
	color: var(--vb-primary);
}

.vb-explore-navigation.is-open .vb-explore-toggle i:first-child {
	color: var(--vb-primary);
}


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

@media (max-width: 900px) {

	.vb-explore-panel {
		display: none;
	}

}