/* ==========================================================================
   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;
}

/* ── 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;
}