/* the header bar and logo shrink as you scroll, tied directly to how far you have scrolled. the page itself stays put. */

:root {
	--rl-logo-full: 140px;
	--rl-logo-small: 74px;
	--rl-bar-small: 75px;
	--rl-pad-full: 14px;
	--rl-pad-small: 8px;
	--rl-logo-ratio: 0.7272;
	--rl-scroll: 0;
}

/* full header height: logo height plus its top/bottom padding plus the 1px border */
:root {
	--rl-offset-full: calc( var( --rl-logo-full ) * var( --rl-logo-ratio ) + var( --rl-pad-full ) * 2 + 1px );
	--rl-offset: calc( var( --rl-offset-full ) + ( var( --rl-bar-small ) - var( --rl-offset-full ) ) * var( --rl-scroll ) );
}

/* space at the top of the page so content starts right where the full size header ends.
   this stays the same while you scroll: the header shrinks over the top of the page instead of pulling the page up with it.
   a page that moves as you scroll confuses anything that measures positions, like the booking widget. */
body {
	padding-top: var( --rl-offset-full );
}

#site-header-inner {
	height: calc( var( --rl-offset ) - 1px );
	--padding-top: calc( var( --rl-pad-full ) + ( var( --rl-pad-small ) - var( --rl-pad-full ) ) * var( --rl-scroll ) );
	--padding-bottom: calc( var( --rl-pad-full ) + ( var( --rl-pad-small ) - var( --rl-pad-full ) ) * var( --rl-scroll ) );
}

/* stop the logo being squashed by the nav next to it */
#site-header-inner > .e-con-inner > .elementor-widget-site-logo,
#site-header-inner > .elementor-widget-site-logo {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

#site-header [data-widget_type^="site-logo"] .hfe-site-logo,
#site-header [data-widget_type^="site-logo"] .hfe-site-logo-set,
#site-header [data-widget_type^="site-logo"] .hfe-site-logo-container,
#site-header [data-widget_type^="site-logo"] a {
	display: block;
	width: auto;
	max-width: none;
	line-height: 0;
}

/* logo shrinks as you scroll */
#site-header [data-widget_type^="site-logo"] img {
	display: block;
	width: calc( var( --rl-logo-full ) + ( var( --rl-logo-small ) - var( --rl-logo-full ) ) * var( --rl-scroll ) ) !important;
	max-width: none !important;
	height: auto;
}

/* soft shadow fades in as you scroll */
#site-header {
	box-shadow: 0 2px 16px rgb( 40 48 51 / calc( 0.1 * var( --rl-scroll ) ) );
}

/* hero banners keep the height set in Elementor (they used to shrink as you scrolled, which moved the whole page) */

/* the red Book button, desktop only */
@media ( min-width: 1025px ) {
	#site-header .hfe-nav-menu li.rl-book > a.hfe-menu-item,
	#site-header .hfe-nav-menu li.rl-book > .hfe-has-submenu-container > a.hfe-menu-item {
		background-color: #9E2435;
		color: #FFFFFF;
		border-radius: 4px;
		padding-left: 22px;
		padding-right: 22px;
	}

	/* darker red on hover */
	#site-header .hfe-nav-menu li.rl-book:hover > a.hfe-menu-item,
	#site-header .hfe-nav-menu li.rl-book:hover > .hfe-has-submenu-container > a.hfe-menu-item,
	#site-header .hfe-nav-menu li.rl-book > .hfe-has-submenu-container > a.hfe-menu-item:focus {
		background-color: #9E2435;
		color: #FFFFFF;
		filter: brightness( 0.86 );
	}

	#site-header .hfe-nav-menu li.rl-book > .hfe-has-submenu-container > a.hfe-menu-item .sub-arrow,
	#site-header .hfe-nav-menu li.rl-book > .hfe-has-submenu-container > a.hfe-menu-item .sub-arrow i,
	#site-header .hfe-nav-menu li.rl-book > .hfe-has-submenu-container > a.hfe-menu-item .sub-arrow svg {
		fill: #FFFFFF;
		color: #FFFFFF;
	}

	/* the dropdown under Book stays a plain white panel */
	#site-header .hfe-nav-menu li.rl-book .sub-menu a.hfe-sub-menu-item {
		background-color: #FFFFFF;
		color: #283033;
	}

	/* these menu items only show in the mobile menu */
	#site-header .rl-mobile-only {
		display: none;
	}

	/* keep logo and nav on one line, nav pushed to the right */
	#site-header-inner > .e-con-inner {
		flex-wrap: nowrap;
	}

	#site-header-actions {
		flex: 0 1 auto;
		min-width: 0;
		justify-content: flex-end;
	}
}

/* a bit less spacing so the menu fits on smaller desktop screens */
@media ( min-width: 1025px ) and ( max-width: 1200px ) {
	#site-header .hfe-nav-menu a.hfe-menu-item {
		padding-left: 10px;
		padding-right: 10px;
	}

	#site-header .hfe-nav-menu > li {
		margin-right: 12px !important;
	}

	#site-header .hfe-nav-menu li.rl-book > .hfe-has-submenu-container > a.hfe-menu-item {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* smaller logo and header sizes on tablet and mobile */
@media ( max-width: 1024px ) {
	:root {
		--rl-logo-full: 100px;
		--rl-logo-small: 52px;
		--rl-bar-small: 75px;
		--rl-pad-full: 12px;
	}
}

@media ( max-width: 767px ) {
	:root {
		--rl-logo-full: 80px;
		--rl-logo-small: 46px;
		--rl-bar-small: 62px;
		--rl-pad-full: 10px;
	}
}

/* logo on the left, one menu button on the right, on tablet and mobile */
@media ( max-width: 1024px ) {
	#site-header-inner > .e-con-inner {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}

	#site-header-actions {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		justify-content: flex-end;
	}

	#site-header-actions > .elementor-widget-navigation-menu {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}

	/* the open menu panel drops down from the bottom of the header */
	#site-header .hfe-nav-menu__layout-horizontal {
		position: fixed !important;
		top: var( --rl-offset ) !important;
		left: 0 !important;
		width: 100% !important;
		max-height: calc( 100vh - var( --rl-offset ) );
		overflow-y: auto;
	}

	#site-header .hfe-nav-menu__toggle {
		margin-left: auto;
		margin-right: 0;
		padding-right: 0;
	}

	#site-header div.hfe-nav-menu-icon {
		margin-right: 0;
		padding-right: 0;
	}
}

/* the three footer columns sit side by side instead of stacking */
@media ( min-width: 768px ) {
	#site-footer [data-id="fcol1"],
	#site-footer [data-id="fcol2"],
	#site-footer [data-id="fcol3"] {
		flex-basis: 0;
		min-width: 0;
	}
}

/* when you are logged in, WordPress puts its black admin bar across the top of the page and pushes the page down to make room.
   move the header down by the same amount so it sits under the admin bar instead of behind it, with no white gap. visitors never see this. */
body.admin-bar #site-header {
	top: var( --wp-admin--admin-bar--height, 32px );
}

@media ( max-width: 1024px ) {
	body.admin-bar #site-header .hfe-nav-menu__layout-horizontal {
		top: calc( var( --rl-offset ) + var( --wp-admin--admin-bar--height, 32px ) ) !important;
		max-height: calc( 100vh - var( --rl-offset ) - var( --wp-admin--admin-bar--height, 32px ) );
	}
}

/* the theme wraps the header in <header id="masthead"> with z-index 99, which caps the whole header at 99.
   lift it so page content (like the booking widget, which sits at 100) scrolls underneath the header, not over it.
   the widget's own open calendar and guests panels use much higher values, so they still show on top when open.
   the body.ehf-header selector is there so it beats the Header Footer Elementor plugin's own .ehf-header #masthead rule. */
body #masthead,
body.ehf-header #masthead {
	z-index: 1000;
}

/* the qbook booking widget scrolls the page so its bar sits under the header, then measures how much room its calendar has.
   Elementor turns on smooth scrolling for the whole page, so that scroll glides instead of jumping. the widget measures
   while the page is still moving, thinks there is no room, and shrinks the calendar to a short 280px box.
   pages with the widget get instant scrolling so the measurement is right. other pages keep smooth scrolling. */
html:has(#qbook_widget) {
	scroll-behavior: auto;
}

/* the Check availability buttons on the Rooms page jump down to the room list (section id every-room). stop it landing under the fixed header */
#every-room {
	scroll-margin-top: 90px;
}
@media ( max-width: 767px ) {
	#every-room { scroll-margin-top: 72px; }
}

/* photo at the top of a card (e.g. the menu cards on Food & Drink): fill the card's full width, cropped neatly to 240px tall */
.rl-card-photo a {
	display: block;
	width: 100%;
}
.rl-card-photo img {
	width: 100% !important;
	height: 240px !important;
	object-fit: cover;
	display: block;
}

/* menu cards on Food & Drink: same height in a row, with each card's button lined up along the bottom */
.rl-menu-cards > .e-con > .e-con {
	flex-grow: 1;
}
.rl-menu-cards .elementor-widget-button {
	margin-top: auto;
}

/* rl-panel-font: the hamburger panel (tablet and phone) uses Work Sans.
   The desktop menu stays in Libre Caslon Display, set on the nav widget in
   Elementor. UAE uses one Dropdown typography setting for both the desktop
   dropdowns and this panel, so the panel font is set here instead. 16 Oct 2026. */
@media ( max-width: 1024px ) {
	#site-header nav.hfe-dropdown a.hfe-menu-item,
	#site-header nav.hfe-dropdown a.hfe-sub-menu-item {
		font-family: "Work Sans", sans-serif;
		font-size: 16px;
		font-weight: 500;
	}
}

/* rl-menu-arrows: the small dropdown arrow next to Rooms and Book, drawn as a
   CSS chevron in the link colour. It used to be a Font Awesome icon, which
   meant loading the whole Font Awesome set (about 135 KB) on every page just
   for this arrow. Font Awesome is switched off in
   wp-content/novamira-sandbox/redlion-speed.php. 20 Oct 2026.
   To change the arrow size, edit width and height (both 6px); to change the
   line weight, edit the two border widths (1.5px). */
#site-header .hfe-nav-menu .sub-arrow i.fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 9px;
	height: 14px;
}
#site-header .hfe-nav-menu .sub-arrow i.fa::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
/* in the hamburger panel the arrow points up while that section is open */
@media ( max-width: 1024px ) {
	#site-header .hfe-nav-menu .hfe-has-submenu-container.sub-menu-active .sub-arrow i.fa::before,
	#site-header .hfe-nav-menu .menu-active > .hfe-has-submenu-container .sub-arrow i.fa::before {
		transform: translateY(2px) rotate(-135deg);
	}
}
@media ( prefers-reduced-motion: reduce ) {
	#site-header .hfe-nav-menu .sub-arrow i.fa::before {
		transition: none;
	}
}