/* QoT Core: copy-quote button.
   Colours come from the theme's --brand-* tokens with literal fallbacks, per the
   locked CSS contract: the THEME owns token values, the plugin never hardcodes a
   brand colour as its only source. */
.qot-quote-card.has-qot-copy-quote { position: relative; }

.qot-copy-quote {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 6px 12px;
	font-family: var(--brand-font-body, inherit);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--brand-primary, #1B365D);
	background: var(--brand-surface, #fff);
	border: 1px solid var(--brand-border, rgba(27, 54, 93, .18));
	border-radius: var(--brand-radius-pill, 999px);
	cursor: pointer;
	opacity: 0;
	transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

/* Always visible on touch and keyboard; hover-reveal only where hover exists. */
@media (hover: none) {
	.qot-copy-quote { opacity: 1; }
}
.qot-quote-card:hover .qot-copy-quote,
.qot-quote-card:focus-within .qot-copy-quote { opacity: 1; }

/* CONVERSION CTA (CEO 2026-08-30): hovering the BLOCK fills the button navy with
   white text so it reads as an invitation. Scoped to the button only. The card
   itself never changes: a page carries 30+ quote cards and inverting the whole
   card on hover would flicker the page as the pointer travels down it. */
.qot-quote-card:hover .qot-copy-quote,
.qot-quote-card:focus-within .qot-copy-quote {
	color: var(--brand-text-on-dark, #fff);
	background: var(--brand-primary, #1B365D);
	border-color: var(--brand-primary, #1B365D);
}

/* Pointer actually on the button: deepen it so the button still has its own
   affordance distinct from the block-hover state. */
.qot-copy-quote:hover {
	background: var(--brand-primary-dark, #142A4D);
	border-color: var(--brand-primary-dark, #142A4D);
	color: var(--brand-text-on-dark, #fff);
}

.qot-copy-quote:focus-visible {
	opacity: 1;
	outline: 3px solid var(--brand-primary, #1B365D);
	outline-offset: 2px;
}

/* Confirmation states have to stay legible on the filled button. */
.qot-copy-quote[data-state="ok"],
.qot-quote-card:hover .qot-copy-quote[data-state="ok"] {
	background: #2F6B4F;
	border-color: #2F6B4F;
	color: #fff;
}
.qot-copy-quote[data-state="err"],
.qot-quote-card:hover .qot-copy-quote[data-state="err"] {
	background: #9B2C2C;
	border-color: #9B2C2C;
	color: #fff;
}

.qot-copy-quote__icon { flex: none; }

/* Screen-reader-only live region. */
.qot-copy-quote__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* No hover on touch, so the CTA ships filled and full width. */
@media (max-width: 600px) {
	.qot-copy-quote {
		position: static;
		opacity: 1;
		margin-top: 14px;
		width: 100%;
		justify-content: center;
		min-height: 44px;
		color: var(--brand-text-on-dark, #fff);
		background: var(--brand-primary, #1B365D);
		border-color: var(--brand-primary, #1B365D);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qot-copy-quote { transition: none; }
}