/*
 * Aura Spaces design CSS: header, mobile menu, footer and the floating WhatsApp button.
 * Page sections are GenerateBlocks blocks and carry their own styles.
 * ID selectors beat the GeneratePress rules without !important.
 */

body {
	overflow-x: clip;
}

/* Header */

.site-header {
	position: relative;
	z-index: 20;
	background-color: #EFE8DC;
	border-bottom: 1px solid #D8C6A6;
}

#masthead .inside-header {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 32px;
	row-gap: 0;
}

.aura-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: #33403A;
	text-decoration: none;
}

.aura-logo:hover,
.aura-logo:focus {
	color: #33403A;
}

.aura-logo-mark {
	display: grid;
	grid-template-columns: repeat(2, 13px);
	gap: 3px;
}

.aura-logo-mark span {
	height: 13px;
	border-radius: 3px;
	background-color: #8E5F36;
}

.aura-logo-mark span:nth-child(2) {
	background-color: #D7B985;
}

.aura-logo-mark span:nth-child(3) {
	background-color: #87958A;
}

.aura-logo-mark span:nth-child(4) {
	background-color: #A34B27;
}

.aura-logo-name {
	font-family: var(--aura-serif);
	font-size: 25px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* Desktop navigation */

#site-navigation,
#site-navigation ul ul {
	background-color: transparent;
}

#site-navigation {
	flex: 1 1 auto;
	margin-left: 0;
}

#site-navigation .inside-navigation {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 0;
}

#primary-menu {
	margin: 0 auto;
}

#site-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	gap: 28px;
}

#site-navigation .main-nav ul li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	line-height: normal;
	font-size: 15px;
	font-weight: 500;
	color: #33403A;
	background-color: transparent;
}

#site-navigation .main-nav ul li:hover > a,
#site-navigation .main-nav ul li a:focus,
#site-navigation .main-nav ul li.sfHover > a,
#site-navigation .main-nav ul li[class*="current-menu-"] > a,
#site-navigation .main-nav ul li a[aria-current] {
	color: #A34B27;
	background-color: transparent;
}

/* Book pill. Two copies exist: in the desktop menu and beside the mobile toggle. */
#masthead .menu-bar-items {
	display: flex;
	align-items: center;
}

#masthead .menu-bar-item > a.aura-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	background-color: #A34B27;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

#masthead .menu-bar-item > a.aura-pill:hover,
#masthead .menu-bar-item > a.aura-pill:focus {
	background-color: #8A3E1F;
	color: #FFFFFF;
}

.aura-pill-short {
	display: none;
}

.aura-menu-extras {
	display: none;
}

/* Mobile menu toggle */

#mobile-menu-control-wrapper {
	background-color: transparent;
}

#mobile-menu-control-wrapper .menu-toggle,
#mobile-menu-control-wrapper .menu-toggle:hover,
#mobile-menu-control-wrapper .menu-toggle:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: normal;
	border: 1px solid #C9B794;
	border-radius: 12px;
	background-color: transparent;
	color: #33403A;
}

#mobile-menu-control-wrapper .menu-toggle .gp-icon {
	margin: 0;
}

#mobile-menu-control-wrapper .icon-menu-bars svg {
	fill: none;
	width: 22px;
	height: 22px;
	top: 0;
}

#mobile-menu-control-wrapper .icon-menu-bars svg + svg {
	display: none;
}

#mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"] {
	border-color: #33403A;
}

#mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"] .icon-menu-bars svg:first-child {
	display: none;
}

#mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"] .icon-menu-bars svg + svg {
	display: block;
}

/* Tablet and mobile: the open menu becomes a full-width panel under the header bar. */
@media (max-width:1024px) {
	#mobile-menu-control-wrapper {
		align-items: center;
		gap: 8px;
	}

	#masthead #site-navigation.toggled {
		--aura-ring-gap: #F6F1E8;
		flex-basis: calc(100% + 48px);
		width: calc(100% + 48px);
		margin: 16px -24px -16px;
		padding: 8px 24px 24px;
		background-color: #F6F1E8;
		border-top: 1px solid #D8C6A6;
	}

	#masthead #site-navigation.toggled .inside-navigation {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* The desktop flex rule above outranks GP's mobile hide, so hide the closed menu here. */
	#masthead #site-navigation:not(.toggled) .main-nav > ul {
		display: none;
	}

	#masthead #site-navigation.toggled #primary-menu {
		margin: 0;
	}

	#masthead #site-navigation.toggled .main-nav > ul {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	#masthead #site-navigation.toggled .main-nav ul li {
		width: 100%;
	}

	#masthead #site-navigation.toggled .main-nav ul li a {
		display: flex;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		border-bottom: 1px solid #D8C6A6;
		font-size: 17px;
		font-weight: 500;
	}

	#masthead #site-navigation.toggled .main-nav ul li a::after {
		content: "";
		flex: none;
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* GP gives .main-nav order 3, so the extras need a higher order to sit under the links. */
	.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation > div.aura-menu-extras {
		display: flex;
		flex-direction: column;
		order: 4;
	}

	/* The ID keeps these ahead of GP's .main-navigation a rules. */
	#site-navigation .aura-menu-book,
	#site-navigation .aura-menu-whatsapp {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		border-radius: 999px;
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
	}

	#site-navigation .aura-menu-book {
		margin-top: 20px;
		background-color: #A34B27;
		color: #FFFFFF;
	}

	#site-navigation .aura-menu-book:hover,
	#site-navigation .aura-menu-book:focus {
		background-color: #8A3E1F;
		color: #FFFFFF;
	}

	#site-navigation .aura-menu-whatsapp {
		gap: 10px;
		margin-top: 10px;
		border: 1px solid #33403A;
		color: #33403A;
	}

	#site-navigation .aura-menu-whatsapp:hover,
	#site-navigation .aura-menu-whatsapp:focus {
		background-color: #33403A;
		color: #EFE8DC;
	}

	#site-navigation .aura-menu-whatsapp svg {
		width: 20px;
		height: 20px;
	}

	#site-navigation .aura-menu-call {
		margin: 14px 0 0;
		text-align: center;
		font-size: 15px;
		color: #4D5852;
	}

	#site-navigation .aura-menu-call a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-weight: 600;
		color: #33403A;
	}
}

.aura-demo {
	display: inline-block;
	margin-left: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #5C665F;
}

@media (max-width:767px) {
	#masthead .inside-header {
		padding: 12px 20px;
		column-gap: 8px;
	}

	.aura-logo {
		gap: 10px;
	}

	.aura-logo-mark {
		grid-template-columns: repeat(2, 11px);
	}

	.aura-logo-mark span {
		height: 11px;
	}

	.aura-logo-name {
		font-size: 21px;
	}

	.aura-pill-long {
		display: none;
	}

	.aura-pill-short {
		display: inline;
	}

	#masthead .menu-bar-item > a.aura-pill {
		padding: 0 18px;
		font-size: 15px;
	}

	#masthead #site-navigation.toggled {
		flex-basis: calc(100% + 40px);
		width: calc(100% + 40px);
		margin: 12px -20px -12px;
		padding: 8px 20px 24px;
	}
}

/* Soft wash behind the open mobile menu. */
.aura-menu-wash {
	position: fixed;
	inset: 0;
	z-index: 19;
	background-color: rgba(51, 64, 58, 0.12);
}

.aura-menu-wash[hidden] {
	display: none;
}

/* Floating WhatsApp button */

.aura-wa {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background-color: #A34B27;
	color: #FFFFFF;
	box-shadow: 0 8px 22px rgba(51, 64, 58, 0.28);
}

.aura-wa:hover,
.aura-wa:focus {
	background-color: #8A3E1F;
	color: #FFFFFF;
}

.aura-wa svg {
	width: 26px;
	height: 26px;
}

html.mobile-menu-open .aura-wa {
	display: none;
}

@media (max-width:767px) {
	.aura-wa {
		right: 16px;
		bottom: 16px;
		width: 56px;
		height: 56px;
	}
}

/* Footer */

.aura-footer {
	--aura-ring-gap: #26302B;
	background-color: #26302B;
	color: #E9E2D5;
}

.aura-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
}

.aura-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aura-footer-name {
	font-family: var(--aura-serif);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
}

.aura-footer-tagline {
	font-size: 14px;
	color: #B9C0BA;
}

.aura-footer-nav {
	display: flex;
	gap: 28px;
	font-size: 15px;
}

.aura-footer-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: #E9E2D5;
	text-decoration: none;
}

/* Underline on hover. Terracotta is too dark on this background. */
.aura-footer-nav a:hover,
.aura-footer-nav a:focus {
	color: #E9E2D5;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.aura-footer-legal {
	border-top: 1px solid #4D5852;
}

.aura-footer-legal p {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px;
	font-size: 13px;
	line-height: 1.6;
	color: #B9C0BA;
}

.aura-footer-legal strong {
	font-weight: 600;
}

@media (max-width:1024px) {
	.aura-footer-nav {
		flex-wrap: wrap;
	}
}

@media (max-width:767px) {
	.aura-footer-inner {
		display: block;
		padding: 44px 20px 28px;
	}

	.aura-footer-name {
		font-size: 24px;
	}

	.aura-footer-nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 16px;
		margin-top: 20px;
	}

	.aura-footer-nav a {
		display: flex;
		justify-content: flex-start;
	}

	.aura-footer-legal {
		border-top: 0;
		padding: 0 20px 28px;
	}

	.aura-footer-legal p {
		margin: 0;
		padding: 18px 0 0;
		border-top: 1px solid #4D5852;
	}
}

/*
 * DEMO project filters and pickers (aura.js). Block styles set display on these items, so the
 * hidden attribute needs a stronger rule. On mobile the extra projects wait for "See all".
 */
.entry-content [data-aura-room][hidden],
.entry-content [data-aura-more][hidden],
.entry-content [data-aura-empty][hidden] {
	display: none !important;
}

@media (max-width:767px) {
	.entry-content .aura-is-extra {
		display: none !important;
	}
}

/* Each button's first look is baked into its block, so the pressed state follows aria-pressed here. */
.entry-content :is([data-aura-filter], [data-aura-time])[aria-pressed="true"] {
	background-color: #33403A;
	border-color: #33403A;
	color: #EFE8DC;
	font-weight: 600;
}

.entry-content :is([data-aura-filter], [data-aura-time])[aria-pressed="false"]:not([aria-disabled="true"]) {
	background-color: transparent;
	border-color: #C9B794;
	color: #33403A;
	font-weight: 500;
}

.entry-content [data-aura-day][aria-pressed="true"] {
	background-color: #A34B27;
	border-color: #A34B27;
	color: #FFFFFF;
}

.entry-content [data-aura-day][aria-pressed="false"] {
	background-color: transparent;
	border-color: #C9B794;
	color: #33403A;
}

.entry-content [data-aura-place][aria-pressed="true"] {
	background-color: #FFFFFF;
	border-color: #A34B27;
}

.entry-content [data-aura-place][aria-pressed="false"] {
	background-color: transparent;
	border-color: #C9B794;
}

.entry-content [data-aura-place][aria-pressed="true"] .gb-shape {
	color: #A34B27;
}

.entry-content [data-aura-place][aria-pressed="false"] .gb-shape {
	color: #5C665F;
}

.entry-content :is([data-aura-filter], [data-aura-time], [data-aura-day], [data-aura-place])[aria-pressed="false"]:not([aria-disabled="true"]):is(:hover, :focus) {
	border-color: #33403A;
}

/*
 * Motion. Short and calm: colour fades on hover, a slow photo zoom on project and material
 * cards, sections that fade up once as they scroll in, and an eased mobile menu.
 * The focus outline is not in any transition, so it always appears at once.
 */
.entry-content :is(a, button),
#site-navigation .main-nav ul li a,
#masthead .menu-bar-item > a.aura-pill,
#mobile-menu-control-wrapper .menu-toggle,
.aura-footer-nav a,
.aura-footer a {
	transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out, text-decoration-color 0.2s ease-out;
}

.aura-wa {
	transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.aura-wa:hover,
.aura-wa:focus {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(51, 64, 58, 0.32);
}

/* Photo zoom, only where there is a mouse. The frame and text stay still. */
@media (hover: hover) {
	.entry-content :is(#materials article, [data-aura-room]) img {
		transition: transform 0.6s ease-out;
	}

	.entry-content :is(#materials article, [data-aura-room]):hover img {
		transform: scale(1.03);
	}
}

/* Opening text on each page. The heading and the hero photo never animate. */
@keyframes aura-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

.entry-content > * > section:first-child :is(:has(+ h1), h1 ~ *) {
	animation: aura-rise 0.4s ease-out both;
}

.entry-content > * > section:first-child h1 + * {
	animation-delay: 0.06s;
}

.entry-content > * > section:first-child h1 + * + * {
	animation-delay: 0.12s;
}

.entry-content > * > section:first-child h1 + * + * ~ * {
	animation-delay: 0.18s;
}

/* Scroll reveal. aura.js adds aura-reveal only to things below the fold. */
.aura-reveal {
	opacity: 0;
	transform: translateY(16px);
}

.aura-reveal.aura-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease-out var(--aura-delay, 0s), transform 0.5s ease-out var(--aura-delay, 0s);
}

/* A printed page shows every section, revealed or not. */
@media print {
	.aura-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Mobile menu panel and wash ease in. Closing stays instant. */
@keyframes aura-menu-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (max-width:1024px) {
	#masthead #site-navigation.toggled {
		animation: aura-menu-in 0.2s ease-out;
	}
}

.aura-menu-wash {
	transition: opacity 0.2s ease-out;
}

@starting-style {
	.aura-menu-wash {
		opacity: 0;
	}
}

/* Reduce motion: colours still change, nothing moves. */
@media (prefers-reduced-motion: reduce) {
	.entry-content :is(#materials article, [data-aura-room]):hover img,
	.aura-wa:hover,
	.aura-wa:focus {
		transform: none;
	}

	.entry-content > * > section:first-child :is(:has(+ h1), h1 ~ *),
	#masthead #site-navigation.toggled {
		animation: none;
	}

	.aura-menu-wash {
		transition: none;
	}
}