/*
 * MEC Timing blog posts (single post pages). Scoped to body.single-post.
 * Gives posts the same look as the rest of the site: display-font title, one centred reading
 * column, brand colours for links, lists, dividers, the comment form and the category line.
 */
body.single-post {
	--mec-post-width: 720px;
}

/* ---- One centred reading column for header, content, footer and comments ---- */
body.single-post article > .entry-header > *,
body.single-post article > .entry-footer > *,
body.single-post .entry-comments > *,
body.single-post .entry-content .mec-section > * {
	max-width: var(--mec-post-width);
	margin-inline: auto;
}
body.single-post article > .entry-header {
	padding: 56px 30px 0;
}
body.single-post .entry-content .mec-section {
	padding: 24px 30px 48px !important;
}
body.single-post .entry-content.wp-block-post-content {
	padding-block: 0 !important;
}

/* ---- Title and meta ---- */
body.single-post .entry-header .wp-block-post-title {
	margin: 0 0 16px;
	font-family: var(--mec-font-display);
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--mec-ink);
}
body.single-post .entry-header .post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 8px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mec-border);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--mec-ink-muted);
}
body.single-post .entry-header .post-meta > * {
	margin: 0;
	font-size: inherit;
}
body.single-post .entry-header .post-meta a {
	color: var(--mec-orange-ink);
	text-decoration: none;
}
body.single-post .entry-header .post-meta a:hover {
	text-decoration: underline;
}

/* ---- Body copy ---- */
body.single-post .entry-content p,
body.single-post .entry-content li {
	font-size: 17px;
	line-height: 1.7;
}
body.single-post .entry-content p {
	margin-block: 0 20px;
}
body.single-post .entry-content a {
	color: var(--mec-orange-ink);
}
body.single-post .entry-content a:hover {
	color: var(--mec-orange-ink-hover);
}
body.single-post .entry-content h2,
body.single-post .entry-content h3 {
	margin: 40px 0 12px;
	font-family: var(--mec-font-heading);
	font-weight: 700;
	line-height: 1.25;
	color: var(--mec-ink);
}
body.single-post .entry-content h2 {
	font-size: 28px;
}
body.single-post .entry-content h3 {
	font-size: 21px;
}
/* A paragraph that opens with bold text (FAQ question, run-in heading): bold line first, then the answer. */
body.single-post .entry-content p > strong:first-child {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
	font-family: var(--mec-font-heading);
	font-size: 19px;
	line-height: 1.35;
	color: var(--mec-ink);
}

/* ---- Lists ---- */
body.single-post .entry-content ol,
body.single-post .entry-content ul {
	margin: 0 0 20px;
	padding-left: 26px;
}
body.single-post .entry-content li {
	margin-bottom: 8px;
	padding-left: 4px;
}
body.single-post .entry-content li::marker {
	font-weight: 700;
	color: var(--mec-orange-ink);
}

/* ---- Dividers between items ---- */
body.single-post .entry-content hr.wp-block-separator {
	max-width: var(--mec-post-width);
	width: 100%;
	height: 0;
	margin-block: 32px;
	border: 0;
	border-top: 1px solid var(--mec-border);
	background: none;
	opacity: 1;
}

/* ---- Quotes, code, images ---- */
body.single-post .entry-content blockquote {
	margin: 28px auto;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--mec-orange);
	color: var(--mec-ink);
}
body.single-post .entry-content code,
body.single-post .entry-content pre {
	background: var(--mec-surface-alt);
	border-radius: 6px;
	font-size: 0.92em;
}
body.single-post .entry-content code {
	padding: 2px 6px;
}
body.single-post .entry-content pre {
	padding: 16px;
	overflow-x: auto;
}
body.single-post .entry-content img {
	height: auto;
	max-width: 100%;
	border-radius: 12px;
}

/* ---- Category line ---- */
body.single-post .entry-footer {
	padding-bottom: 8px;
}
body.single-post .entry-footer .taxonomy-category {
	padding-top: 20px;
	border-top: 1px solid var(--mec-border);
	font-size: 14px;
	color: var(--mec-ink-muted);
}
body.single-post .entry-footer .taxonomy-category a {
	display: inline-block;
	padding: 2px 12px;
	border: 1px solid var(--mec-border);
	border-radius: 999px;
	background: var(--mec-surface-raised);
	color: var(--mec-orange-ink);
	text-decoration: none;
}
body.single-post .entry-footer .taxonomy-category a:hover {
	border-color: var(--mec-orange-ink);
}

/* ---- Comments ---- */
body.single-post .entry-comments {
	padding-block: 24px 96px;
}
body.single-post .entry-comments h2.wp-block-heading {
	margin: 0 0 24px;
	font-family: var(--mec-font-display);
	font-size: 28px;
	text-transform: uppercase;
	color: var(--mec-ink);
}
body.single-post .entry-comments .comment-reply-title {
	margin: 0 0 12px;
	font-family: var(--mec-font-heading);
	font-size: 21px;
	font-weight: 700;
	color: var(--mec-ink);
}
body.single-post .entry-comments .comment-notes,
body.single-post .entry-comments .comment-form-cookies-consent {
	font-size: 14px;
	color: var(--mec-ink-muted);
}
body.single-post .entry-comments .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mec-ink);
}
body.single-post .entry-comments .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}
body.single-post .entry-comments .comment-form input[type="text"],
body.single-post .entry-comments .comment-form input[type="email"],
body.single-post .entry-comments .comment-form input[type="url"],
body.single-post .entry-comments .comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--mec-border);
	border-radius: 8px;
	background: var(--mec-surface-raised);
	font: 400 16px/1.5 var(--mec-font-sans);
	color: var(--mec-ink);
}
body.single-post .entry-comments .comment-form input:focus-visible,
body.single-post .entry-comments .comment-form textarea:focus-visible {
	outline: 3px solid var(--mec-orange);
	outline-offset: 1px;
}