/* ===========================================================================
   The Ivy: editorial layer
   Loaded after style.css. Holds the refinements that move the site away from
   the stock template look: serif italics, square corners, hairlines, the bee
   motif, film grain, and the motion behind ivy.js.
   To roll the whole layer back, dequeue this file and ivy.js in functions.php.
=========================================================================== */

:root {
	--ivy-serif: "Cormorant Garamond", Georgia, serif;
	--ivy-hair: rgba(199, 166, 107, .38);
	--ivy-hair-soft: rgba(17, 35, 26, .14);
	--ivy-ease: cubic-bezier(.2, .7, .2, 1);
	/* The Ivy's own bee, replacing the line-art placeholder. Used by the
	   section rule, the watermark in the dark shell and the loader curtain. */
	--ivy-bee: url("/wp-content/uploads/2026/09/ivy-bee.png");
}

/* ---------------------------------------------------------------------------
   1. Type
--------------------------------------------------------------------------- */

/* Italic accent words inside headlines. */
.elementor-heading-title em,
.uc_fbps_container_title em {
	font-style: italic;
	font-weight: 500;
	color: inherit;
}

.ivy-hero-slider .uc_fbps_container_title em,
.ivy-shell .elementor-heading-title em,
.ivy-ground-ivy .elementor-heading-title em {
	color: #E3CD9E;
}

/* Eyebrows become small italic serif labels. The gold band, top bar and nav
   keep their uppercase tracking; everywhere else it was wallpaper. */
html body .ivy-eyebrow,
html body .ivy-eyebrow p,
html body .ivy-eyebrow .elementor-heading-title {
	font-family: var(--ivy-serif) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	letter-spacing: .005em !important;
	text-transform: none !important;
	line-height: 1.2 !important;
}

html body .ivy-kicker,
html body .ivy-kicker p {
	font-family: var(--ivy-serif) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	color: var(--ivy-wine) !important;
	margin: 0;
}

/* Section labels inside the dark menu cards. */
html body .ivy-card-dark h4.elementor-heading-title {
	font-family: var(--ivy-serif) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 23px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #E3CD9E !important;
}

/* Cormorant has a small x-height, so body-size serif headings get a touch more
   weight to hold their own next to DM Sans. */
html body .ivy-menurow h3.elementor-heading-title,
html body .ivy-menurow h5.elementor-heading-title {
	font-weight: 600;
}

/* Screen-reader-only H1 so the page has one real, descriptive headline. */
.ivy-sr-only,
.ivy-sr-only .elementor-heading-title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------------------
   2. Buttons: square, quiet, with a hairline
--------------------------------------------------------------------------- */
html body .elementor-button,
html body .uc_fbps_cta.ue-btn,
html body .ivy-form button[type="submit"],
html body .ivy-booking .wpforms-submit {
	border-radius: 2px !important;
	letter-spacing: .06em;
	transition: background .35s var(--ivy-ease), color .35s var(--ivy-ease), border-color .35s var(--ivy-ease);
}

html body .ivy-hero-slider .uc_fbps_cta.ue-btn {
	background: transparent !important;
	color: #F3EBDD !important;
	border: 1px solid rgba(227, 205, 158, .7) !important;
	padding: 15px 26px !important;
}

html body .ivy-hero-slider .uc_fbps_cta.ue-btn:hover {
	background: var(--ivy-gold) !important;
	border-color: var(--ivy-gold) !important;
	color: var(--ivy-ink) !important;
}

header#masthead .menu-item.ivy-nav-reserve > a.hfe-menu-item {
	border-color: rgba(227, 205, 158, .75);
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   3. Hairlines instead of boxes
--------------------------------------------------------------------------- */

/* The four moods: open columns divided by gold hairlines. */
html body .ivy-hairline-row > .ivy-card {
	background: transparent;
	border: 0;
	border-left: 1px solid var(--ivy-hair);
	border-radius: 0;
	box-shadow: none;
	transform: none;
	justify-content: flex-start !important;
}

html body .ivy-hairline-row > .ivy-card:first-child {
	border-left: 0;
}

html body .ivy-hairline-row > .ivy-card h3.elementor-heading-title {
	font-size: 40px;
	transition: color .35s var(--ivy-ease);
}

html body .ivy-hairline-row > .ivy-card:hover h3.elementor-heading-title {
	color: var(--ivy-wine);
}

html body .ivy-hairline-row > .ivy-card h3.elementor-heading-title::after {
	content: "";
	display: block;
	width: 22px;
	height: 1px;
	margin-top: 14px;
	background: var(--ivy-gold);
	transition: width .5s var(--ivy-ease);
}

html body .ivy-hairline-row > .ivy-card:hover h3.elementor-heading-title::after {
	width: 64px;
}

@media (max-width: 1024px) {
	html body .ivy-hairline-row > .ivy-card {
		border-left: 0;
		border-top: 1px solid var(--ivy-hair);
	}

	html body .ivy-hairline-row > .ivy-card:first-child {
		border-top: 0;
	}
}

/* Cards elsewhere lose the floaty lift in favour of a hairline. */
.ivy-card,
.ivy-dish-card,
.ivy-steak-card {
	box-shadow: none;
}

.ivy-lift:hover,
.ivy-dish-card:hover,
.ivy-steak-card:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--ivy-hair);
}

.ivy-dish-card .ivy-dish-photo img,
.ivy-steak-card .ivy-steak-photo img {
	transition: transform 1.2s var(--ivy-ease);
}

.ivy-dish-card:hover .ivy-dish-photo img,
.ivy-steak-card:hover .ivy-steak-photo img {
	transform: scale(1.04);
}

/* Chips are links now; they fill gold on hover. */
.ivy-chip {
	transition: background .3s var(--ivy-ease), border-color .3s var(--ivy-ease), color .3s var(--ivy-ease);
}

.ivy-chip:hover {
	background: var(--ivy-gold);
	border-color: var(--ivy-gold);
	color: var(--ivy-ink);
}

.ivy-shell .ivy-chip:hover,
.ivy-ground-ivy .ivy-chip:hover {
	color: var(--ivy-ink);
}

/* ---------------------------------------------------------------------------
   4. Imagery
--------------------------------------------------------------------------- */

/* One arched frame per section. */
html body .ivy-arch {
	border-radius: 999px 999px 3px 3px !important;
}

/* Labels over photographs: a small italic caption on a solid ground. */
html body .ivy-panel-label {
	border-radius: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: rgba(12, 24, 17, .86);
	font-family: var(--ivy-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .01em;
	text-transform: none;
	padding: 6px 12px 7px;
}

.ivy-panel img {
	transition: transform 1.4s var(--ivy-ease);
}

/* ---------------------------------------------------------------------------
   5. The bee rule between sections
--------------------------------------------------------------------------- */
.ivy-beerule::before {
	content: "";
	display: block;
	flex: none;
	align-self: center;
	width: min(1180px, calc(100% - 40px));
	height: 22px;
	margin: 0 auto 64px;
	background:
		var(--ivy-bee) center / 22px 22px no-repeat,
		linear-gradient(var(--ivy-hair), var(--ivy-hair)) left center / calc(50% - 30px) 1px no-repeat,
		linear-gradient(var(--ivy-hair), var(--ivy-hair)) right center / calc(50% - 30px) 1px no-repeat;
}

@media (max-width: 767px) {
	.ivy-beerule::before {
		margin-bottom: 40px;
	}
}

/* ---------------------------------------------------------------------------
   6. Texture: a faint film grain over everything
--------------------------------------------------------------------------- */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 9998;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A faint bee watermark behind the dark menu panel. */
.ivy-shell {
	position: relative;
	isolation: isolate;
}

.ivy-shell::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -40px;
	width: 420px;
	height: 420px;
	z-index: -1;
	opacity: .06;
	pointer-events: none;
	background: var(--ivy-bee) center / contain no-repeat;
	transform: rotate(-14deg);
}

/* ---------------------------------------------------------------------------
   7. Hero
--------------------------------------------------------------------------- */

/* Slow push-in on the active photograph. */
.ivy-hero-slider .uc_fbps_slide {
	overflow: hidden;
}

.ivy-hero-slider .ue-item-image {
	transform: scale(1.001);
	transition: transform 8s linear;
	will-change: transform;
}

.ivy-hero-slider .owl-item.active .ue-item-image {
	transform: scale(1.09);
}

/* Dots give way to a counter and a progress hairline (built by ivy.js). */
html.ivy-js .ivy-hero-slider .owl-dots {
	display: none !important;
}

.ivy-hero-progress {
	position: absolute;
	left: max(20px, calc((100% - 1180px) / 2));
	bottom: 34px;
	z-index: 7;
	display: flex;
	align-items: center;
	gap: 16px;
	color: #F3EBDD;
	font-family: var(--ivy-serif);
	font-size: 17px;
	font-style: italic;
	pointer-events: none;
}

.ivy-hero-progress__line {
	position: relative;
	width: 140px;
	height: 1px;
	background: rgba(243, 235, 221, .25);
	overflow: hidden;
}

.ivy-hero-progress__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ivy-gold);
	transform-origin: left;
	transform: scaleX(0);
}

.ivy-hero-progress.is-running .ivy-hero-progress__line::after {
	animation: ivy-progress var(--ivy-slide-ms, 6500ms) linear forwards;
}

@keyframes ivy-progress {
	to { transform: scaleX(1); }
}

/* Arrows: thin square outlines. */
html body .ivy-hero-slider .owl-nav button.owl-prev,
html body .ivy-hero-slider .owl-nav button.owl-next {
	border-radius: 0 !important;
	background: transparent !important;
	border: 1px solid rgba(243, 235, 221, .35) !important;
	transition: border-color .3s var(--ivy-ease), background .3s var(--ivy-ease);
}

html body .ivy-hero-slider .owl-nav button.owl-prev:hover,
html body .ivy-hero-slider .owl-nav button.owl-next:hover {
	border-color: var(--ivy-gold) !important;
	background: rgba(199, 166, 107, .15) !important;
}

/* The featured panel: a solid ivy card with a gold top rule instead of glass. */
html body .ivy-hero-panel > .e-con-inner {
	max-width: 350px;
	padding: 24px 26px 22px;
	background: rgba(12, 24, 17, .93);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	border-top: 2px solid var(--ivy-gold);
	border-radius: 0;
}

.ivy-hero-panel .elementor-widget-divider {
	display: none;
}

.ivy-tonight-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 4px;
}

.ivy-tonight-links a {
	position: relative;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #F3EBDD;
	text-decoration: none;
	padding-bottom: 4px;
}

.ivy-tonight-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--ivy-gold);
	transform-origin: left;
	transform: scaleX(.35);
	transition: transform .45s var(--ivy-ease);
}

.ivy-tonight-links a:hover::after {
	transform: scaleX(1);
}

@media (max-width: 1024px) {
	.ivy-hero-progress {
		bottom: 22px;
	}

	.ivy-hero-progress__line {
		width: 90px;
	}
}

/* ---------------------------------------------------------------------------
   8. Top bar status
--------------------------------------------------------------------------- */
.ivy-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #F3EBDD;
}

.ivy-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #7FB38E;
	box-shadow: 0 0 0 3px rgba(127, 179, 142, .18);
}

.ivy-status.is-closed::before {
	background: var(--ivy-gold);
	box-shadow: 0 0 0 3px rgba(199, 166, 107, .18);
}

@media (max-width: 767px) {
	.ivy-topbar-services,
	.ivy-topbar-services + .ivy-topbar-sep {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   9. Gold band marquee
--------------------------------------------------------------------------- */
html body .ivy-goldband.ivy-marquee > .e-con > .e-con-inner,
html body .ivy-goldband.ivy-marquee > .e-con-inner {
	flex-wrap: nowrap;
	overflow: hidden;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.ivy-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: ivy-marquee 48s linear infinite;
}

.ivy-marquee:hover .ivy-marquee__track {
	animation-play-state: paused;
}

html body .ivy-marquee__track > .e-con {
	flex: none !important;
	width: auto !important;
	--width: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 26px;
}

.ivy-marquee__track > .e-con::after {
	content: "";
	width: 17px;
	height: 17px;
	margin-left: 52px;
	opacity: .75;
	/* The same Ivy bee as everywhere else, but the gold band needs dark ink,
	   so the artwork is used as a mask and filled with the ink colour. */
	background: #1B271F;
	-webkit-mask: var(--ivy-bee) center / contain no-repeat;
	mask: var(--ivy-bee) center / contain no-repeat;
}

.ivy-marquee__track p {
	white-space: nowrap;
	margin: 0;
}

@keyframes ivy-marquee {
	to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   10. Scroll reveals (only once ivy.js has marked the page)
--------------------------------------------------------------------------- */
html.ivy-js .ivy-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 1s var(--ivy-ease), transform 1s var(--ivy-ease);
	transition-delay: var(--ivy-delay, 0ms);
}

html.ivy-js .ivy-reveal.is-in {
	opacity: 1;
	transform: none;
}

html.ivy-js .ivy-reveal-img {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.3s var(--ivy-ease);
	transition-delay: var(--ivy-delay, 0ms);
}

html.ivy-js .ivy-reveal-img.is-in {
	clip-path: inset(0 0 0 0);
}

html.ivy-js .ivy-reveal-img.ivy-arch.is-in {
	clip-path: none;
}

/* ---------------------------------------------------------------------------
   11. Page transitions
--------------------------------------------------------------------------- */
[data-elementor-type="wp-page"] {
	animation: ivy-page-in .7s var(--ivy-ease) both;
}

@keyframes ivy-page-in {
	from { opacity: 0; }
}

.ivy-curtain {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	background: #0F1F16 var(--ivy-bee) center / 34px 34px no-repeat;
	transition: opacity .32s ease;
}

html.ivy-leaving .ivy-curtain {
	opacity: 1;
	pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   12. Sticky reserve bar on phones
--------------------------------------------------------------------------- */
.ivy-mbar {
	display: none;
}

@media (max-width: 767px) {
	.ivy-mbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9997;
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 1px;
		background: rgba(199, 166, 107, .4);
		border-top: 1px solid rgba(199, 166, 107, .5);
		padding-bottom: env(safe-area-inset-bottom);
		transform: translateY(110%);
		transition: transform .45s var(--ivy-ease);
	}

	.ivy-mbar.is-shown {
		transform: none;
	}

	.ivy-mbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 56px;
		background: #0F1F16;
		color: #F3EBDD;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.ivy-mbar a:first-child {
		background: var(--ivy-gold);
		color: var(--ivy-ink);
	}

	body.ivy-has-mbar {
		padding-bottom: 56px;
	}
}

/* ---------------------------------------------------------------------------
   13. Reduced motion
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ivy-hero-slider .ue-item-image,
	.ivy-hero-slider .owl-item.active .ue-item-image {
		transform: none;
		transition: none;
	}

	.ivy-marquee__track {
		animation: none;
	}

	html.ivy-js .ivy-reveal,
	html.ivy-js .ivy-reveal-img {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	[data-elementor-type="wp-page"] {
		animation: none;
	}

	.ivy-curtain {
		display: none;
	}
}

/* The counter anchors to the slider itself, so on phones it stays on the photo
   rather than drifting onto the panel below it. */
.ivy-hero-slider {
	position: relative;
}

/* HIDE SLIDER COUNTER
   The 01 / 06 counter reads as chrome next to the arrows and the bar,
   which already say where you are. The line itself is kept. */
.ivy-hero-progress__n,
.ivy-hero-progress__t {
	display: none;
}

/* BOOKING DATE INPUT
   A native date input sizes to its own content and falls back to the
   system font, so it arrives narrower than its neighbours and in the wrong
   typeface. Both are pulled back in line here. */
.wpforms-form input.ivy-booking-date {
	width: 100%;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: inherit;
}

/* The picker glyph is near-black on the light field; nudge it to the
   body colour so it does not sit heavier than the text beside it. */
.wpforms-form input.ivy-booking-date::-webkit-calendar-picker-indicator {
	opacity: .55;
	cursor: pointer;
}
.wpforms-form input.ivy-booking-date:hover::-webkit-calendar-picker-indicator {
	opacity: .9;
}