/* ==========================================================================
   Surjios Site – presentation layer.
   Colours and fonts come from Elementor Site Settings (global colours /
   typography); this file only adds behaviour, motion and the dark-mode swap.
   ========================================================================== */

:root {
	--sj-ease: cubic-bezier(.2, .7, .2, 1);
	--sj-shadow: 0 28px 70px -36px rgba(18, 36, 24, .45);
}

html { scroll-behavior: smooth; }
.sj-site [id] { scroll-margin-top: 96px; }
.sj-site { overflow-x: clip; }
html.sj-menu-open { overflow: hidden; }

/* ---------- Dark mode: every global colour is swapped for its “Dark Mode – …” twin ---------- */
html[data-theme="dark"] [class*="elementor-kit-"] {
	--e-global-color-sjbg: var(--e-global-color-sjdbg);
	--e-global-color-sjbg2: var(--e-global-color-sjdbg2);
	--e-global-color-sjcard: var(--e-global-color-sjdcard);
	--e-global-color-sjhead: var(--e-global-color-sjdhead);
	--e-global-color-text: var(--e-global-color-sjdtext);
	--e-global-color-sjline: var(--e-global-color-sjdline);
	--e-global-color-sjfoot: var(--e-global-color-sjdfoot);
	color-scheme: dark;
}
html[data-theme="dark"] .elementor-widget-image:not(.sj-logo) img { filter: brightness(.9) saturate(.96); }
html[data-theme="dark"] .sj-map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.55) brightness(.95); }
html.sj-theme-anim *,
html.sj-theme-anim *::before,
html.sj-theme-anim *::after {
	transition: background-color .6s ease, color .6s ease, border-color .6s ease, fill .6s ease !important;
}

/* ---------- Header ---------- */
.sj-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
	/* No fill-mode: a transform left behind would trap the fixed mobile menu. */
	animation: sjHeaderIn 1s var(--sj-ease);
}
.sj-site-header .sj-header { transition: background-color .5s ease, box-shadow .5s ease; }
.sj-site-header.is-scrolled .sj-header { box-shadow: 0 14px 40px -26px rgba(10, 25, 16, .55); }

/* Transparent header laid over a hero photo (Surjios → Settings) */
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header {
	position: fixed;
	left: 0;
	right: 0;
}
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-header {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(8, 18, 12, .45), rgba(8, 18, 12, 0)) !important;
	box-shadow: none;
}
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-nav:not(.is-open) {
	--sj-nav-color: #fff;
	--sj-nav-hover: #fff;
	--sj-toggle-color: #fff;
}
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-theme-toggle { color: #fff !important; }
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-header-social .elementor-social-icon {
	background-color: rgba(255, 255, 255, .14) !important;
}
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-header-social .elementor-social-icon i { color: #fff !important; }
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-header-social .elementor-social-icon svg { fill: #fff !important; }

/* Logo: transparent version on light backgrounds, cream-contoured version on dark ones
   (dark mode, or the transparent header over a hero photo). */
.sj-logo--dark { display: none !important; }
html[data-theme="dark"] .sj-logo--light,
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-logo--light { display: none !important; }
html[data-theme="dark"] .sj-logo--dark,
body.sj-transparent-header:has(.elementor > .sj-hero:first-child) .sj-site-header:not(.is-scrolled) .sj-logo--dark,
.single-elementor_library .sj-logo--dark { display: block !important; } /* header template editor: show both so each can be replaced */
.sj-logo img { transition: scale .5s var(--sj-ease); }
.sj-logo:hover img { scale: 1.06; }

/* ---------- Navigation widget ---------- */
.sj-nav { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
.sj-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px var(--sj-nav-gap, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sj-nav__list li { margin: 0; }
.sj-site .sj-nav__link { /* .sj-site outranks the kit's global "a" colour */
	position: relative;
	display: inline-block;
	padding: 8px 0;
	color: var(--sj-nav-color, #1e2b22);
	text-decoration: none;
	transition: color .35s ease;
}
.sj-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--sj-ease);
}
.sj-site .sj-nav__link:hover,
.sj-site .sj-nav__link:focus-visible,
.sj-site .sj-nav__link.is-active { color: var(--sj-nav-hover, #179c48); }
.sj-nav__link:hover::after,
.sj-nav__link:focus-visible::after,
.sj-nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.sj-site .sj-nav__toggle {
	display: none;
	position: relative;
	z-index: 3;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 46px !important;
	height: 46px;
	padding: 12px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--sj-toggle-color, var(--sj-nav-color, #1e2b22)) !important;
	cursor: pointer;
}
.sj-nav__toggle span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .5s var(--sj-ease), opacity .3s ease;
}
.sj-nav.is-open .sj-nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sj-nav.is-open .sj-nav__toggle span:nth-child(2) { opacity: 0; }
.sj-nav.is-open .sj-nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Full-screen mobile menu (duplicated per breakpoint option) */
@media (max-width: 1024px) {
	.sj-nav--bp-tablet .sj-nav__toggle { display: inline-flex !important; }
	.sj-nav--bp-tablet .sj-nav__panel {
		position: fixed;
		inset: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--sj-panel-bg, var(--e-global-color-sjbg, #f7f1e3));
		clip-path: circle(0 at calc(100% - 46px) 40px);
		visibility: hidden;
		transition: clip-path .8s var(--sj-ease), visibility 0s linear .8s;
	}
	.sj-nav--bp-tablet.is-open .sj-nav__panel {
		clip-path: circle(150% at calc(100% - 46px) 40px);
		visibility: visible;
		transition: clip-path .8s var(--sj-ease), visibility 0s;
	}
	.sj-nav--bp-tablet .sj-nav__list { flex-direction: column; gap: 14px; text-align: center; }
	.sj-site .sj-nav--bp-tablet .sj-nav__link {
		font-family: var(--e-global-typography-primary-font-family, serif) !important;
		font-size: clamp(30px, 8vw, 44px) !important;
		font-style: italic !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
	}
	.sj-nav--bp-tablet .sj-nav__list li { opacity: 0; translate: 0 24px; transition: opacity .5s ease, translate .7s var(--sj-ease); }
	.sj-nav--bp-tablet.is-open .sj-nav__list li { opacity: 1; translate: 0 0; transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
}
@media (max-width: 767px) {
	.sj-nav--bp-mobile .sj-nav__toggle { display: inline-flex !important; }
	.sj-nav--bp-mobile .sj-nav__panel {
		position: fixed;
		inset: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--sj-panel-bg, var(--e-global-color-sjbg, #f7f1e3));
		clip-path: circle(0 at calc(100% - 46px) 40px);
		visibility: hidden;
		transition: clip-path .8s var(--sj-ease), visibility 0s linear .8s;
	}
	.sj-nav--bp-mobile.is-open .sj-nav__panel {
		clip-path: circle(150% at calc(100% - 46px) 40px);
		visibility: visible;
		transition: clip-path .8s var(--sj-ease), visibility 0s;
	}
	.sj-nav--bp-mobile .sj-nav__list { flex-direction: column; gap: 14px; text-align: center; }
	.sj-site .sj-nav--bp-mobile .sj-nav__link {
		font-family: var(--e-global-typography-primary-font-family, serif) !important;
		font-size: clamp(30px, 8vw, 44px) !important;
		font-style: italic !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
	}
	.sj-nav--bp-mobile .sj-nav__list li { opacity: 0; translate: 0 24px; transition: opacity .5s ease, translate .7s var(--sj-ease); }
	.sj-nav--bp-mobile.is-open .sj-nav__list li { opacity: 1; translate: 0 0; transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
}

/* ---------- Dark-mode toggle widget ---------- */
.sj-site .sj-theme-toggle {
	--s: var(--sj-toggle-size, 40px);
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--s) !important;
	height: var(--s);
	padding: 0 !important;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important;
	border-radius: 50% !important;
	background: var(--sj-toggle-bg, transparent) !important;
	color: var(--sj-toggle-icon, var(--e-global-color-sjhead, #1e2b22)) !important;
	cursor: pointer;
	transition: rotate .6s var(--sj-ease), border-color .3s ease;
}
.sj-site .sj-theme-toggle:hover { rotate: 20deg; }
.sj-theme-toggle svg {
	position: absolute;
	width: 46%;
	height: 46%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	transition: transform .7s var(--sj-ease), opacity .45s ease;
}
.sj-theme-toggle .sj-theme-toggle__moon { fill: currentColor; stroke: none; }
html:not([data-theme="dark"]) .sj-theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.3); }
html[data-theme="dark"] .sj-theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.3); }

/* ---------- Buttons: soft sheen on hover ---------- */
.sj-site .elementor-button { position: relative; overflow: hidden; isolation: isolate; }
.sj-site .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .32) 50%, transparent 75%);
	translate: -130% 0;
	transition: translate .9s var(--sj-ease);
	pointer-events: none;
}
.sj-site .elementor-button:hover::after { translate: 130% 0; }

/* ---------- Hero ---------- */
.sj-hero { position: relative; overflow: hidden; }
.sj-hero-title .elementor-heading-title { text-shadow: 0 4px 40px rgba(0, 0, 0, .28); }
.sj-hero-title .sj-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .1em 0; margin-bottom: -.1em; }
.sj-hero-title .sj-word > span { display: inline-block; translate: 0 110%; }
.sj-hero-title.is-in .sj-word > span { animation: sjRise 1.2s var(--sj-ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }

.sj-scroll-cue { margin-top: 36px; }
.sj-scroll-cue .elementor-icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	animation: sjBob 2.4s ease-in-out infinite;
}

.sj-band { position: relative; }
@media (hover: none), (max-width: 1024px) {
	.sj-band { background-attachment: scroll !important; }
}

/* ---------- Typography accents ---------- */
.sj-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; }
.sj-eyebrow .elementor-heading-title::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}
.sj-small { opacity: .78; }
.sj-callout { position: relative; padding-top: 34px; }
.sj-callout::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 64px;
	height: 2px;
	translate: -50% 0;
	background: var(--e-global-color-accent, #c49a3c);
}

/* ---------- Cards & rooms ---------- */
.sj-card { transition: translate .7s var(--sj-ease), box-shadow .7s var(--sj-ease), border-color .5s ease; }
.sj-card:hover { translate: 0 -8px; box-shadow: var(--sj-shadow); border-color: transparent !important; }
.sj-room .sj-room-body { flex: 1 1 auto; }
.sj-room .sj-room-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--e-global-color-sjline, #e4d9c2); }
.sj-room .sj-room-img img { display: block; }

/* ---------- Image motion (zoom + parallax use separate properties so they combine) ---------- */
.sj-zoom img,
.sj-parallax img { transition: scale 1.4s var(--sj-ease), filter .6s ease; will-change: scale, translate; }
.sj-zoom:hover img { scale: 1.06; }
.sj-js .sj-parallax img { scale: 1.12; }
.sj-js .sj-parallax.sj-zoom:hover img { scale: 1.18; }

/* ---------- Gallery ---------- */
.sj-gallery .gallery-icon { overflow: hidden; border-radius: 16px; }
.sj-gallery .gallery-icon img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 1.3s var(--sj-ease), filter .6s ease; }
.sj-gallery .gallery-item:hover img { scale: 1.07; filter: saturate(1.08); }
.sj-js .sj-gallery .gallery-item { opacity: 0; translate: 0 34px; transition: opacity 1s ease, translate 1s var(--sj-ease); transition-delay: calc(var(--i, 0) * 90ms); }
.sj-js .sj-gallery .gallery-item.is-in { opacity: 1; translate: 0 0; }

.sj-menu-image img { box-shadow: var(--sj-shadow); }
.sj-map { width: 100%; }
.sj-map iframe { border-radius: 24px; box-shadow: var(--sj-shadow); }

/* ---------- Booking form widget ---------- */
.sj-booking {
	--card: var(--sj-form-card, var(--e-global-color-sjcard, #fffcf5));
	--field: var(--sj-form-field, var(--e-global-color-sjbg, #f7f1e3));
	--accent: var(--sj-form-accent, var(--e-global-color-primary, #179c48));
	--r: var(--sj-form-radius, 22px);
	--line: var(--e-global-color-sjline, #e4d9c2);
	--ink: var(--e-global-color-sjhead, #1e2b22);
	padding: clamp(22px, 4vw, 44px);
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
	box-shadow: var(--sj-shadow);
	color: var(--e-global-color-text, #4a4a42);
}
.sj-booking__title { margin: 0 0 6px; color: var(--ink); font-size: clamp(26px, 3vw, 34px); line-height: 1.2; }
.sj-booking__sub { margin: 0 0 18px; }
.sj-booking .sj-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sj-booking .sj-field { margin-top: 16px; }
.sj-booking label,
.sj-booking__label { display: block; margin: 0 0 7px; color: var(--ink); font-size: 14px; font-weight: 600; }
.sj-booking__label { margin-top: 22px; }
.sj-booking input,
.sj-booking select,
.sj-booking textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: calc(var(--r) / 2);
	background: var(--field);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.sj-booking input:focus,
.sj-booking select:focus,
.sj-booking textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.sj-room-card {
	margin-top: 12px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: calc(var(--r) * .7);
	background: color-mix(in srgb, var(--field) 55%, transparent);
}
.sj-room-card.is-new { animation: sjPop .6s var(--sj-ease); }
.sj-room-card .sj-field:first-of-type { margin-top: 10px; }
.sj-room-card__head { display: flex; align-items: center; justify-content: space-between; }
.sj-room-card__title { color: var(--ink); font-weight: 700; font-size: 17px; }
.sj-site .sj-room-card__remove,
.sj-site .sj-booking__add,
.sj-site .sj-booking__again {
	padding: 8px 14px !important;
	border: 1px solid var(--line) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--ink) !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
}
.sj-site .sj-room-card__remove { color: var(--e-global-color-secondary, #d8282c) !important; }
.sj-site .sj-booking__add { width: 100%; margin-top: 14px; padding: 13px !important; border-style: dashed !important; font-size: 15px !important; }
.sj-site .sj-booking__add:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.sj-site .sj-booking__submit {
	width: 100%;
	margin-top: 24px;
	padding: 17px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--accent) !important;
	color: #fff !important;
	cursor: pointer;
	transition: translate .4s var(--sj-ease), box-shadow .4s ease, filter .3s ease;
}
.sj-site .sj-booking__submit:hover { translate: 0 -2px; filter: brightness(1.06); box-shadow: 0 16px 34px -16px var(--accent); }
.sj-booking__hint { margin: 12px 0 0; font-size: 14px; text-align: center; opacity: .8; }
.sj-booking__error { margin: 14px 0 0; color: var(--e-global-color-secondary, #d8282c); font-weight: 600; }
.sj-booking__done { text-align: center; padding: 30px 0; animation: sjPop .6s var(--sj-ease); }
.sj-site .sj-booking__again { margin-top: 10px; }
@media (max-width: 600px) {
	.sj-booking .sj-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Keyframes ---------- */
@keyframes sjHeaderIn { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sjRise { to { translate: 0 0; } }
@keyframes sjBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes sjPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Calm mode: device asks for reduced motion, or animations switched off ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sj-site *, .sj-site *::before, .sj-site *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.sj-hero-title .sj-word > span { translate: 0 0; }
	.sj-js .sj-gallery .gallery-item { opacity: 1; translate: 0 0; }
}
.sj-no-anim .sj-scroll-cue .elementor-icon { animation: none; }
.sj-no-anim .sj-hero-title .sj-word > span { translate: 0 0; animation: none !important; }
.sj-no-anim .sj-gallery .gallery-item { opacity: 1 !important; translate: 0 0 !important; }
.sj-no-anim .sj-parallax img { scale: 1 !important; translate: 0 0 !important; }