/* ==========================================================================
   Charlton Live - Editorial
   The 1,241 existing posts, plus archives, search and 404. Interim pass:
   enough structure to read and review while the designed templates are
   built. Full treatment is a later phase.
   ========================================================================== */

/* ---------- Page shell ----------
   The legacy templates have no container of their own, so constrain here
   rather than editing five templates that are due to be rewritten. */
.cl-main {
	max-width: var(--cl-content);
	margin-inline: auto;
	padding: var(--cl-section-y) var(--cl-gutter);
}

/* Designed templates emit their own full-bleed sections, each carrying its
   own inner container. Without this they inherit the editorial wrapper and
   the coloured bands stop short of the viewport edges. */
.cl-main:has(> section[class^="cl-"]) {
	max-width: none;
	margin-inline: 0;
	padding: 0;
}

/* ---------- Entries ---------- */
.hentry {
	padding-bottom: var(--cl-space-xl);
	margin-bottom: var(--cl-space-xl);
	border-bottom: var(--cl-border);
}
.hentry:last-child { border-bottom: 0; }

.entry-title {
	font-size: var(--cl-h2);
	margin-bottom: var(--cl-space-2xs);
}
.entry-title a {
	color: var(--cl-ink);
	text-decoration: none;
}
.entry-title a:hover { color: var(--cl-red-text); }

/* Single posts get the hero size. */
.single .entry-title { font-size: var(--cl-h1-sub); }

/* ---------- Meta ---------- */
.entry-meta,
.entry-footer {
	font-family: var(--cl-font-body);
	font-size: var(--cl-meta);
	font-weight: 500;
	color: var(--cl-mut);
}
.entry-meta a,
.entry-footer a {
	color: var(--cl-mut);
	text-decoration: none;
}
.entry-meta a:hover,
.entry-footer a:hover { color: var(--cl-red-text); }

.entry-footer { margin-top: var(--cl-space-md); }

/* ---------- Thumbnails ---------- */
.post-thumbnail {
	margin-bottom: var(--cl-space-md);
}
.post-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--cl-radius);
}

/* ---------- Body copy ---------- */
.entry-content,
.entry-summary {
	margin-top: var(--cl-space-sm);
	font-size: var(--cl-text);
	line-height: var(--cl-lh-body);
	color: var(--cl-body);
}

.entry-content > * + * { margin-top: var(--cl-space-md); }

.entry-content a {
	color: var(--cl-red-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: var(--cl-space-xl); }

.entry-content img { border-radius: var(--cl-radius-sm); }

.entry-content blockquote {
	padding-left: 18px;
	border-left: 3px solid var(--cl-red);
	font-size: var(--cl-text-lg);
}

.entry-content ul,
.entry-content ol { padding-left: 1.25em; }

.entry-content iframe { max-width: 100%; }

/* ---------- Read more ----------
   content.php outputs .read-more-link, so both are matched. */
.more-link,
.read-more-link {
	display: inline-block;
	margin-top: var(--cl-space-xs);
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-meta);
	letter-spacing: var(--cl-track-btn);
	color: var(--cl-red-text);
	text-decoration: none;
	text-transform: uppercase;
}
.more-link:hover,
.read-more-link:hover { text-decoration: underline; }

/* ---------- Follow row ----------
   After a post, where a reader who just finished an article is most likely
   to want more. */
.cl-follow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: var(--cl-space-xl);
	padding: var(--cl-space-md);
	background: var(--cl-off);
	border: var(--cl-border);
	border-radius: var(--cl-radius);
}

.cl-follow__label {
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
	color: var(--cl-ink);
}

.cl-follow__list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-follow__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 9px;
	background: var(--cl-ink);
	color: var(--cl-white);
}
.cl-follow__link:hover {
	background: var(--cl-red);
	color: var(--cl-white);
}

/* ---------- Archive and page headers ---------- */
.page-header {
	padding-bottom: var(--cl-space-sm);
	margin-bottom: var(--cl-space-lg);
	border-bottom: var(--cl-rule);
}
.page-title { font-size: var(--cl-h2); }

/* ---------- Pagination ---------- */
.navigation.pagination,
.post-navigation {
	margin-top: var(--cl-space-xl);
	padding-top: var(--cl-space-md);
	border-top: var(--cl-border);
	font-family: var(--cl-font-body);
	font-weight: 600;
	font-size: var(--cl-meta);
}
.page-numbers {
	display: inline-block;
	padding: 6px 11px;
	border-radius: var(--cl-radius-sm);
	color: var(--cl-ink);
	text-decoration: none;
}
.page-numbers:hover { background: var(--cl-off); }
.page-numbers.current {
	background: var(--cl-ink);
	color: var(--cl-white);
}

/* ---------- Widgets and sidebar ---------- */
.widget {
	padding: var(--cl-space-md);
	margin-bottom: var(--cl-space-md);
	background: var(--cl-off);
	border: var(--cl-border);
	border-radius: var(--cl-radius);
}
.widget-title {
	margin-bottom: var(--cl-space-xs);
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
}
.widget ul { list-style: none; padding: 0; }
.widget li + li { margin-top: 8px; }

/* ---------- Comments ---------- */
.comments-area {
	margin-top: var(--cl-space-xl);
	padding-top: var(--cl-space-md);
	border-top: var(--cl-rule);
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: var(--cl-border);
	border-radius: var(--cl-radius-sm);
	background: var(--cl-white);
}

input[type="submit"],
button[type="submit"] {
	padding: 12px 20px;
	border: 0;
	border-radius: var(--cl-radius-sm);
	background: var(--cl-red);
	color: var(--cl-white);
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-btn);
	letter-spacing: var(--cl-track-btn);
	text-transform: uppercase;
	cursor: pointer;
}