/* ============================================================================
   Latitude Key — floating contact shortcuts (bottom-right), site-wide.
   Snapchat + Live chat + Call, with a +/× toggle that folds the stack.
   Glass style: white outline, translucent white fill, white icon — round.
   Sized to match the accessibility widget (52px). Markup in wp_footer.
   NOTE: the accessibility widget itself is inverted to white-bg/black-icon at
   the bottom of this file — that treatment is ONLY for that widget.
   ========================================================================== */

.lk-fab {
	position: fixed;
	/* Aligned with, and stacked ABOVE, the accessibility widget
	   (button.onetap-toggle). That widget is JS-positioned 30px from the
	   PHYSICAL window edge (scrollbar included), while a plain fixed element
	   sits 30px from the CONTENT edge — so on a page with a scrollbar the two
	   columns would be off by the scrollbar width. `100vw - 100%` equals the
	   scrollbar width, so this keeps our column perfectly on the widget's axis. */
	right: calc(15px - (100vw - 100%));
	bottom: 80px;
	z-index: 9000;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: opacity .3s ease;
}

/* Shared glass round-button (service links + toggle). The !important resets
   beat the site's global Elementor button/link kit (fill, radius, link colour). */
.lk-fab a,
.lk-fab .lk-fab-toggle {
	width: 52px; height: 52px;
	border-radius: 50% !important;               /* round */
	display: flex; align-items: center; justify-content: center;
	color: #fff !important;                       /* white icon */
	background: rgba(255, 255, 255, .15) !important;
	border: 1.5px solid rgba(255, 255, 255, .9) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	cursor: pointer; min-height: 0 !important; padding: 0 !important;
	transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .25s ease;
}
/* Scroll-adaptive INVERTED theme — floating-contact.js adds .is-inverted to each
   button individually (progressive, one at a time) once it scrolls off the dark
   hero onto light content: the white "glass" simply inverts to INK glass (white →
   ink, white-translucent → ink-translucent) so the button stays visible. Keeps
   the same blur + shadow. */
.lk-fab a.is-inverted,
.lk-fab .lk-fab-toggle.is-inverted {
	color: #16303C !important;                     /* white icon → ink */
	border-color: rgba(16, 48, 60, .9) !important; /* white 90% → ink 90% */
	/* Background is intentionally NOT overridden: the buttons keep the base white
	   semi-opaque "glass" fill (15%, 28% on hover) on scroll too — only the icon
	   and outline invert to ink for contrast on light content. */
}
.lk-fab a.is-inverted:focus-visible,
.lk-fab .lk-fab-toggle.is-inverted:focus-visible {
	outline-color: rgba(16, 48, 60, .8);
}
.lk-fab a:hover,
.lk-fab .lk-fab-toggle:hover {
	background: rgba(255, 255, 255, .28) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
.lk-fab a:focus-visible,
.lk-fab .lk-fab-toggle:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 2px; }

.lk-fab svg { width: 28px; height: 28px; display: block; flex: 0 0 auto; }

/* Hover label — hidden by default (mobile keeps icon-only); the desktop block
   below reveals it on hover. */
.lk-fab-label { display: none; }

/* Toggle: + rotates to × when the stack is open. */
.lk-fab .lk-fab-toggle svg { transition: transform .28s cubic-bezier(.5, 0, .2, 1); }
.lk-fab.is-open .lk-fab-toggle svg { transform: rotate(45deg); }

/* Fold / unfold: the three service buttons collapse into the toggle. */
.lk-fab .lk-fab-item { transform-origin: center bottom; }
.lk-fab:not(.is-open) .lk-fab-item {
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(16px) scale(.8);
}
.lk-fab.is-open .lk-fab-item:nth-child(1) { transition-delay: .06s; }
.lk-fab.is-open .lk-fab-item:nth-child(2) { transition-delay: .03s; }

/* ---- Desktop: dock the stack to the RIGHT EDGE, vertically centred. Each
   button shows only its icon at rest; on hover it grows LEFT into a glass pill
   revealing its label (groupelafreniere.com-style). The round glass look and the
   scroll-adaptive inversion are kept — a 52px-tall element with a pill radius is a
   circle when only the icon shows, and a stadium pill once the label expands.
   Mobile (below) is untouched. ---- */
@media (min-width: 768px) {
	.lk-fab {
		right: -5px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		align-items: flex-end;   /* keep buttons flush to the right edge as they grow left */
		gap: 14px;
	}
	/* No fold toggle on desktop — the buttons stay visible (half-hidden = text only). */
	.lk-fab .lk-fab-toggle { display: none; }

	/* Button becomes an expandable pill: icon pinned right, label collapses to 0. */
	.lk-fab a {
		width: auto;
		min-width: 52px;
		justify-content: flex-end;
		border-radius: 99px 0 0 99px !important;   /* circle at 52px, stadium pill when wider */
		border-right-width: 0 !important;
		overflow: hidden;
	}
	.lk-fab a svg { margin: 0 12px; }      /* 28 + 12 + 12 = a 52px icon slot on the right */

	.lk-fab-label {
		display: inline-block;
		white-space: nowrap;
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		padding-left: 0;
		font-family: "Work Sans", system-ui, sans-serif;
		font-weight: 600;
		font-size: .9rem;
		line-height: 1;
		color: inherit;                     /* follows the icon colour (white → ink on scroll) */
		transition: max-width .34s ease, opacity .22s ease, padding-left .34s ease;
	}
	.lk-fab a:hover .lk-fab-label,
	.lk-fab a:focus-visible .lk-fab-label {
		max-width: 200px;
		opacity: 1;
		padding-left: 18px;
	}
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.lk-fab-label { transition: none; }
}

/* ---- Mobile: horizontal fixed bottom band ---- */
@media (max-width: 767px) {
	.lk-fab {
		left: 0; right: 0; bottom: 0;
		flex-direction: row;
		align-items: center;
		/* Even 4-up distribution with equal 15px side margins. The 3 service
		   buttons sit in a row (space-between); the accessibility widget — which
		   the plugin fixes ~15px from the right edge — is the evenly-gapped 4th
		   slot. Bottom padding (14) lifts the buttons so their centres line up
		   with that widget (~15px off the bottom). The right padding is derived
		   from the viewport so the three inter-button gaps stay equal, and equal
		   to the side margins, at any phone width: (100vw - 33px) / 3. */
		justify-content: space-between;
		padding: 9px calc((100vw - 33px) / 3) 14px 25px;
		background: rgba(0, 0, 0, .75);
	}
	.lk-fab .lk-fab-toggle { display: none; }   /* no fold — the band shows everything */
	/* The three service buttons are always visible on the band. */
	.lk-fab .lk-fab-item {
		opacity: 1 !important; visibility: visible !important;
		pointer-events: auto !important; transform: none !important;
	}
	.lk-fab a { width: 46px; height: 46px; }
	.lk-fab svg { width: 25px; height: 25px; }

	/* Mobile keeps every contact button SOLID white with a black icon — no
	   scroll-adaptive inversion here — so the .is-inverted state is overridden
	   back. (The accessibility widget is handled at the end of the file, after
	   its base rules, so this override wins the source-order tie.) */
	.lk-fab a,
	.lk-fab a.is-inverted {
		background: #fff !important;
		color: #16303C !important;
		border-color: transparent !important;
	}

	/* The widget's position is plugin-controlled (JS); we only lift it above ours. */
	button.onetap-toggle { z-index: 9001 !important; }
}

/* Hide the whole widget while the intro overlay or the slide-in menu owns the screen. */
html.lk-pl-active .lk-fab,
html.lk-drawer-open .lk-fab { opacity: 0; pointer-events: none; }

/* ---- Accessibility widget ONLY (accessibility-onetap plugin) ----
   Invert it to white background + black icon (its icon is an <img> of a white
   silhouette on transparent, so invert(1) turns it black). This treatment is
   intentionally limited to this widget; the contact buttons above stay glass. */
button.onetap-toggle {
	background: #ffffff !important;
	border-radius: 50% !important;   /* round, like the contact buttons above */
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22) !important;
	transition: background .18s ease;
}
button.onetap-toggle img { filter: invert(1) !important; transition: filter .18s ease; }
/* Scroll-adaptive (paired with the .lk-fab buttons via floating-contact.js): once
   it scrolls onto light content, invert to an ink background + white icon so it
   stays visible. It has no outline, so it keeps a solid fill (unlike the FABs). */
button.onetap-toggle.is-inverted { background: #16303C !important; }
button.onetap-toggle.is-inverted img { filter: none !important; }

/* Mobile: the accessibility widget stays white bg + black icon regardless of
   scroll state (no inversion on mobile). Placed AFTER the base .is-inverted
   rules above so it wins the source-order tie (same specificity + !important). */
@media (max-width: 767px) {
	button.onetap-toggle,
	button.onetap-toggle.is-inverted { background: #fff !important; }
	button.onetap-toggle img,
	button.onetap-toggle.is-inverted img { filter: invert(1) !important; }
	/* Match the 25px left margin of the contact band (equal side margins). */
	.onetap-container-toggle .onetap-toggle { margin-right: 25px !important; }
}

/* ============================================================================
   Back-to-top button — MOBILE ONLY, bottom-right, above the contact band.
   Hidden until the page is scrolled (JS toggles .is-visible). White circle,
   ink icon, matching the mobile contact buttons. !important beats the Elementor
   kit's global <button> style (blue fill + 10px radius).
   ========================================================================== */
.lk-to-top { display: none; }
@media (max-width: 767px) {
	.lk-to-top {
		position: fixed;
		right: 15px;
		bottom: 84px;                 /* clears the ~69px contact band */
		z-index: 9000;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px; height: 46px;
		border-radius: 50% !important;
		background: #fff !important;
		color: #16303C !important;
		border: 0 !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
		padding: 0 !important;
		min-height: 0 !important;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}
	.lk-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
	.lk-to-top:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
	.lk-to-top:focus-visible { outline: 3px solid rgba(16, 48, 60, .5); outline-offset: 2px; }
	.lk-to-top svg { width: 24px; height: 24px; display: block; }
	/* Hide while the intro overlay or slide-in menu owns the screen. */
	html.lk-pl-active .lk-to-top,
	html.lk-drawer-open .lk-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lk-to-top { transition: opacity .01s linear; }
}

/* ---- Clair Support: a conversation is waiting (phone: the chat stays closed on page change).
   The plugin sets html[data-clair-unread]; we show a dot on "Live chat" and on the folded "+". */
html[data-clair-unread] .lk-fab-chat,
html[data-clair-unread] .lk-fab .lk-fab-toggle { position: relative; }
html[data-clair-unread] .lk-fab-chat::after,
html[data-clair-unread] .lk-fab:not(.is-open) .lk-fab-toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #d64545;
	box-shadow: 0 0 0 2px #fff;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	html[data-clair-unread] .lk-fab-chat::after,
	html[data-clair-unread] .lk-fab:not(.is-open) .lk-fab-toggle::after { animation: lk-unread-pulse 2s ease-in-out infinite; }
	@keyframes lk-unread-pulse { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(214, 69, 69, .25); } }
}