/* Royal Mustang – site-wide behaviour styles (layout, colours and fonts live in the Elementor classes rm-*) */

/* ---------- Nav: the page you are on ---------- */
.rm-topbar .rm-navlink.is-current,
.rm-topbar .rm-navlink.is-current > a {
	color: var(--rm-blue, #0B3D7A);
	text-decoration: underline;
	text-decoration-color: var(--rm-red, #C8281E);
	text-decoration-thickness: 2px;
	text-underline-offset: 9px;
}
.rm-navrow { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rm-navrow::-webkit-scrollbar { display: none; }

/* ---------- Home: hero ---------- */
.rm-bh-hero .rm-bh-bg,
.rm-ph-hero .rm-bh-bg {
	transform-origin: 60% 40%;
	animation: rm-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes rm-kenburns {
	from { transform: scale(1.02); }
	to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

/* Live open / closed badge (text set by script.js from the opening hours) */
.rm-bh-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.rm-bh-status::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: #C9DBF5;
}
.rm-bh-status.is-open::before { background: #4ADE80; animation: rm-live 2s ease-out infinite; }
.rm-bh-status.is-closed::before { background: #F87171; }
@keyframes rm-live {
	0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
	100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}
.rm-fact { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- Opening hours: today's row ---------- */
.rm-bh-hrow { transition: background-color .3s ease; }
.rm-bh-hrow.is-today { background: var(--rm-mist, #F5F8FC); color: var(--rm-blue, #0B3D7A); font-weight: 700; }
.rm-bh-hrow.is-today > :first-child::after { content: "  · tänään"; font-weight: 500; color: var(--rm-red, #C8281E); }

/* ---------- Endless photo strip ---------- */
.rm-bh-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rm-bh-track.is-running {
	padding-inline-end: 20px; /* = the gap, so the loop is seamless */
	animation: rm-marquee var(--rm-mq-dur, 50s) linear infinite;
}
.rm-bh-marquee:hover .rm-bh-track { animation-play-state: paused; }
@keyframes rm-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.rm-bh-item .rm-bh-item-img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease; }
.rm-bh-item:hover .rm-bh-item-img { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(19, 32, 58, .18); }

/* ---------- Service cards (rm-sv-*): one card is open (is-active, set by script.js) ---------- */
.rm-sv-row { counter-reset: rm-sv; transition: grid-template-columns .75s cubic-bezier(.2, .8, .2, 1); }
.rm-sv-card { counter-increment: rm-sv; cursor: pointer; isolation: isolate; }
.rm-sv-card .rm-sv-img {
	transform: scale(1.02);
	filter: brightness(.84) saturate(.85);
	transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
}
.rm-sv-card.is-active .rm-sv-img { transform: scale(1.1); filter: brightness(1) saturate(1.05); }
body .rm-sv-row .rm-sv-card::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	z-index: 0;
	pointer-events: none;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(6, 16, 34, 0) 38%, rgba(6, 16, 34, .55) 68%, rgba(6, 16, 34, .92) 100%);
}
body .rm-sv-row .rm-sv-card::before {
	content: counter(rm-sv, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 22px;
	left: 22px;
	right: auto;
	bottom: auto;
	width: 46px;
	height: 46px;
	z-index: 2;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(6, 16, 34, .25);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #FFFFFF;
	font: 400 15px/1 'Alfa Slab One', serif;
	transition: background-color .5s ease, border-color .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
body .rm-sv-row .rm-sv-card.is-active::before { background: var(--rm-red, #C8281E); border-color: var(--rm-red, #C8281E); transform: rotate(-8deg) scale(1.08); }
.rm-sv-card .rm-sv-body { z-index: 1; }
.rm-sv-row.is-ready .rm-sv-text,
.rm-sv-row.is-ready .rm-sv-link {
	max-height: 0;
	margin-block-start: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(14px);
	transition: max-height .6s cubic-bezier(.2, .8, .2, 1), margin .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.rm-sv-row.is-ready .rm-sv-card.is-active .rm-sv-text { max-height: 7em; margin-block-start: 10px; opacity: 1; transform: none; transition-delay: .15s; }
.rm-sv-row.is-ready .rm-sv-card.is-active .rm-sv-link { max-height: 5em; margin-block-start: 18px; opacity: 1; transform: none; transition-delay: .25s; }
body .rm-sv-card .rm-sv-text { margin-block-start: 10px; }
body .rm-sv-card .rm-sv-link { margin-block-start: 18px; }
body .rm-sv-card .rm-sv-link a {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 999px;
	background: #FFFFFF;
	color: inherit;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
body .rm-sv-card .rm-sv-link a:hover { background: var(--rm-red, #C8281E); color: #FFFFFF; }
.rm-sv-title { background: linear-gradient(var(--rm-red, #C8281E), var(--rm-red, #C8281E)) 0 100% / 0 3px no-repeat; padding-bottom: 6px; transition: background-size .7s cubic-bezier(.2, .8, .2, 1); }
.rm-sv-card.is-active .rm-sv-title { background-size: 56px 3px; }
@media (min-width: 1025px) {
	.rm-sv-row:has(> .rm-sv-card:nth-child(1).is-active) { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
	.rm-sv-row:has(> .rm-sv-card:nth-child(2).is-active) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr); }
	.rm-sv-row:has(> .rm-sv-card:nth-child(3).is-active) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr); }
	.rm-sv-row:has(> .rm-sv-card:nth-child(4).is-active) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.3fr); }
}

/* ---------- Tabs (lunch days + à la carte categories, classes rm-bx-*) ---------- */
body .rm-bx-tabs > .rm-bx-menu { position: sticky; top: var(--rm-bx-top, 12px); z-index: 5; scrollbar-width: none; }
.rm-bx-menu::-webkit-scrollbar { display: none; }
.rm-bx-menu .rm-bx-tab { transition: background-color .25s ease, color .25s ease; }
.rm-bx-menu .rm-bx-tab.e--selected,
.rm-bx-menu .rm-bx-tab.e--selected:hover { background-color: var(--rm-blue, #0B3D7A); color: #FFFFFF; }
body .rm-bx-menu .rm-bx-tab.is-today::after {
	content: "";
	display: block;
	position: absolute;
	top: 7px;
	right: 7px;
	left: auto;
	bottom: auto;
	width: 7px;
	height: 7px;
	opacity: 1;
	border-radius: 50%;
	background: var(--rm-red, #C8281E);
}
body .rm-bx-menu .rm-bx-tab.is-today.e--selected::after { background: #FFFFFF; }
/* cards rise in one after another (again on every tab change) */
.rm-bx-tabs.is-armed:not(.is-in) .rm-bx-card,
.rm-bx-tabs.is-armed:not(.is-in) .rm-mc-dish { opacity: 0; }
.rm-bx-tabs.is-in .rm-bx-grid > *,
.rm-bx-tabs.is-in .rm-mc-grid > * { animation: rm-in .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.rm-bx-tabs.is-in .rm-bx-grid > :nth-child(2), .rm-bx-tabs.is-in .rm-mc-grid > :nth-child(2) { animation-delay: .05s; }
.rm-bx-tabs.is-in .rm-bx-grid > :nth-child(3), .rm-bx-tabs.is-in .rm-mc-grid > :nth-child(3) { animation-delay: .10s; }
.rm-bx-tabs.is-in .rm-bx-grid > :nth-child(4), .rm-bx-tabs.is-in .rm-mc-grid > :nth-child(4) { animation-delay: .15s; }
.rm-bx-tabs.is-in .rm-bx-grid > :nth-child(5), .rm-bx-tabs.is-in .rm-mc-grid > :nth-child(5) { animation-delay: .20s; }
.rm-bx-tabs.is-in .rm-bx-grid > :nth-child(6), .rm-bx-tabs.is-in .rm-mc-grid > :nth-child(6) { animation-delay: .25s; }
.rm-bx-tabs.is-in .rm-bx-grid > :nth-child(n+7), .rm-bx-tabs.is-in .rm-mc-grid > :nth-child(n+7) { animation-delay: .30s; }
@keyframes rm-in {
	from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: none; }
}
.rm-bx-card { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.rm-bx-card .rm-bx-img { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.rm-bx-card .rm-bx-body { position: relative; z-index: 1; background-color: #FFFFFF; }
@media (hover: hover) {
	.rm-bx-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(19, 32, 58, .14); }
	.rm-bx-card:hover .rm-bx-img { transform: scale(1.07); }
}
@media (hover: none) { .rm-bx-card:active, .rm-mc-dish:active { transform: scale(.97); } }

/* ---------- Map box ---------- */
.rm-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
	.rm-bh-hero .rm-bh-bg, .rm-ph-hero .rm-bh-bg, .rm-bh-track.is-running, .rm-bh-status.is-open::before { animation: none; }
	.rm-bx-tabs.is-in .rm-bx-grid > *, .rm-bx-tabs.is-in .rm-mc-grid > * { animation: none; }
	.rm-sv-row, .rm-sv-card .rm-sv-img, .rm-sv-row.is-ready .rm-sv-text, .rm-sv-row.is-ready .rm-sv-link { transition: none; }
}

/* =====================================================================
   Motion system (classes rm-sx-*). Scroll-driven, so it also runs while scrolling on phones.
   Content is only hidden once the script is running (html.rm-sx-on), never without it.
   ===================================================================== */
.rm-sx-reveal, .rm-sx-stagger > * {
	transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s ease;
	transition-delay: var(--rm-d, 0ms);
}
.rm-sx-on .rm-sx-reveal:not(.is-in),
.rm-sx-on .rm-sx-stagger:not(.is-in) > * { opacity: 0; transform: translateY(30px); filter: blur(8px); }

.rm-sx-words .rm-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.rm-sx-words .rm-w > span {
	display: inline-block;
	transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity 1s ease, filter 1s ease;
	transition-delay: calc(var(--i, 0) * 55ms);
}
.rm-sx-on .rm-sx-words:not(.is-in) .rm-w > span { transform: translateY(105%); opacity: 0; filter: blur(6px); }

.rm-sx-zoom { clip-path: inset(calc((1 - var(--p, 1)) * 6%) calc((1 - var(--p, 1)) * 8%) round calc((1 - var(--p, 1)) * 44px)); }
.rm-sx-zoom .rm-sx-zoom-img { transform: scale(calc(1.22 - var(--p, 1) * .22)); }

.rm-sx-row { display: block; will-change: transform; }
body .rm-sx-words-sec .rm-sx-row-outline { color: transparent; -webkit-text-stroke: 2px var(--rm-blue, #0B3D7A); }
@media (max-width: 767px) { body .rm-sx-words-sec .rm-sx-row-outline { -webkit-text-stroke-width: 1.4px; } }

.rm-sx-card { transform-origin: 50% 0; will-change: transform; }

.rm-sx-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 219, 245, .18), transparent 45%);
}
.rm-sx-glow:hover::before { opacity: 1; }
.rm-sx-glow > * { position: relative; z-index: 1; }
.rm-sx-tilt {
	transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease;
	transition-delay: var(--rm-d, 0ms);
	will-change: transform;
}
.rm-sx-magnet {
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease;
	transition-delay: var(--rm-d, 0ms);
}

@media (hover: none) {
	.rm-sx-magnet:active, .rm-sx-rev-card:active { transform: scale(.97); }
	.rm-sx-rev-grid .rm-sx-rev-card { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, background-color .5s ease; }
	.rm-sx-rev-grid.is-snapping .rm-sx-rev-card:not(.is-center) { transform: scale(.94); opacity: .7; }
	.rm-sx-rev-grid .rm-sx-rev-card.is-center { background-color: rgba(255, 255, 255, .1); }
}
.rm-sx-rev-grid { scrollbar-width: none; }
.rm-sx-rev-grid::-webkit-scrollbar { display: none; }

.rm-sx-progress {
	position: fixed;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--rm-red, #C8281E), var(--rm-blue, #0B3D7A));
	pointer-events: none;
}

/* FAQ: "+" that turns into "−" when the question is open */
.rm-sx-faq-item summary { list-style: none; }
.rm-sx-faq-item summary::-webkit-details-marker { display: none; }
.rm-sx-faq-item { transition: border-color .3s ease, box-shadow .3s ease; }
.rm-sx-faq-item[open] { border-color: var(--rm-blue, #0B3D7A); box-shadow: 0 14px 34px rgba(11, 61, 122, .10); }
body .rm-sx-faq-q .rm-sx-faq-icon::before,
body .rm-sx-faq-q .rm-sx-faq-icon::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 2px;
	background: var(--rm-blue, #0B3D7A);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
body .rm-sx-faq-q .rm-sx-faq-icon::after { transform: rotate(90deg); }
body .rm-sx-faq-q .rm-sx-faq-icon > * { display: none; }
.rm-sx-faq-icon { transition: background-color .3s ease, transform .3s ease; }
body .rm-sx-faq-item[open] .rm-sx-faq-icon { background-color: var(--rm-blue, #0B3D7A); transform: none; }
body .rm-sx-faq-item[open] .rm-sx-faq-q .rm-sx-faq-icon::before,
body .rm-sx-faq-item[open] .rm-sx-faq-q .rm-sx-faq-icon::after { background: #FFFFFF; }
body .rm-sx-faq-item[open] .rm-sx-faq-q .rm-sx-faq-icon::after { transform: rotate(0deg); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.rm-sx-reveal, .rm-sx-stagger > *, .rm-sx-words .rm-w > span { transition: none; }
}