.bsw-nav.wp-block-group {
	background: #fff;
	border-bottom: 1px solid rgba(140, 133, 123, 0.3);
}

.bsw-nav__inner.wp-block-group {
	max-width: none !important;
	/* 52px at the design width, shrinking through the tablet range so the
	   links + CTA don't overflow between the 767px breakpoint and desktop. */
	padding-inline: clamp(20px, 3vw, 52px);
	min-height: 101px;
	box-sizing: border-box;
}

/* Nav links */
.bsw-nav__links {
	display: flex;
	align-items: center;
}

.bsw-nav__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	/* 60px at the 1728px design width. A plain clamp can't hold 60px at
	   desktop AND shrink enough in the tablet range (60px needs 3.47vw, which
	   is still ~30px at 865 → overflow), so this uses a steeper line
	   (calc) that hits 60px at 1728 and ~12px around 860, flooring at 12px. */
	gap: clamp(12px, calc(5.56vw - 36px), 60px);
	flex-wrap: nowrap;
}

.bsw-nav__links li {
	margin: 0;
	padding: 0;
}

/* Each top-level item is the hover target for its dropdown. The 61px height
   matches the CTA so the whole row shares one baseline and the dropdown hangs
   from a consistent edge. */
.bsw-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	height: 61px;
}

.bsw-nav__link {
	position: relative;
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: 100%;
	color: var(--wp--preset--color--charcoal, #373737);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

/* Blush rule that wipes out from the centre on hover/focus. */
.bsw-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--wp--preset--color--blush, #d7a3ac);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bsw-nav__item:hover > .bsw-nav__link,
.bsw-nav__item:focus-within > .bsw-nav__link {
	color: #aa747c;
}

.bsw-nav__item:hover > .bsw-nav__link::after,
.bsw-nav__item:focus-within > .bsw-nav__link::after {
	transform: scaleX(1);
}

/* Dropdown positioner. The padding-top is the bridge between the link and the
   card — without it the pointer crosses dead space and the card closes. 21px
   lands the card's top border flush against the nav's bottom border: the item
   is 61px centred in the 101px inner (bottom edge at 81px) and the nav border
   ends at 102px. */
.bsw-nav__drop {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	padding-top: 21px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 60;
	/* visibility is a discrete property: a plain `visibility 0.3s` flips it at
	   50% progress, so the card would stay invisible through the first half of
	   its own fade. Zero-duration + a delay defers the flip to hidden until the
	   fade-out ends, while the open rule below applies it instantly. */
	transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s 0.3s;
}

.bsw-nav__item:hover > .bsw-nav__drop,
.bsw-nav__item:focus-within > .bsw-nav__drop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

/* The Venues card is two columns wide, so it aligns to its item rather than
   centring — centred it would run past the nav's left padding line. Every
   other card centres; verified that even the widest (Events) stays inside the
   viewport down to ~820px. */
.bsw-nav__drop--left {
	left: 0;
	transform: translateX(0) translateY(10px);
}

.bsw-nav__item:hover > .bsw-nav__drop--left,
.bsw-nav__item:focus-within > .bsw-nav__drop--left {
	transform: translateX(0) translateY(0);
}

.bsw-nav__card {
	background: #fff;
	border-top: 2px solid var(--wp--preset--color--blush, #d7a3ac);
	border-radius: 0;
	box-shadow: 0 6px 14px rgba(85, 75, 75, 0.16);
	padding: 26px 30px;
}

.bsw-nav__cols {
	display: flex;
	gap: 48px;
}

.bsw-nav__col {
	display: flex;
	flex-direction: column;
}

.bsw-nav__cat {
	display: block;
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant', serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #aa747c;
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 6px;
	margin-bottom: 6px;
	transition: color 0.22s ease;
}

.bsw-nav__cat:hover {
	color: #8c5d65;
}

.bsw-nav__sublink {
	display: block;
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 16px;
	line-height: 1.35;
	color: var(--wp--preset--color--charcoal, #373737);
	text-decoration: none;
	white-space: nowrap;
	padding: 9px 0;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s ease, transform 0.35s ease, color 0.22s ease;
}

.bsw-nav__item:hover .bsw-nav__sublink,
.bsw-nav__item:focus-within .bsw-nav__sublink {
	opacity: 1;
	transform: translateY(0);
}

.bsw-nav__sublink:hover {
	color: #aa747c;
}

/* Links stagger in behind the card. Six steps covers the longest menu. */
.bsw-nav__item:hover .bsw-nav__sublink:nth-child(1),
.bsw-nav__item:focus-within .bsw-nav__sublink:nth-child(1) { transition-delay: 0.04s; }
.bsw-nav__item:hover .bsw-nav__sublink:nth-child(2),
.bsw-nav__item:focus-within .bsw-nav__sublink:nth-child(2) { transition-delay: 0.08s; }
.bsw-nav__item:hover .bsw-nav__sublink:nth-child(3),
.bsw-nav__item:focus-within .bsw-nav__sublink:nth-child(3) { transition-delay: 0.12s; }
.bsw-nav__item:hover .bsw-nav__sublink:nth-child(4),
.bsw-nav__item:focus-within .bsw-nav__sublink:nth-child(4) { transition-delay: 0.16s; }
.bsw-nav__item:hover .bsw-nav__sublink:nth-child(5),
.bsw-nav__item:focus-within .bsw-nav__sublink:nth-child(5) { transition-delay: 0.20s; }
.bsw-nav__item:hover .bsw-nav__sublink:nth-child(6),
.bsw-nav__item:focus-within .bsw-nav__sublink:nth-child(6) { transition-delay: 0.24s; }

.bsw-nav__sublabel {
	font-style: italic;
	font-size: 13px;
	color: var(--wp--preset--color--taupe, #8c857b);
}

/* Mobile-only link lists and the drawer's footer content are markup carriers,
   not rendered UI — nav-bar.js reads them when it builds the drawer. */
.bsw-nav__mobile-items,
.bsw-nav__drawer-extras {
	display: none !important;
}

/* CTA button */
.bsw-nav__cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	color: #373737 !important;
	background: transparent !important;
	border: 1.5px solid #d7a3ac !important;
	border-radius: 0 !important;
	min-height: 61px;
	/* 198px at desktop, easing to 180px through the tablet range to buy the
	   links a little more room before the 767px breakpoint. */
	min-width: clamp(180px, 11.45vw, 198px);
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bsw-nav__cta .wp-block-button__link:hover {
	background: #d7a3ac !important;
	color: #fff !important;
}

/* Hamburger — hidden on desktop, shown on mobile */
.bsw-nav__hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.bsw-nav__hamburger span {
	display: block;
	width: 28px;
	height: 1.5px;
	background: var(--wp--preset--color--taupe, #8c857b);
}

/* ---------------------------------------------------------------------------
   Mobile drawer. Built by nav-bar.js and appended to <body>, so these rules
   sit outside .bsw-nav and are never nested inside a transformed ancestor.
   --------------------------------------------------------------------------- */

.bsw-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(30, 26, 24, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.bsw-nav-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.bsw-nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 101;
	width: min(88vw, 440px);
	height: 100%;
	background: #fff;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	/* Deferred flip on close, instant on open — see the note on .bsw-nav__drop. */
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s 0.35s;
}

.bsw-nav-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

/* Body scroll lock while the drawer is open. */
body.bsw-nav-locked {
	overflow: hidden;
}

.bsw-nav-drawer__header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 24px 24px 20px;
}

.bsw-nav-drawer__close {
	width: 40px;
	height: 40px;
	border: 0;
	/* Deliberate exception to the site-wide `border-radius: 0` rule — the
	   mobile design draws this one control as a circle. Confirmed against the
	   reference (computed border-radius: 20px). Don't "fix" it back to 0. */
	border-radius: 20px;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(140, 133, 123, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

.bsw-nav-drawer__close:hover {
	box-shadow: inset 0 0 0 1px rgba(140, 133, 123, 0.8);
}

.bsw-nav-drawer__menu {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 24px 32px;
}

.bsw-nav-drawer__item {
	border-bottom: 1px solid rgba(186, 170, 124, 0.4);
	padding: 3px 0;
}

.bsw-nav-drawer__toggle,
.bsw-nav-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 15px;
	background: none;
	border: 0;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant', serif);
	font-size: 22px;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe, #8c857b);
	transition: color 0.2s ease;
}

.bsw-nav-drawer__toggle:hover,
.bsw-nav-drawer__top:hover {
	color: #aa747c;
}

/* Gold chevron, same 22×13 artwork as the FAQ accordions. */
.bsw-nav-drawer__chevron {
	flex-shrink: 0;
	width: 17px;
	height: 11px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13' viewBox='0 0 22 13' fill='none'%3E%3Cpath d='M1 1.5L11 11.5L21 1.5' stroke='%23baaa7c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.25s ease;
}

.bsw-nav-drawer__item.is-open .bsw-nav-drawer__chevron {
	transform: rotate(180deg);
}

/* 0fr → 1fr animates to the content's natural height without measuring it. */
.bsw-nav-drawer__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bsw-nav-drawer__item.is-open .bsw-nav-drawer__panel {
	grid-template-rows: 1fr;
}

/* visibility keeps collapsed links out of the tab order. Transitioning it
   holds the flip until the close animation finishes, but applies instantly
   when opening. */
.bsw-nav-drawer__panel > div {
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s 0.4s;
}

.bsw-nav-drawer__item.is-open .bsw-nav-drawer__panel > div {
	visibility: visible;
	transition: visibility 0s;
}

.bsw-nav-drawer__group {
	padding: 10px 0 20px;
}

.bsw-nav-drawer__cat {
	display: block;
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8e4e58;
	text-decoration: none;
	padding: 18px 8px 0;
}

.bsw-nav-drawer__cat + .bsw-nav-drawer__links {
	padding: 15px 20px 0;
}

.bsw-nav-drawer__cat:not(:first-child) {
	margin-top: 28px;
}

.bsw-nav-drawer__links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 15px 0 20px 18px;
}

.bsw-nav-drawer__links a {
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 16px;
	line-height: 100%;
	color: var(--wp--preset--color--taupe, #8c857b);
	text-decoration: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		color 0.2s ease;
}

.bsw-nav-drawer__links a:hover {
	color: #aa747c;
}

.bsw-nav-drawer__item.is-open .bsw-nav-drawer__links a {
	opacity: 1;
	transform: translateY(0);
}

.bsw-nav-drawer__item.is-open .bsw-nav-drawer__links a:nth-child(1) { transition-delay: 0.08s; }
.bsw-nav-drawer__item.is-open .bsw-nav-drawer__links a:nth-child(2) { transition-delay: 0.15s; }
.bsw-nav-drawer__item.is-open .bsw-nav-drawer__links a:nth-child(3) { transition-delay: 0.22s; }
.bsw-nav-drawer__item.is-open .bsw-nav-drawer__links a:nth-child(4) { transition-delay: 0.29s; }
.bsw-nav-drawer__item.is-open .bsw-nav-drawer__links a:nth-child(5) { transition-delay: 0.36s; }
.bsw-nav-drawer__item.is-open .bsw-nav-drawer__links a:nth-child(6) { transition-delay: 0.43s; }

/* The desktop card writes the sublabel without parens; the drawer design
   shows it bracketed. */
.bsw-nav-drawer .bsw-nav__sublabel {
	font-size: 16px;
	opacity: 1;
	transform: none;
}

.bsw-nav-drawer .bsw-nav__sublabel::before {
	content: "(";
}

.bsw-nav-drawer .bsw-nav__sublabel::after {
	content: ")";
}

/* Drawer footer */
.bsw-nav-drawer__footer {
	margin-top: auto;
	padding: 0 24px 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bsw-nav__drawer-cta {
	text-transform: capitalize;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 56px;
	background: #aa747c;
	color: #fff;
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.bsw-nav__drawer-cta:hover {
	background: #8c5d65;
	color: #fff;
}

.bsw-nav__drawer-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.bsw-nav__drawer-contact-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 16px;
	color: var(--wp--preset--color--taupe, #8c857b);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bsw-nav__drawer-contact-item:hover {
	color: #aa747c;
}

.bsw-nav__drawer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.bsw-nav__drawer-social a {
	display: flex;
	transition: transform 0.2s ease;
}

.bsw-nav__drawer-social a:hover {
	transform: scale(1.12);
}

@media (max-width: 767px) {
	/* Sticky so the hamburger stays reachable down the page. */
	.bsw-nav.wp-block-group {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 40;
	}

	.bsw-nav__inner.wp-block-group {
		padding-inline: 20px;
		/* 67px + the 1px root border = the 68px bar in the mobile design */
		min-height: 67px;
	}

	.bsw-nav__links {
		display: none;
	}

	/* Hamburger left, CTA right */
	.bsw-nav__hamburger {
		order: 1;
		display: flex;
		width: 28px;
		height: 20px;
	}

	.bsw-nav__inner .wp-block-buttons {
		order: 2;
	}

	.bsw-nav__cta .wp-block-button__link {
		min-width: 177px;
		min-height: 54px;
		padding-inline: 14px !important;
	}
}
