/* ATC content baseline.
   ==========================================================================
   A HOLDING PATTERN, NOT A REBUILD. The home page is rebuilt; the 687 pages
   that carry 3.4x its traffic are still on the old templates. This makes them
   read as the same brand in the meantime, without touching layout.

   SCOPED TO .entry-content AND .megaphone-content-episode, never to bare
   elements. A global `h2 {}` here would reach into the chrome, the bands, the
   widgets and every plugin's markup on 687 pages at once.

   ELEMENTOR PAGES ARE EXCLUDED on purpose. /sponsor/ and
   /hire-nathan-bush-to-achieve-your-ecommerce-goals/ use
   page-template-elementor_header_footer and were designed separately, with
   their own type scale (h2 at weight 600). Restyling them from here would
   fight a design nobody asked to change.

   WHAT THIS DELIBERATELY DOES NOT DO: uppercase the headings. The bands do,
   because they are short display lines. Episode body headings are full
   sentences, and 687 posts of shouted sentences would be worse than the
   inconsistency it fixes.
   ========================================================================== */

.entry-content,
.megaphone-content-episode {
	/* PX, NOT ch. `ch` is relative to the element's OWN font size, so the same
	   68ch gave paragraphs 683px and the 24px blockquote 1064px, which is the
	   opposite of a consistent measure. A fixed value holds the line length
	   steady whatever the element is set in. */
	--atc-measure: 680px;
}

/* ---------------------------------------------------------------------------
   LINKS. The real defect, not a cosmetic one: body links currently render
   black with no underline, so they are indistinguishable from the text around
   them. Nobody can tell what is clickable. Colour alone would not fix it
   either, since colour is not available to every reader.
   --------------------------------------------------------------------------- */
body:not(.page-template-elementor_header_footer) .entry-content a:not([class]),
body:not(.page-template-elementor_header_footer) .megaphone-content-episode a:not([class]) {
	color: var(--atc-black, #0A0A0A);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: var(--atc-yellow, #FFE600);
	transition: background 140ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
body:not(.page-template-elementor_header_footer) .entry-content a:not([class]):hover,
body:not(.page-template-elementor_header_footer) .entry-content a:not([class]):focus,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode a:not([class]):hover,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode a:not([class]):focus {
	background: var(--atc-yellow, #FFE600);
	text-decoration-color: var(--atc-black, #0A0A0A);
}

/* ---------------------------------------------------------------------------
   HEADINGS. Brand weight and tracking only, no uppercase and no size change.
   --------------------------------------------------------------------------- */
/* NO :not([class]) HERE. It was the first thing I tried and it silently
   matched nothing: this is Gutenberg content, so every element carries a
   class (wp-block-heading, wp-block-paragraph). The Elementor exclusion on
   body is what keeps page-builder headings out, not a class guard. */
body:not(.page-template-elementor_header_footer) .entry-content > h2,
body:not(.page-template-elementor_header_footer) .entry-content > h3,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode h2.wp-block-heading,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode h3.wp-block-heading {
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--atc-black, #0A0A0A);
	text-wrap: balance;
	max-width: var(--atc-measure);
}
body:not(.page-template-elementor_header_footer) .entry-content > h2,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode h2.wp-block-heading {
	margin-top: 1.6em;
}

/* ---------------------------------------------------------------------------
   MEASURE, applied to the TEXT elements and not to their container.
   Capping the container would also cap the Buzzsprout embed, the featured
   image and any full-width block inside the post, which is the usual way this
   change goes wrong. 880px of 16px text is about 110 characters a line, well
   past comfortable; 68ch is the width the rebuilt design uses.
   --------------------------------------------------------------------------- */
body:not(.page-template-elementor_header_footer) .entry-content > p,
body:not(.page-template-elementor_header_footer) .entry-content > ul,
body:not(.page-template-elementor_header_footer) .entry-content > ol,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode > p,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode > ul,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode > ol {
	/* MEASURE AND RHYTHM ONLY, no font-size. The theme's 16px out-specifies
	   anything reasonable here, and winning it would mean !important on every
	   paragraph of 687 pages to gain one pixel. line-height does apply and is
	   what actually makes long copy easier to read. */
	max-width: var(--atc-measure);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   BLOCKQUOTE. The archive uses pull quotes heavily and they currently render
   as plain paragraphs.
   --------------------------------------------------------------------------- */
body:not(.page-template-elementor_header_footer) .entry-content > blockquote,
body:not(.page-template-elementor_header_footer) .megaphone-content-episode > blockquote {
	max-width: var(--atc-measure);
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--atc-yellow, #FFE600);
	line-height: 1.55;
}

@media only screen and (max-width: 767px) {
	body:not(.page-template-elementor_header_footer) .entry-content > blockquote,
	body:not(.page-template-elementor_header_footer) .megaphone-content-episode > blockquote {
		padding-left: 18px;
	}
}

/* ===========================================================================
   BODY FORMATTING TO THE DESIGN.

   Measured off Episode Page.dc.html rather than eyeballed, and checked against
   what the archive actually contains rather than what the mock showed. Across
   56 sampled episodes: paragraphs 100%, headings 98%, separators 98% (259 of
   them), images 98%, quotes 57%, lists 68%. So quotes and separators are real
   furniture, not edge cases, and both were unstyled.

   SELECTORS ARE TWO-CLASS on purpose. The theme sets p font-size at a
   specificity the single-class version loses to, which is why the earlier
   pass gave up on size and kept only the measure. This wins it honestly
   rather than with !important.
   =========================================================================== */

/* PULL QUOTES: a solid yellow block, not the thin left rule I shipped first.
   This is the design's own treatment and the thing that makes a long episode
   write-up scannable. */
body:not(.page-template-elementor_header_footer) .entry-content > blockquote,
body:not(.page-template-elementor_header_footer) .entry-content > blockquote.wp-block-quote {
	max-width: var(--atc-measure);
	margin: 0 0 26px;
	padding: 24px 26px;
	background: var(--atc-yellow, #FFE600);
	border: 0;
	border-radius: 16px;
	font-size: 22px;
	line-height: 1.35;
	font-weight: 800;
	font-style: normal;
	color: var(--atc-black, #0A0A0A);
}
body:not(.page-template-elementor_header_footer) .entry-content > blockquote p {
	margin: 0 0 8px;
	font-size: inherit; line-height: inherit; font-weight: inherit;
	color: var(--atc-black, #0A0A0A) !important;
}
body:not(.page-template-elementor_header_footer) .entry-content > blockquote p:last-child { margin-bottom: 0; }
/* The attribution reads as a credit, not as part of the quote. */
body:not(.page-template-elementor_header_footer) .entry-content > blockquote cite,
body:not(.page-template-elementor_header_footer) .entry-content > blockquote footer {
	display: block; margin-top: 12px;
	font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	font-style: normal;
	color: var(--atc-ink-700, #2E2E2E);
}

/* BODY COPY at the design's 18px/1.65. */
body:not(.page-template-elementor_header_footer) .entry-content > p.wp-block-paragraph,
body:not(.page-template-elementor_header_footer) .entry-content > p {
	font-size: 18px;
	line-height: 1.65;
	margin: 0 0 22px;
}

/* HEADINGS at the design's sizes. */
body:not(.page-template-elementor_header_footer) .entry-content > h2.wp-block-heading,
body:not(.page-template-elementor_header_footer) .entry-content > h2 {
	font-size: 30px; line-height: 1.04; margin-top: 1.5em; margin-bottom: 18px;
}
body:not(.page-template-elementor_header_footer) .entry-content > h3.wp-block-heading,
body:not(.page-template-elementor_header_footer) .entry-content > h3 {
	font-size: 22px; line-height: 1.06; margin-top: 1.4em; margin-bottom: 14px;
}

/* SEPARATORS. 259 of them across 56 episodes, sitting before most headings.
   A default full-width rule between every section reads as clutter, so this is
   a short brand mark that breaks the rhythm without drawing a line across the
   column. */
body:not(.page-template-elementor_header_footer) .entry-content > hr.wp-block-separator {
	max-width: var(--atc-measure);
	height: 0;
	margin: 34px 0;
	border: 0;
	/* ink-200, the token actually documented as "list dividers". I first used
	   --atc-rule-dark, which is ink-700 (#2E2E2E) and nearly black: 259 of
	   those down an episode is the clutter this rule exists to avoid. The
	   fallback I wrote was already the right colour, which hid the mistake
	   anywhere the token failed to load. */
	border-top: 2px solid var(--atc-ink-200, #E6E6E6);
}

/* LISTS: the same measure and rhythm as body copy. */
body:not(.page-template-elementor_header_footer) .entry-content > ul,
body:not(.page-template-elementor_header_footer) .entry-content > ol {
	font-size: 18px; line-height: 1.65; margin: 0 0 22px; padding-left: 22px;
}
body:not(.page-template-elementor_header_footer) .entry-content > ul li,
body:not(.page-template-elementor_header_footer) .entry-content > ol li { margin: 0 0 8px; }

/* IMAGES keep their full width, and captions read as captions. */
body:not(.page-template-elementor_header_footer) .entry-content > figure.wp-block-image { margin: 0 0 26px; }
body:not(.page-template-elementor_header_footer) .entry-content > figure.wp-block-image img { border-radius: 12px; }
body:not(.page-template-elementor_header_footer) .entry-content figcaption {
	margin-top: 10px;
	font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}

@media only screen and (max-width: 767px) {
	body:not(.page-template-elementor_header_footer) .entry-content > p.wp-block-paragraph,
	body:not(.page-template-elementor_header_footer) .entry-content > p { font-size: 17px; }
	body:not(.page-template-elementor_header_footer) .entry-content > h2 { font-size: 25px; }
	body:not(.page-template-elementor_header_footer) .entry-content > h3 { font-size: 20px; }
	body:not(.page-template-elementor_header_footer) .entry-content > blockquote,
	body:not(.page-template-elementor_header_footer) .entry-content > blockquote.wp-block-quote {
		font-size: 19px; padding: 20px 20px;
	}
}
