/*
 * "Update" notes on older blog posts (first called "Looking back", hence the cm-lookback class names) (pattern registered in functions.php).
 * Loaded on single posts and inside the block editor, so the note looks the same in both.
 */

/* the note: pale blue background with the site's blue bar down the left */
.cm-lookback {
	background: #f3f8fa;
	border-left: 5px solid #13a7c7;
	padding: 1.25rem 1.25rem 0.25rem;
	margin: 0 0 1.5rem;
}
@media only screen and (min-width: 46.94em) {
	.cm-lookback {
		padding: 1.5rem 1.75rem 0.5rem;
	}
}

/* the date label, e.g. UPDATE · 6 NOVEMBER 2026
   (extra classes so it beats the theme's large first-paragraph intro style) */
.cm-lookback p.cm-lookback-date,
.single .content-detail .cm-lookback p.cm-lookback-date {
	font-family: "loveloblack", sans-serif;
	font-size: 0.875rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #13a7c7;
	margin: 0 0 0.5rem;
}

/* who wrote the note: the same "By Alan Mitchell" byline as the post, with its thin line underneath
   (added by the theme on the live page, not in the editor; see cm_looking_back_byline() in functions.php).
   The date label then sits below the line, above the note's heading. */
.single .content-detail .postbody .cm-lookback .post-byline.cm-lookback-byline {
	margin: 0 0 0.5rem;
}
/* the date sits between two thin lines: the byline's line above, and its own line below */
.single .content-detail .cm-lookback .cm-lookback-byline + p.cm-lookback-date {
	font-size: 1rem;
	border-bottom: 1px solid #d3d3d3;
	padding-bottom: 0.5rem;
	margin: 0 0 1.5rem;
}

/* optional heading inside the note (any H3 in a note, so it doesn't need the cm-lookback-title class;
   the longer selector beats the theme's post heading spacing) */
.cm-lookback .cm-lookback-title,
.cm-lookback h3,
.single .content-detail .postbody .cm-lookback h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.75rem;
}

.cm-lookback p {
	margin-bottom: 1rem;
}

/* "· Updated 6 November 2026" beside the date under the post title:
   if the line is too wide for a phone, it moves down as one piece */
.hero .date-updated {
	white-space: nowrap;
}

/* "Original post, published …" divider, added automatically after the last note */
.single .content-detail p.cm-original-label {
	font-family: "loveloblack", sans-serif;
	font-size: 0.875rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #777;
	border-top: 1px solid #ddd;
	padding-top: 1.25rem;
	margin: 2rem 0 1.5rem;
}

/* on posts with notes, the "By Alan Mitchell" byline sits between the notes and the original post,
   on every screen size (moved there by cm_post_byline() in functions.php).
   Its thin line goes underneath, the same as on posts without notes. */
.single .content-detail .postbody .post-byline img {
	margin: 0; /* undo the post's centred-image rule, so the photo sits on the left */
}
.postbody .post-byline {
	margin: 3rem 0 1.5rem;
}
/* if the "Original post" label is switched back on, the byline's line already divides them */
.single .content-detail .post-byline + p.cm-original-label {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}