/*
 * Navigation: header menu (ivory links, gold underline, "Book" outline link,
 * FR / EN switcher), footer menus and the mobile overlay.
 *
 * Add the class "is-book-link" to a menu item (Block settings > Advanced) to
 * show it as the gold booking button.
 */

/* Shared ------------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.wp-block-navigation .lang-item .wp-block-navigation-item__content {
	font-weight: 400;
	text-transform: uppercase;
}

/* Header ------------------------------------------------------------------ */

.site-header .wp-block-navigation {
	--brillancourt-nav-gap: 1.25rem;
	font-weight: 600;
}

.site-header .wp-block-navigation__container {
	gap: var(--brillancourt-nav-gap);
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	white-space: nowrap;
}

.site-header .wp-block-navigation-item:not(.lang-item, .is-book-link) > .wp-block-navigation-item__content {
	position: relative;
}

/* Current page: a small gold diamond under the link. */
.site-header .current-menu-item:not(.lang-item, .is-book-link) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--accent);
	transform: translateX(-50%) rotate(45deg);
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .lang-item.current-lang > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.site-header .wp-block-navigation .lang-item:not(.current-lang) > .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
}

.site-header .wp-block-navigation .lang-item:not(.current-lang) > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* "FR / EN": tight spacing and a slash between languages. */
.wp-block-navigation .lang-item + .lang-item {
	margin-left: calc(0.25rem - var(--brillancourt-nav-gap, 1.25rem));
}

.wp-block-navigation .lang-item + .lang-item::before {
	content: "/";
	content: "/" / "";
	margin-right: 0.25rem;
	color: var(--wp--preset--color--accent);
	font-weight: 400;
}

/* Booking link, drawn as a gold outline button. */
.site-header .wp-block-navigation .is-book-link > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.site-header .wp-block-navigation .is-book-link > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--dark);
}

.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--accent);
}

/* Desktop: links centred between the logo and the language switcher, booking link on the right. */
@media (min-width: 1024px) {
	.site-header .wp-block-navigation {
		--brillancourt-nav-gap: 0.75rem;
		flex: 1 1 auto;
		font-size: 14px;
	}

	.site-header .wp-block-navigation__container > :first-child {
		margin-left: auto;
	}

	.site-header .wp-block-navigation__responsive-container,
	.site-header .wp-block-navigation__responsive-container-content,
	.site-header .wp-block-navigation__container {
		width: 100%;
	}

	.site-header .wp-block-navigation__container {
		padding-left: 1rem;
	}

	/* The language switcher (or the booking link, when no switcher is active) starts the right-hand group. */
	.site-header .wp-block-navigation__container > :not(.lang-item) + .lang-item,
	.site-header .wp-block-navigation__container > :not(.lang-item, .is-book-link) + .is-book-link {
		margin-left: auto;
	}

	.site-header .wp-block-navigation__container > :not(.lang-item) + .lang-item::before,
	.site-header .wp-block-navigation__container > .lang-item:has(+ :not(.lang-item))::after {
		content: "";
		width: 1px;
		height: 1.25rem;
		background: var(--wp--preset--color--accent);
	}

	.site-header .wp-block-navigation__container > :not(.lang-item) + .lang-item::before {
		margin-right: 0.75rem;
	}

	.site-header .wp-block-navigation__container > .lang-item:has(+ :not(.lang-item))::after {
		margin-left: 0.75rem;
	}
}

@media (min-width: 1280px) {
	.site-header .wp-block-navigation {
		--brillancourt-nav-gap: 1.5rem;
		font-size: 15px;
	}

	.site-header .wp-block-navigation__container {
		padding-left: 2rem;
	}
}

/*
 * Core switches to the hamburger below 600px; the header needs it below 1024px
 * (seven links, languages and the booking link do not fit on tablets).
 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

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

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1rem clamp(1.25rem, 4vw, 2rem) 2rem;
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 3.5rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	flex-flow: row wrap;
	align-items: center;
	gap: 0;
	width: 100%;
	padding: 0;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.lang-item) {
	flex: 0 0 100%;
	padding-block: 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .lang-item {
	flex-direction: row;
	align-items: center;
	padding-block: 1rem;
	margin-left: 0;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .lang-item + .lang-item {
	margin-left: 0.25rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .is-book-link {
	margin-top: 1rem;
	padding: 0;
	border-bottom: 0;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .is-book-link > .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.75rem 1rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.lang-item, .is-book-link) > .wp-block-navigation-item__content::after {
	content: none;
}

/* Footer ------------------------------------------------------------------ */

.site-footer .wp-block-navigation {
	--brillancourt-nav-gap: 0.5rem;
	font-weight: 400;
	line-height: 1.6;
}

.site-footer .wp-block-navigation__container {
	gap: var(--brillancourt-nav-gap);
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-footer .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-footer .wp-block-navigation .lang-item.current-lang > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.site-footer .wp-block-navigation .lang-item + .lang-item::before {
	color: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
}
