/* ==========================================================================
   Swahili Coast Villas - header: BOOK NOW button, hamburger, sticky bar
   Only the header's own names are targeted. The rules that have to beat the
   element's own generated CSS carry !important on purpose.
   ========================================================================== */

/* 1. The theme builder wrapper is the element whose parent is the body, so it
      carries the sticky position. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background-color: transparent !important;
}

/* 2. Nothing jumps between the two states. */
.scv-site-header,
.scv-header-main,
.scv-header-logo,
.scv-header-title,
.scv-header-book,
.scv-header-actions,
.scv-header-title-wrap,
.scv-header-menu .elementor-menu-toggle {
	transition: padding 0.35s ease, height 0.35s ease, width 0.35s ease, font-size 0.35s ease, fill 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

/* 3. The resting bar is fully transparent. */
.scv-site-header {
	background-color: transparent !important;
}

/* 4. The homepage hero runs up behind the header. The height is measured by the
      script and handed in as --scv-header-h, so no fixed number is baked in. */
.home .elementor-37 > div:first-child {
	margin-top: calc(-1 * var(--scv-header-h, 197px));
}

/* The homepage hero's slow zoom - the same pull-back the About Us,
   Accommodation and Gallery heroes carry (scale 1.15 down to 1 over 8s,
   linear, once, on load). Those heroes zoom an <img>; this one paints its
   photo as a CSS background on the container rule 4 pulls up behind the bar,
   so the photo is redrawn on the pseudo-element below instead. It inherits
   whatever background-image the container carries, which keeps a photo swap
   in the editor working, and the container's own overflow: hidden clips the
   extra 15% - the zoom never reaches the layout or the section underneath. */

.elementor-37 [data-id="ba3d0f6"] {
	overflow: hidden !important;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes scvHomeHeroZoom {
		from { transform: scale(1.15); }
		to   { transform: scale(1); }
	}

	.elementor-37 [data-id="ba3d0f6"]::before {
		content: '' !important;
		position: absolute !important;
		inset: 0 !important;
		background-image: inherit !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
		transform-origin: center center;
		animation: scvHomeHeroZoom 8s linear both !important;
		pointer-events: none !important;
		z-index: 0;
	}
}

/* 5. Row proportions: each part sizes to its content unless a rule below says
      otherwise. */
.scv-header-main {
	position: relative !important;
}
.scv-header-menu {
	flex: 0 0 auto;
}
.scv-header-actions {
	width: auto !important;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 18px;
	align-items: center;
}
.scv-header-brand {
	flex: 0 0 auto;
	justify-content: center !important;
}

/* 6. The central wordmark belongs to the compressed bar only: it is off while the
      bar sits at the top of the page and switches on once the page is scrolled.
      The template's own display rule outranks a plain declaration, hence
      !important. */
.scv-header-title-wrap {
	display: none !important;
	flex: 1 1 auto;
	min-width: 0;
}

/* 7. Two lockups. The white secondary mark takes the top of the page, the dark
      lockup takes the compressed bar. */
.scv-site-header:not(.scv-stuck) .scv-header-logo:not(.scv-header-logo-white) {
	display: none !important;
}
.scv-site-header.scv-stuck .scv-header-logo-white {
	display: none !important;
}

/* 8. The middle, desktop only. The brand column is lifted out of the row and
      pinned to the row's centre point, so the lockup is dead centre whatever the
      burger and the action group measure. Because it leaves the flow it no longer
      holds the row open, so the row keeps the lockup's height by hand (logo 157 +
      the column's own 10px padding top and bottom). Scoped to the resting bar:
      the compressed bar puts the dark lockup back in the flow, left of the
      wordmark. */
@media (min-width: 1025px) {
	.scv-site-header:not(.scv-stuck) .scv-header-main {
		min-height: 177px !important;
	}
	.scv-site-header:not(.scv-stuck) .scv-header-brand {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		margin: 0 !important;
		transform: translate(-50%, -50%) !important;
	}
}

/* 9. The language switcher: 5px of padding above and below on the switcher
      itself. The wrapper keeps no padding of its own, because a padded wrapper
      leaves the absolutely positioned copy of the switcher sitting 5px high. */
.scv-header-actions .trp-shortcode-switcher__wrapper {
	display: flex !important;
	align-items: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.scv-header-actions .trp-language-switcher {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

/* 10. The resting bar: the row's top and bottom padding are off. */
.scv-header-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* 11. The logo at rest, 10% larger than before. */
@media (min-width: 1025px) {
	.scv-header-logo {
		height: 157px !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* 12. BOOK NOW. Radius and colours follow the live site: 10px corners, white
       label, and terracotta on hover. */
.scv-header-book {
	border-radius: 10px !important;
	color: #FFFFFF !important;
	white-space: nowrap;
}
.scv-header-book:hover,
.scv-header-book:focus,
.scv-header-book:active {
	background-color: #C96F4E !important;
	border-color: #C96F4E !important;
	color: #FFFFFF !important;
}

/* 13. The hamburger, 50px. The shape is the ElementsKit menu-7 glyph used on
       emersonspice.com (two full-width bars and a third bar indented from the
       left), drawn as a mask so the colour is a plain background-color: white on
       the transparent top bar, terracotta over the compressed bar's near-white
       background where white would vanish. */
.scv-header-menu .elementor-menu-toggle svg {
	display: none !important;
}
.scv-header-menu .elementor-menu-toggle {
	display: block;
	width: 50px !important;
	height: 50px !important;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background-color: #FFFFFF !important;
	cursor: pointer;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M0 0h400v25H0zM0 87h400v26H0zM125 175h275v25H125z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M0 0h400v25H0zM0 87h400v26H0zM125 175h275v25H125z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.scv-header-menu .elementor-menu-toggle:hover,
.scv-header-menu .elementor-menu-toggle.elementor-active {
	background-color: #C96F4E !important;
}

/* 14. The panel is pinned to the bottom edge of the header (the position is fed
       in as a custom property by the script). Elementor's menu script writes
       inline geometry, so every one of those properties needs !important. */
.scv-header-menu .elementor-nav-menu--dropdown {
	display: none;
	position: fixed !important;
	top: var(--scv-header-bottom, 120px) !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	z-index: 950;
	padding: 18px 0 26px;
	background-color: #FBFBF9;
	box-shadow: 0 14px 34px rgba(166, 83, 60, 0.12);
}
.scv-header-menu .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown {
	display: block;
}
.scv-header-menu .elementor-nav-menu--dropdown .elementor-nav-menu {
	display: block !important;
	width: 100% !important;
}
.scv-header-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li {
	display: block !important;
	position: static !important;
	width: 100% !important;
}
.scv-header-menu .elementor-nav-menu--dropdown .elementor-item {
	display: block !important;
	position: static !important;
	padding: 13px 24px !important;
	font-family: Aboreto, Optima, serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	color: #A6533C !important;
	text-align: center !important;
}
.scv-header-menu .elementor-nav-menu--dropdown .elementor-item:hover,
.scv-header-menu .elementor-nav-menu--dropdown .elementor-item-active {
	color: #C96F4E !important;
	background-color: rgba(231, 217, 198, 0.35) !important;
}
.scv-header-menu .elementor-nav-menu--dropdown .sub-menu {
	position: static !important;
	left: auto !important;
	top: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
}
.scv-header-menu .elementor-nav-menu--dropdown .sub-menu .elementor-item {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	font-size: 13px !important;
	color: #88755A !important;
}

/* 15. Compressed state, once the page has scrolled: a translucent Mineral White
       at 87% opacity, which is the opacity the Emerson Spice sticky bar uses.
       The bar's own top and bottom padding drops from 10px to 2px here, which is
       what brings the bar back to 92px with the 20% larger lockup in the row
       (68px lockup + the brand column's 20px padding + 4px = 92px). */
.scv-site-header.scv-stuck {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	background-color: rgba(251, 249, 249, 0.87) !important;
	box-shadow: 0 8px 24px rgba(60, 42, 30, 0.10);
}
.scv-site-header.scv-stuck .scv-header-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.scv-site-header.scv-stuck .scv-header-actions,
.scv-site-header.scv-stuck .scv-header-title-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.scv-site-header.scv-stuck .scv-header-logo {
	height: 68px !important;
	width: auto !important;
	max-width: none !important;
}
.scv-site-header.scv-stuck .scv-header-book {
	padding: 8px 18px !important;
	font-size: 13px !important;
}
.scv-site-header.scv-stuck .scv-header-menu .elementor-menu-toggle {
	width: 44px !important;
	height: 44px !important;
	background-color: #A6533C !important;
}

/* 16. The wordmark comes on with the compressed bar, on desktop only: at tablet
       and phone widths the row has no space for it in either state. */
@media (min-width: 1025px) {
	.scv-site-header.scv-stuck .scv-header-title-wrap {
		display: block !important;
	}
}

/* 17. Tablet. */
@media (max-width: 1024px) {
	.scv-header-actions {
		gap: 14px;
	}
	.scv-header-logo {
		height: 75px !important;
		width: auto !important;
		max-width: none !important;
	}
	.scv-header-book {
		padding: 8px 16px !important;
		font-size: 12px !important;
	}
	.scv-site-header.scv-stuck .scv-header-main {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.scv-site-header.scv-stuck .scv-header-logo {
		height: 58px !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* 18. Phone. */
@media (max-width: 767px) {
	.scv-header-actions {
		gap: 10px;
	}
	.scv-header-logo {
		height: 57px !important;
		width: auto !important;
		max-width: none !important;
	}
	.scv-header-book {
		padding: 7px 12px !important;
		font-size: 11px !important;
	}
	.scv-site-header.scv-stuck .scv-header-main {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.scv-site-header.scv-stuck .scv-header-logo {
		height: 47px !important;
		width: auto !important;
		max-width: none !important;
	}
	.scv-site-header.scv-stuck .scv-header-book {
		padding: 6px 12px !important;
		font-size: 11px !important;
	}
}

/* 19. Phone header.
       Row: hamburger left, language switcher in the gap beside it, logo dead
       centre, BOOK NOW right. The logo and the switcher leave the flow so both
       can be placed against the row rather than chained to the burger, and the
       row keeps its height by hand (the logo plus the brand column's 20px
       padding). The static lockup is 50% larger than the compressed one.
       The switcher was 118px wide inside a 43px slot (language name plus caret)
       and ran across BOOK NOW; the name and caret are therefore kept out of the
       closed control and only appear inside the opened list. The flag is sized
       through TranslatePress's own --flag-size token, which the wrapper sets
       inline at 18px and which has to be pinned at every level with !important
       to beat that inline style.
       Two containing blocks have to be cleared before the switcher can be placed
       against the row: the actions group is static by rule, and the shortcode
       widget wrapper around the switcher is position: relative by Elementor's own
       default, which would otherwise measure the switcher from the right-hand
       group instead of from the row.
       Tap-to-open is the plugin's own "open on click" mode: the shortcode
       switcher is set to clickLanguage, so the markup ships
       data-open-mode="click" and the plugin's script binds the toggle, the
       outside click and Escape. The list is opened by the plugin's is-open class
       and held shut by display here, so a page where that script has not run yet
       cannot show a floating panel, and transitions are off so the plugin takes
       its instantaneous branch instead of waiting on a transitionend. */
@media (max-width: 767px) {
	/* The row's own gutters, pulled in so the burger and the book button sit
	   nearer the screen edges and the actions group gains the room. */
	.scv-site-header {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
	.scv-header-main {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.scv-header-actions {
		position: static !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* the switcher measures its position from the row, not from the widget box */
	.scv-header-actions .elementor-element-27a6071 {
		position: static !important;
	}

	.scv-header-menu .elementor-menu-toggle {
		width: 40px !important;
		height: 40px !important;
	}
	.scv-site-header.scv-stuck .scv-header-menu .elementor-menu-toggle {
		width: 36px !important;
		height: 36px !important;
	}

	/* ---- the logo, dead centre in both states ---- */
	.scv-header-brand {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		margin: 0 !important;
		transform: translate(-50%, -50%) !important;
	}
	/* static: 1.5 x the 57px that was here before */
	.scv-site-header:not(.scv-stuck) .scv-header-logo {
		height: 85.5px !important;
		width: auto !important;
		max-width: none !important;
	}
	/* the row holds the logo's height plus the brand column's 10px padding */
	.scv-site-header:not(.scv-stuck) .scv-header-main {
		min-height: 106px !important;
	}
	.scv-site-header.scv-stuck .scv-header-main {
		min-height: 67px !important;
	}

	/* ---- the switcher, in the gap between the burger and the logo ---- */
	.scv-site-header .scv-header-actions .trp-shortcode-switcher__wrapper {
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		padding: 0 !important;
	}
	.scv-site-header:not(.scv-stuck) .scv-header-actions .trp-shortcode-switcher__wrapper {
		left: 68px !important;
	}
	.scv-site-header.scv-stuck .scv-header-actions .trp-shortcode-switcher__wrapper {
		left: 79px !important;
	}
	.scv-header-actions .trp-shortcode-switcher__wrapper,
	.scv-header-actions .trp-shortcode-switcher__wrapper * {
		--flag-size: 24px !important;
	}
	.scv-header-actions .trp-language-switcher {
		display: inline-flex !important;
		flex: 0 0 auto !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		max-width: 44px !important;
		min-width: 0 !important;
		padding: 8px 10px !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		transition: none !important;
		background-color: rgba(255, 255, 255, 0.1) !important;
		border-radius: 6px !important;
		cursor: pointer !important;
	}
	/* The plate clips its own contents, so it has to let go once the list is out. */
	.scv-header-actions .trp-language-switcher.is-open {
		overflow: visible !important;
		background-color: rgba(255, 255, 255, 0.24) !important;
	}
	.scv-header-actions .trp-current-language-item__wrapper {
		flex: 0 0 auto !important;
		padding: 0 !important;
	}
	.scv-header-actions .trp-language-item {
		flex: 0 0 auto !important;
		padding: 0 !important;
	}
	/* Only the closed control loses its wording: the list keeps its names. */
	.scv-header-actions .trp-current-language-item__wrapper .trp-language-item-name,
	.scv-header-actions .trp-shortcode-arrow {
		display: none !important;
	}
	.scv-header-actions .trp-flag-image {
		display: block !important;
		flex: 0 0 auto !important;
		width: 24px !important;
		min-width: 24px !important;
		max-width: none !important;
		height: auto !important;
	}

	/* The list, opening to the right of the plate and clear of the bar below. */
	.scv-header-actions .trp-switcher-dropdown-list {
		display: none !important;
		position: absolute !important;
		left: 0 !important;
		right: auto !important;
		width: 180px !important;
		max-width: 70vw !important;
		max-height: 60vh !important;
		margin: 0 !important;
		padding: 6px !important;
		box-sizing: border-box !important;
		transition: none !important;
		background-color: #FFFFFF !important;
		border: 1px solid rgba(20, 56, 82, 0.10) !important;
		border-radius: 8px !important;
		box-shadow: 0 12px 28px rgba(60, 42, 30, 0.18) !important;
		z-index: 10000 !important;
	}
	.scv-site-header:not(.scv-stuck) .scv-header-actions .trp-switcher-dropdown-list {
		top: calc(100% + 42px) !important;
	}
	.scv-site-header.scv-stuck .scv-header-actions .trp-switcher-dropdown-list {
		top: calc(100% + 23px) !important;
	}
	.scv-header-actions .trp-language-switcher.is-open .trp-switcher-dropdown-list,
	.scv-header-actions .trp-language-switcher [aria-expanded="true"] ~ .trp-switcher-dropdown-list {
		display: flex !important;
	}
	.scv-header-actions .trp-switcher-dropdown-list .trp-language-item {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 10px 12px !important;
		border-radius: 6px !important;
		font-family: Optima, Aboreto, serif !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
		color: #143852 !important;
		text-decoration: none !important;
		white-space: nowrap !important;
	}
	.scv-header-actions .trp-switcher-dropdown-list .trp-language-item:hover,
	.scv-header-actions .trp-switcher-dropdown-list .trp-language-item:focus {
		background-color: rgba(166, 83, 60, 0.08) !important;
		color: #A6533C !important;
	}
	.scv-header-actions .trp-switcher-dropdown-list .trp-language-item-name {
		display: inline !important;
		padding-left: 0 !important;
	}
	.scv-header-actions .trp-switcher-dropdown-list .trp-flag-image {
		border-radius: 3px !important;
	}
}


/* --- HOME hero on a phone ------------------------------------------------
   post-37 floors the hero at ~830px and the three CTA cards switch to
   flex-direction: column at <=767px. Their aspect-ratios (687/427, 687/387,
   687/521) are tuned for a wide row, so stacked at ~360px wide they come to
   ~711px of card on top of the text block - the hero ran to about twice the
   screen. The cards go back to a row as on desktop, so they keep their
   proportions and shrink with the viewport, their labels scale down to suit
   the smaller cards, and the hero is one viewport tall.                   */
@media (max-width: 767px) {
	.home .elementor-37 [data-id="ba3d0f6"] {
		min-height: 100vh !important;
		min-height: 100svh !important;
	}
	.home .elementor-37 [data-id="a775f47"] {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
	}
	.home .elementor-37 [data-id="a775f47"] > * {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
	}
	.home .elementor-37 [data-id="a775f47"] h3 {
		font-size: 16px !important;
		inset-inline-end: 10px !important;
		inset-block-end: 10px !important;
	}
}