/*!
 * Vero Living — consistency + motion layer
 * Added 2026-10-07. Theme-safe, no markup changes. Everything is prefixed "vl-".
 * To REVERSE: delete this file + vero-polish.js and the "Vero polish" block in functions.php
 * (see /home/yudity/backups/veroliving-design-20261007/RESTORE.txt).
 *
 * Rules followed: animate transform + opacity only; every motion rule sits behind
 * prefers-reduced-motion; no global resets; !important only where Elementor's
 * per-widget CSS (specificity 0,4,0) must be matched.
 */

/* ---------------------------------------------------------------- tokens */
:root {
	--vl-font: "abacaxi-devanagari", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--vl-ease: cubic-bezier(.22, .61, .36, 1);
	--vl-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* ONE button system (colours stay with each button's own design) */
	--vl-btn-h: 38px;
	--vl-btn-px: 26px;
	--vl-btn-r: 999px;
	--vl-btn-fs: 12px;
	--vl-btn-fw: 500;
	--vl-btn-ls: .09em;
}

@media (max-width: 767px) {
	:root {
		--vl-btn-h: 42px;
		--vl-btn-px: 22px;
		--vl-btn-fs: 11.5px;
		--vl-btn-ls: .08em;
	}
}

/* ------------------------------------------------- 1. FONT CONSISTENCY
 * The custom components ask for "Abacaxi Devanagari" (with a space) or Arial /
 * Helvetica. The real Adobe Fonts family is "abacaxi-devanagari" (hyphen), so
 * those components were silently falling back to a system font.
 */
body .vero-rotating-banner__text,
body .vero-built-true-static,
body .vero-built-true-text,
body .vero-property-title,
body .vero-property-name,
body .vero-property-desc,
body .vero-property-cta,
body .vero-completed-title,
body .vero-completed-name,
body .vero-completed-desc,
body .vero-diff-title,
body .vero-stage-word,
body .vero-stage-num,
body .vero-stage-title,
body .vero-stage-desc,
body .vero-stage-link-text,
body .vero-stage-arrow,
body .true-process-wrap,
body .true-process-wrap *,
body .true-form-mobile h2,
body .true-form-mobile .intro,
body .office-map-mobile h2,
body .office-map-mobile__col h3,
body .office-map-mobile__col p,
body .news-filter-wrap,
body .news-filter-wrap *,
body .designs-filter-wrap,
body .designs-filter-wrap *,
body .vero-plan-inner,
body .vero-plan-inner *,
body .vero-process-wrap,
body .vero-process-wrap *,
body .inclusions-wrap,
body .inclusions-wrap *,
body .field,
body .submit-btn {
	font-family: var(--vl-font);
}

/* Inline SVG text (header "Enquire", footer, About-page graphic) names fonts that do not
 * exist in the Adobe kit ("AbacaxiDevanagari-Medium", "-Light", "Abacaxi Devanagari") and
 * has no generic fallback, so the browser drew it in Times. Each <text> already carries its own
 * font-weight attribute (300 / 500), so mapping only the family keeps every weight intact.
 * The CJK label ("AbacaxiDevanagari-Regular, PingFang SC") is deliberately left alone. */
body svg text[font-family*="AbacaxiDevanagari-Medium"],
body svg text[font-family*="AbacaxiDevanagari-Light"],
body svg text[font-family*="Abacaxi Devanagari"] {
	font-family: var(--vl-font);
}

/* Home hero: white headline over a pale sky was hard to read (worst on phones).
 * A very soft shadow lifts it without changing the design. e513e3f / c08505f are the
 * desktop and mobile versions of the same heading widget. */
body .elementor-element-e513e3f .elementor-heading-title,
body .elementor-element-c08505f .elementor-heading-title {
	text-shadow: 0 1px 18px rgba(0, 0, 0, .30), 0 0 3px rgba(0, 0, 0, .14);
}

/* crisper, calmer type everywhere */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body .elementor-heading-title,
body .vero-property-title,
body .vero-completed-title,
body .vero-diff-title {
	text-wrap: balance;
}

/* ---------------------------------------------------- 2. BUTTON SYSTEM
 * Eight hand-written variants (radius 3 / 15 / 16 / 18 / 999, height 31-52,
 * letter-spacing .03em - 1.4px) collapse into one pill. Colours are not touched.
 */
body .elementor-widget-button .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--vl-btn-h) !important;
	padding: 0 var(--vl-btn-px) !important;
	border-radius: var(--vl-btn-r) !important;
	font-family: var(--vl-font) !important;
	font-size: var(--vl-btn-fs) !important;
	font-weight: var(--vl-btn-fw) !important;
	letter-spacing: var(--vl-btn-ls) !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	white-space: nowrap;
}

body .elementor-widget-button .elementor-button .elementor-button-content-wrapper,
body .elementor-widget-button .elementor-button .elementor-button-text {
	line-height: 1;
}

body .learn-btn,
body .submit-btn,
body .news-more-btn,
body .news-show-results-btn,
body .designs-map-popup__btn,
body .vero-plan-btn,
body .download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	min-height: var(--vl-btn-h);
	padding: 0 var(--vl-btn-px);
	border-radius: var(--vl-btn-r);
	font-family: var(--vl-font);
	font-size: var(--vl-btn-fs);
	font-weight: var(--vl-btn-fw);
	letter-spacing: var(--vl-btn-ls);
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* --------------------------------------------- 3. FOCUS (accessibility) */
body :is(a, button, [role="button"], input, select, textarea, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

body .elementor-button:focus-visible,
body .learn-btn:focus-visible,
body .submit-btn:focus-visible,
body .vero-plan-btn:focus-visible,
body .download-btn:focus-visible,
body .news-more-btn:focus-visible {
	outline-offset: 4px;
}

/* anchors never hide under the fixed 100px header */
html {
	scroll-padding-top: 110px;
}

/* ------------------------------------- 4. TOUCH TARGETS + TINY TEXT (mobile) */
@media (max-width: 767px) {
	body .design-card__link,
	body .news-card__link,
	body .vero-stage-link,
	body .vero-property-cta,
	body .filter-sort-btn,
	body .news-filter-toggle,
	body .design-tab,
	body .vero-property-arrow,
	body .vero-completed-arrow,
	body .vero-arrow {
		position: relative;
	}

	body .design-card__link::after,
	body .news-card__link::after,
	body .vero-stage-link::after,
	body .vero-property-cta::after,
	body .filter-sort-btn::after,
	body .news-filter-toggle::after,
	body .design-tab::after,
	body .vero-property-arrow::after,
	body .vero-completed-arrow::after,
	body .vero-arrow::after {
		content: "";
		position: absolute;
		inset: -10px -8px;
	}

	body .design-card__link,
	body .news-card__link,
	body .vero-stage-link-text {
		font-size: max(11px, 1em);
	}
}

/* =====================================================================
 * MOTION. Everything below respects prefers-reduced-motion.
 * ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* ----------------------------------------- 5. button micro-interactions */
	body .elementor-widget-button .elementor-button,
	body .learn-btn,
	body .submit-btn,
	body .news-more-btn,
	body .news-show-results-btn,
	body .designs-map-popup__btn,
	body .vero-plan-btn,
	body .download-btn {
		transition:
			transform .45s var(--vl-ease),
			box-shadow .45s var(--vl-ease),
			background-color .3s ease,
			color .3s ease,
			border-color .3s ease,
			opacity .3s ease !important;
		-webkit-tap-highlight-color: transparent;
	}

	@media (hover: hover) {
		body .elementor-widget-button .elementor-button:hover,
		body .learn-btn:hover,
		body .submit-btn:hover,
		body .news-more-btn:hover,
		body .news-show-results-btn:hover,
		body .designs-map-popup__btn:hover,
		body .vero-plan-btn:hover,
		body .download-btn:hover {
			transform: translate3d(0, -2px, 0);
			box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35);
		}
	}

	body .elementor-widget-button .elementor-button:active,
	body .learn-btn:active,
	body .submit-btn:active,
	body .news-more-btn:active,
	body .news-show-results-btn:active,
	body .designs-map-popup__btn:active,
	body .vero-plan-btn:active,
	body .download-btn:active {
		transform: translate3d(0, 0, 0) scale(.97);
		box-shadow: none;
		transition-duration: .12s !important;
	}

	/* ----------------------------------------- 6. text links: sliding underline */
	body .design-card__link,
	body .news-card__link,
	body .vero-stage-link,
	body .vero-property-cta,
	body .vero-completed-cta {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0 1px;
		padding-bottom: 3px;
		transition: background-size .5s var(--vl-ease), opacity .3s ease;
	}

	@media (hover: hover) {
		body .design-card__link:hover,
		body .news-card__link:hover,
		body .vero-stage-link:hover,
		body .vero-property-cta:hover,
		body .vero-completed-cta:hover {
			background-size: 100% 1px;
		}
	}

	/* arrows / chevrons nudge on hover */
	body .vero-stage-arrow,
	body .vero-property-cta svg,
	body .arrow {
		transition: transform .4s var(--vl-ease);
	}

	@media (hover: hover) {
		body .vero-stage-link:hover .vero-stage-arrow,
		body .vero-property-cta:hover svg {
			transform: translate3d(5px, 0, 0);
		}

		body .vero-property-arrow:not(:disabled):hover,
		body .vero-completed-arrow:not(:disabled):hover,
		body .vero-arrow:not(:disabled):hover {
			opacity: 1;
		}
	}

	/* slider easing (JS already animates the track; we only refine curve + duration).
	 * Only duration + timing are overridden so the "none" used during resize stays none. */
	body .vero-property-track,
	body .vero-completed-track,
	body .vero-diff-track {
		transition-duration: .65s !important;
		transition-timing-function: var(--vl-ease-out) !important;
	}

	/* footer SVG links */
	body .elementor-element-8adb61f a {
		transition: opacity .3s ease;
	}

	body .elementor-element-8adb61f a:hover {
		opacity: .55;
	}

	/* ------------------------------------------------- 7. card image hover */
	body .vero-property-image-wrap,
	body .vero-completed-image-wrap,
	body .design-card__image,
	body .news-card__image-link {
		overflow: hidden;
	}

	body .vero-property-image,
	body .vero-completed-image,
	body .design-card__image img,
	body .news-card__image {
		transition: transform 1.1s var(--vl-ease-out);
		will-change: auto;
	}

	@media (hover: hover) {
		body .vero-property-card:hover .vero-property-image,
		body .vero-completed-card:hover .vero-completed-image,
		body .design-card:hover .design-card__image img,
		body .news-card:hover .news-card__image {
			transform: scale(1.05);
		}
	}

	/* ------------------------------------------------------- 8. header polish */
	body .turbo-header-template {
		transition: box-shadow .5s ease, background-color .5s ease;
	}

	body.vl-scrolled .turbo-header-template {
		box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 14px 30px -18px rgba(0, 0, 0, .22);
	}

	/* --------------------------------------------- 9. smooth accordions
	 * Original CSS toggles display:none <-> block, which cannot animate.
	 * With JS present we use height/opacity instead and keep hidden panels
	 * out of the tab order / screen readers via visibility.
	 * --vl-h is measured by vero-polish.js; 40em is the no-measure fallback.
	 */
	html.vl-js .true-content,
	html.vl-js .vero-accordion-content,
	html.vl-js .inclusion-content {
		display: block;
		overflow: hidden;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			max-height .6s var(--vl-ease),
			padding-bottom .6s var(--vl-ease),
			opacity .35s ease,
			visibility 0s linear .6s;
	}

	html.vl-js .true-item.active .true-content,
	html.vl-js .vero-accordion-item.is-open .vero-accordion-content,
	html.vl-js .inclusion-item.active .inclusion-content {
		max-height: var(--vl-h, 40em);
		padding-bottom: 20px;
		opacity: 1;
		visibility: visible;
		transition:
			max-height .6s var(--vl-ease),
			padding-bottom .6s var(--vl-ease),
			opacity .5s ease .12s,
			visibility 0s;
	}

	/* ------------------------- 10. dropdown / filter panels / map popups ease in */
	@keyframes vl-pop {
		from { opacity: 0; transform: translate3d(0, -8px, 0); }
		to   { opacity: 1; transform: translate3d(0, 0, 0); }
	}

	body .news-dropdown.open .news-dropdown-menu,
	body .news-filter-panel.active,
	body .designs-map-popup {
		animation: vl-pop .4s var(--vl-ease-out) both;
	}

	/* ---------------------------------------------- 11. image fade-in on load */
	html.vl-js img[data-vl-wait] {
		opacity: 0;
	}

	html.vl-js img[data-vl-wait],
	html.vl-js img[data-vl-done] {
		transition: opacity .8s ease;
	}

	/* ------------------------------------------------ 12. page out
	 * Only a short fade-OUT when following an internal link. There is deliberately no whole-page
	 * fade-IN: the hero / section reveals below already make arrival smooth, and a body-level
	 * fade would risk blank captures (crawlers, link previews, background tabs) and slow first paint. */
	html.vl-leaving body {
		opacity: 0;
		transition: opacity .26s ease;
	}

	/* ----------------------------------------------- 13. scroll reveals
	 * Hidden state is pure CSS on html.vl-js (so nothing flashes before JS runs).
	 * vero-polish.js adds .vl-in as elements enter the viewport.
	 * Excluded: header/footer templates, and tall component roots that contain
	 * cards (their cards reveal individually instead).
	 * Fail-safe: html.vl-failsafe (set by head script if JS never starts) un-hides all.
	 */
	html.vl-js:not(.vl-failsafe) :is(
		.elementor-widget-heading,
		.elementor-widget-text-editor,
		.elementor-widget-button,
		.elementor-widget-image,
		.elementor-widget-divider,
		.elementor-widget-html:not(:has(.design-card, .news-card, .vero-stage-item, .true-form-block, .office-map-block)) > .elementor-widget-container > *:not(style):not(script),
		.design-card,
		.news-card,
		.vero-stage-item,
		.true-form-block,
		.office-map-block
	):not(.vl-in):not(.vl-skip):not(.elementor-115 *, .elementor-135 *) {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}

	html.vl-js :is(
		.elementor-widget-heading,
		.elementor-widget-text-editor,
		.elementor-widget-button,
		.elementor-widget-image,
		.elementor-widget-divider,
		.elementor-widget-html > .elementor-widget-container > *:not(style):not(script),
		.design-card,
		.news-card,
		.vero-stage-item,
		.true-form-block,
		.office-map-block
	):not(.elementor-115 *, .elementor-135 *) {
		transition:
			opacity 1s var(--vl-ease-out),
			transform 1.1s var(--vl-ease-out);
	}

	/* cards re-appearing after a filter click (display none -> block) fade up again */
	@starting-style {
		.design-card.vl-in,
		.news-card.vl-in {
			opacity: 0;
			transform: translate3d(0, 16px, 0);
		}
	}
}

/* ------------------------------------------- reduced motion: calm everything */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}