/*
	Theme Name: Avitanslaw
	Theme URI: https://avitanslaw.com
	Description: Custom child theme for the Avitan Law website, based on Hello Elementor.
	Author: Avitan Law
	Author URI: https://avitanslaw.com
	Template: hello-elementor
	Version: 1.0.0
	Stable tag: 1.0.0
	Requires at least: 6.0
	Tested up to: 7.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: avitanslaw
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * Add your custom CSS below this line.
 * Parent theme styles are loaded automatically.
 */

/* Polin ships in Regular only (client decision): never let browsers fake a bold or light Polin... */
body {
	font-synthesis-weight: none;
}

/* Emphasis (<strong>) is Polin Bold in Figma (e.g. the section 2 line). There is no Polin Bold file,
   so the letters are thickened with a thin stroke: unlike a browser-faked bold it doesn't change the
   letter widths, so lines stay centred identically in every browser. Once
   assets/fonts/polin-bold.woff2 exists, inc/fonts.php switches all of it to the real font
   (--av-bold-weight: 700, --av-bold-stroke: 0). */
strong,
b {
	font-weight: var(--av-bold-weight);
	-webkit-text-stroke: var(--av-bold-stroke) currentColor;
}

/* Everything Figma sets in "Body Bold 25" (Polin Bold) — the `avbodyb` global: FAQ questions, the
   planning intro, testimonial names, footer column headings (and the mobile footer credit below).
   `html body` outranks the section rules that set their weight. */
:root {
	--av-bold-weight: 400;
	--av-bold-stroke: 0.06em; /* matched visually to Figma's Polin Bold */
}

html body :is(
	.av-faq__list .av-acc__title,
	.av-sc-faq__list .av-acc__title,
	.av-planning__body > .elementor-widget-heading:first-child .elementor-heading-title,
	.av-testimonial__name .elementor-heading-title,
	.av-footer__heading .elementor-heading-title
) {
	font-weight: var(--av-bold-weight);
	-webkit-text-stroke: var(--av-bold-stroke) currentColor;
}

@media (max-width: 1023px) {
	html body .av-footer__credit .elementor-heading-title {
		font-weight: var(--av-bold-weight);
		-webkit-text-stroke: var(--av-bold-stroke) currentColor;
	}
}

/* Design tokens that Elementor globals can't hold (Figma brand system). */
:root {
	--av-gutter: 5vw;
	--av-gradient-gold: linear-gradient(180deg, #D7AF77 0%, #B38D61 100%);
}

.av-gradient-gold {
	background-image: var(--av-gradient-gold);
}

/* ==========================================================================
   Header (Figma "כל ההדר" 70:1553 / mobile "Frame 64" 70:936)
   ========================================================================== */
.av-header {
	top: 0;
	inset-inline: 0;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Pages not built with Elementor (404, archives, classic posts) start below the fixed header. */
main.site-main {
	padding-top: 77px;
}

@media (max-width: 1023px) {
	main.site-main {
		padding-top: 68px;
	}
}

/* Over dark sections (class av-dark, e.g. the footer) the header drops its white tint and the menu
   turns light; over coloured ones (av-colored, the gold section) only the tint goes (assets/js/header.js).
   Client request, 2026-09-26. */
.av-header.e-con {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}

.av-header.av-header--on-dark.e-con,
.av-header.av-header--on-color.e-con {
	/* The grey band was the 10% white tint: drop it (and the light rim) but keep the blur, so content
	   scrolling behind the header stays soft instead of clashing with the logo and menu.
	   !important: Elementor prints the container background on a higher-specificity rule. */
	background-color: transparent !important;
	box-shadow: none;
}

.av-header.av-header--on-dark.e-con {
	/* The menu items use the global "Black" colour; swap it for cream inside the header only. */
	--e-global-color-avblack: var(--e-global-color-secondary);
}

.av-header--on-dark .elementor-nav-menu--main .elementor-item {
	transition: color 0.3s ease;
}

/* Figma "Glass" effect on the desktop bar: 1px white rim, faint shade top-left, soft glow bottom-right. */
@media (min-width: 1024px) {
	.av-header {
		box-shadow:
			inset 0 0 0 1px #FFFFFF,
			inset 12px 12px 14px -12px rgba(0, 0, 0, 0.035),
			inset -14px -14px 14px -12px rgba(255, 255, 255, 0.9);
	}
}

.admin-bar .av-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .av-header {
		top: 46px;
	}
}

/* Equal-width sides (basis 0) keep the nav / mobile logo exactly centred.
   Elementor stores a container flex-basis but doesn't print it, so it is set here. */
.av-header > .e-con.av-header__side {
	--flex-basis: 0%;
	min-width: 0;
}

/* Figma: each menu item is a fixed 148px cell with centred text. */
.av-header__nav .elementor-nav-menu > li > a {
	width: 148px;
	justify-content: center;
	transition: color 0.2s ease;
}

/* Current page (About, Contact, blog) in gold, as in the client's page references. */
/* (The header template's own nav colours use Elementor's long selector, hence the extra classes.) */
.av-header .elementor-element.av-header__nav.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--e-global-color-primary);
}

.av-phone {
	display: block;
	width: 30px;
	height: 30px;
	color: var(--e-global-color-primary);
	transition: opacity 0.2s ease;
}

.av-phone svg {
	display: block;
	width: 100%;
	height: 100%;
}

.av-phone:hover {
	opacity: 0.75;
}

/* Burger: 3 × 1px gradient lines, 39px wide, 12px apart (Figma "Frame 19"). */
.av-burger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 39px;
	height: 25px;
}

.av-burger span {
	display: block;
	height: 1px;
	background: linear-gradient(90deg, #B28D61 0%, #D8B078 100%);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ==========================================================================
   Mobile menu (Elementor Off-Canvas, built in tools/build-header-footer.php). Reference: the client's
   screen recording in Figma (99:3913) — dark panel, cream round toggle top-left, menu sliding in from
   the right; the logo in the menu links home (Figma note). The rest is styled from the site itself:
   big Futurism links on thin cream lines (like the services list), the gold CTA, contact details and
   the Figma social icons. Items slide in from the right after the panel.
   ========================================================================== */
.av-mm__bar {
	position: relative;
	display: flex;
	align-items: center;
	height: 101px; /* 23 + 55 + 23: the round button 23px from the top, as in the reference */
	padding: 0 27px;
}

/* Close: cream circle (55px) with two dark lines, top-left (reference: 27px in, 23px down).
   On hover / keyboard focus the two lines turn into an ×. */
.av-mm__close {
	position: relative;
	flex: 0 0 auto;
	width: 55px;
	height: 55px;
	margin-inline-start: auto; /* RTL: pushes it to the left end */
	background: var(--e-global-color-secondary);
	border-radius: 50%;
	transition: background-color 0.25s ease;
}

.av-mm__close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 1.5px;
	margin: -0.75px 0 0 -13px;
	background: #2B2C2B;
	transition: transform 0.3s ease;
}

.av-mm__close span:nth-child(1) {
	transform: translateY(-2.5px);
}

.av-mm__close span:nth-child(2) {
	transform: translateY(2.5px);
}

@media (hover: hover) {
	.av-mm__close:hover span:nth-child(1) {
		transform: rotate(45deg);
	}

	.av-mm__close:hover span:nth-child(2) {
		transform: rotate(-45deg);
	}
}

.av-mm__close:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 3px;
}

.av-mm__close:focus-visible span:nth-child(1) {
	transform: rotate(45deg);
}

.av-mm__close:focus-visible span:nth-child(2) {
	transform: rotate(-45deg);
}

.av-mm__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 85px;
	transform: translate(-50%, -50%);
}

.av-mm__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.av-mobile-menu__nav.elementor-widget {
	margin: 34px 27px 0;
}

.av-mobile-menu__nav .elementor-nav-menu > li {
	border-bottom: 1px solid rgba(245, 242, 236, 0.14);
}

.elementor .elementor-widget.av-mobile-menu__nav .elementor-nav-menu--main .elementor-item {
	justify-content: flex-start;
	padding: 20px 0 14px;
	line-height: 44px;
}

.av-mm__cta.elementor-widget {
	align-self: flex-start;
	margin: 40px 27px 0;
}

.av-mobile-menu__contact.elementor-widget {
	/* Contact + socials sit at the bottom of the panel (the column is 100vh tall). */
	margin: auto 27px 0;
	padding-top: 40px;
}

.av-mm__social.elementor-widget {
	margin: 26px 27px 0;
	padding-bottom: 40px;
}

.elementor-widget.av-mm__social .elementor-icon-list-items {
	gap: 12px 30px;
	margin: 0;
}

.elementor-widget.av-mm__social .elementor-icon-list-items .elementor-icon-list-item {
	margin: 0;
}

.elementor-widget.av-mm__social .elementor-icon-list-item > a {
	align-items: flex-start;
	gap: 10px;
}

.elementor-widget.av-mm__social .elementor-icon-list-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	margin: 2px 0 0;
	fill: var(--e-global-color-primary);
}

.elementor-widget.av-mm__social .elementor-icon-list-icon + .elementor-icon-list-text {
	padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__nav .elementor-nav-menu > li,
	.e-off-canvas[aria-hidden="false"] .av-mm__cta,
	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__contact,
	.e-off-canvas[aria-hidden="false"] .av-mm__social {
		animation: av-mm-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 0.3s;
	}

	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__nav .elementor-nav-menu > li:nth-child(2) { animation-delay: 0.36s; }
	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__nav .elementor-nav-menu > li:nth-child(3) { animation-delay: 0.42s; }
	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__nav .elementor-nav-menu > li:nth-child(4) { animation-delay: 0.48s; }
	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__nav .elementor-nav-menu > li:nth-child(5) { animation-delay: 0.54s; }
	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__nav .elementor-nav-menu > li:nth-child(6) { animation-delay: 0.6s; }
	.e-off-canvas[aria-hidden="false"] .av-mm__cta { animation-delay: 0.58s; }
	.e-off-canvas[aria-hidden="false"] .av-mobile-menu__contact { animation-delay: 0.64s; }
	.e-off-canvas[aria-hidden="false"] .av-mm__social { animation-delay: 0.7s; }
}

@keyframes av-mm-in {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
}

@media (max-width: 1023px) {
	.av-phone {
		width: 27px;
		height: 27px;
	}
}

/* ==========================================================================
   Services dropdown on "השרותים" (inc/nav-services.php, client request 2026-10-07). Two practice
   areas from the service menus, numbered like the service pages' bar. Desktop: an ink panel under the
   header (hover / keyboard / first tap). Mobile menu: an accordion under the item. header.js handles
   taps, Esc and aria-expanded.
   ========================================================================== */
/* These selectors outrank Elementor's own menu-link rules (display flex, padding 13px 20px, also on
   :hover / :focus), so the panel's links keep their own spacing. */
.elementor-nav-menu .av-svmenu a {
	text-decoration: none;
	white-space: normal;
}

.elementor-nav-menu--main .elementor-nav-menu .av-svmenu .av-svmenu__head {
	display: block;
	padding: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	transition: color 0.2s ease;
}

.elementor-nav-menu--main .elementor-nav-menu .av-svmenu .av-svmenu__item {
	display: flex;
	padding: 0;
	align-items: baseline;
	gap: 14px;
	color: var(--e-global-color-secondary);
	font-family: var(--e-global-typography-text-font-family), Arial, sans-serif;
	font-weight: 400;
	transition: color 0.2s ease;
}

.elementor-nav-menu .av-svmenu__n {
	flex: 0 0 auto;
	min-width: 20px;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.av-svmenu__t {
	transition: transform 0.25s ease;
}

.elementor-nav-menu--main .elementor-nav-menu .av-svmenu a:hover,
.elementor-nav-menu--main .elementor-nav-menu .av-svmenu a:focus-visible,
.elementor-nav-menu--main .elementor-nav-menu .av-svmenu .is-current {
	color: var(--e-global-color-primary);
}

.elementor-nav-menu--main .elementor-nav-menu .av-svmenu .av-svmenu__head:hover,
.elementor-nav-menu--main .elementor-nav-menu .av-svmenu .av-svmenu__head:focus-visible {
	color: var(--e-global-color-secondary);
}

.av-svmenu a:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 3px;
}

/* Desktop: the panel hangs centred under the header. The header's backdrop-filter makes the bar the
   containing block of position:fixed children, so top:100% is the header's bottom edge. */
@media (min-width: 1024px) {
	.av-header__nav .av-svmenu {
		position: fixed;
		top: 100%;
		left: 50%;
		z-index: 10;
		width: min(800px, 90vw);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 10px);
		/* closing waits a beat, so a diagonal move towards the panel doesn't drop it */
		transition: opacity 0.2s ease 0.12s, transform 0.2s ease 0.12s, visibility 0s linear 0.32s;
	}

	/* Bridge over the gap between the menu text and the panel (text bottom 46px, header 77px), so the
	   hover isn't lost on the way. It must stay below the text, or it would catch taps / clicks on it. */
	.av-header__nav .av-svmenu::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 28px;
	}

	.av-header__nav .av-has-svmenu:not(.is-dismissed):has(:focus-visible) > .av-svmenu,
	.av-header__nav .av-has-svmenu.is-open > .av-svmenu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
	}

	@media (hover: hover) {
		.av-header__nav .av-has-svmenu:not(.is-dismissed):hover > .av-svmenu {
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, 0);
			transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
		}

		/* "השרותים" stays gold while its panel is open. */
		.av-header .elementor-element.av-header__nav.elementor-widget-nav-menu .av-has-svmenu:not(.is-dismissed):hover > .elementor-item {
			color: var(--e-global-color-primary);
		}
	}

	/* Down chevron after "השרותים" (client, 2026-10-07: show there is a menu). Text colour, so it turns
	   gold with the text; flips up while the panel is open. Elementor's pointer rules make every item
	   ::after absolute and hidden, hence !important. */
	.av-header__nav .elementor-nav-menu > li.av-has-svmenu > a {
		gap: 9px;
	}

	.av-header__nav .elementor-nav-menu > li.av-has-svmenu > a::after {
		content: "";
		position: static !important;
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin-top: -5px;
		border: solid currentColor;
		border-width: 0 0 2px 2px;
		background: none;
		opacity: 1 !important;
		transform: rotate(-45deg);
		transition: transform 0.3s ease, margin 0.3s ease;
	}

	.av-header__nav .av-has-svmenu.is-open > a::after,
	.av-header__nav .av-has-svmenu:not(.is-dismissed):has(:focus-visible) > a::after {
		margin-top: 4px;
		transform: rotate(135deg);
	}

	@media (hover: hover) {
		.av-header__nav .av-has-svmenu:not(.is-dismissed):hover > a::after {
			margin-top: 4px;
			transform: rotate(135deg);
		}
	}

	.av-header__nav .av-svmenu__body {
		padding: 34px 44px 30px;
		background: var(--e-global-color-accent);
		border-top: 4px solid var(--e-global-color-primary);
		box-shadow: 0 28px 50px -18px rgba(22, 23, 26, 0.45);
	}

	.av-header__nav .av-svmenu__inner {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		column-gap: 56px;
	}

	/* Three practice areas (legal planning added 2026-10-14): a wider panel, a little tighter. */
	.av-header__nav .av-svmenu:has(.av-svmenu__col:nth-child(3)) {
		width: min(1100px, 92vw);
	}

	.av-header__nav .av-svmenu:has(.av-svmenu__col:nth-child(3)) .av-svmenu__inner {
		column-gap: 44px;
	}

	.av-header__nav .elementor-nav-menu .av-svmenu .av-svmenu__head {
		margin-bottom: 4px;
		padding-bottom: 16px;
		border-bottom: 1px solid rgba(176, 153, 117, 0.45);
		font-size: 22px;
		line-height: 24px;
	}

	.av-header__nav .elementor-nav-menu .av-svmenu .av-svmenu__item {
		padding: 12px 0;
		border-bottom: 1px solid rgba(245, 242, 236, 0.1);
		font-size: 18px;
		line-height: 24px;
	}

	.av-header__nav .av-svmenu .av-svmenu__row:last-child .av-svmenu__item {
		border-bottom: 0;
	}

	.av-header__nav .av-svmenu .av-svmenu__n {
		font-size: 13px;
	}

	.av-header__nav .av-svmenu__item:hover .av-svmenu__t,
	.av-header__nav .av-svmenu__item:focus-visible .av-svmenu__t {
		transform: translateX(-6px); /* RTL: a step forward */
	}
}

/* Mobile menu: an accordion. A tap on "השרותים" opens it (header.js); the chevron turns. */
.av-mobile-menu__nav .elementor-nav-menu > li.av-has-svmenu > a::after {
	content: "";
	/* Elementor's pointer rules make every item ::after absolute and hide it when not hovered. */
	position: static !important;
	opacity: 1 !important;
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin: -8px auto 0 4px;
	border: solid var(--e-global-color-primary);
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
	transition: transform 0.3s ease, margin 0.3s ease;
}

.av-mobile-menu__nav .elementor-nav-menu > li.av-has-svmenu.is-open > a::after {
	margin-top: 6px;
	transform: rotate(135deg);
}

.av-mobile-menu__nav .av-svmenu {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
}

.av-mobile-menu__nav .av-has-svmenu.is-open > .av-svmenu {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.35s ease, visibility 0s;
}

.av-mobile-menu__nav .av-svmenu__body {
	min-height: 0;
	overflow: hidden;
}

.av-mobile-menu__nav .av-svmenu__inner {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 6px 0 28px;
}

.av-mobile-menu__nav .elementor-nav-menu .av-svmenu .av-svmenu__head {
	margin-bottom: 6px;
	font-size: 17px;
	line-height: 22px;
}

.av-mobile-menu__nav .elementor-nav-menu .av-svmenu .av-svmenu__item {
	padding: 7px 0;
	color: rgba(245, 242, 236, 0.8);
	font-size: 18px;
	line-height: 24px;
}

.av-mobile-menu__nav .elementor-nav-menu .av-svmenu .av-svmenu__item.is-current {
	color: var(--e-global-color-primary);
}

.av-mobile-menu__nav .av-svmenu .av-svmenu__n {
	font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.av-svmenu,
	.av-svmenu__t,
	.av-mobile-menu__nav .elementor-nav-menu > li.av-has-svmenu > a::after {
		transition: none !important;
	}
}

/* ==========================================================================
   Footer (Figma "Footer" 70:1896 / mobile "iPhone 17 - 12/13")
   ========================================================================== */
/* Desktop: logo sits at the left gutter; extra width on big screens goes between logo and columns. */
@media (min-width: 1024px) {
	.av-footer__logo.e-con {
		margin-inline-start: auto;
	}

	/* Below 1325 the row is too narrow for all four: the text columns keep their Figma widths
	   (180/210/128) and the logo shrinks instead (409 at 1325, ~200 at 1024). */
	.av-footer.e-con > .e-con > .e-con {
		flex-shrink: 0;
	}

	.av-footer.e-con > .e-con > .av-footer__logo.e-con {
		flex-shrink: 1;
		min-width: 0;
	}

	.av-footer__logo .elementor-widget-image,
	.av-footer__logo .elementor-widget-image img {
		max-width: 100%;
		height: auto;
	}
}

.av-footer__contact .elementor-icon-list-item:last-child .elementor-icon-list-text {
	color: rgba(247, 245, 241, 0.72);
}

.av-footer__legal a,
.av-footer__credit a {
	color: inherit;
	transition: color 0.2s ease;
}

.av-footer__legal a:hover,
.av-footer__credit a:hover {
	color: var(--e-global-color-avgldl2);
}

.av-footer__legal p {
	margin: 0;
}


/* Mobile footer artboard: charcoal background, no watermark. */
@media (max-width: 767px) {
	/* !important: Elementor prints the background on a higher-specificity, non-responsive rule. */
	.av-footer.e-con {
		background-color: var(--e-global-color-text) !important;
		background-image: none !important;
	}
}

/* ==========================================================================
   Snake Button (Figma component "כפתור נחש v2 - Snake Button (Auto)")
   Applies to every Elementor Button widget and to Elementor form submit buttons.
   Static: gold box (padding 6.4/8, Leon 16) + a 10px zone on the end side for the arrow.
   Hover:  a 1.6px black border draws clockwise (top → right → bottom → left),
           then the chevron appears on the end edge.
   The four lines and the arrow are pseudo-elements positioned against the <a>.
   ========================================================================== */
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button {
	--av-snake-w: 1.6px;
	--av-snake-t: 0.12s;
	position: relative;
	margin-inline-end: 10px;
}

:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button::before,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button::after,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button-content-wrapper::before,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button-content-wrapper::after {
	content: "";
	position: absolute;
	background: #000000;
	pointer-events: none;
	transition: transform var(--av-snake-t) linear;
}

/* top: left → right */
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button::before {
	top: 0;
	left: 0;
	width: 100%;
	height: var(--av-snake-w);
	transform: scaleX(0);
	transform-origin: left center;
}

/* right: top → bottom */
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button-content-wrapper::before {
	top: 0;
	right: 0;
	width: var(--av-snake-w);
	height: 100%;
	transform: scaleY(0);
	transform-origin: center top;
}

/* bottom: right → left */
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button::after {
	bottom: 0;
	right: 0;
	width: 100%;
	height: var(--av-snake-w);
	transform: scaleX(0);
	transform-origin: right center;
}

/* left: bottom → top */
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button-content-wrapper::after {
	bottom: 0;
	left: 0;
	width: var(--av-snake-w);
	height: 100%;
	transform: scaleY(0);
	transform-origin: center bottom;
}

/* Arrow (chevron pointing to the end side), hidden until hover. */
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button-text::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	/* Figma "arrow-left" (6 × 9.8), the same chevron as the carousel arrows. */
	width: 6px;
	height: 9.8px;
	background: #2B2C2B;
	-webkit-mask: url("assets/img/icon-chevron.svg") no-repeat center / 100% 100%;
	mask: url("assets/img/icon-chevron.svg") no-repeat center / 100% 100%;
	opacity: 0;
	transform: translate(4px, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover::before,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible::before,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover::after,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible::after {
	transform: scaleX(1);
}

:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover .elementor-button-content-wrapper::before,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible .elementor-button-content-wrapper::before,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover .elementor-button-content-wrapper::after,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible .elementor-button-content-wrapper::after {
	transform: scaleY(1);
}

/* Sequence the four sides on hover-in only; hover-out collapses together. */
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover .elementor-button-content-wrapper::before,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible .elementor-button-content-wrapper::before {
	transition-delay: var(--av-snake-t);
}

:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover::after,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible::after {
	transition-delay: calc(var(--av-snake-t) * 2);
}

:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover .elementor-button-content-wrapper::after,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible .elementor-button-content-wrapper::after {
	transition-delay: calc(var(--av-snake-t) * 3);
}

:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:hover .elementor-button-text::after,
:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button:focus-visible .elementor-button-text::after {
	opacity: 1;
	transform: translate(0, -50%);
	transition-delay: calc(var(--av-snake-t) * 2);
}

@media (prefers-reduced-motion: reduce) {
	:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button *,
	:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button::before,
	:is(.elementor-widget-button, .elementor-field-type-submit) .elementor-button::after {
		transition: none !important;
	}
}

/* ==========================================================================
   Scroll text reveal (assets/js/text-reveal.js) — add class `av-reveal` to a widget.
   Each word fills right-to-left from --off to --on as --p goes 0 → 1.
   Without JS (or with reduced motion) the class `av-reveal--on` is never added and text shows normally.
   ========================================================================== */
.av-reveal--on .av-reveal__w {
	/* Fraction of this word that is revealed (0 → 1); the edge is soft over 30% of the word.
	   f = 0 → stops at -30% / 0% (all pale); f = 1 → stops at 100% / 130% (all full colour). */
	--f: clamp(0, calc((var(--p) * (var(--n) + 12) - var(--a)) / var(--l)), 1);
	background-image: linear-gradient(to left,
		var(--on) calc(var(--f) * 130% - 30%),
		var(--off) calc(var(--f) * 130%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ==========================================================================
   Drag-to-scroll tracks (assets/js/drag-scroll.js) — add class `av-drag-scroll` to a container.
   ========================================================================== */
.av-drag-scroll.e-con {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.av-drag-scroll.e-con::-webkit-scrollbar {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.av-drag-scroll.e-con {
		cursor: grab;
	}
}

/* While dragging and gliding to the next card, the JS drives the scroll: snapping would fight it. */
.av-drag-scroll.is-settling {
	scroll-snap-type: none;
}

.av-drag-scroll.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	-webkit-user-select: none;
	user-select: none;
}

.av-drag-scroll.e-con > .e-con {
	scroll-snap-align: start;
}

/* ==========================================================================
   Mouse tilt (assets/js/tilt.js) — add class `av-tilt` to an image widget.
   ========================================================================== */
.av-tilt img {
	transform: perspective(900px) translate3d(var(--av-tilt-x, 0), var(--av-tilt-y, 0), 0) rotateX(var(--av-tilt-rx, 0)) rotateY(var(--av-tilt-ry, 0));
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* ==========================================================================
   In-page anchors (menu items link to homepage sections): land below the fixed header.
   ========================================================================== */
.elementor .e-con[id] {
	scroll-margin-top: 77px;
}

@media (max-width: 1023px) {
	.elementor .e-con[id] {
		scroll-margin-top: 68px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   Video popup (assets/js/video-popup.js) — native <dialog>. Ink backdrop, the player in a gold frame
   (like the cards), a cream square close button (like the carousel arrows). 16:9, or 9:16 for
   Shorts / portrait files; always fits the screen.
   ========================================================================== */
.av-testimonial:has(.av-testimonial__play a[href]) {
	cursor: pointer;
}

.av-video-popup {
	--av-vp-w: min(92vw, calc((100vh - 120px) * 16 / 9), 1120px);
	--av-vp-ratio: 16 / 9;
	width: fit-content; /* keep the UA sizing so margin:auto centres it */
	height: fit-content;
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	color: var(--e-global-color-secondary);
	background: transparent;
	border: 0;
}

.av-video-popup.is-portrait {
	--av-vp-w: min(92vw, calc((100vh - 120px) * 9 / 16), 480px);
	--av-vp-ratio: 9 / 16;
}

.av-video-popup::backdrop {
	background: rgba(22, 23, 26, 0.92);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.av-video-popup__frame {
	position: relative;
	width: var(--av-vp-w);
	padding: 8px;
	border: 1px solid var(--e-global-color-primary);
}

.av-video-popup__stage {
	aspect-ratio: var(--av-vp-ratio);
	background: #000000;
}

.av-video-popup__player {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000000;
}

/* Close: cream square on the frame's top-left corner (the "end" corner in RTL). */
.av-video-popup__close {
	position: absolute;
	top: -48px;
	left: -1px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--e-global-color-secondary);
	border: 1px solid var(--e-global-color-primary);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.av-video-popup__close span,
.av-video-popup__close span::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: #2B2C2B;
	transform: translate(-50%, -50%) rotate(45deg);
}

.av-video-popup__close span::before {
	content: "";
	transform: translate(-50%, -50%) rotate(90deg);
}

.av-video-popup__close:hover,
.av-video-popup__close:focus-visible {
	background: var(--e-global-color-primary);
}

.av-video-popup__close:focus-visible {
	outline: 2px solid var(--e-global-color-secondary);
	outline-offset: 3px;
}

/* No page scrolling behind the popup. */
html.av-video-popup-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.av-video-popup[open] {
		animation: av-video-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.av-video-popup[open]::backdrop {
		animation: av-video-fade 0.35s ease;
	}
}

@keyframes av-video-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}
}

@keyframes av-video-fade {
	from {
		opacity: 0;
	}
}