/**
 * Havenlytics V3 — Global Button System
 * Two official styles: --primary and --secondary.
 * Legacy modifiers (--ghost, --on-dark, --inverse, --dark) preserve approved homepage patterns.
 *
 * @package Havenlytics_Theme
 */

.hvnly-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hvnly--space-4);
	font-family: var(--hvnly--font-display);
	font-weight: var(--hvnly-btn-font-weight, var(--hvnly--weight-bold));
	font-size: var(--hvnly-btn-font-size, var(--hvnly--text-md));
	padding: var(--hvnly-btn-padding, 15px 28px);
	border-radius: var(--hvnly-button-radius, var(--hvnly--radius-pill));
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: var(--hvnly--transition-lift), border-color var(--hvnly--duration-slow) var(--hvnly--ease), color var(--hvnly--duration-slow) var(--hvnly--ease);
	white-space: nowrap;
}

.hvnly-btn:focus-visible {
	outline: 2px solid var(--hvnly--core-primary);
	outline-offset: 3px;
}

/* ── Primary ───────────────────────────────────────────────────── */
.hvnly-btn--primary {
	background: var(--hvnly--core-gradient);
	color: var(--hvnly--on-primary);
	box-shadow: var(--hvnly--shadow-primary);
}

.hvnly-btn--primary:hover {
	/* background: var(--hvnly-btn-primary-hover-color, var(--hvnly--core-secondary)); */
	transform: translateY(-2px);
	box-shadow: var(--hvnly--shadow-primary-hover);
}

/* ── Secondary (official) + ghost (homepage alias) ─────────────── */
.hvnly-btn--secondary,
.hvnly-btn--ghost {
	background: var(--hvnly-btn-secondary-bg, var(--hvnly--surface-100));
	color: var(--hvnly--ink-900);
	border-color: var(--hvnly-input-border-color, var(--hvnly--border));
}

.hvnly-btn--secondary:hover,
.hvnly-btn--ghost:hover {
	background: var(--hvnly--surface-0);
	border-color: var(--hvnly--core-primary);
	color: var(--hvnly--core-primary);
	transform: translateY(-2px);
}

/* ── Context modifiers (size / surface) ────────────────────────── */
.hvnly-btn--sm {
	padding: 11px var(--hvnly--space-9);
	font-size: var(--hvnly--text-base);
}

.hvnly-btn--block {
	width: 100%;
}

.hvnly-btn--on-dark.hvnly-btn--secondary,
.hvnly-btn--on-dark.hvnly-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: var(--hvnly--on-primary);
	border-color: rgba(255, 255, 255, 0.15);
}

.hvnly-btn--on-dark.hvnly-btn--secondary:hover,
.hvnly-btn--on-dark.hvnly-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--hvnly--on-primary);
}

/* ── Legacy aliases (approved homepage sections) ───────────────── */
.hvnly-btn--dark {
	background: var(--hvnly--ink-900);
	color: var(--hvnly--on-primary);
}

.hvnly-btn--dark:hover {
	transform: translateY(-2px);
	box-shadow: var(--hvnly--shadow-lg);
}

.hvnly-btn--inverse {
	background: var(--hvnly--on-primary);
	color: var(--hvnly--core-primary);
}

.hvnly-btn--inverse:hover {
	transform: translateY(-2px);
	box-shadow: var(--hvnly--shadow-inverse-hover);
}

/* ── Text link buttons (nav / inline actions) ──────────────────── */
.hvnly-btn-link {
	display: inline-flex;
	align-items: center;
	gap: var(--hvnly--space-2);
	font-weight: var(--hvnly--weight-semibold);
	color: var(--hvnly--ink-600);
	text-decoration: none;
	transition: var(--hvnly--transition-color);
}

.hvnly-btn-link:hover {
	color: var(--hvnly--ink-900);
}

.hvnly-btn-link:focus-visible {
	outline: 2px solid var(--hvnly--core-primary);
	outline-offset: 3px;
	border-radius: var(--hvnly--space-1);
}

.hvnly-btn-link--primary {
	color: var(--hvnly--core-primary);
}

.hvnly-btn-link--primary:hover {
	color: var(--hvnly--core-secondary);
}

.hvnly-btn-link--primary:visited {
	color: #5a4fe8;
}

/* Icon offset for play buttons */
.hvnly-btn .fa-circle-play,
.hvnly-browser-play i {
	margin-left: 3px;
}