/**
 * MITEL Heading Block Styles
 *
 * Uses existing theme CSS variables for consistency.
 * Works in both editor and frontend.
 *
 * @package Mitel
 */

/* Frontend styles for MITEL Heading block */
.mitel-heading {
	font-family: var(--otrock-font-base, 'Montserrat', sans-serif);
	color: var(--otrock-font-color-primary, #FFF);
	font-weight: 700;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mitel-heading--h2 {
	color: var(--White, #FFF);
	font-size: 50px;
	font-style: normal;
	line-height: 72px;
}

.mitel-heading--h3 {
	font-size: 38px;
	font-style: normal;
	line-height: 54px;
}

/* Editor wrapper styles */
.mitel-heading-editor {
	padding: 16px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* Editor input field */
.mitel-heading-editor .mitel-heading-input input {
	font-size: 16px !important;
	padding: 8px !important;
}

/* Preview heading in editor */
.mitel-heading-editor .mitel-heading {
	color: #1e1e1e !important;
	font-size: 1.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.mitel-heading--h2 {
		font-size: 36px;
		line-height: 50px;
	}

	.mitel-heading--h3 {
		font-size: 28px;
		line-height: 40px;
	}
}

/* Placeholder styling in editor */
.mitel-heading .block-editor-rich-text__editable:empty::before {
	color: var(--otrock-font-color-body, #AEB2E2);
	opacity: 0.6;
}