/* ==========================================================================
   Nova Button Block — novafolio/button
   Premium button with icon, hover effects, and full styling controls.
   ========================================================================== */

.nvf-button-wrap {
	--nvf-btn-bg: var(--nvf-color-accent, #4f46e5);
	--nvf-btn-color: #ffffff;
	--nvf-btn-text-static: var(--nvf-btn-bg);
	--nvf-btn-border: var(--nvf-btn-bg);
	--nvf-btn-hover-bg: color-mix(in srgb, var(--nvf-btn-bg), #000 15%);
	--nvf-btn-hover-color: var(--nvf-btn-color);
	--nvf-btn-radius: 8px;
	--nvf-btn-ff: inherit;
	--nvf-btn-fs: inherit;
	--nvf-btn-fw: 600;
	--nvf-btn-ls: normal;
	--nvf-btn-tt: none;
	display: inline-flex;
	max-width: var(--nvf-layout-max-width, 1440px);
}

/* ── Alignment ─────────────────────────────────────────────────────────── */
.nvf-button-wrap.alignleft  { display: flex; justify-content: flex-start; }
.nvf-button-wrap.aligncenter { display: flex; justify-content: center; }
.nvf-button-wrap.alignright  { display: flex; justify-content: flex-end; }

.nvf-button-wrap--full {
	display: flex;
}
.nvf-button-wrap--full .nvf-button {
	width: 100%;
	justify-content: center;
}

/* ── Button base ──────────────────────────────────────────────────────── */
.nvf-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nvf-btn-ff);
	font-size: var(--nvf-btn-fs);
	font-weight: var(--nvf-btn-fw);
	letter-spacing: var(--nvf-btn-ls);
	text-transform: var(--nvf-btn-tt);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid var(--nvf-btn-border);
	border-radius: var(--nvf-btn-radius);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nvf-button:hover,
.nvf-button:focus-visible {
	text-decoration: none;
}
.nvf-button:focus-visible {
	outline: 2px solid var(--nvf-btn-bg);
	outline-offset: 2px;
}

/* ── Sizes ────────────────────────────────────────────────────────────── */
.nvf-button-wrap--sm .nvf-button { padding: 8px 18px; font-size: 0.85rem; }
.nvf-button-wrap--md .nvf-button { padding: 12px 28px; font-size: 0.95rem; }
.nvf-button-wrap--lg .nvf-button { padding: 16px 36px; font-size: 1.05rem; }
.nvf-button-wrap--xl .nvf-button { padding: 20px 48px; font-size: 1.15rem; }

/* ── Styles ───────────────────────────────────────────────────────────── */

/* Solid */
.nvf-button-wrap--solid .nvf-button {
	background: var(--nvf-btn-bg);
	color: var(--nvf-btn-color);
}
.nvf-button-wrap--solid .nvf-button:hover {
	background: var(--nvf-btn-hover-bg);
	color: var(--nvf-btn-hover-color);
	border-color: var(--nvf-btn-hover-bg);
}

/* Outline */
.nvf-button-wrap--outline .nvf-button {
	background: transparent;
	color: var(--nvf-btn-text-static);
	border-color: var(--nvf-btn-border);
}
.nvf-button-wrap--outline .nvf-button:hover {
	background: var(--nvf-btn-bg);
	color: var(--nvf-btn-color);
}

/* Ghost */
.nvf-button-wrap--ghost .nvf-button {
	background: transparent;
	color: var(--nvf-btn-text-static);
	border-color: transparent;
	padding-inline: 4px;
}
.nvf-button-wrap--ghost .nvf-button:hover {
	color: var(--nvf-btn-hover-bg);
}

/* Gradient */
.nvf-button-wrap--gradient .nvf-button {
	background: linear-gradient(135deg, var(--nvf-btn-bg), color-mix(in srgb, var(--nvf-btn-bg), #7c3aed 40%));
	color: var(--nvf-btn-color);
	border-color: transparent;
}
.nvf-button-wrap--gradient .nvf-button:hover {
	filter: brightness(1.1);
	color: var(--nvf-btn-hover-color);
}

/* ── Hover effects ────────────────────────────────────────────────────── */
.nvf-button-wrap--hover-lift .nvf-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.nvf-button-wrap--hover-glow .nvf-button:hover {
	box-shadow: 0 0 20px color-mix(in srgb, var(--nvf-btn-bg), transparent 50%);
}
.nvf-button-wrap--hover-slide .nvf-button {
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.nvf-button-wrap--hover-slide .nvf-button::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--nvf-btn-hover-bg);
	transform: translateX(-101%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: -1;
}
.nvf-button-wrap--hover-slide .nvf-button:hover::before {
	transform: translateX(0);
}
.nvf-button-wrap--hover-slide .nvf-button:hover {
	color: var(--nvf-btn-hover-color);
	border-color: var(--nvf-btn-hover-bg);
}

/* ── Icon ─────────────────────────────────────────────────────────────── */
.nvf-button__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.nvf-button:hover .nvf-button__icon {
	transform: translateX(3px);
}

/* ── Fallback color-mix ───────────────────────────────────────────────── */
@supports not (color: color-mix(in srgb, red, blue)) {
	.nvf-button-wrap--solid .nvf-button:hover {
		filter: brightness(0.85);
	}
	.nvf-button-wrap--hover-glow .nvf-button:hover {
		box-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
	}
}

/* ── Editor parity ────────────────────────────────────────────────────── */
.block-editor-block-list__layout .nvf-button-wrap {
	margin-block: 0;
}