/*
 * Sai Lux Sunrise Living — site header / primary navigation
 *
 * The Entox theme renders the header as an Elementor section carrying
 * `.header_sticky`, and its own script adds `.active_sticky` once you scroll
 * past it (see entox/assets/js/script.js). That sticky mechanism is left
 * completely alone here — we only restyle the two states:
 *
 *   at rest   → solid brand navy, so the logo and links always have contrast
 *   scrolled  → frosted glass: translucent navy + backdrop blur
 *
 * Loaded site-wide, so every page gets the same header.
 */

:root {
	--sls-h-navy:  var(--b-navy);
	--sls-h-gold:  var(--b-gold-l);
	--sls-h-text:  rgba(255, 255, 255, .88);
}

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

/* The theme leaves the header background transparent, which means it renders
   against whatever the page happens to put behind it — white on most pages.
   Give it a real background so the header is never invisible. */
/* NOTE ON !important: entox/style.css is enqueued AFTER this file and sets
   `.header_sticky.active_sticky { background-color: #fff }` plus a dark variant
   at equal specificity, so it wins the cascade on load order alone. Its
   `var(--heading)` is never defined either, so the dark variant also resolves
   to white — which is what put white nav text on a white bar. Overriding the
   background is therefore deliberate, and limited to the properties the theme
   actually fights us on. */
.header_sticky {
	background-color: var(--sls-h-navy) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Scrolled state — the glass. The theme's own rule uses `background-color`
   with normal specificity, and its dark variant adds `!important` on the
   border, so both are matched here to win cleanly. */
.header_sticky.active_sticky,
.header_sticky.active_sticky.header_sticky_dark {
	background-color: rgba(var(--b-navy-rgb), .72) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
	box-shadow: 0 10px 34px rgba(13, 27, 43, .34);
}

/* Safari/Firefox without backdrop-filter would show a washed-out translucent
   bar with the page scrolling through it. Fall back to near-solid navy. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.header_sticky.active_sticky,
	.header_sticky.active_sticky.header_sticky_dark {
		background-color: rgba(var(--b-navy-rgb), .96) !important;
	}
}

/* The sticky bar shrinks a little on scroll — a small, familiar cue that you
   have left the top of the page. */
.header_sticky.active_sticky .elementor-container {
	transition: min-height .35s ease;
}

/* --- Primary navigation --------------------------------------------------- */
.main-navigation .primary-navigation ul.menu > li > a {
	position: relative;
	display: inline-block;
	padding: 10px 2px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--sls-h-text) !important;
	text-decoration: none !important;
	transition: color .22s ease;
}

.main-navigation .primary-navigation ul.menu > li {
	margin: 0 16px;
}

/* Underline that grows from the centre. A pseudo-element rather than a
   border, so it can animate without shifting the text. */
.main-navigation .primary-navigation ul.menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--b-gold), var(--b-gold-l));
	transform: translateX(-50%);
	transition: width .28s cubic-bezier(.22, 1, .36, 1);
}

.main-navigation .primary-navigation ul.menu > li > a:hover,
.main-navigation .primary-navigation ul.menu > li > a:focus-visible {
	color: #fff !important;
}

.main-navigation .primary-navigation ul.menu > li > a:hover::after,
.main-navigation .primary-navigation ul.menu > li > a:focus-visible::after {
	width: 100%;
}

/* The page you are on keeps its underline permanently. */
.main-navigation .primary-navigation ul.menu > li.current-menu-item > a,
.main-navigation .primary-navigation ul.menu > li.current_page_item > a,
.main-navigation .primary-navigation ul.menu > li.menu-item-home.current-menu-item > a {
	color: #fff !important;
}

.main-navigation .primary-navigation ul.menu > li.current-menu-item > a::after,
.main-navigation .primary-navigation ul.menu > li.current_page_item > a::after {
	width: 100%;
}

/* Keyboard users must still see where they are. */
.main-navigation .primary-navigation ul.menu > li > a:focus-visible {
	outline: 2px solid var(--sls-h-gold);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --- Sub-menus ------------------------------------------------------------ */
.main-navigation .primary-navigation ul.menu ul.sub-menu {
	background: rgba(var(--b-navy-rgb), .96);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(13, 27, 43, .40);
	padding: 8px;
	overflow: hidden;
}

.main-navigation .primary-navigation ul.menu ul.sub-menu li a {
	color: var(--sls-h-text) !important;
	border: 0 !important;
	border-radius: 9px;
	padding: 10px 14px !important;
	font-size: 14.5px;
	font-weight: 500;
	transition: background .2s ease, color .2s ease;
}

.main-navigation .primary-navigation ul.menu ul.sub-menu li a:hover {
	color: #fff !important;
	background: rgba(var(--b-gold-rgb), .22);
}

/* --- Mobile toggle -------------------------------------------------------- */
.main-navigation .menu-toggle {
	color: #fff;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	transition: background .2s ease;
}

.main-navigation .menu-toggle:hover {
	background: rgba(255, 255, 255, .18);
}


@media (prefers-reduced-motion: reduce) {
	.header_sticky,
	.main-navigation .primary-navigation ul.menu > li > a,
	.main-navigation .primary-navigation ul.menu > li > a::after {
		transition: none !important;
	}
}


/* --- Guard against the theme re-colouring the links -------------------------
   Entox styles the menu anchors in its own stylesheet, which loads after this
   one. These keep the nav readable in both the at-rest and scrolled states. */
.header_sticky .main-navigation .primary-navigation ul.menu > li > a,
.header_sticky.active_sticky .main-navigation .primary-navigation ul.menu > li > a {
	color: var(--sls-h-text) !important;
}

.header_sticky .main-navigation .primary-navigation ul.menu > li > a:hover,
.header_sticky .main-navigation .primary-navigation ul.menu > li.current-menu-item > a,
.header_sticky .main-navigation .primary-navigation ul.menu > li.current_page_item > a {
	color: #fff !important;
}

/* The logo tile sits on navy now, so drop any light plate the theme adds. */
.header_sticky .brand_el img,
.header_sticky .logo_desktop,
.header_sticky .logo_sticky {
	background: transparent !important;
}

/* --- Logo ------------------------------------------------------------------
   The circular mark is square, where the previous logo was a wide rectangle,
   so the theme's width-based sizing would render it far too large. Constrain
   by height and let the width follow. */
/* The header row has to be tall enough for the circular logo, or the logo is
   simply cut off — which is what "logo is not visible" turned out to be. Give
   the row a floor and centre its contents vertically. */
.header_sticky .elementor-container,
.header_sticky > .e-con-inner {
	min-height: 96px;
	align-items: center;
}

.header_sticky .brand_el,
.header_sticky .brand_el a {
	display: flex;
	align-items: center;
}

.header_sticky .brand_el img,
.header_sticky .logo_desktop,
.header_sticky .logo_sticky,
.header_sticky .logo_mobile {
	width: auto !important;
	max-width: none !important;
	height: 72px !important;
	max-height: 72px !important;
	object-fit: contain;
	border-radius: 50%;
	transition: height .35s ease;
}

/* Shrink a little once the bar goes sticky. */
.header_sticky.active_sticky .elementor-container,
.header_sticky.active_sticky > .e-con-inner {
	min-height: 78px;
}

.header_sticky.active_sticky .brand_el img,
.header_sticky.active_sticky .logo_desktop,
.header_sticky.active_sticky .logo_sticky,
.header_sticky.active_sticky .logo_mobile {
	height: 58px !important;
	max-height: 58px !important;
}

@media (max-width: 782px) {
	.header_sticky .brand_el img,
	.header_sticky .logo_desktop,
	.header_sticky .logo_sticky,
	.header_sticky .logo_mobile {
		height: 56px !important;
	}

	.header_sticky.active_sticky .brand_el img,
	.header_sticky.active_sticky .logo_desktop,
	.header_sticky.active_sticky .logo_sticky,
	.header_sticky.active_sticky .logo_mobile {
		height: 48px !important;
	}
}

/* ===========================================================================
   MOBILE MENU
   Entox renders a separate off-canvas nav for small screens:

     nav.menu-canvas
       button.menu-toggle          <- hamburger
       nav.container-menu.dir_left <- the sliding panel
         div.close-menu > i.ovaicon-cancel
         div.primary-navigation > ul.menu > li > a
       div.site-overlay            <- backdrop

   The theme leaves the panel unstyled, which is why it appeared as a grey box
   with default-blue links. Everything below dresses that structure in the
   brand. The theme's own show/hide JS is untouched.
   =========================================================================== */

/* --- Hamburger ------------------------------------------------------------ */
.menu-canvas > .menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 13px;
	color: #fff;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .26);
	transition: background .2s ease, border-color .2s ease;
}

.menu-canvas > .menu-toggle:hover,
.menu-canvas > .menu-toggle:focus {
	background: rgba(var(--b-gold-rgb), .26);
	border-color: var(--b-gold-l);
}

/* The theme already draws all three bars — two from the button's own
   ::before/::after and the middle one from `span:before`. Drawing more here is
   what produced the X-plus-a-line tangle, so we only recolour them. */
.menu-canvas > .menu-toggle:before,
.menu-canvas > .menu-toggle:after,
.menu-canvas > .menu-toggle span:before {
	background-color: #fff !important;
}

/* --- Backdrop ------------------------------------------------------------- */
.menu-canvas .site-overlay {
	background: rgba(9, 18, 30, .62) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* --- Sliding panel -------------------------------------------------------- */
.menu-canvas .container-menu {
	width: min(85vw, 340px) !important;
	padding: 24px 20px 34px !important;
	background:
		radial-gradient(70% 46% at 0% 0%, rgba(var(--b-gold-rgb), .20), transparent 60%),
		var(--b-navy-d) !important;
	border-right: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 18px 0 50px rgba(0, 0, 0, .40);
	overflow-y: auto;
}

/* Gold sunrise rule along the top edge, echoing the footer. */
.menu-canvas .container-menu::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--b-gold) 0%, var(--b-gold-l) 55%, transparent 100%);
}

/* --- Close button --------------------------------------------------------- */
/* The theme right-aligns this with `text-align: right` on a block element;
   turning the wrapper into an inline-flex broke that and pushed it left. Keep
   the wrapper a full-width flex row and make the <i> the actual button. */
.menu-canvas .container-menu .close-menu {
	display: flex !important;
	justify-content: flex-end;
	align-items: center;
	padding: 0 !important;
	margin: 0 0 20px !important;
}

.menu-canvas .close-menu i {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--b-gold-l);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(var(--b-gold-rgb), .45);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.menu-canvas .close-menu i:hover {
	background: rgba(var(--b-gold-rgb), .24);
	transform: rotate(90deg);
}

/* --- Menu items ----------------------------------------------------------- */
.menu-canvas .primary-navigation ul.menu {
	display: block;
	padding: 0 18px !important;
	margin: 0 !important;
	max-height: none;
}

.menu-canvas .primary-navigation ul.menu > li {
	display: block;
	margin: 0 0 4px !important;
	border: 0 !important;
}

/* The theme's default link colour was showing through as blue on the current
   item; these win in every state. */
.menu-canvas .primary-navigation ul.menu > li > a {
	position: relative;
	display: block;
	padding: 15px 16px 15px 18px !important;
	border: 0 !important;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: rgba(255, 255, 255, .86) !important;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

/* Gold bar that grows on the active / hovered item. */
.menu-canvas .primary-navigation ul.menu > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: var(--b-gold-l);
	transform: translateY(-50%);
	transition: height .22s ease;
}

.menu-canvas .primary-navigation ul.menu > li > a:hover,
.menu-canvas .primary-navigation ul.menu > li > a:focus {
	color: #fff !important;
	background: rgba(255, 255, 255, .06);
	padding-left: 24px !important;
}

.menu-canvas .primary-navigation ul.menu > li > a:hover::before { height: 22px; }

.menu-canvas .primary-navigation ul.menu > li.current-menu-item > a,
.menu-canvas .primary-navigation ul.menu > li.current_page_item > a {
	color: var(--b-gold-l) !important;
	background: rgba(var(--b-gold-rgb), .13);
	padding-left: 24px !important;
}

.menu-canvas .primary-navigation ul.menu > li.current-menu-item > a::before,
.menu-canvas .primary-navigation ul.menu > li.current_page_item > a::before {
	height: 24px;
}

.menu-canvas .primary-navigation ul.menu > li > a:focus-visible {
	outline: 2px solid var(--b-gold-l);
	outline-offset: 2px;
}

/* Sub-menus inside the panel. */
.menu-canvas .primary-navigation ul.sub-menu {
	padding-left: 14px !important;
	margin: 2px 0 6px !important;
	border-left: 1px solid rgba(255, 255, 255, .12) !important;
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.menu-canvas .primary-navigation ul.sub-menu > li > a {
	font-size: 14.5px !important;
	font-weight: 500 !important;
	padding: 11px 14px !important;
	color: rgba(255, 255, 255, .72) !important;
}

/* --- The inline nav, below the desktop breakpoint (1023px) ---------------- */
@media (max-width: 1023px) {
	.main-navigation .primary-navigation ul.menu > li { margin: 0; }

	.main-navigation .primary-navigation ul.menu > li > a {
		display: block;
		padding: 13px 18px;
	}

	/* A centre-growing underline makes no sense in a stacked list. */
	.main-navigation .primary-navigation ul.menu > li > a::after {
		left: 18px;
		bottom: 7px;
		transform: none;
	}

	.main-navigation .primary-navigation ul.menu > li > a:hover::after,
	.main-navigation .primary-navigation ul.menu > li.current-menu-item > a::after {
		width: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-canvas .close-menu:hover { transform: none; }
	.menu-canvas .primary-navigation ul.menu > li > a,
	.menu-canvas .primary-navigation ul.menu > li > a::before { transition: none !important; }
}


/* Draw the X in CSS rather than relying on the theme's `ovaicon` font — when
   that font fails to load the button renders as an empty circle. */
.menu-canvas .close-menu i::before,
.menu-canvas .close-menu i::after {
	content: "" !important;
	position: absolute;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	font-size: 0;
}

.menu-canvas .close-menu i::before { transform: rotate(45deg); }
.menu-canvas .close-menu i::after  { transform: rotate(-45deg); }

/* Panel padding now lives on .container-menu, so the list sits flush inside it. */
.menu-canvas .primary-navigation ul.menu { padding: 0 !important; }

/* --- Off-canvas open/closed transforms -------------------------------------
   The theme hides the panel with a hard-coded translate3d(±290px) that matches
   its own 290px width. This stylesheet widens the panel, so 290px of travel no
   longer covers it and a strip stayed visible over the page when closed.
   Using a percentage makes the closed state correct at ANY width.

   Specificity note: the open rule must be at least as specific as the closed
   one (both .menu-canvas + .container-menu + .dir_*), or the closed transform
   would win and the panel could never open. */
.menu-canvas .container-menu {
	box-sizing: border-box !important;
}

.menu-canvas .container-menu.dir_left {
	-webkit-transform: translate3d(-100%, 0, 0) !important;
	transform: translate3d(-100%, 0, 0) !important;
}

.menu-canvas .container-menu.dir_right {
	-webkit-transform: translate3d(100%, 0, 0) !important;
	transform: translate3d(100%, 0, 0) !important;
}

.menu-canvas.toggled .container-menu.dir_left,
.menu-canvas.toggled .container-menu.dir_right {
	-webkit-transform: none !important;
	transform: none !important;
}

/* The panel and its backdrop must never sit above the page when closed. */
.menu-canvas .site-overlay {
	visibility: hidden;
}

.menu-canvas.toggled .site-overlay {
	visibility: visible;
}

/* --- Keep the primary menu on ONE row --------------------------------------
   Seven items no longer fit the header column at its old 16px side margins, so
   "Contact" wrapped to a second line. Padding and type size now scale with the
   viewport, and the row is explicitly nowrap, so it stays on one line from the
   desktop breakpoint upwards. */
.main-navigation .primary-navigation ul.menu {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: center;
}

.main-navigation .primary-navigation ul.menu > li {
	margin: 0 !important;
	padding: 0 clamp(7px, 0.85vw, 16px);
	white-space: nowrap;
}

.main-navigation .primary-navigation ul.menu > li > a {
	font-size: clamp(13.5px, 0.98vw, 15px);
	white-space: nowrap;
}

/* Let the nav use whatever width the header column can give it. */
.main-navigation,
.main-navigation .primary-navigation {
	width: 100%;
}

/* Sub-menus must still stack vertically — the nowrap above is for the top row. */
.main-navigation .primary-navigation ul.menu ul.sub-menu {
	display: block !important;
	flex-wrap: initial !important;
	white-space: normal;
}

.main-navigation .primary-navigation ul.menu ul.sub-menu > li {
	padding: 0;
	white-space: normal;
}

/* --- Site search popup -----------------------------------------------------
   The theme's magnifier opens OVA's vehicle-rental search — Product Name,
   Select Category (Ford, Porsche, Excavator, Forklift…), Pick-up and Drop-off
   dates. Entirely wrong for a service apartment site.

   header.js swaps the form's contents for a real site search and then adds
   `.sls-search-ready`. The old fields are hidden by that class and NOT before,
   so if the script ever fails the visitor still sees a form rather than an
   empty box. */
/* Hide EVERY original child rather than naming each theme field. Enumerating
   them missed the rental plugin's own submit button, which left a stray blue
   "Search" sitting above our form. This rule cannot miss anything, and it only
   applies once our replacement is actually in the DOM. */
.search_popup_form.sls-search-ready > *:not(.sls-hsearch) {
	display: none !important;
}

.ova_search_popup {
	background: rgba(var(--b-navy-rgb), .94) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.sls-hsearch {
	width: min(92vw, 620px);
	margin: 0 auto;
	text-align: center;
}

.sls-hsearch__label {
	display: none;
	margin: 0 0 8px;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--b-gold-l);
}

.sls-hsearch__title {
	margin: 0 0 22px;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: clamp(24px, 3.4vw, 36px);
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
}

.sls-hsearch__row { display: flex; gap: 10px; }

.sls-hsearch input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font-family: inherit;
	font-size: 16px;
	color: var(--b-ink);
	background: #fff;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 16px 24px;
}

.sls-hsearch input[type="search"]:focus {
	outline: none;
	border-color: var(--b-gold-l);
	box-shadow: 0 0 0 4px rgba(var(--b-gold-rgb), .3);
}

.sls-hsearch button {
	flex: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--b-navy);
	background: var(--b-gold-l);
	border: 0;
	border-radius: 999px;
	padding: 16px 34px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.sls-hsearch button:hover { background: #fff; transform: translateY(-2px); }

.sls-hsearch__hints {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none !important;
}

.sls-hsearch__hints li { list-style: none !important; margin: 0; }

.sls-hsearch__hints button {
	font-size: 13px;
	font-weight: 600;
	color: var(--b-gold-l);
	background: rgba(var(--b-gold-rgb), .14);
	border: 1px solid rgba(var(--b-gold-rgb), .4);
	border-radius: 999px;
	padding: 8px 15px;
}

.sls-hsearch__hints button:hover { background: rgba(var(--b-gold-rgb), .28); color: #fff; transform: none; }

@media (max-width: 560px) {
	.sls-hsearch__row { flex-direction: column; }
	.sls-hsearch button { width: 100%; }
}

/* --- Book Now ------------------------------------------------------------- */
/* Booking is the reason most people are on the site, so the button is the one
   loud thing in the bar. Chained to .menu-item to clear the theme's own link
   colours, which are set at that specificity. */
.menu-item.sls-book-item { display: flex; align-items: center; }

.menu-item.sls-book-item .sls-book-btn,
a.sls-book-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--b-gold-l, #D4AC74), var(--b-gold-d, #B18954));
	color: #16293F !important;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .01em;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	border: 0;
	box-shadow: 0 2px 6px rgba(13, 27, 43, .18), 0 8px 20px rgba(177, 137, 84, .28);
	transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, filter .2s ease;
}

.menu-item.sls-book-item .sls-book-btn:hover,
a.sls-book-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 4px 10px rgba(13, 27, 43, .22), 0 12px 28px rgba(177, 137, 84, .36);
}

.menu-item.sls-book-item .sls-book-btn:focus-visible,
a.sls-book-btn:focus-visible { outline: 3px solid rgba(212, 172, 116, .6); outline-offset: 3px; }

/* The off-canvas panel stacks its items, so let the button fill the row. */
.ovatheme_menu_mobile .sls-book-item,
.canvas-menu .sls-book-item,
.menu_mobile .sls-book-item { display: block; margin-top: 14px; }

.ovatheme_menu_mobile .sls-book-item .sls-book-btn,
.canvas-menu .sls-book-item .sls-book-btn,
.menu_mobile .sls-book-item .sls-book-btn { display: flex; width: 100%; padding: 14px 22px; font-size: 15px; }

/* The theme draws its hover underline as a pseudo-element on every menu item.
   Under a filled pill it reads as a stray shelf, so the button opts out. */
.menu-item.sls-book-item::before,
.menu-item.sls-book-item::after,
.menu-item.sls-book-item > a::before,
.menu-item.sls-book-item > a::after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
}

.menu-item.sls-book-item > a { border-bottom: 0 !important; box-shadow: none; }
.menu-item.sls-book-item .sls-book-btn {
	box-shadow: 0 2px 6px rgba(13, 27, 43, .18), 0 8px 20px rgba(177, 137, 84, .28);
}

/* The theme's style.css loads after the plugin's and sets its own padding and
   display on every menu link, which squashed the pill onto its own text. Same
   fight as the sticky header — win it explicitly rather than by load order. */
.menu-item.sls-book-item > a.sls-book-btn,
li.sls-book-item > a.sls-book-btn,
a.sls-book-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	padding: 11px 24px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	border-radius: 999px !important;
}

/* The off-canvas panel stacks, so there the button spans the row instead. */
.ovatheme_menu_mobile li.sls-book-item > a.sls-book-btn,
.canvas-menu li.sls-book-item > a.sls-book-btn,
.menu_mobile li.sls-book-item > a.sls-book-btn {
	display: flex !important;
	width: 100% !important;
	padding: 14px 24px !important;
}

/* --- Full-bleed hero photos ----------------------------------------------- */
/* The theme's global `img { height: auto }` was beating the `height: 100%` in
   home.css / about.css, so an absolutely-positioned hero photo fell back to its
   natural aspect height. On desktop that still overshot the hero and nobody
   noticed; on a phone a 390px-wide photo is only ~198px tall inside an ~880px
   hero, leaving the bottom two thirds as bare scrim. Pin it here, where the
   rule lands after the theme, so it covers at every width. */
.sls-hm__hero > img.sls-hm__hero-img,
.sls-ab__hero > img.sls-ab__hero-img,
img.sls-hm__hero-img,
img.sls-ab__hero-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}

/* --- Hero badge on small screens ------------------------------------------ */
/* The address is long enough to wrap to two lines on a phone; at .1em tracking
   and 12.5px it wrapped awkwardly and the pill grew tall. Tighten the tracking
   and give the two lines a comfortable leading instead. */
@media (max-width: 560px) {
	.sls-hm__hero-badge,
	.sls-ab__hero-badge {
		font-size: 11px;
		letter-spacing: .05em;
		line-height: 1.45;
		gap: 7px;
		padding: 8px 14px;
		align-items: flex-start;
	}

	.sls-hm__hero-badge svg,
	.sls-ab__hero-badge svg { width: 14px; height: 14px; margin-top: 1px; }
}

/* --- Mobile booking bar ---------------------------------------------------- */
/* Phones only. Desktop already has the button in the nav, and the theme's own
   header button (logged-in users) sits alongside it. */
.sls-book-bar { display: none; }

@media (max-width: 767px) {
	.sls-book-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(13, 27, 43, .94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-top: 1px solid rgba(255, 255, 255, .12);
		box-shadow: 0 -6px 24px rgba(13, 27, 43, .28);
	}

	.sls-book-bar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

	.sls-book-bar__text strong {
		font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}

	.sls-book-bar__text em {
		font-size: 11.5px; font-style: normal; color: rgba(255, 255, 255, .62); line-height: 1.2;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}

	a.sls-book-btn--bar { flex: none; padding: 12px 20px !important; font-size: 14px; }

	/* Keep the bar from covering the end of the page or the footer credit. */
	body { padding-bottom: 68px; }
}

/* The theme's header button is its demo "Submit Ad" widget, repurposed as the
   booking CTA — dress it as our pill so it does not stay theme teal. */
.ova_button_ad a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 11px 24px !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--b-gold-l, #D4AC74), var(--b-gold-d, #B18954)) !important;
	color: #fff !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(13, 27, 43, .18), 0 8px 20px rgba(177, 137, 84, .28);
}

/* On desktop the nav already carries a Book Now, so drop the duplicate. */
@media (min-width: 1025px) {
	.ova_button_ad { display: none !important; }
}

/* --- Mobile booking bar: keep it from covering things ---------------------- */
@media (max-width: 767px) {
	/* The theme resets body padding after our rule, so the page could scroll
	   its last 68px underneath the fixed bar. Force the clearance. */
	body { padding-bottom: 72px !important; }

	/* The theme's back-to-top sits at bottom:60px — exactly where the bar is.
	   Lift it clear, and keep it above the bar's own stacking context. */
	#scrollUp {
		bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* --- Brand title (phones and tablets) -------------------------------------- */
/* Desktop has the full nav and the wordmark reads fine, so the title only
   appears where the header is just the mark and a hamburger. */
.sls-brand-title { display: none; }

@media (max-width: 1024px) {
	.header_sticky .brand_el > a,
	.brand_el > a {
		display: inline-flex !important;
		align-items: center;
		gap: 11px;
		text-decoration: none !important;
	}

	.sls-brand-title {
		display: inline-block;
		max-width: 46vw;
		font-size: 16px;
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: -.015em;
		color: var(--sls-h-text, #fff);
		text-decoration: none !important;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

@media (max-width: 560px) {
	.header_sticky .brand_el > a,
	.brand_el > a { gap: 9px; }

	.sls-brand-title { font-size: 14.5px; max-width: 52vw; }
}

/* Very narrow phones: the hamburger and the mark need the room more. */
@media (max-width: 360px) {
	.sls-brand-title { font-size: 13.5px; max-width: 48vw; }
}