/*
 * Makira Multi Color Heading - frontend styles.
 *
 * Deliberately minimal: per-part color and shared typography are applied
 * inline/via Elementor's own generated CSS, so this file only resets
 * default margins and keeps the wrapping tag from fighting the theme.
 */

.makira-multicolor-heading {
	margin: 0;
	padding: 0;
}

.makira-multicolor-heading__part {
	display: inline;
}

/* --- Responsive "Start on a new line" ---
   The <br> for a heading part is always present in the markup when it's
   enabled on any device (PHP can't know the visitor's actual viewport at
   render time); these media queries are what actually show/hide it per
   breakpoint, matching Elementor's own default tablet/desktop breakpoints
   (768px / 1025px) used elsewhere in this toolkit. */
.makira-multicolor-heading__break {
	display: none;
}

@media ( max-width: 767px ) {
	.makira-multicolor-heading__break[data-mobile='1'] {
		display: inline;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.makira-multicolor-heading__break[data-tablet='1'] {
		display: inline;
	}
}

@media ( min-width: 1025px ) {
	.makira-multicolor-heading__break[data-desktop='1'] {
		display: inline;
	}
}