/* Zenesis v2 — site-wide component styles (loaded on every page).
   Type, colours, padding, border and radius of buttons come from Site Settings → Buttons;
   this file only adds the behaviour every button shares.

   Standard button (the Hero CTA): any Elementor Button widget, no class needed.
     Gold sweep from left on hover / keyboard focus, arrow icon nudges right.
     Add the icon in the widget: fa-arrow-right, position "After", spacing 14px.
   .zn-link       text link with a circled arrow (secondary CTA inside sections, mega menu).
   .zn-btn-plain  no sweep (footer contact band, where the band itself is the colour). */

:root { --zn-ease-out: cubic-bezier(.16, 1, .3, 1); }

/* icon and label share one centre line; the icon takes the button text colour (set in Site Settings) */
.elementor-button .elementor-button-content-wrapper { align-items: center; }
.elementor-button .elementor-button-icon svg { fill: currentColor; }
/* no baseline gap under the inline-block button, so the widget is exactly as tall as the button */
.elementor-widget-button .elementor-button { vertical-align: top; }

/* ── Standard button ── */
.elementor-widget-button:not(.zn-link):not(.zn-btn-plain) .elementor-button { position: relative; overflow: hidden; isolation: isolate; }
.elementor-widget-button:not(.zn-link):not(.zn-btn-plain) .elementor-button::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--e-global-color-accent);
	transform: scaleX(0); transform-origin: right; transition: transform .65s var(--zn-ease-out);
}
.elementor-widget-button:not(.zn-link):not(.zn-btn-plain) .elementor-button:hover::before,
.elementor-widget-button:not(.zn-link):not(.zn-btn-plain) .elementor-button:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.elementor-widget-button:not(.zn-link):not(.zn-btn-plain) .elementor-button-icon { transition: transform .5s var(--zn-ease-out); }
.elementor-widget-button:not(.zn-link):not(.zn-btn-plain) .elementor-button:hover .elementor-button-icon { transform: translateX(5px); }

/* ── Text link with a circled arrow ── */
.zn-link .elementor-button { border: 0; border-radius: 0; box-shadow: none; }
.zn-link .elementor-button-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font-size: 12px;
	transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.zn-link .elementor-button-icon svg { width: 12px; height: 12px; fill: currentColor; transition: translate .5s var(--zn-ease-out); }
.zn-link .elementor-button:hover .elementor-button-icon,
.zn-link .elementor-button:focus-visible .elementor-button-icon {
	border-color: var(--e-global-color-primary); background-color: var(--e-global-color-primary); color: var(--e-global-color-zn_white);
}
.zn-link .elementor-button:hover .elementor-button-icon svg { translate: 3px 0; }

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-button .elementor-button::before,
	.elementor-widget-button .elementor-button-icon,
	.elementor-widget-button .elementor-button-icon svg { transition-duration: .01s; }
}

/* ── Floating buttons: WhatsApp (Joinchat plugin) and scroll to top (Astra) ──
   One matching pair in the bottom-right corner: gold circles of the same size, WhatsApp in the corner and
   scroll-to-top stacked directly above it (it appears once the page is scrolled). Subtle lift on hover. */
:root { --zn-fab: 52px; --zn-fab-edge: 24px; --zn-fab-gap: 12px; }
@media (max-width: 1024px) { :root { --zn-fab: 48px; --zn-fab-edge: 20px; } }
@media (max-width: 767px) { :root { --zn-fab: 46px; --zn-fab-edge: 16px; --zn-fab-gap: 10px; } }

/* Joinchat places its button 8px inside the widget's corner */
body .joinchat {
	--s: var(--zn-fab); --sep: calc(var(--zn-fab-edge) - 8px); --bottom: var(--sep);
	--ch: 40; --cs: 49%; --cl: 57%; /* the chat window's accent: theme gold #C8A45D (hsl 40 49% 57%) */
	--hover: hsl(var(--ch) var(--cs) calc(var(--cl) - 8%)); /* darker gold on hover (plugin default lightens it, washing out the white text) */
}
body .joinchat .joinchat__button,
body #ast-scroll-top.ast-scroll-top-icon {
	background-color: var(--e-global-color-primary);
	box-shadow: 0 10px 24px -10px rgb(15 19 43 / .45);
	transition: background-color .35s ease, box-shadow .45s ease, translate .45s var(--zn-ease-out);
}
body .joinchat .joinchat__button { background-size: 50%; }
body #ast-scroll-top.ast-scroll-top-icon {
	right: var(--zn-fab-edge); bottom: calc(var(--zn-fab-edge) + var(--zn-fab) + var(--zn-fab-gap));
	width: var(--zn-fab); height: var(--zn-fab); border-radius: 50%;
	font-size: 16px; line-height: 1; color: var(--e-global-color-zn_white);
	animation: zn-fab-in .4s var(--zn-ease-out);
}
body #ast-scroll-top .ast-icon.icon-arrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
body #ast-scroll-top .ast-icon.icon-arrow svg {
	width: 16px; height: 16px; margin: 0; fill: currentColor; transform: rotate(180deg);
	transition: translate .45s var(--zn-ease-out);
}
@media (hover: hover) {
	body .joinchat .joinchat__button:hover,
	body #ast-scroll-top.ast-scroll-top-icon:hover {
		background-color: color-mix(in srgb, var(--e-global-color-primary) 86%, #000);
		box-shadow: 0 16px 30px -12px rgb(15 19 43 / .5);
		translate: 0 -3px;
	}
	body #ast-scroll-top.ast-scroll-top-icon:hover .ast-icon.icon-arrow svg { translate: 0 -2px; }
}
body .joinchat .joinchat__button:active,
body #ast-scroll-top.ast-scroll-top-icon:active { background-color: color-mix(in srgb, var(--e-global-color-primary) 86%, #000); }
body .joinchat .joinchat__button:focus-visible,
body #ast-scroll-top.ast-scroll-top-icon:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 3px; }
@keyframes zn-fab-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
	body .joinchat .joinchat__button,
	body #ast-scroll-top.ast-scroll-top-icon,
	body #ast-scroll-top .ast-icon.icon-arrow svg { transition-duration: .01s; animation: none; translate: none !important; }
}

/* ── Home page paragraphs: the same compact rhythm as the About page (scoped to the Home page, ID 8) ──
   Sizes stay on the global styles (Body Large 18/17/16, Body 16/16/15, Small 14). Line height 1.55 and a .75em gap
   between paragraphs, as in About › Philosophy / Founder; light-section lead paragraphs use the body grey there too. */
.elementor-8 .elementor-widget-text-editor:not(.zn-why__quote, .zn-tst__quote) p { line-height: 1.55; }
.elementor-8 .elementor-widget-text-editor:is(.zn-why__desc) p,
.elementor-8 .zn-services .elementor-widget-text-editor:not([class*="zn-"]) p { line-height: 1.6; } /* Small card text */
.elementor-8 .zn-why .zn-why__copy p { margin-bottom: .75em; }
.elementor-8 .zn-why .zn-why__copy p:last-child { margin-bottom: 0; }
.elementor-8 .zn-why .elementor-widget.zn-why__copy { margin-top: .75em; } /* lead → copy: the same gap (in the copy's own size) */
.elementor-8 :is(.zn-why .zn-why__lead, .zn-gs .zn-gs__lead) p { color: var(--e-global-color-zn_body); }

/* ── Footer (template 37) ── */
/* Contact band: "Schedule a consultation" fills the band's full height, so its gold hover covers the whole band
   (it was a 48px button centred in the 64px band, leaving 8px strips of the lighter band colour above and below). */
.elementor-37 .elementor-element-e749f6b { align-self: stretch; }
.elementor-37 .elementor-element-e749f6b :is(.elementor-widget-container, .elementor-button-wrapper) { height: 100%; }
.elementor-37 .elementor-element-e749f6b .elementor-button { display: flex; align-items: center; height: 100%; transition: background-color .4s ease, color .4s ease; }
.elementor-37 .elementor-element-e749f6b .elementor-button-content-wrapper { flex: 1 1 auto; }
/* Newsletter: the sign-up confirmation sits on the dark footer as gold text, without FormLayer's white box */
body #formlayer-form-36 .formlayer-form-status.formlayer-success-message {
	padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	color: var(--e-global-color-primary);
}