/* =========================================================
   Kreita Stays – base styles on top of Kadence: typography,
   buttons, header, footer and the scroll animations.
   Colours and fonts come from the Kadence global palette and
   typography (Customizer → Colors / Typography), never hex
   values: each client gets its own look from the same sheet.
   ========================================================= */

/* Palette roles: ink = text and dark fills, deep = secondary
   text, accent = links and lines, tint and soft = light
   backgrounds, paper = page background. */
:root {
	--kst-ink:    var(--global-palette3);
	--kst-deep:  var(--global-palette2);
	--kst-accent: var(--global-palette1);
	--kst-tint:    var(--global-palette7);
	--kst-soft:  var(--global-palette8);
	--kst-paper:    var(--global-palette9);
	--kst-shadow:    color-mix(in srgb, var(--global-palette3) 35%, transparent);
	--kst-heading:    var(--global-heading-font-family);
	--kst-caps:     var(--global-primary-nav-font-family);
	--kst-danger:   #9f1d14; /* the only fixed colour: an error must read as one whatever the palette */
	--kst-ease:     cubic-bezier(.2, .7, .2, 1);
	--kst-reveal:   .9s;
}

html { scroll-padding-top: 110px; }

/* ---------- utility typography ---------- */

.entry-content .kst-eyebrow {
	font-family: var(--kst-caps);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kst-accent);
	margin: 0 0 18px;
}
.entry-content .kst-eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: currentColor;
	vertical-align: middle;
	margin-right: 12px;
	transform-origin: left;
}
.entry-content .kst-eyebrow.kst-center::before { display: none; }

.entry-content .kst-lede {
	font-size: 21px;
	line-height: 1.6;
	max-width: 34em;
}

.entry-content .kst-small {
	font-family: var(--kst-caps);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kst-deep);
	opacity: .8;
	margin: 0;
}

.kst-page .kst-title { text-wrap: balance; }

/* ---------- numbers ---------- */

.entry-content .kst-num {
	font-family: var(--kst-heading);
	font-size: 64px;
	line-height: 1;
	color: var(--kst-ink);
	margin: 0 0 6px;
	font-variant-numeric: lining-nums tabular-nums;
}
.entry-content .kst-num small {
	font-size: .42em;
	margin-left: .12em;
	color: var(--kst-accent);
}
@media (max-width: 767px) {
	.entry-content .kst-num { font-size: 48px; }
}

/* ---------- review cards ---------- */

.kst-card { position: relative; }
.kst-card .kst-card__in::before {
	content: '\201C';
	position: absolute;
	top: -22px;
	left: 28px;
	font-family: var(--kst-caps);
	font-weight: 600;
	font-size: 96px;
	line-height: .62;
	height: 40px;
	overflow: hidden;
	color: var(--kst-accent);
	background: var(--kst-paper);
	padding: 0 10px;
}
.entry-content .kst-card .kst-quote {
	font-size: 17px;
	line-height: 1.65;
	color: var(--kst-ink);
	margin: 0 0 24px;
}
.entry-content .kst-card .kst-score {
	font-family: var(--kst-caps);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kst-accent);
	margin: 0 0 14px;
}

/* ---------- buttons ---------- */

.button, button, input[type=submit] { transition: background-color .35s var(--kst-ease), color .35s var(--kst-ease), border-color .35s var(--kst-ease), box-shadow .35s var(--kst-ease), transform .35s var(--kst-ease); }
.button:hover, input[type=submit]:hover { transform: translateY(-2px); }

/* ---------- header ---------- */

#masthead .site-header-row-container { transition: box-shadow .4s var(--kst-ease); }
#masthead .item-is-stuck .site-header-row-container,
#masthead .item-is-stuck.site-header-row-container { box-shadow: 0 10px 30px -18px var(--kst-shadow); }
.site-branding a.brand img { transition: transform .4s var(--kst-ease); }
.header-navigation .primary-menu-container > ul > li > a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 4px;
	height: 1px;
	background: var(--kst-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--kst-ease);
}
.header-navigation .primary-menu-container > ul > li > a { position: relative; }
.header-navigation .primary-menu-container > ul > li > a:hover::after,
.header-navigation .primary-menu-container > ul > li.current-menu-item > a::after { transform: scaleX(1); }

/* ---------- language switcher ----------
   Header: "IT / EN" after the button, set apart at the far right (functions.php
   takes Polylang's item out of the main menu and prints .kst-lang), the current
   language underlined like the active item. Drawer: Polylang's menu item, both
   codes on one row. Codes set in functions.php. */

.kst-lang { margin-left: 30px; }
.kst-lang ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.kst-lang li { display: flex; align-items: center; }
.kst-lang li + li::before { content: '/'; color: var(--kst-tint); font-family: var(--kst-caps); font-size: 12px; }
.kst-lang a {
	position: relative;
	display: block;
	padding: .7em .5em;
	font-family: var(--kst-caps);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kst-deep);
	transition: color .5s var(--kst-ease);
}
.kst-lang a::after {
	content: '';
	position: absolute;
	left: .5em; right: .5em; bottom: 4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--kst-ease);
}
.kst-lang a:hover::after, .kst-lang .is-current a::after { transform: scaleX(1); }
.kst-lang .is-current a { color: var(--kst-accent); }

/* from the tablet breakpoint to 1199 px the sections and the button share one row only with tighter items */
@media (min-width: 1025px) and (max-width: 1199px) {
	.header-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .75em; padding-right: .75em; }
	.kst-lang { margin-left: 18px; }
}
@media (min-width: 1025px) and (max-width: 1099px) {
	.header-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .45em; padding-right: .45em; letter-spacing: .04em; }
}
/* a long menu (a rental page of a site with several rentals: the site's links
   plus the rental's sections) gets tighter items as the window narrows, so it
   keeps one row; 6 items or fewer keep the spacing above */
@media (min-width: 1200px) {
	.header-navigation .primary-menu-container > ul:has(> li:nth-child(7)) > li.menu-item > a { padding-left: min(1.5em, calc((100vw - 1010px) / 14)); padding-right: min(1.5em, calc((100vw - 1010px) / 14)); }
	.header-navigation .primary-menu-container > ul:has(> li:nth-child(8)) > li.menu-item > a { padding-left: min(1.2em, calc((100vw - 1040px) / 16)); padding-right: min(1.2em, calc((100vw - 1040px) / 16)); }
	/* three or more languages make the switcher about 35 px wider */
	#masthead:has(.kst-lang li:nth-child(3)) .header-navigation .primary-menu-container > ul:has(> li:nth-child(7)) > li.menu-item > a { padding-left: min(1.3em, calc((100vw - 1050px) / 14)); padding-right: min(1.3em, calc((100vw - 1050px) / 14)); }
	#masthead:has(.kst-lang li:nth-child(3)) .header-navigation .primary-menu-container > ul:has(> li:nth-child(8)) > li.menu-item > a { padding-left: min(1.05em, calc((100vw - 1080px) / 16)); padding-right: min(1.05em, calc((100vw - 1080px) / 16)); }
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.header-navigation .primary-menu-container > ul:has(> li:nth-child(7)) > li.menu-item > a { padding-left: clamp(.25em, calc((100vw - 940px) / 20), .75em); padding-right: clamp(.25em, calc((100vw - 940px) / 20), .75em); letter-spacing: .04em; }
	.header-navigation .primary-menu-container > ul:has(> li:nth-child(8)) > li.menu-item > a { padding-left: clamp(.25em, calc((100vw - 985px) / 16), .75em); padding-right: clamp(.25em, calc((100vw - 985px) / 16), .75em); }
}

/* the last resort, set by the script after the header when the menu still wraps (functions.php):
   !important because these win over every rule above, whatever the item count */
@media (min-width: 1025px) {
	html.kst-nav-1 .header-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .6em !important; padding-right: .6em !important; }
	html.kst-nav-2 .header-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .4em !important; padding-right: .4em !important; letter-spacing: .06em !important; }
	html.kst-nav-3 .header-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .25em !important; padding-right: .25em !important; letter-spacing: .02em !important; }
	html.kst-nav-3 .kst-lang { margin-left: 14px; }
}

#mobile-drawer .mobile-navigation ul li.lang-item { display: inline-flex; align-items: center; margin-top: 14px; }
#mobile-drawer .mobile-navigation ul li.lang-item + li.lang-item::before { content: '/'; color: var(--kst-tint); font-family: var(--kst-caps); font-size: 14px; }
#mobile-drawer .mobile-navigation ul li.lang-item > a { border-bottom: 0; padding: .6em .7em; font-family: var(--kst-caps); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--kst-deep); }
#mobile-drawer .mobile-navigation ul li.lang-item.current-lang > a { color: var(--kst-accent); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- footer ----------
   The footer uses the same accent as the calls to action. The theme's footer
   (template-parts/footer.php): brand, two or three columns of links, a
   bottom line. Kadence's rows keep the rules below when 'kst_own_footer' is off. */

#colophon.site-footer, .site-footer .site-footer-wrap, .site-footer .site-footer-row-container-inner { background: var(--global-palette-btn-bg, var(--kst-accent)); }
#colophon .footer-navigation .footer-menu-container > ul > li > a { color: var(--kst-paper); }
#colophon .footer-navigation .footer-menu-container > ul li a:hover,
#colophon .footer-navigation .footer-menu-container > ul li.current-menu-item > a { color: var(--kst-tint); }
.footer-html { font-size: 14px; color: var(--kst-paper); }
.footer-html a { color: var(--kst-paper); }

.kst-foot { color: var(--kst-paper); font-size: 15px; line-height: 1.6; }
.kst-foot__in { max-width: calc(var(--global-content-width) + 2 * var(--global-content-edge-padding)); margin: 0 auto; padding: 96px var(--global-content-edge-padding) 34px; }
.kst-foot__cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 56px; }
.kst-foot__cols--3 { grid-template-columns: 1.7fr 1fr 1fr; }
.kst-foot__logo { display: inline-block; }
.kst-foot__logo img { display: block; width: 150px; height: auto; filter: brightness(0) invert(1); }
.kst-foot__logo span { font-family: var(--kst-heading); font-size: 30px; color: var(--kst-paper); }
.kst-foot__line { max-width: 15em; margin: 26px 0 12px; font-family: var(--kst-heading); font-size: 27px; line-height: 1.25; color: var(--kst-paper); text-wrap: pretty; }
.kst-foot__where { margin: 0; font-family: var(--kst-caps); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--kst-paper); }
.kst-foot__title { margin: 8px 0 20px; font-family: var(--kst-heading); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--kst-paper); }
.kst-foot ul { margin: 0; padding: 0; list-style: none; }
.kst-foot li { margin: 0 0 11px; }
.kst-foot__small { display: block; font-family: var(--kst-caps); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--kst-paper); }
.kst-foot a { color: var(--kst-paper); text-decoration: none; }
/* the underline that draws itself: text links only, not the logo */
.kst-foot li a, .kst-foot__bottom a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .35s var(--kst-ease);
}
.kst-foot li a:hover, .kst-foot li a:focus-visible, .kst-foot li a[aria-current],
.kst-foot__bottom a:hover, .kst-foot__bottom a:focus-visible { background-size: 100% 1px; }
.kst-foot__note { margin: 18px 0 0; font-size: 13px; }
.kst-foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 80px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--kst-paper) 16%, transparent); font-size: 13px; }
.kst-foot__bottom p { margin: 0; }
.kst-foot__sep { margin: 0 .7em; color: color-mix(in srgb, var(--kst-paper) 40%, transparent); }
@media (max-width: 1024px) {
	.kst-foot__cols, .kst-foot__cols--3 { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
	.kst-foot__cols--3 { grid-template-columns: 1fr 1fr; }
	.kst-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.kst-foot__in { padding-top: 64px; }
	.kst-foot__cols, .kst-foot__cols--3 { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
	.kst-foot__line { font-size: 23px; }
	.kst-foot__bottom { flex-direction: column; margin-top: 52px; }
}

/* =========================================================
   ANIMATIONS – only with JS on and without reduced motion.
   The templates set data-kst (kst_reveal()): up (default),
   left, right, scale, fade, img. Only opacity and transform
   move, so the compositor does the work; a section with
   photos enters once its photos are decoded (theme.js).
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

	/* initial state */
	.kst-js [data-kst] {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity var(--kst-reveal) var(--kst-ease), transform var(--kst-reveal) var(--kst-ease);
		transition-delay: var(--kst-delay, 0ms);
	}
	.kst-js [data-kst="left"]  { transform: translateX(-44px); }
	.kst-js [data-kst="right"] { transform: translateX(44px); }
	.kst-js [data-kst="scale"] { transform: scale(.92); transition-duration: 1.1s; }
	.kst-js [data-kst="fade"]  { transform: none; transition-duration: 1.2s; }

	/* photos rise a little further and more slowly */
	.kst-js [data-kst="img"] { transform: translateY(40px); transition-duration: 1.2s; }

	/* revealed state */
	.kst-js [data-kst].kst-in { opacity: 1; transform: none; }

	/* a photo still loading when its section entered (slow network) fades in on arrival */
	.kst-js img.kst-wait { opacity: 0; }
	.kst-js img.kst-wait.kst-ready { animation: kst-fade-in .7s var(--kst-ease) both; }
	@keyframes kst-fade-in { from { opacity: 0; } to { opacity: 1; } }

	/* the eyebrow rule draws itself */
	.kst-js .kst-eyebrow::before { transform: scaleX(0); transition: transform .7s var(--kst-ease) .25s; }
	.kst-js .kst-eyebrow.kst-in::before { transform: scaleX(1); }

	/* the hero's coloured panel slides in from the right */
	.kst-js .kst-hero.kst-panel::before {
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 1.2s var(--kst-ease) .1s;
	}
	.kst-js .kst-hero.kst-panel.kst-in::before { transform: scaleX(1); }

	/* side panels of the other sections */
	.kst-js .kst-panel:not(.kst-hero)::before {
		opacity: 0;
		transition: opacity 1.2s var(--kst-ease);
	}
	.kst-js .kst-panel:not(.kst-hero).kst-in::before { opacity: .8; }

	/* review cards: the quote mark arrives after the card */
	.kst-js .kst-card .kst-card__in::before { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--kst-ease) .5s, transform .6s var(--kst-ease) .5s; }
	.kst-js .kst-card.kst-in .kst-card__in::before { opacity: 1; transform: none; }

	/* gallery: the tiles cascade in */
	.kst-js .kst-gal__item { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--kst-ease), transform .8s var(--kst-ease); transition-delay: calc(var(--i, 0) * 60ms); }
	.kst-js .kst-gal.kst-in .kst-gal__item { opacity: 1; transform: none; }

	/* full-width hero: each photo has two dark leaves that swing open
	   (scaleX towards the outer edges) once the photo is decoded
	   (.is-open, theme.js); the photo settles from a slight zoom */
	.kst-js .kst-hero--full .kst-hero__shutter::before,
	.kst-js .kst-hero--full .kst-hero__shutter::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 1;
		width: 51%;
		background: var(--kst-ink);
		transition: transform 1.25s var(--kst-ease);
		transition-delay: calc(var(--i, 0) * 170ms);
	}
	.kst-js .kst-hero--full .kst-hero__shutter::before { left: 0; transform-origin: left center; }
	.kst-js .kst-hero--full .kst-hero__shutter::after { right: 0; transform-origin: right center; }
	.kst-js .kst-hero--full .kst-hero__shutter img {
		transform: scale(1.1);
		transition: transform 2.2s var(--kst-ease);
		transition-delay: calc(var(--i, 0) * 170ms);
	}
	.kst-js .kst-hero--full .kst-hero__shutter.is-open::before,
	.kst-js .kst-hero--full .kst-hero__shutter.is-open::after { transform: scaleX(0); }
	.kst-js .kst-hero--full .kst-hero__shutter.is-open img { transform: none; }
	.kst-js .kst-hero--full::before { opacity: 0; transition: opacity 1.2s var(--kst-ease) .35s; }
	.kst-js .kst-hero--full.kst-in::before { opacity: 1; }

	/* surroundings: filters and cards cascade in after the map */
	.kst-js .ks-around .ks-chip { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--kst-ease), transform .6s var(--kst-ease); transition-delay: calc(.2s + var(--i, 0) * 50ms); }
	.kst-js .ks-around.kst-in .ks-chip { opacity: 1; transform: none; }
	.kst-js .ks-around .ks-place { opacity: 0; transform: translateX(24px); transition: opacity .7s var(--kst-ease), transform .7s var(--kst-ease); transition-delay: calc(.3s + var(--i, 0) * 70ms); }
	.kst-js .ks-around.kst-in .ks-place { opacity: 1; transform: none; }
}