/**
 * The Wicked — "copy email" icons and feedback (0.4.59). Behaviour: `assets/js/copy-email.js`.
 *
 * ⛔ OUTSIDE `.tw-scope` ON PURPOSE (the 404 and Contact's heading are not in it), so no `--tw-*`
 * token is relied on: every value is a literal, the house tan/hover colours included.
 *
 * ── THE TWO ICONS ─────────────────────────────────────────────────────────────────────────────────
 * Same 24px box and 1.6 stroke as the ↗ arrow they replace. COPY = two offset rounded squares;
 * DONE = a check. Contact 486's heading draws its icon as a CSS mask on `::after` from its own
 * `custom_css` (at (0,4,1)); this file swaps that mask with `!important` — the only way a plugin
 * stylesheet outranks per-element custom CSS — and ONLY on a heading that directly holds a mailto
 * link (`:has()`), so no other heading on the site is touched, and there is no flash of the old
 * arrow before the script runs. Path Rail (Careers) renders both SVGs itself when its link is a
 * mailto (`class-path-rail-widget.php`), and this file shows one at a time.
 */

.elementor-heading-title:has( > a[href^="mailto:"] )::after {
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='1.5'/%3E%3Cpath d='M5 15V5.5A1.5 1.5 0 0 1 6.5 4H15'/%3E%3C/svg%3E" ) center / contain no-repeat !important;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='1.5'/%3E%3Cpath d='M5 15V5.5A1.5 1.5 0 0 1 6.5 4H15'/%3E%3C/svg%3E" ) center / contain no-repeat !important;
}

.elementor-heading-title.is-copied:has( > a[href^="mailto:"] )::after {
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E" ) center / contain no-repeat !important;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E" ) center / contain no-repeat !important;
}

/* Path Rail's two inline SVGs: one visible at a time. */
.tw-copy__ico--done { display: none; }
.is-copied > .tw-copy__ico--copy { display: none; }
.is-copied > .tw-copy__ico--done { display: inline-block; }

/* ── "Copied" ──────────────────────────────────────────────────────────────────────────────────────
 * Absolutely positioned, so it never moves the line it sits on. To the right of the host (after
 * the icon); the script flips it UNDERNEATH (`tw-copy--below`) only when the right would leave
 * the screen. A link inside running text (`tw-copy-host--inline`, the 404) gets it ABOVE, as a
 * small tag on the page colour, because beside it would sit on the next words. */
.tw-copy-host {
	position: relative;
}

.tw-copy__label {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: 12px;
	transform: translateY( -50% );
	white-space: nowrap;
	pointer-events: none;
	font-family: Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: #C9A074;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

.is-copied > .tw-copy__label {
	opacity: 1;
}

.tw-copy--below > .tw-copy__label {
	top: 100%;
	left: 0;
	margin-left: 0;
	margin-top: 8px;
	transform: none;
}

.tw-copy-host--inline > .tw-copy__label {
	top: auto;
	bottom: 100%;
	left: 50%;
	margin: 0 0 6px 0;
	transform: translateX( -50% );
	padding: 5px 8px;
	background-color: #101013;
	border: 1px solid rgba( 177, 128, 81, 0.5 );
}

.tw-copy__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	.tw-copy__label { transition-duration: 0s; }
}