/*
 * rm-mbre-newsletter-headings.css
 * The three H3 treatments and the mobile eyebrow separator.
 * Defects 6 and 7 in document 03 section 11. Phase 5, decisions D36 to D38.
 *
 * WHERE IT LOADS
 * The hub, and issues made from the hub by Archive this issue. Never on the
 * back issues converted from posts, which keep exactly the look they have today.
 * See D36.
 *
 * WHAT IT CANNOT DO
 * Lower typed capitals. text-transform: none undoes CSS capitals, not letters
 * typed as capitals. The heading audit lists those for retyping. See D37.
 *
 * SCOPE
 * Class selectors only. No bare h1 to h6, p or a. The eyebrow classes are the
 * ones the hub content already uses (eyebrow, mbre-news-bar) plus the markup
 * document 03 section 5.2 specifies (eyebrow-row). Nothing is invented here.
 *
 * WHY SOME !important
 * Avada's global H3 typography sets letter-spacing to 2px, and the hub content
 * carries inline <style> blocks for these same classes later in the page. Where
 * a plain class cannot win, the property is marked, and only that property.
 *
 * TOKENS
 * Locked 13 token palette. Each var() carries the locked hex as a fallback. No
 * radius. No gold. No navy. No em or en dashes, including in content values.
 */

/* ─────────────────────────────────────────────────────────────────── */
/* 1. VARIANT 1: H3 STACKED DIRECTLY UNDER AN H2 AND ITS EYEBROW       */
/* Sentence case, all ink, no rule. The eyebrow above carries colour.  */
/* ─────────────────────────────────────────────────────────────────── */

h3.mbre-sub-stacked {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ink, #1c1c1c);
	text-transform: none !important;
	letter-spacing: normal !important;
	border-bottom: 0;
	padding-bottom: 0;
	margin: 8px 0 14px;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 2. VARIANT 2: STANDALONE H3 SECTION                                  */
/* Two tone: blue lead in through the colon, ink after it, blue rule.  */
/* ─────────────────────────────────────────────────────────────────── */

h3.mbre-spotlight-title {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 27px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--ink, #1c1c1c);
	text-transform: none !important;
	letter-spacing: normal !important;
	border-bottom: 1px solid var(--blue, #00A3E0);
	padding-bottom: 12px;
	margin: 0 0 12px;
}

/* A span, never an anchor, carries the blue. On the live hub an anchor as the
 * lead computed to a second, lighter blue. If the heading must link, the link
 * sits inside the span and takes the span's colour. */
h3.mbre-spotlight-title .lead,
h3.mbre-spotlight-title .lead a {
	color: var(--blue, #00A3E0) !important;
}

h3.mbre-spotlight-title .lead a {
	font-weight: inherit;
	text-decoration: none;
}

h3.mbre-spotlight-title .lead a:hover,
h3.mbre-spotlight-title .lead a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Variant 3, an H3 directly above a table, is deliberately absent. Document 03
 * keeps the existing label bar: a table label is not a section. */

/* 660px, not the 768 default. It is the breakpoint document 03 section 6.1
 * specifies for both treatments, and the one the newsletter stylesheet already
 * uses for these rows, so type steps down exactly where the rows start wrapping. */
@media (max-width: 660px) {
	h3.mbre-sub-stacked     { font-size: 18px; }
	h3.mbre-spotlight-title { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* 3. EYEBROW ROWS ON MOBILE                                           */
/* On a wide screen a rule separates the two halves. Once a half has    */
/* to wrap, the rule shrinks to nothing and the halves run together. So */
/* below 660px the row becomes one line of text, the rule goes, and a  */
/* middot sits between the halves. See D38.                            */
/* ─────────────────────────────────────────────────────────────────── */

@media (max-width: 660px) {

	/* As a flex row each half set its own line height. As one block of text
	 * it would inherit the body's, spacing a wrapped label like a paragraph. */
	.eyebrow,
	.eyebrow-row,
	.mbre-news-bar {
		display: block !important;
		line-height: 1.5;
	}

	.eyebrow .eyebrow-line,
	.mbre-news-bar .mbre-news-bar-rule {
		display: none !important;
	}

	.eyebrow .eyebrow-text,
	.eyebrow-row .eyebrow-text,
	.eyebrow-row .eyebrow-date,
	.mbre-news-bar .mbre-news-bar-label,
	.mbre-news-bar .mbre-news-bar-date {
		display: inline !important;
		white-space: normal !important;
	}

	/* The second half of each markup, whichever sits before it. */
	.eyebrow .eyebrow-text + .eyebrow-text::before,
	.eyebrow .eyebrow-line + .eyebrow-text::before,
	.eyebrow-row .eyebrow-text + .eyebrow-date::before,
	.mbre-news-bar .mbre-news-bar-label + .mbre-news-bar-date::before,
	.mbre-news-bar .mbre-news-bar-rule + .mbre-news-bar-date::before {
		content: "\00B7";
		color: var(--blue, #00A3E0);
		font-weight: 700;
		margin: 0 .45em;
	}
}