/* Custom Features – Clio Navigation. Every value comes from a widget variable; the phone layout is printed by the widget for its own breakpoint. */
.clcf-nav {
	display: flex;
	align-items: center;
}
.clcf-nav .clcf-nav__list {
	display: flex;
	align-items: center;
	gap: var(--clcf-gap, 40px);
}

/* links */
.clcf-nav .clcf-nav__link {
	--clcf-now: var(--clcf-l-c);
	--clcf-now-h: var(--clcf-l-ch, var(--clcf-l-c));
	--clcf-now-a: var(--clcf-l-ca, var(--clcf-l-c));
	position: relative;
	display: block;
	font-family: var(--clcf-l-ff), sans-serif;
	font-size: var(--clcf-l-fs);
	font-weight: var(--clcf-l-fw);
	font-style: var(--clcf-l-fst, normal);
	text-transform: var(--clcf-l-tt, none);
	text-decoration: var(--clcf-l-td, none);
	line-height: var(--clcf-l-lh);
	letter-spacing: var(--clcf-l-ls, normal);
	word-spacing: var(--clcf-l-ws, normal);
	color: var(--clcf-now);
	transition: color var(--clcf-l-speed, .2s) cubic-bezier(.2, .8, .2, 1), opacity var(--clcf-l-speed, .2s) cubic-bezier(.2, .8, .2, 1);
}
.clcf-nav .clcf-nav__link:hover,
.clcf-nav .clcf-nav__link:focus-visible {
	color: var(--clcf-now-h);
}
.clcf-nav .clcf-nav__link.is-active {
	color: var(--clcf-now-a);
}
.clcf-scrolled .clcf-nav .clcf-nav__link {
	--clcf-now: var(--clcf-l-c-s);
	--clcf-now-h: var(--clcf-l-ch-s, var(--clcf-l-c-s));
	--clcf-now-a: var(--clcf-l-ca-s, var(--clcf-l-c-s));
}

/* underline drawn on hover, kept on the current page */
.clcf-ul-yes .clcf-nav .clcf-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: calc(var(--clcf-ul-off, 6px) * -1);
	width: 0;
	height: var(--clcf-ul-h, 1px);
	background: currentColor;
	transition: width var(--clcf-ul-speed, .3s) cubic-bezier(.2, .8, .2, 1);
}
.clcf-ul-yes .clcf-nav .clcf-nav__link:hover::after,
.clcf-ul-yes .clcf-nav .clcf-nav__link.is-active::after {
	width: 100%;
}

/* booking button */
.clcf-nav .clcf-nav__cta {
	--clcf-l-ff: var(--clcf-b-ff);
	--clcf-l-fs: var(--clcf-b-fs);
	--clcf-l-fw: var(--clcf-b-fw);
	--clcf-l-fst: var(--clcf-b-fst);
	--clcf-l-tt: var(--clcf-b-tt);
	--clcf-l-td: var(--clcf-b-td);
	--clcf-l-lh: var(--clcf-b-lh);
	--clcf-l-ls: var(--clcf-b-ls);
	--clcf-l-ws: var(--clcf-b-ws);
	--clcf-b-now-pad: var(--clcf-b-pad);
	--clcf-b-now-c: var(--clcf-b-c);
	--clcf-b-now-bg: var(--clcf-b-bg);
	--clcf-b-now-bd: var(--clcf-b-bd);
	--clcf-b-now-c-h: var(--clcf-b-c-h);
	--clcf-b-now-bg-h: var(--clcf-b-bg-h);
	--clcf-b-now-bd-h: var(--clcf-b-bd-h);
	padding: var(--clcf-b-now-pad);
	border: var(--clcf-b-bw, 1px) solid var(--clcf-b-now-bd);
	border-radius: var(--clcf-b-r, 999px);
	background: var(--clcf-b-now-bg);
	color: var(--clcf-b-now-c);
	transition: all var(--clcf-b-speed, .3s) cubic-bezier(.2, .8, .2, 1);
}
.clcf-scrolled .clcf-nav .clcf-nav__cta {
	--clcf-b-now-c: var(--clcf-b-c-s);
	--clcf-b-now-bg: var(--clcf-b-bg-s);
	--clcf-b-now-bd: var(--clcf-b-bd-s);
	--clcf-b-now-c-h: var(--clcf-b-c-h-s);
	--clcf-b-now-bg-h: var(--clcf-b-bg-h-s);
	--clcf-b-now-bd-h: var(--clcf-b-bd-h-s);
}
.clcf-nav .clcf-nav__cta:hover,
.clcf-nav .clcf-nav__cta:focus-visible {
	background: var(--clcf-b-now-bg-h);
	border-color: var(--clcf-b-now-bd-h);
	color: var(--clcf-b-now-c-h);
	transform: translateY(calc(var(--clcf-b-lift, 1px) * -1));
}
.clcf-nav .clcf-nav__cta::after {
	display: none !important;
}

/* burger (shown by the widget's own breakpoint) */
.clcf-nav .clcf-nav__toggle {
	display: none;
	position: relative;
	z-index: 110;
	width: var(--clcf-t-size, 44px);
	height: var(--clcf-t-size, 44px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	--clcf-t-now: var(--clcf-t-c);
}
.clcf-nav .clcf-nav__toggle:hover,
.clcf-nav .clcf-nav__toggle:focus {
	border: 0;
	background: none;
	box-shadow: none;
}
.clcf-scrolled .clcf-nav .clcf-nav__toggle {
	--clcf-t-now: var(--clcf-t-c-s);
}
.clcf-nav.is-open .clcf-nav__toggle {
	--clcf-t-now: var(--clcf-t-c-o);
}
.clcf-nav .clcf-nav__toggle span {
	position: absolute;
	left: var(--clcf-t-inset, 10px);
	right: var(--clcf-t-inset, 10px);
	top: calc(var(--clcf-t-size, 44px) / 2);
	height: var(--clcf-t-thick, 1px);
	background: var(--clcf-t-now);
	transition: all .3s cubic-bezier(.2, .8, .2, 1);
}
.clcf-nav .clcf-nav__toggle span:nth-child(1) {
	top: calc(var(--clcf-t-size, 44px) / 2 - var(--clcf-t-space, 6px));
}
.clcf-nav .clcf-nav__toggle span:nth-child(3) {
	top: calc(var(--clcf-t-size, 44px) / 2 + var(--clcf-t-space, 6px));
}
.clcf-nav.is-open .clcf-nav__toggle span:nth-child(1) {
	top: calc(var(--clcf-t-size, 44px) / 2);
	transform: rotate(45deg);
}
.clcf-nav.is-open .clcf-nav__toggle span:nth-child(2) {
	opacity: 0;
}
.clcf-nav.is-open .clcf-nav__toggle span:nth-child(3) {
	top: calc(var(--clcf-t-size, 44px) / 2);
	transform: rotate(-45deg);
}