/*
 * Simple Theme v1.38.19 — Blog design pass.
 *
 * Scope: (1) legacy post-body styling inside .simple-article-body,
 * (2) article meta / tags, (3) the blog-index card grid (home.html).
 * Archive/search card paint stays in chrome.css; this file only refines.
 *
 * Rules: tokens only (--wp--custom--simple-chrome--*, --wp--preset--*);
 * no hardcoded paint, so a dark preset that redefines the tokens flips
 * this file with it (no prefers-color-scheme rules here on purpose).
 * Squared UI: no border-radius anywhere.
 * !important appears only where a rule must beat INLINE styles baked into
 * saved legacy markup (featured-image figure/img style attributes).
 */

/* --- 1. Reading measure ---------------------------------------------
 * Masthead, body and footer share one measure so their left edges align.
 * 'ch' resolves against each box's own font-size, hence the shared 1.0625rem
 * on all three boxes (children set their own sizes in rem/px). */
.simple-article-hero-masthead,
.simple-article-footer {
	--simple-blog-measure: 70ch;
	font-size: 1.0625rem;
	max-inline-size: var(--simple-blog-measure);
	margin-inline: auto;
	/* Same gutter the prose body gets from .is-style-prose-group, so the
	 * title/meta/tags don't sit flush on the viewport edge on phones. */
	padding-inline: clamp(16px, 4vw, 32px);
	box-sizing: content-box;
}

.simple-article-hero-masthead > *,
.simple-article-footer > * {
	max-inline-size: 100%;
}

.simple-article-body-wrap {
	--simple-blog-measure: 70ch;
	/* Set here (not on .entry-content) so 70ch resolves to the same px for
	 * the body and the featured image above it. */
	font-size: 1.0625rem;
}

.simple-article-body-wrap > .entry-content,
.simple-article-body-wrap > .simple-article-featured-wrap {
	max-inline-size: var(--simple-blog-measure);
	margin-inline: auto;
}

.simple-article-body-wrap .entry-content {
	line-height: 1.7;
	overflow-wrap: break-word;
}

.simple-article-body-wrap .entry-content > :first-child {
	margin-block-start: 0;
}

/* --- Featured image: contained in the measure, never floated --------
 * Beats the legacy float/42% rule in chrome.css and the inline
 * aspect-ratio / height:100% / object-fit:cover that older saved
 * templates carry (those crop panoramic uploads badly). */
.simple-article-body-wrap .simple-article-featured-wrap,
.simple-article-body-wrap .wp-block-post-featured-image.simple-article-featured-wrap {
	float: none;
	width: 100%;
	margin: 0 auto var(--wp--preset--spacing--50, 1.5rem);
	aspect-ratio: auto !important;
}

.simple-article-body-wrap .simple-article-featured-wrap img {
	width: 100%;
	height: auto !important;
	max-height: 28rem;
	aspect-ratio: auto;
	object-fit: cover;
}

/* --- 2. Heading scale (h2..h6; one scale for block + legacy HTML) --- */
.simple-article-body-wrap .entry-content h1 {
	/* A non-duplicate legacy <h1> must not outrank the post title. */
	font-size: 1.875rem;
	line-height: 1.2;
}

.simple-article-body-wrap .entry-content h2 { font-size: 1.625rem; line-height: 1.22; }
.simple-article-body-wrap .entry-content h3 { font-size: 1.3125rem; line-height: 1.28; }
.simple-article-body-wrap .entry-content h4 { font-size: 1.125rem; line-height: 1.35; }
.simple-article-body-wrap .entry-content h5,
.simple-article-body-wrap .entry-content h6 {
	font-size: 1rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--simple-chrome--eyebrow-tracking, 0.12em);
}

.simple-article-body-wrap .entry-content h1,
.simple-article-body-wrap .entry-content h2,
.simple-article-body-wrap .entry-content h3,
.simple-article-body-wrap .entry-content h4,
.simple-article-body-wrap .entry-content h5,
.simple-article-body-wrap .entry-content h6 {
	font-family: var(--wp--custom--simple-chrome--font-family, system-ui, -apple-system, sans-serif);
	font-weight: var(--wp--custom--simple-chrome--heading-weight, 700);
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
	margin-block: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--30, 0.75rem);
	text-wrap: balance;
	clear: both;
}

.simple-article-body-wrap .entry-content > h1:first-child,
.simple-article-body-wrap .entry-content > h2:first-child,
.simple-article-body-wrap .entry-content > h3:first-child {
	margin-block-start: 0;
}

/* --- Paragraphs, lists ---------------------------------------------- */
.simple-article-body-wrap .entry-content p {
	margin-block: 0 var(--wp--preset--spacing--40, 1.25rem);
}

/* --- Media: contained, no unbounded side float ----------------------- */
.simple-article-body-wrap .entry-content img,
.simple-article-body-wrap .entry-content video,
.simple-article-body-wrap .entry-content iframe,
.simple-article-body-wrap .entry-content embed {
	max-inline-size: 100%;
	block-size: auto;
}

.simple-article-body-wrap .entry-content iframe {
	block-size: revert-layer;
	aspect-ratio: 16 / 9;
	inline-size: 100%;
}

.simple-article-body-wrap .entry-content .alignleft,
.simple-article-body-wrap .entry-content img[align="left"] {
	float: left;
	max-inline-size: 45%;
	margin: 0.25rem var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--40, 1rem) 0;
}

.simple-article-body-wrap .entry-content .alignright,
.simple-article-body-wrap .entry-content img[align="right"] {
	float: right;
	max-inline-size: 45%;
	margin: 0.25rem 0 var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--50, 1.5rem);
}

.simple-article-body-wrap .entry-content .aligncenter {
	display: block;
	margin-inline: auto;
}

/* Legacy [caption] wrapper carries an inline pixel width. */
.simple-article-body-wrap .entry-content .wp-caption {
	max-inline-size: 100%;
	inline-size: auto !important;
}

.simple-article-body-wrap .entry-content figure {
	margin-inline: 0;
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
}

.simple-article-body-wrap .entry-content figcaption,
.simple-article-body-wrap .entry-content .wp-caption-text {
	margin-block-start: var(--wp--preset--spacing--20, 0.5rem);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	text-align: start;
}

/* --- Blockquote ------------------------------------------------------ */
.simple-article-body-wrap .entry-content blockquote {
	margin-inline: 0;
	padding-block: var(--wp--preset--spacing--20, 0.25rem);
	padding-inline: var(--wp--preset--spacing--40, 1.25rem);
	border-inline-start: 3px solid var(--wp--custom--simple-chrome--accent, #666666);
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
	font-size: 1.1875rem;
	font-style: italic;
}

.simple-article-body-wrap .entry-content blockquote > :last-child {
	margin-block-end: 0;
}

/* --- Lists ----------------------------------------------------------- */
.simple-article-body-wrap .entry-content ul,
.simple-article-body-wrap .entry-content ol {
	margin-block: 0 var(--wp--preset--spacing--40, 1.25rem);
}

/* --- Code ------------------------------------------------------------ */
.simple-article-body-wrap .entry-content pre {
	max-inline-size: 100%;
	font-size: 0.875rem;
	line-height: 1.55;
	tab-size: 2;
}

.simple-article-body-wrap .entry-content kbd {
	padding: 0.05em 0.4em;
	border: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	border-block-end-width: 2px;
	border-radius: 0;
	background: var(--wp--custom--simple-chrome--placeholder-fill, #EFEFEF);
	font-size: 0.875em;
}

/* --- Tables ---------------------------------------------------------- */
.simple-article-body-wrap .entry-content table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.simple-article-body-wrap .entry-content th,
.simple-article-body-wrap .entry-content td {
	padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 0.75rem);
	border: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	text-align: start;
	vertical-align: top;
}

.simple-article-body-wrap .entry-content thead th,
.simple-article-body-wrap .entry-content th {
	background: var(--wp--custom--simple-chrome--accent-soft, rgba(0, 0, 0, 0.06));
	font-weight: 600;
}

/* --- 3. Article meta, categories, tags -------------------------------
 * The masthead is a flex column and the constrained layout gives each
 * child auto side margins, so eyebrow/meta shrink-wrap and float to the
 * centre while the title is left-aligned. Give all three the full column. */
.simple-article-hero-masthead .simple-article-eyebrow,
.simple-article-hero-masthead .simple-article-title,
.simple-article-hero-masthead .simple-article-meta {
	inline-size: 100%;
}

.simple-article-hero-masthead .simple-article-meta > p,
.simple-article-hero-masthead .simple-article-meta .simple-article-date {
	margin: 0;
}

.simple-article-hero-masthead .simple-article-meta > p::before {
	content: "\00b7";
	margin-inline-end: var(--wp--preset--spacing--40, 1.25rem);
	color: var(--wp--custom--simple-chrome--muted, #666666);
}

.simple-article-hero-masthead .simple-article-eyebrow a:hover {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
}

.simple-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	max-inline-size: var(--simple-blog-measure, 70ch);
	margin-inline: auto;
}

.simple-article-tags a {
	display: inline-block;
	padding: 0.2em 0.7em;
	border: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font-size: 0.8125rem;
	text-decoration: none;
}

.simple-article-tags a:hover,
.simple-article-tags a:focus-visible {
	border-color: var(--wp--custom--simple-chrome--text, #1A1A1A);
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
}

.simple-article-tags .wp-block-post-terms__separator {
	display: none;
}

/* --- 4. Blog index: featured first card, hover/focus, equal heights --- */
.simple-archive-grid--featured .wp-block-post-template > li:first-child {
	grid-column: 1 / -1;
}

@media (min-width: 769px) {
	.simple-archive-grid--featured .wp-block-post-template > li:first-child .simple-archive-card {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		column-gap: var(--wp--preset--spacing--60, 2rem);
		align-content: center;
	}
	.simple-archive-grid--featured .wp-block-post-template > li:first-child .simple-archive-card__image {
		grid-row: 1 / span 5;
		margin: 0;
	}
	.simple-archive-grid--featured .wp-block-post-template > li:first-child .simple-archive-card__title {
		font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	}
	.simple-archive-grid--featured .wp-block-post-template > li:first-child .simple-archive-card__excerpt {
		font-size: 1.0625rem;
	}
}

.simple-archive-card__title a:focus-visible,
.simple-archive-card__image a:focus-visible {
	outline: 2px solid var(--wp--custom--simple-chrome--text, #1A1A1A);
	outline-offset: 2px;
}

.simple-archive-card__title {
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* --- 5. Narrow screens ------------------------------------------------ */
@media (max-width: 600px) {
	.simple-article-body-wrap .entry-content .alignleft,
	.simple-article-body-wrap .entry-content .alignright,
	.simple-article-body-wrap .entry-content img[align] {
		float: none;
		display: block;
		max-inline-size: 100%;
		margin: 0 auto var(--wp--preset--spacing--40, 1rem);
	}
	.simple-article-body-wrap .entry-content table {
		display: block;
		overflow-x: auto;
	}
	.simple-article-body-wrap .entry-content blockquote {
		font-size: 1.0625rem;
	}
	.simple-article-body-wrap .simple-article-featured-wrap img {
		max-height: 16rem;
	}
	.simple-article-hero-masthead .simple-article-meta > p::before {
		display: none;
	}
}

/* --- 6. Blog index (home.html) ----------------------------------------
 * archive.html's regions use contentSize 65%, which is ~250px on a phone.
 * home.html sets contentSize 1200px instead and takes its side gutter here
 * (same clamp the prose body uses). */
.simple-main-blog .simple-archive-header,
.simple-main-blog .simple-archive-grid,
.simple-main-blog .simple-archive-pagination {
	padding-inline: clamp(16px, 4vw, 32px);
}

.simple-main-blog .simple-archive-header {
	margin-block-start: var(--wp--preset--spacing--70, 2.5rem);
}

.simple-archive-card__eyebrow a {
	color: var(--wp--custom--simple-chrome--accent, #666666);
	text-decoration: none;
}

.simple-archive-card__eyebrow a:hover {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
}

.simple-archive-card__image a,
.simple-archive-card__image img {
	display: block;
}

.simple-archive-card__meta .wp-block-post-date,
.simple-archive-card__meta p {
	margin: 0;
}

.simple-archive-card__meta p::before {
	content: "\00b7";
	margin-inline-end: var(--wp--preset--spacing--30, 0.75rem);
}

@media (max-width: 768px) {
	.simple-main-blog .simple-archive-header {
		margin-block-start: var(--wp--preset--spacing--60, 1.5rem);
		margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
	}
	.simple-main-blog .simple-archive-pagination {
		margin-block: var(--wp--preset--spacing--70, 2.5rem);
	}
}