/**
 * Sticky contact button — the client's "Sticky Contact Button" plugin
 * (sticky-contact-button.zip), folded into the theme by inc/contact.php.
 *
 * Everything above the THE WILD ORBIT block at the end is the plugin's own
 * stylesheet, unchanged except that its WoodMart-specific rules are gone. The
 * block at the end sets the theme's colours and moves the button to the right,
 * where the WhatsApp button it replaces used to sit — through the custom
 * properties the plugin exposes for exactly that.
 */

.pec-widget {
	/* Geometry */
	--pec-size-toggle: 48px;
	--pec-size-item: 44px;
	--pec-gap: 12px;
	--pec-bottom: 20px;
	--pec-left: 20px;
	--pec-radius: 50%;
	--pec-z: 99990;

	/* Colour. The toggle is coral with a white glyph and carries a coral glow of
	   its own; it turns navy on hover/focus. The three contact circles keep
	   their own brand colours and the neutral shadow below. */
	--pec-toggle-bg: #ff5a3c;
	--pec-toggle-bg-hover: #0d2344;
	--pec-toggle-color: #ffffff;
	--pec-toggle-focus: #0d2344;
	--pec-toggle-shadow: 0 6px 18px -4px rgba(255, 90, 60, 0.55);
	--pec-toggle-shadow-hover: 0 10px 26px -6px rgba(255, 90, 60, 0.7);
	--pec-email-bg: #0d2344;
	--pec-phone-bg: #1e8e3e;
	--pec-whatsapp-bg: #25d366;
	--pec-item-color: #ffffff;
	--pec-label-bg: #0d2344;
	--pec-label-color: #ffffff;
	--pec-focus: #ff5a3c;
	--pec-shadow: 0 6px 18px -6px rgba(9, 20, 38, 0.45);
	--pec-shadow-hover: 0 10px 24px -8px rgba(9, 20, 38, 0.55);

	/* Motion */
	--pec-duration: 260ms;
	--pec-stagger: 60ms;
	--pec-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pec-pulse: rgba(255, 90, 60, 0.45);
	--pec-pulse-duration: 2.4s;

	position: fixed;
	bottom: var(--pec-bottom);
	inset-inline-start: var(--pec-left);
	z-index: var(--pec-z);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pec-gap);
	margin: 0;
	padding: 0;
	line-height: 1;
	/* The widget is only as wide as its buttons; clicks pass through the gaps. */
	pointer-events: none;
}

.pec-widget > * {
	pointer-events: auto;
}

/* ---------- The stack of contact options ---------- */

.pec-menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pec-gap);
	margin: 0;
	padding: 0;
}

/* ---------- One contact option ---------- */

.pec-widget .pec-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--pec-size-item) !important;
	height: var(--pec-size-item) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--pec-radius) !important;
	background: var(--pec-email-bg) !important;
	color: var(--pec-item-color) !important;
	box-shadow: var(--pec-shadow);
	text-decoration: none;
	cursor: pointer;

	/* Hidden state. visibility (not display) keeps the element transitionable
	   AND takes it out of the tab order while collapsed. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(14px) scale(0.8);
	transform-origin: center bottom;

	transition:
		transform var(--pec-duration) var(--pec-ease),
		opacity var(--pec-duration) var(--pec-ease),
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		visibility 0s linear var(--pec-duration);

	/* Closing runs top-down: the item furthest from the toggle leaves first. */
	transition-delay:
		calc((var(--pec-total, 3) - 1 - var(--pec-i, 0)) * var(--pec-stagger)),
		calc((var(--pec-total, 3) - 1 - var(--pec-i, 0)) * var(--pec-stagger)),
		0s,
		0s,
		var(--pec-duration);
}

.pec-widget .pec-item:hover,
.pec-widget .pec-item:focus-visible {
	box-shadow: var(--pec-shadow-hover);
	color: var(--pec-item-color);
}

.pec-widget .pec-item:focus-visible {
	outline: 2px solid var(--pec-focus) !important;
	outline-offset: 3px;
}

/* No decorative underline, whatever the theme does to links. */
.pec-item,
.pec-item:hover,
.pec-item:focus,
.pec-item:active {
	text-decoration: none !important;
}

.pec-widget .pec-item--phone {
	background: var(--pec-phone-bg) !important;
}

.pec-widget .pec-item--whatsapp {
	background: var(--pec-whatsapp-bg) !important;
}

.pec-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.pec-icon {
	display: block;
	width: 22px;
	height: 22px;
}

/* Label pill, revealed on hover/focus beside the circle. */
.pec-item__label {
	position: absolute;
	inset-inline-start: calc(100% + 10px);
	padding: 6px 10px;
	border-radius: 8px;
	background-color: var(--pec-label-bg);
	color: var(--pec-label-color);
	box-shadow: var(--pec-shadow);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-6px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
	pointer-events: none;
}

.pec-item:hover .pec-item__label,
.pec-item:focus-visible .pec-item__label {
	opacity: 1;
	transform: translateX(0);
}

/* ---------- Open state ---------- */

.pec-widget.pec-is-open .pec-item {
	visibility: visible;
	opacity: 1;
	transform: translateY(0) scale(1);

	/* Opening runs bottom-up: the item nearest the toggle arrives first. */
	transition-delay:
		calc(var(--pec-i, 0) * var(--pec-stagger)),
		calc(var(--pec-i, 0) * var(--pec-stagger)),
		0s,
		0s,
		0s;
}

/* ---------- The main toggle ---------- */

/* Every rule below is prefixed with .pec-widget on purpose. Themes commonly
   style bare `button` through a list like
   `:is(.btn, .button, button, [type="submit"])`, which `:is()` scores at one
   class — a tie with `.pec-toggle` that the theme then wins on source order.
   WoodMart does exactly this and was forcing its own grey fill, 0 radius and
   42px min-height onto the toggle. Two classes settles it, and !important
   guards the handful of properties themes reset most aggressively. */
.pec-widget .pec-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--pec-size-toggle) !important;
	height: var(--pec-size-toggle) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--pec-radius) !important;
	background: var(--pec-toggle-bg) !important;
	color: var(--pec-toggle-color) !important;
	box-shadow: var(--pec-toggle-shadow);
	font-size: 0;
	line-height: 1;
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s var(--pec-ease);
}

.pec-widget .pec-toggle:hover,
.pec-widget .pec-toggle:focus-visible {
	background: var(--pec-toggle-bg-hover) !important;
	color: var(--pec-toggle-color) !important;
	box-shadow: var(--pec-toggle-shadow-hover);
	transform: translateY(-1px);
}

/* The ring sits 3px OUTSIDE the button, so it lands on the page background and
   stays legible against both the coral and the navy state. */
.pec-widget .pec-toggle:focus-visible {
	outline: 2px solid var(--pec-toggle-focus) !important;
	outline-offset: 3px;
}

.pec-widget .pec-toggle:active {
	transform: translateY(0) scale(0.96);
}

/* ---------- Attention pulse ----------
   A soft coral ring that grows out of the button and fades. It is a pseudo
   element behind the button (z-index:-1) animating transform + opacity only —
   both compositor properties, so it costs nothing per frame, unlike animating
   box-shadow. The widget is a stacking context, so the ring cannot escape
   behind the page itself. */
.pec-widget .pec-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--pec-pulse);
	pointer-events: none;
	animation: pec-pulse var(--pec-pulse-duration) var(--pec-ease) infinite;
}

@keyframes pec-pulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}

	70% {
		transform: scale(1.85);
		opacity: 0;
	}

	100% {
		transform: scale(1.85);
		opacity: 0;
	}
}

/* Once the stack is open — or the pointer is on the button — the pulse has done
   its job and would only distract. */
.pec-widget.pec-is-open .pec-toggle::after,
.pec-widget .pec-toggle:hover::after,
.pec-widget .pec-toggle:focus-visible::after {
	animation: none;
	opacity: 0;
}

/* Keep the glyphs above the ring whatever the stacking context resolves to. */
.pec-widget .pec-toggle__icon {
	z-index: 1;
}

/* Icon swap: chat when closed, cross when open. */
.pec-toggle__icon {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		opacity 0.2s ease,
		transform 0.25s var(--pec-ease);
	pointer-events: none;
}

.pec-toggle__icon--close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.6);
}

.pec-widget.pec-is-open .pec-toggle__icon--open {
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
}

.pec-widget.pec-is-open .pec-toggle__icon--close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* Open state keeps the coral fill — only the glyph changes, so the button reads
   as the same control throughout. Hover still takes it navy. */

/* ---------- Small screens ---------- */

@media (max-width: 782px) {
	.pec-widget {
		--pec-size-toggle: 46px;
		--pec-size-item: 42px;
		--pec-gap: 10px;
		--pec-bottom: 16px;
		--pec-left: 16px;
	}

	/* Touch devices have no hover, so the label pill would never show; it is
	   dropped rather than left to flash on tap. The aria-label still names
	   every option for screen readers. */
	.pec-item__label {
		display: none;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.pec-widget .pec-item,
	.pec-widget .pec-toggle,
	.pec-widget .pec-toggle__icon,
	.pec-widget .pec-item__label {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		transform: none !important;
	}
}

/* ---------- THE WILD ORBIT ---------- */

.pec-widget {
	--pec-toggle-bg: #ae7c35;
	--pec-toggle-bg-hover: #1d3526;
	--pec-toggle-focus: #f1ad4e;
	--pec-toggle-shadow: 0 6px 18px -4px rgba(174, 124, 53, 0.55);
	--pec-toggle-shadow-hover: 0 10px 26px -6px rgba(174, 124, 53, 0.7);
	--pec-email-bg: #1d3526;
	--pec-phone-bg: #7a5424;
	--pec-whatsapp-bg: #25d366;
	--pec-label-bg: #020a0b;
	--pec-focus: #f1ad4e;
	--pec-pulse: rgba(174, 124, 53, 0.45);
	--pec-bottom: 24px;
	--pec-left: 24px;

	/* Right-hand side: the stack and its label pills mirror across. */
	inset-inline-start: auto;
	inset-inline-end: var(--pec-left);
	align-items: flex-end;
}
.pec-menu { align-items: flex-end; }
.pec-item__label {
	inset-inline-start: auto;
	inset-inline-end: calc(100% + 10px);
	transform: translateX(6px);
}

/* The mobile menu drawer is a full-screen overlay; step out of its way. */
body:has(#wo-drawer.is-open) .pec-widget {
	visibility: hidden;
}

/* Room under the footer's last row, so the button never sits on the legal
   links once the page is scrolled to the end.

   The fallbacks matter: --pec-bottom and --pec-size-toggle are declared on
   .pec-widget, so they are out of scope here. Without them the calc is invalid
   and takes the footer's own bottom padding down to nothing with it. */
body:has(.pec-widget) .site-footer {
	padding-bottom: calc(var(--pec-bottom, 20px) + var(--pec-size-toggle, 48px) + 48px);
}