/**
 * Styles for the blog
 *
 * Section tones follow the 70/20/10 rule: everything is the page's dark base
 * except Recent Articles, which is the single light band (.theme-inverted in
 * the markup), and Most Popular, which is the one step up from the base. When
 * the newsletter section goes live it should stay on the base tone so there's
 * still only one lifted band.
 *
 * The article body typography lives in prose.css, which the video, course,
 * and book pages load too.
 *
 * @copyright   2026, ON1
 */

/* !- Hero
 *
 * base.css sets .eyebrow to blue-500, which reaches only 4.3:1 on the dark
 * hero and 3.6:1 on the light one. Same step along the ramp everything else
 * here takes. The link inside it is underlined rather than recoloured, so it
 * still reads as a link once the two share a colour.
 */
#blog-hero .eyebrow {
	color: var(--blue-400);
}

[data-theme="light"] #blog-hero .eyebrow {
	color: var(--blue-700);
}

#blog-hero .eyebrow a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#blog-hero h1 {
	margin-bottom: 1rem;
}

#blog-hero .blog-hero-intro {
	color: var(--text-200);
	font-size: var(--text-lg);
	margin-bottom: 2.5rem;
}

/*
 * The filter bar is a Bootstrap row - the search field's width comes from its
 * column rather than a max-width, and the pills take whatever is left.
 */
#blog-hero .blog-search {
	position: relative;
}

#blog-hero .blog-search-icon {
	color: var(--text-500);
	left: 0.875rem;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#blog-hero .blog-search input {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-sm);
	padding: 0.75rem 1rem 0.75rem 2.5rem;
	width: 100%;
}

#blog-hero .blog-search input::placeholder {
	color: var(--text-500);
}

#blog-hero .blog-search input:focus {
	border-color: var(--blue-500);
	outline: none;
}

/*
 * On the light theme the field is a 1.07:1 tint on the page and --bg-700 puts
 * its border at 1.11:1, so the whole control disappears. One step down the ramp
 * is enough to draw the edge without turning into the hard outline the style
 * guide rules out on form fields.
 */
[data-theme="light"] #blog-hero .blog-search input {
	border-color: var(--bg-500);
}

#blog-hero .blog-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

#blog-hero .blog-pill {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: 50rem;
	color: var(--text-200);
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

#blog-hero .blog-pill:hover {
	border-color: var(--blue-500);
	color: var(--text-50);
}

#blog-hero .blog-pill.active {
	background: var(--blue-500);
	border-color: var(--blue-500);
	color: var(--white);
}

/* !- Featured article */
#featured-article {
	padding-bottom: 5rem;
}

#featured-article .featured-label {
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

#featured-article .featured-card {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	overflow: hidden;
}

#featured-article .featured-thumb {
	display: block;
	height: 100%;
	min-height: 16rem;
}

#featured-article .featured-copy {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding: 2.5rem;
}

@media (max-width: 575.98px) {
	#featured-article .featured-copy {
		padding: 1.75rem;
	}
}

#featured-article .featured-copy h2 {
	font-size: var(--text-2xl);
	margin-bottom: 1rem;
}

#featured-article .featured-copy h2 a {
	color: inherit;
	text-decoration: none;
}

#featured-article .featured-copy h2 a:hover {
	color: var(--link);
}

#featured-article .featured-excerpt {
	margin-bottom: 1.5rem;
}

#featured-article .read-more {
	color: var(--blue-400);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}

#featured-article .read-more:hover {
	text-decoration: underline;
}

/* !- Section headings */
.section-heading {
	margin-bottom: 2.25rem;
}

/* !- Post category label */
.post-category {
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 0.625rem;
	text-transform: uppercase;
}

.post-category a {
	color: var(--blue-400);
	text-decoration: none;
}

.post-category a:hover {
	text-decoration: underline;
}

/* !- Post meta */
.post-meta {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-bottom: 0;
}

.post-meta .list-inline-item:not(:last-child)::after {
	content: '\2022';
	margin-left: 0.5rem;
}

/* !- Thumbnails */
.post-thumb,
.featured-thumb {
	background: var(--bg-800);
	overflow: hidden;
}

.post-thumb img,
.featured-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.post-thumb-placeholder {
	align-items: center;
	background: var(--bg-800);
	color: var(--text-500);
	display: flex;
	font-size: var(--text-3xl);
	height: 100%;
	justify-content: center;
	width: 100%;
}

/* !- Post cards
 *
 * Shared by Recent Articles on the index and You Might Also Like on a post.
 * The two sit on opposite tones, so everything here is token-driven and the
 * light band's overrides live with the rest of them further down.
 */
.post-card {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.post-card .post-thumb {
	aspect-ratio: 16 / 9;
	display: block;
}

.post-card .post-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.375rem 1.5rem 1.625rem;
}

.post-card .post-title {
	font-size: var(--text-base);
	margin-bottom: 0.625rem;
}

.post-card .post-title a {
	color: inherit;
	text-decoration: none;
}

.post-card .post-title a:hover {
	color: var(--link);
}

.post-card .post-excerpt {
	font-size: var(--text-xs);
	margin-bottom: 1rem;
}

.post-card .post-meta {
	margin-top: auto;
}

/* !- Recent articles */
#recent-articles .post-card .post-title a:hover {
	color: var(--blue-700);
}

#recent-articles .post-card .post-meta {
	color: var(--text-300);
}

/* !- Pagination */
.blog-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}

.blog-pagination .page-numbers {
	align-items: center;
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 600;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

.blog-pagination a.page-numbers:hover {
	border-color: var(--blue-500);
	color: var(--text-50);
}

.blog-pagination .page-numbers.current {
	background: var(--blue-500);
	border-color: var(--blue-500);
	color: var(--white);
}

.blog-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
}

/* !- Browse by topic */
#blog-topics .topic-card {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	height: 100%;
	padding: 1.75rem 1.5rem;
	text-decoration: none;
}

#blog-topics .topic-card:hover {
	border-color: var(--bg-600);
}

#blog-topics .topic-icon {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	font-size: var(--text-lg);
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

#blog-topics .topic-name {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
}

#blog-topics .topic-count {
	color: var(--text-400);
	font-size: var(--text-mini);
}

#blog-topics .accent-blue .topic-icon {
	background: var(--blue-transparent);
	color: var(--blue-500);
}

#blog-topics .accent-green .topic-icon {
	background: var(--green-transparent);
	color: var(--green-500);
}

#blog-topics .accent-orange .topic-icon {
	background: var(--orange-transparent);
	color: var(--orange-500);
}

#blog-topics .accent-purple .topic-icon {
	background: color-mix(in srgb, var(--purple-500) 16%, transparent);
	color: var(--purple-500);
}

#blog-topics .accent-teal .topic-icon {
	background: color-mix(in srgb, var(--teal-500) 16%, transparent);
	color: var(--teal-500);
}

#blog-topics .accent-magenta .topic-icon {
	background: color-mix(in srgb, var(--magenta-500) 16%, transparent);
	color: var(--magenta-500);
}

[data-theme="light"] #blog-topics .accent-blue .topic-icon {
	color: var(--blue-600);
}

[data-theme="light"] #blog-topics .accent-green .topic-icon {
	color: var(--green-600);
}

[data-theme="light"] #blog-topics .accent-orange .topic-icon {
	color: var(--orange-600);
}

[data-theme="light"] #blog-topics .accent-purple .topic-icon {
	color: var(--purple-600);
}

[data-theme="light"] #blog-topics .accent-teal .topic-icon {
	color: var(--teal-600);
}

[data-theme="light"] #blog-topics .accent-magenta .topic-icon {
	color: var(--magenta-600);
}

/* !- Newsletter (markup is commented out in home.php)
 *
 * When this goes live it becomes the page's lifted band, per the mockup - give
 * it background: var(--bg-850) and drop #popular-articles back to the base
 * tone, so there's still only one step up from dark on the page.
 */
#blog-newsletter .newsletter-form {
	display: flex;
	gap: 0.625rem;
	margin-bottom: 0.75rem;
}

#blog-newsletter .newsletter-form input {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-100);
	flex: 1;
	font-size: var(--text-sm);
	padding: 0.875rem 1.125rem;
}

#blog-newsletter .newsletter-form input::placeholder {
	color: var(--text-500);
}

#blog-newsletter .newsletter-form input:focus {
	border-color: var(--blue-500);
	outline: none;
}

#blog-newsletter .newsletter-note {
	color: var(--text-400);
	font-size: var(--text-mini);
}

/* !- Accent steps on light surfaces
 *
 * Small accent text runs one step off --link-alt's blue-500 in both
 * directions. On the raised dark surfaces here blue-500 only reaches 4.0:1, so
 * those use blue-400; on a light background it reaches 3.5:1, so those use
 * blue-700. The light background turns up in two places - everywhere on the
 * light theme, and inside Recent Articles on the dark theme, since that band is
 * always the inverse of the page tone. Stepping along the ramp rather than
 * inventing a colour is what the accent table in the style guide calls for.
 */
#recent-articles .post-category a,
[data-theme="light"] .post-category a,
[data-theme="light"] #featured-article .read-more,
[data-theme="light"] #popular-articles .popular-category {
	color: var(--blue-700);
}

[data-theme="light"] #recent-articles .post-category a,
[data-theme="light"] #recent-articles .post-card .post-title a:hover {
	color: var(--blue-300);
}

[data-theme="light"] #recent-articles .post-card .post-meta {
	color: var(--text-400);
}

/* Solid accent fills take the deeper step so the white text on them clears AA */
[data-theme="light"] #blog-hero .blog-pill.active,
[data-theme="light"] .blog-pagination .page-numbers.current {
	background: var(--blue-600);
	border-color: var(--blue-600);
}

/*
 * --text-400 is the shared subtle grey. It reads fine against the dark theme's
 * surfaces but not against the light theme's own, so captions there move one
 * step up to the light theme's paragraph colour.
 */
[data-theme="light"] .post-meta,
[data-theme="light"] #blog-topics .topic-count,
[data-theme="light"] #featured-article .featured-label,
[data-theme="light"] #popular-articles .popular-meta {
	color: var(--text-300);
}

/* Large enough to hold at the large-text threshold, so it only needs one step */
[data-theme="light"] #popular-articles .popular-number,
[data-theme="light"] #blog-hero .blog-search input::placeholder {
	color: var(--text-400);
}

/* !- Most popular */
#popular-articles {
	background: var(--bg-850);
}

#popular-articles .popular-list {
	margin-bottom: 0;
}

#popular-articles .popular-item {
	align-items: center;
	border-bottom: 1px solid var(--bg-700);
	display: flex;
	gap: 1.5rem;
	padding: 1.375rem 0;
	text-decoration: none;
}

#popular-articles li:first-child .popular-item {
	border-top: 1px solid var(--bg-700);
}

@media (max-width: 575.98px) {
	#popular-articles .popular-item {
		gap: 1rem;
	}
}

#popular-articles .popular-number {
	color: var(--text-500);
	flex-shrink: 0;
	font-size: var(--text-2xl);
	font-weight: 800;
	line-height: 1;
	min-width: 2.25rem;
}

#popular-articles .popular-thumb {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: block;
	flex-shrink: 0;
	height: 4rem;
	overflow: hidden;
	width: 5.5rem;
}

@media (max-width: 575.98px) {
	#popular-articles .popular-thumb {
		display: none;
	}
}

#popular-articles .popular-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

#popular-articles .popular-info {
	display: block;
}

#popular-articles .popular-category {
	color: var(--blue-400);
	display: block;
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

#popular-articles .popular-title {
	color: var(--text-50);
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.35;
	margin: 0.25rem 0;
}

#popular-articles .popular-item:hover .popular-title {
	color: var(--link);
}

#popular-articles .popular-meta {
	color: var(--text-400);
	display: block;
	font-size: var(--text-mini);
}

/* !- CTA */
#blog-cta .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/*==============================================================================
 * SINGLE POST
 =============================================================================*/

/* !- Breadcrumb row */
#post-breadcrumb {
	padding-top: 2rem;
}

#post-breadcrumb .back-to-blog {
	color: var(--text-300);
	font-size: var(--text-mini);
	text-decoration: none;
}

#post-breadcrumb .back-to-blog:hover {
	color: var(--text-50);
}

#post-breadcrumb .back-to-blog i {
	margin-right: 0.375rem;
}

#post-breadcrumb .category-pill {
	background: var(--blue-transparent);
	border: 1px solid var(--blue-600);
	border-radius: 50rem;
	color: var(--blue-400);
	display: inline-block;
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 0.3125rem 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
}

#post-breadcrumb .category-pill:hover {
	color: var(--blue-300);
}

[data-theme="light"] #post-breadcrumb .category-pill {
	color: var(--blue-700);
}

[data-theme="light"] #post-breadcrumb .category-pill:hover {
	color: var(--blue-800);
}

/* !- Post and page header
 *
 * page.php uses the same heading block, so the selectors are shared rather
 * than duplicated. The meta row below is post-only.
 */
#page-header,
#post-header {
	padding: 1.75rem 0 2.25rem;
}

#page-header h1,
#post-header h1 {
	font-size: var(--text-4xl);
	font-weight: 800;
	margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
	#page-header h1,
	#post-header h1 {
		font-size: var(--text-3xl);
	}
}

/*
 * The meta line mixes text with a 24px avatar. Left on inline-block baselines
 * the chip aligns by the image's baseline, which drops the avatar below the
 * date and view count; a flex row centres everything on one axis instead.
 */
#post-header .post-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

/*
 * align-items centres the margin box, and the text items inherit a bottom
 * margin the avatar chip doesn't - enough to sit them a couple of pixels above
 * the avatar's centre line.
 */
#post-header .post-meta .list-inline-item {
	margin-bottom: 0;
}

#post-header .author-chip {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

#post-header .author-avatar {
	border-radius: 50%;
	height: 1.5rem;
	width: 1.5rem;
}

#post-header .author-chip a {
	color: var(--text-300);
}

#post-header .author-chip a:hover {
	color: var(--text-50);
}

/* !- Reading card
 *
 * The article on its own surface, and the page's one light band. It carries
 * .theme-inverted, so it takes the opposite tone of whatever theme is active
 * and everything inside it resolves against that.
 */
#page-content-wrap,
#reading-card-wrap {
	padding-bottom: 5rem;
}

/*
 * The card's own bottom gap is sized to separate it from whatever section comes
 * next. Comments aren't a next section - they belong to the post - so the gap
 * closes up and the thread's own rule handles the separation instead.
 */
#reading-card-wrap:has(+ #post-comments-section) {
	padding-bottom: 0;
}

.reading-card {
	border-radius: var(--border-radius);
	padding: 3rem;
}

@media (max-width: 767.98px) {
	.reading-card {
		padding: 1.5rem;
	}
}

.post-hero {
	border-radius: var(--border-radius);
	margin-bottom: 2.5rem;
	overflow: hidden;
}

.post-hero img {
	display: block;
	height: auto;
	width: 100%;
}

/* !- Share rail (markup is commented out in single.php) */
.share-rail {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: sticky;
	top: 5.5rem;
}

.share-btn {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: 50%;
	color: var(--text-400);
	cursor: pointer;
	display: flex;
	height: 2.5rem;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	width: 2.5rem;
}

.share-btn:hover {
	border-color: var(--bg-500);
	color: var(--text-50);
}

/* !- Categories and tags */
.post-terms {
	border-top: 1px solid var(--bg-700);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
}

.term-pill {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: 50rem;
	color: var(--text-300);
	font-size: var(--text-tiny);
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 0.375rem 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
}

.term-pill:hover {
	border-color: var(--bg-500);
	color: var(--text-50);
}

/* !- Author card */
.author-card {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding: 1.75rem;
}

@media (max-width: 575.98px) {
	.author-card {
		flex-direction: column;
		gap: 1rem;
	}
}

.author-card-avatar {
	border-radius: 50%;
	flex-shrink: 0;
	height: 4rem;
	width: 4rem;
}

.author-card-name {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.375rem;
}

.author-card-bio {
	font-size: var(--text-sm);
	margin-bottom: 0.625rem;
}

.author-card-link {
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: none;
}

/* !- Comments
 *
 * Their own band below the reading card, on the page tone rather than the
 * card's. .comments-shell carries the card's horizontal padding so the thread
 * lines up with the article column above it.
 *
 * Only the blog's wrappers are here. The thread itself and the reply form are
 * in prose.css, which the video, book, and creative library pages load too -
 * they all call comments_template() and none of them load this sheet.
 */
#post-comments-section {
	padding-bottom: 5rem;
	padding-top: 2.5rem;
}

.comments-shell {
	padding: 0 3rem;
}

@media (max-width: 767.98px) {
	.comments-shell {
		padding: 0 1.5rem;
	}
}

/* !- Accent links inside the reading card
 *
 * Same problem as Recent Articles: the card is always the inverse of the page
 * tone, and --link is picked for the page tone, so it lands the wrong way round
 * inside the card. Both directions step along the blue ramp.
 */
.reading-card .post-prose a,
.reading-card .author-card-link {
	color: var(--blue-700);
}

[data-theme="light"] .reading-card .post-prose a,
[data-theme="light"] .reading-card .author-card-link {
	color: var(--blue-300);
}

/* The gate is pinned dark, so it keeps the dark-surface step either way */
.reading-card .plus-gate-note a,
[data-theme="light"] .reading-card .plus-gate-note a {
	color: var(--blue-400);
}

/* !- Divider weights
 *
 * --bg-700 is a surface step, not a border one: as a hairline it lands at
 * 1.1:1 against the ground it sits on and effectively disappears. Dividers use
 * --bg-600 instead, and then take one more step wherever the surface behind
 * them is the light one - the ramp is compressed at its light end, so the same
 * token reads very differently on either side of the flip.
 *
 * On the page, that lighter surface is the light theme. Inside the reading
 * card it's the dark theme, since the card is always the page's inverse.
 */
#popular-articles .popular-item,
#popular-articles li:first-child .popular-item {
	border-color: var(--bg-600);
}

[data-theme="light"] #popular-articles .popular-item,
[data-theme="light"] #popular-articles li:first-child .popular-item {
	border-color: var(--bg-400);
}

.reading-card .post-terms,
.reading-card .term-pill {
	border-color: var(--bg-400);
}

[data-theme="light"] .reading-card .post-terms,
[data-theme="light"] .reading-card .term-pill {
	border-color: var(--bg-600);
}

/* !- Related posts */
#related-posts .post-card .post-meta {
	color: var(--text-400);
}

/* !- Reading-card captions
 *
 * Captions render inside the reading card, which is always the inverse of the
 * page tone. --text-400 is too pale against its light side at 3.8:1, and
 * --text-300 clears AA on both sides of the flip, so one value covers it.
 */
.reading-card figcaption,
.reading-card .wp-caption-text {
	color: var(--text-300);
}