/* ==========================================================================
   Nova Heading Block — novafolio/heading
   Advanced heading with subtitle, separator, and full typography controls.
   ========================================================================== */

.nvf-heading {
	--nvf-hdg-title-color: var(--nvf-color-ink, #111111);
	--nvf-hdg-subtitle-color: var(--nvf-color-gray, #555555);
	--nvf-hdg-sep-color: var(--nvf-color-accent, #4f46e5);
	max-width: var(--nvf-hdg-max-w, var(--nvf-layout-max-width, 1440px));
	margin-inline: auto;
}

/* ── Alignment ────────────────────────────────────────────────────────── */
.nvf-heading--align-left   { text-align: left; }
.nvf-heading--align-center { text-align: center; margin-inline: auto; }
.nvf-heading--align-right  { text-align: right; margin-inline-start: auto; }

/* ── Title ────────────────────────────────────────────────────────────── */
/* Typography (font-size, weight, family, etc.) is applied via inline
   styles in PHP only when the user explicitly sets a value.  When no
   custom value is set the normal cascade (theme.json / Customizer)
   determines the appearance — no defaults are forced here.           */
.nvf-heading__title {
	color: var(--nvf-hdg-title-color);
	margin: 0;
	padding: 0;
}

.nvf-heading--has-hover-title .nvf-heading__title {
	display: inline-grid;
	position: relative;
	align-items: center;
}

.nvf-heading--has-hover-title .nvf-heading__title-main,
.nvf-heading--has-hover-title .nvf-heading__title-hover {
	grid-area: 1 / 1;
	transition: opacity .28s ease, transform .32s cubic-bezier(.2,.65,.2,1);
}

.nvf-heading--has-hover-title .nvf-heading__title-main {
	opacity: 1;
	transform: translateY(0);
}

.nvf-heading--has-hover-title .nvf-heading__title-hover {
	opacity: 0;
	transform: translateY(28%);
	pointer-events: none;
}

.nvf-heading--has-hover-title:hover .nvf-heading__title-main,
.nvf-heading--has-hover-title:focus-within .nvf-heading__title-main {
	opacity: 0;
	transform: translateY(-28%);
}

.nvf-heading--has-hover-title:hover .nvf-heading__title-hover,
.nvf-heading--has-hover-title:focus-within .nvf-heading__title-hover {
	opacity: 1;
	transform: translateY(0);
}

/* ── Subtitle ─────────────────────────────────────────────────────────── */
/* Typography handled by inline styles in PHP (same as title).       */
.nvf-heading__subtitle {
	color: var(--nvf-hdg-subtitle-color);
	line-height: 1.6;
	margin: 0.6em 0 0;
	max-width: 640px;
}
.nvf-heading--align-center .nvf-heading__subtitle { margin-inline: auto; }
.nvf-heading--align-right  .nvf-heading__subtitle { margin-inline-start: auto; }

/* ── Separator ────────────────────────────────────────────────────────── */
.nvf-heading__separator {
	margin-top: 0.6em;
	margin-bottom: 0;
}
.nvf-heading--align-center .nvf-heading__separator { margin-inline: auto; }
.nvf-heading--align-right  .nvf-heading__separator { margin-inline-start: auto; }

/* Line */
.nvf-heading__separator--line {
	height: 3px;
	border-radius: 2px;
	background: var(--nvf-hdg-sep-color);
}

/* Gradient */
.nvf-heading__separator--gradient {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--nvf-hdg-sep-color), transparent);
}
.nvf-heading--align-right .nvf-heading__separator--gradient {
	background: linear-gradient(270deg, var(--nvf-hdg-sep-color), transparent);
}
.nvf-heading--align-center .nvf-heading__separator--gradient {
	background: linear-gradient(90deg, transparent, var(--nvf-hdg-sep-color), transparent);
}

/* Dots */
.nvf-heading__separator--dots {
	display: flex;
	gap: 6px;
	height: auto;
}
.nvf-heading--align-center .nvf-heading__separator--dots { justify-content: center; }
.nvf-heading--align-right  .nvf-heading__separator--dots { justify-content: flex-end; }
.nvf-heading__separator--dots span {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nvf-hdg-sep-color);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Responsive title size is handled by the editor's responsive
	   typography output, not forced here.  Users who want a mobile
	   override can use the spacing/font panel. */
}

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

.block-editor-block-list__layout .nvf-heading--has-hover-title .nvf-heading__title[data-hover-title] {
	position: relative;
	display: inline-block;
}

.block-editor-block-list__layout .nvf-heading--has-hover-title .nvf-heading__title[data-hover-title]::after {
	content: attr(data-hover-title);
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(28%);
	transition: opacity .28s ease, transform .32s cubic-bezier(.2,.65,.2,1);
	pointer-events: none;
	color: var(--nvf-hdg-title-color);
}

.block-editor-block-list__layout .nvf-heading--has-hover-title:hover .nvf-heading__title[data-hover-title],
.block-editor-block-list__layout .nvf-heading--has-hover-title:focus-within .nvf-heading__title[data-hover-title] {
	color: transparent !important;
}

.block-editor-block-list__layout .nvf-heading--has-hover-title:hover .nvf-heading__title[data-hover-title]::after,
.block-editor-block-list__layout .nvf-heading--has-hover-title:focus-within .nvf-heading__title[data-hover-title]::after {
	opacity: 1;
	transform: translateY(0);
}