/*
 * Highlight / CTA box.
 * Variants differ only by the colour of a single heavy left rule, so the four
 * styles stay recognisably one component instead of four coloured boxes.
 */

.masthead-callout {
	margin: 2.25em 0;
	padding: 1.35em 1.5em;
	border-left: 4px solid var( --mh-color-accent, #d92b00 );
	background: var( --mh-color-paper, #111111 );
}

.masthead-callout__heading {
	margin: 0 0 0.45em;
	font-family: var( --mh-font-ui, inherit );
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --mh-color-accent-text, #ec4a22 );
}

.masthead-callout__text { line-height: 1.62; font-size: 1rem; }
.masthead-callout__text > :first-child { margin-top: 0; }
.masthead-callout__text > :last-child { margin-bottom: 0; }

.masthead-callout__button {
	display: inline-block;
	margin-top: 1.1em;
	padding: 0.8em 1.4em;
	background: var( --mh-color-accent, #d92b00 );
	color: var( --mh-color-on-accent, #ffffff ) !important;
	text-decoration: none !important;
	font-family: var( --mh-font-ui, inherit );
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: background 0.15s ease;
}
.masthead-callout__button:hover { background: var( --mh-color-accent-deep, #b02200 ); }

.masthead-callout--tip { border-left-color: #5b9bd5; }
.masthead-callout--tip .masthead-callout__heading { color: #5b9bd5; }

.masthead-callout--warning { border-left-color: var( --mh-color-danger, #f87171 ); }
.masthead-callout--warning .masthead-callout__heading { color: var( --mh-color-danger, #f87171 ); }

/* The call-to-action variant inverts entirely — it is meant to stop the eye. */
.masthead-callout--cta {
	background: var( --mh-surface-raised, #151515 );
	color: var( --mh-color-ink, #f5f5f5 );
	border-left-color: var( --mh-color-accent-text, #ec4a22 );
}
.masthead-callout--cta .masthead-callout__heading { color: var( --mh-color-accent-text, #ec4a22 ); }
.masthead-callout--cta .masthead-callout__button { background: var( --mh-color-accent, #d92b00 ); }
.masthead-callout--cta .masthead-callout__button:hover {
	background: var( --mh-color-heading, #ffffff );
	color: #0a0a0a !important;
}