/*
 * Buttons — three variants: primary (filled leaf), ghost (outlined), link (underline).
 * Class .liv-btn is the base; modifiers compose with --variant.
 */

.liv-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.5rem;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--liv-paper);
	background: var(--liv-leaf-700);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background-color var(--liv-transition), color var(--liv-transition), border-color var(--liv-transition), transform var(--liv-transition);
	user-select: none;
	text-decoration: none;
	white-space: nowrap;
}

.liv-btn:hover,
.liv-btn:focus-visible {
	background: var(--liv-leaf-500);
	color: var(--liv-paper);
}

.liv-btn:active {
	transform: translateY(1px);
}

.liv-btn[disabled],
.liv-btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* Ghost — outline on dark backgrounds. */
.liv-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--liv-paper);
}
.liv-btn--ghost:hover,
.liv-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--liv-paper);
}

/* Link — subtle underline. */
.liv-btn--link {
	background: transparent;
	color: var(--liv-paper);
	padding: 0.25rem 0;
	min-height: auto;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	letter-spacing: 0.16em;
}
.liv-btn--link:hover,
.liv-btn--link:focus-visible {
	background: transparent;
	color: var(--liv-leaf-300);
	border-bottom-color: var(--liv-leaf-300);
}

/* Square (sharp corners) variant — used in editorial CTA. */
.liv-btn--square { border-radius: var(--r-sm); }

/* Sizes. */
.liv-btn--sm { padding: 0.5rem 1rem; min-height: 36px; font-size: 0.625rem; }
.liv-btn--lg { padding: 1rem 2rem;   min-height: 52px; font-size: 0.75rem; }

/* Trailing arrow utility (paired with → glyph). */
.liv-btn__arrow {
	display: inline-flex;
	width: 1em;
	height: 1em;
	transition: transform var(--liv-transition);
}
.liv-btn:hover .liv-btn__arrow { transform: translateX(3px); }