/*
 * CBC News Post Template — v1.0.0
 * Colours follow the CBC accessibility rules: #357a47 for green text on
 * light backgrounds (5.22:1), never the brand #7cc68d (2.04:1 on white).
 */

.cbc-news {
	--cbc-ink: #1e2a26;      /* 14.9:1 on white */
	--cbc-body: #333333;
	--cbc-muted: #55605b;    /* 6.5:1 */
	--cbc-accent: #357a47;   /* 5.22:1 */
	--cbc-accent-hi: #2b6b3c;
	--cbc-rule: #d8ddd9;

	max-width: 820px;
	margin: 0 auto;
	padding: 56px 24px 72px;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--cbc-body);
}

/* Divi puts a vertical rule beside the content area when it expects a
   sidebar; there is none here. */
.cbc-news-post #main-content .container::before { display: none; }
.cbc-news-post #sidebar { display: none !important; }

/* ---------- header ---------- */

.cbc-news__header {
	margin: 0 0 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--cbc-rule);
}

.cbc-news__date {
	display: block;
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--cbc-muted);
}

.cbc-news .cbc-news__title {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 42px;
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--cbc-ink);
}

/* ---------- body with wrapped image ---------- */

.cbc-news__body::after { content: ""; display: table; clear: both; }

.cbc-news__figure {
	float: right;
	width: 46%;
	max-width: 460px;
	margin: 6px 0 20px 32px;
}

.cbc-news__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.cbc-news__caption {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cbc-muted);
}

.cbc-news__content {
	font-size: 18px;
	line-height: 1.7;
}

/* Divi's #left-area and .entry-content rules are more specific than a bare
   class, so the paragraph rules are anchored on .cbc-news. */
.cbc-news .cbc-news__content p {
	margin: 0 0 1.2em;
	padding: 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--cbc-body);
}

.cbc-news .cbc-news__content p:last-child { margin-bottom: 0; }

.cbc-news .cbc-news__content h2,
.cbc-news .cbc-news__content h3 {
	margin: 1.4em 0 0.5em;
	padding: 0;
	line-height: 1.25;
	color: var(--cbc-ink);
}
.cbc-news .cbc-news__content h2 { font-size: 27px; }
.cbc-news .cbc-news__content h3 { font-size: 22px; }

.cbc-news .cbc-news__content a {
	color: var(--cbc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cbc-news .cbc-news__content a:hover,
.cbc-news .cbc-news__content a:focus { color: var(--cbc-accent-hi); }

.cbc-news .cbc-news__content blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--cbc-accent);
	font-size: 20px;
	font-style: italic;
	color: var(--cbc-ink);
}

/* Images placed inside the copy with the editor's left/right alignment
   wrap the same way. */
.cbc-news .cbc-news__content .alignright { float: right; margin: 6px 0 16px 28px; max-width: 46%; height: auto; }
.cbc-news .cbc-news__content .alignleft  { float: left;  margin: 6px 28px 16px 0; max-width: 46%; height: auto; }
.cbc-news .cbc-news__content .aligncenter { display: block; margin: 1.4em auto; height: auto; }
.cbc-news .cbc-news__content img { max-width: 100%; height: auto; }

/* ---------- footer ---------- */

.cbc-news__footer {
	clear: both;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--cbc-rule);
}

.cbc-news .cbc-news__back {
	display: inline-block;
	padding: 10px 0;          /* 44px touch target with line-height */
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--cbc-accent);
	text-decoration: none;
}
.cbc-news .cbc-news__back:hover,
.cbc-news .cbc-news__back:focus { color: var(--cbc-accent-hi); text-decoration: underline; }

.cbc-news a:focus-visible {
	outline: 3px solid var(--cbc-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- tablet ---------- */

@media (max-width: 980px) {
	.cbc-news { padding: 44px 24px 60px; }
	.cbc-news .cbc-news__title { font-size: 36px; }
	.cbc-news__figure { width: 48%; margin-left: 24px; }
}

/* ---------- phone: image full width above the copy ---------- */

@media (max-width: 700px) {
	.cbc-news { padding: 32px 20px 48px; }
	.cbc-news .cbc-news__title { font-size: 30px; line-height: 1.15; }
	.cbc-news__header { margin-bottom: 24px; padding-bottom: 20px; }
	.cbc-news__figure {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 24px;
	}
	.cbc-news .cbc-news__content .alignright,
	.cbc-news .cbc-news__content .alignleft {
		float: none;
		max-width: 100%;
		margin: 1.2em 0;
	}
	/* Body copy does not shrink on phones (see CBC Site Styles §2). */
}

@media print {
	.cbc-news__footer { display: none; }
	.cbc-news__figure { width: 40%; }
}