/*
 * TMT header — faithful reproduction of the live suffusion-michael header.
 * Values reverse-engineered from staging.themichaelteaching.com computed styles
 * + suffusion-michael/style.css (agent-workspace.trinity-staging1 #142 item 1).
 *
 * Scope: only .tmt-site-header and the #page background. Nothing here touches
 * nav or content — those stay michael-cards-pro's.
 */

/* --- earth / sunrise backdrop (Suffusion put this on #wrapper) -------------- */
#page {
	background: #000 url("../images/SunriseOverEarthMainColumnBG.jpg") top center no-repeat;
	/* Scale to the full page width at every viewport, height proportional — a
	   full-bleed banner that fades into the black below. The old `1010px auto`
	   was a fixed px, so on screens wider than 1010px the graphic stopped short
	   of the edges; the mobile `cover` override then cropped/zoomed it. */
	background-size: 100% auto;
}

/* --- header shell --------------------------------------------------------- */
.tmt-site-header {
	background: transparent;
	border: 0;
	padding: 0;
	min-height: 85px;
}

/* #145 — plain block flow around a right-floated photo. The photo is FIRST in
   the DOM; the title, subtitle and quote follow it and wrap around it natively:
   they use the space beside the photo where there's room, and expand to full
   width automatically once past the photo's bottom edge. No flex / order / JS —
   the photo is pinned top-right at every width (rule 1) for free. */
.tmt-header-inner {
	max-width: 990px;      /* Suffusion #wrapper width */
	margin: 0 auto;
	padding: 18px 16px 10px;
}

.tmt-header-inner::after {   /* contain the float */
	content: "";
	display: block;
	clear: both;
}

.tmt-author-portrait {
	float: right;
	width: 85px;
	margin: 0 0 10px 24px;   /* gap below + to the left of the photo for the text */
}

.tmt-branding {
	margin-left: 25px;       /* Suffusion #header { margin-left: 25px } */
}

.tmt-author-quote,
.tmt-author-quote:visited {
	display: block;
	/* the photo (134px) is about as tall as title + subtitle, so the quote
	   would otherwise wrap into the narrow strip still left beside the float.
	   clear it past the photo so it always has the full row width; text-wrap
	   balance then evens out its 1–2 lines. */
	clear: right;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: right;
	text-wrap: balance;      /* #145 rule 4: no lone last word */
}

/* --- glowing title ------------------------------------------------------- */
.tmt-blogtitle {
	margin: 0;
	padding: 0 0 10px 0;
	font-family: "Marcellus", Georgia, "Times New Roman", serif;
	/* natural production size (rule 2) — only a real breakpoint step-down below,
	   for phones where 48px genuinely can't fit. No workaround clamp. */
	font-size: 48px;
	font-weight: 800;
	letter-spacing: 7px;
	line-height: 1.1;
	text-wrap: balance;   /* #145: no lone last word on its own line */
	color: #2c9c10;
	text-shadow:
		-1px 1px 1px #000,
		1px 2px 3px #fbea4c,
		1px -1px 3px #fbea4c,
		-2px 2px 3px #fbea4c,
		-2px -1px 3px #fbea4c,
		0 0 25px #fbea4c,
		0 0 35px #fed54f,
		0 0 45px #e09519,
		0 0 55px #b6580c;
}

.tmt-blogtitle a,
.tmt-blogtitle a:visited {
	color: #2c9c10;
	text-decoration: none;
}

.tmt-blogtitle a:hover,
.tmt-blogtitle a:focus {
	color: #22ff00;
	text-decoration: none;
}

/* --- tagline + consortium byline --------------------------------------- */
.tmt-description {
	display: block;
	margin: 0;
	text-transform: capitalize;
	font-family: "Myriad Pro", Myriad, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-size: 18px;      /* natural production size (rule 2) */
	text-wrap: balance;   /* #145: no lone last word on its own line */
	color: #000;
	text-shadow:
		1px 1px 2px #fbea4c,
		1px -1px 2px #fbea4c,
		-1px 1px 2px #fbea4c,
		-1px -1px 2px #fbea4c,
		0 0 5px #fed54f,
		0 0 8px #e09519;
}

.tmt-byline {
	display: block;      /* Suffusion rendered this via description::after */
}

/* --- author pull-quote + headshot (was the #header-widgets text widget) --- */
/* Layout (float) is defined up top; these are just the visual bits. */
.tmt-author-quote,
.tmt-author-quote:visited {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 2px #000;
}

.tmt-author-quote:hover,
.tmt-author-quote:focus {
	color: #00ff00;
	text-decoration: none;
}

.tmt-author-portrait img {
	display: block;
	width: 85px;
	height: 134px;
}

/* --- responsive (also covers #54 for the header region) ---------------- */
/* The photo stays float:right at every width — rule 1. Only real font
   step-downs here, for widths where the production sizes genuinely can't fit. */
@media (max-width: 782px) {
	.tmt-header-inner {
		padding: 14px 12px 8px;
	}

	.tmt-branding {
		margin-left: 0;
	}

	.tmt-blogtitle {
		font-size: 38px;
		letter-spacing: 5px;
	}
	/* no #page background override — `100% auto` is responsive at every width. */
}

@media (max-width: 480px) {
	.tmt-blogtitle {
		font-size: 30px;
		letter-spacing: 3px;
	}

	.tmt-description {
		font-size: 15px;
	}
}