/*
 * Site menus are Floom menus (Floom > Menus), placed by the floom/menu block in the header, footer, legal pages and
 * terms pages. Floom's own menu.css lays them out and runs the phone menu; this file gives them THE CUBE's look.
 * Loaded after Floom's styles (and its per-breakpoint phone styles), so equal specificity is enough to win.
 */

/* ---- Header: pill links, gold VIP ---- */
.cube-header > .cube-main-menu {
	margin-inline-start: auto;
	font-size: 15px;
	font-weight: 500;
}
.cube-header .cube-main-menu .fcore-menu__list {
	gap: 12px;
}
.cube-header .cube-main-menu .fcore-menu__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 10px 18px;
	border: 1px solid #fbfdfd80;
	border-radius: 999px;
	background: #06070a47;
	color: #fbfdfd;
	font: 600 13px/1.6 var(--wp--preset--font-family--ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .25s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.cube-header .cube-main-menu .fcore-menu__link:hover {
	color: #fbfdfd;
	filter: brightness(1.12);
	transform: translateY(-2px);
}
.cube-header .cube-main-menu .fcore-menu__list > .fcore-menu__item.is-current > .fcore-menu__link {
	color: #fbfdfd;
	font-weight: 600;
	text-decoration: none;
}
.cube-header .cube-main-menu .cube-menu-vip > .fcore-menu__link {
	background: radial-gradient(ellipse at 10% 15%, #f3d58a70, transparent 65%), radial-gradient(ellipse at 95% 100%, #b9822475, transparent 65%), linear-gradient(125deg, #60451e, #17130e 58%, #443017);
	border-color: #d9b36c99;
}

/* Floom's focus ring uses the text colour; keep the site's. */
.fcore-menu :is(.fcore-menu__link, .fcore-menu__toggle, .fcore-menu__close):focus-visible {
	outline: 2px solid #13c6de;
	outline-offset: 4px;
}
.cube-header .fcore-menu :is(.fcore-menu__link, .fcore-menu__toggle, .fcore-menu__close):focus-visible {
	outline-offset: 2px;
}

/* ---- Header on tablets and phones: a MENU pill opening a full-screen menu ---- */
@media (max-width: 1000px) {
	.cube-header > .cube-main-menu {
		order: 3;
		margin-inline-start: 0;
	}
	.cube-header > .cube-booking-link {
		margin-left: auto;
	}
	/* The pill shows before Floom's script runs, and the list stays hidden, so the header never jumps on load. */
	.cube-header .cube-main-menu .fcore-menu__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 18px;
		border: 1px solid #3a4150;
		border-radius: 999px;
		background: none;
		color: #fbfdfd;
		font: 400 14px var(--wp--preset--font-family--ui);
		letter-spacing: .12em;
		text-transform: uppercase;
	}
	.cube-header .cube-main-menu .fcore-menu__toggle-icon {
		display: none;
	}
	.cube-header .cube-main-menu:not(.is-ready) .fcore-menu__drawer {
		display: none;
	}
	.cube-header .cube-main-menu.is-ready .fcore-menu__drawer {
		justify-content: center;
		align-items: center;
		padding: 0;
		background: #06070a;
		color: #fbfdfd;
	}
	.cube-header .cube-main-menu.is-ready .fcore-menu__drawer-head {
		position: absolute;
		top: 22px;
		right: 22px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}
	.cube-header .cube-main-menu .fcore-menu__drawer-title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.cube-header .cube-main-menu .fcore-menu__close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		min-width: 0;
		min-height: 0;
		padding: 0;
		border: 1px solid #fbfdfd4d;
		border-radius: 999px;
		background: #06070a8c;
		color: #fbfdfd;
		backdrop-filter: blur(8px);
	}
	.cube-header .cube-main-menu .fcore-menu__close svg {
		width: 14px;
		height: 14px;
	}
	.cube-header .cube-main-menu .fcore-menu__list {
		flex: none;
		align-items: center;
		gap: 22px;
		width: 100%;
	}
	.cube-header .cube-main-menu .fcore-menu__item {
		justify-content: center;
		width: auto;
	}
	.cube-header .cube-main-menu .fcore-menu__item > .fcore-menu__link {
		flex: none;
		justify-content: center;
		min-height: 48px;
		padding: 10px 26px;
		font-size: 17px;
		text-align: center;
	}
}
@media (max-width: 380px) {
	.cube-header .cube-main-menu .fcore-menu__toggle {
		padding-inline: 12px;
	}
}

/* ---- Footer: top row, social links, legal row ---- */
.cube-footer .fcore-menu {
	color: inherit;
}
/* Floom links take their colour from the menu; these are the colours the footer's links had before. */
.cube-footer .fcore-menu__link {
	padding: 0;
	border-radius: 0;
	color: #bcc1cc;
}
.cube-footer .cube-social-menu .fcore-menu__link {
	color: #9ba0ae;
}
.cube-footer .fcore-menu .fcore-menu__link:hover {
	color: #fff;
}
.cube-footer-top > .cube-footer-menu,
.cube-footer-middle > .cube-social-menu {
	margin-inline-start: auto;
}
.cube-footer-menu {
	font: 500 15px/1.6 var(--wp--preset--font-family--ui);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.cube-footer-menu .fcore-menu__list {
	gap: 24px;
}
.cube-social-menu,
.cube-legal-menu {
	font: 400 14px/1.6 var(--wp--preset--font-family--copy);
	color: #9ba0ae;
}
.cube-social-menu .fcore-menu__list,
.cube-legal-menu .fcore-menu__list {
	gap: 8px 20px;
}
.cube-social-menu .fcore-menu__link,
.cube-legal-menu .fcore-menu__link {
	text-decoration: underline;
}
.cube-footer .fcore-menu__list > .fcore-menu__item.is-current > .fcore-menu__link {
	color: #bcc1cc;
	text-decoration-thickness: auto;
	text-underline-offset: .2em;
}
.cube-footer-menu .fcore-menu__list > .fcore-menu__item.is-current > .fcore-menu__link {
	text-decoration: none;
}
@media (max-width: 760px) {
	.cube-footer-top > .cube-footer-menu,
	.cube-footer-middle > .cube-social-menu {
		margin-inline-start: 0;
	}
}
@media (max-width: 640px) {
	.cube-footer-middle > .cube-social-menu {
		flex-basis: 100%;
	}
}

/* ---- Legal pages: the side menu ---- */
.cube-legal-side-menu .fcore-menu__list {
	display: grid;
	gap: 6px;
	font: 500 15px/1.6 var(--wp--preset--font-family--ui);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.cube-legal-side-menu .fcore-menu__item > .fcore-menu__link {
	flex: none;
	padding: 8px 0;
	border-radius: 0;
	color: #bcc1cc;
}
.cube-legal-side-menu .fcore-menu__link:hover,
.cube-legal-side-menu .fcore-menu__list > .fcore-menu__item.is-current > .fcore-menu__link {
	color: #bcc1cc;
	font-weight: inherit;
}

/* ---- Terms pages: the United Kingdom / United States switch ---- */
.cube-terms-region .cube-chip-row .fcore-menu__list {
	gap: 12px;
}
.cube-terms-region .cube-chip-row .fcore-menu__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid #fbfdfd80;
	border-radius: 999px;
	background: #06070a47;
	color: #bcc1cc;
	font: 600 13px/1.6 var(--wp--preset--font-family--ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease;
}
.cube-terms-region .cube-chip-row .fcore-menu__link:hover,
.cube-terms-region .cube-chip-row .fcore-menu__list > .fcore-menu__item.is-current > .fcore-menu__link {
	background: #fbfdfd;
	border-color: #fbfdfd;
	color: #06070a;
	text-decoration: none;
}
.cube-terms-region .cube-chip-row .fcore-menu__link:focus-visible {
	outline: 2px solid #ff6b8a;
	outline-offset: 3px;
}
