/* NinjaTMS blog styles. Layered on top of the marketing default.pure.min.css. */

.blog-wrap { padding: 60px 0 80px; }
.blog-wrap h1, .blog-wrap h2, .blog-wrap h3, .blog-wrap h4 { color: inherit; }

/* Top spacing to clear the marketing site's fixed transparent nav.
   Marketing pages get this via per-section-id padding; the blog uses a single
   class-based rule so every page is consistent. */
.blog-hero.inner-page-hero,
.blog-wrap.inner-page-hero {
	padding-top: 160px;
}
@media (max-width: 768px) {
	.blog-hero.inner-page-hero,
	.blog-wrap.inner-page-hero { padding-top: 110px; }
}

/* Override the global `.theme--dark a:hover { color: #f7f8f9 !important }` rule
   inside blog white surfaces so links don't go white-on-white on hover. */
.theme--dark .blog-card a,
.theme--dark .blog-card a:hover,
.theme--dark .blog-card a:focus { color: #1a1d22 !important; }

.theme--dark .blog-article a,
.theme--dark .blog-article a:hover,
.theme--dark .blog-article a:focus { color: #0a58ca !important; }

.theme--dark .blog-article .content a,
.theme--dark .blog-article .content a:hover,
.theme--dark .blog-article .content a:focus { color: #0d6efd !important; }

.theme--dark .blog-article .blog-breadcrumb-nav .breadcrumb-item a,
.theme--dark .blog-article .blog-breadcrumb-nav .breadcrumb-item a:hover { color: #0d6efd !important; }

.theme--dark .blog-article .category-link,
.theme--dark .blog-article .category-link:hover { color: #0d6efd !important; }

/* Breadcrumbs on the dark hero — keep them visibly blue on hover, not near-white. */
.theme--dark .blog-breadcrumb-nav .breadcrumb-item a,
.theme--dark .blog-breadcrumb-nav .breadcrumb-item a:hover { color: #6cb4ff !important; }

/* Tag pills in article footer */
.theme--dark .blog-tags a,
.theme--dark .blog-tags a:hover { color: #495057 !important; }

/* Category strip on /blog/ index */
.theme--dark .blog-category-strip a,
.theme--dark .blog-category-strip a:hover { color: #fff !important; }

.blog-hero {
	padding: 60px 0 30px;
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
}

/* Breadcrumb on dark background */
.blog-breadcrumb-nav { margin-bottom: 1.2rem; }
.blog-breadcrumb-nav .breadcrumb { margin-bottom: 0; font-size: .9rem; }
.blog-breadcrumb-nav .breadcrumb-item a {
	color: #6cb4ff;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.blog-breadcrumb-nav .breadcrumb-item a:hover {
	color: #a8d3ff;
	text-decoration: underline;
}
.blog-breadcrumb-nav .breadcrumb-item.active { color: inherit; opacity: .9; font-weight: 500; }
/*
 * FontAwesome 6 chevron-right as the separator. Replaces the previous
 * "›" literal (U+203A) which rendered as Mojibake when the CSS stream
 * wasn't strict UTF-8. FA ships a guaranteed glyph; Bootstrap's default
 * "/" divider is also overridden via --bs-breadcrumb-divider so both
 * codepaths agree.
 */
.blog-breadcrumb-nav .breadcrumb { --bs-breadcrumb-divider: none; }
.blog-breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f105";           /* fa-angle-right */
	color: inherit; opacity: .45;
	padding: 0 .45rem;
	font-size: .85em;
	vertical-align: baseline;
}

/* Breadcrumb on the white article card */
.blog-article .blog-breadcrumb-nav { margin: -.4rem 0 1rem; }
.blog-article .blog-breadcrumb-nav .breadcrumb-item a {
	color: #0d6efd;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.blog-article .blog-breadcrumb-nav .breadcrumb-item a:hover {
	color: #0a58ca;
}
.blog-article .blog-breadcrumb-nav .breadcrumb-item.active { color: #6c757d; font-weight: 400; }
.blog-article .blog-breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before { color: #adb5bd; opacity: 1; }
.blog-hero h1 { font-size: 2.4rem; font-weight: 700; margin: 0 0 .4rem; letter-spacing: -.02em; }
.blog-hero p.lead { font-size: 1.1rem; opacity: .85; margin: 0; }

.blog-category-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.blog-category-strip a {
	display: inline-block;
	padding: .35rem .9rem;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	color: inherit;
	text-decoration: none;
	font-size: .9rem;
	transition: background .15s ease;
}
.blog-category-strip a:hover,
.blog-category-strip a.active { background: rgba(255,255,255,.18); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.blog-card {
	background: #fff;
	color: #1a1d22;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.blog-card a { color: inherit; text-decoration: none; display: contents; }
.blog-card .thumb { aspect-ratio: 16/9; background: #e9ecef; overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.blog-card .meta { font-size: .82rem; color: #6c757d; display: flex; gap: .5rem; align-items: center; }
.blog-card .meta .category { background:#f0f2f5; padding: .15rem .55rem; border-radius: 4px; color:#33393f; }
.blog-card h3 { font-size: 1.1rem; margin: 0; line-height: 1.3; font-weight: 700; }
.blog-card .dek { font-size: .92rem; color: #495057; margin: 0; line-height: 1.45; }
.blog-card .byline { font-size: .85rem; color: #6c757d; margin-top: auto; }

.blog-article {
	background: #fff;
	color: #1a1d22;
	border-radius: 10px;
	padding: 2rem 2.2rem 2.5rem;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
	max-width: 780px;
	margin: 0 auto;
}
.blog-article .category-link {
	display: inline-block;
	font-size: .85rem;
	color: #0d6efd;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .6rem;
}
.blog-article h1 { font-size: 2.1rem; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6rem; }
.blog-article .dek { font-size: 1.15rem; color: #495057; margin: 0 0 1.5rem; line-height: 1.4; }
.blog-article .byline {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 1rem 0;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
	margin-bottom: 1.4rem;
	font-size: .9rem;
	color: #495057;
}
.blog-article .byline .avatar {
	width: 40px; height: 40px; border-radius: 50%; background: #dee2e6; object-fit: cover;
}
.blog-article .hero-image { margin: 0 -2.2rem 1.5rem; aspect-ratio: 16/9; overflow: hidden; }
.blog-article .hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-article .attribution { font-size: .8rem; color: #6c757d; margin-bottom: 1.2rem; padding: 0 .1rem; }
.blog-article .attribution a { color: inherit; }
.blog-article .content { font-size: 1.02rem; line-height: 1.7; color: #24282d; }
.blog-article .content p { margin: 0 0 1.1em; }
/*
 * Heading rhythm: top margin is deliberately larger than bottom so a heading
 * visually "belongs to" the section it introduces rather than floating
 * between blocks. Sized for the 1.02rem / 1.7 body: body gap is ~1.78em, so
 * h2 top 2.2em / bottom 0.6em reads as a section break, and h3 1.9em / 0.5em
 * reads as a sub-section without competing with the h2. Headings use
 * line-height 1.25 + slight negative letter-spacing for crispness at size.
 */
.blog-article .content h2 {
	font-size: 1.5rem;
	margin: 2.2em 0 .6em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.blog-article .content h3 {
	font-size: 1.2rem;
	margin: 1.9em 0 .5em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.005em;
}
/* First heading in the body shouldn't push away from the hero image + byline. */
.blog-article .content > h2:first-child,
.blog-article .content > h3:first-child { margin-top: 0; }
/* Two adjacent headings (h2 directly followed by h3) should collapse the gap
   so they read as a single label pair, not as a big gap. */
.blog-article .content h2 + h3 { margin-top: .4em; }
.blog-article .content a { color: #0d6efd; text-decoration: underline; }
.blog-article .content blockquote { border-left: 4px solid #dee2e6; padding: .4em 0 .4em 1em; margin: 1.4em 0; color: #495057; font-style: italic; }
.blog-article .content ul, .blog-article .content ol { margin: 0 0 1.2em 1.2em; }
.blog-article .content li { margin-bottom: .4em; line-height: 1.6; }

.blog-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid #e9ecef; }
.blog-tags a {
	background: #f0f2f5; color: #495057; padding: .25rem .7rem; border-radius: 4px;
	font-size: .85rem; text-decoration: none;
}
.blog-tags a:hover { background: #e4e7eb; }

/*
 * Prev / next category navigation at the foot of the article body.
 * Two columns on wide screens, stacks on narrow. Headings are small and
 * muted; article headlines are the emphasis.
 */
.blog-article-nav {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
	margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #e9ecef;
}
.blog-article-nav a {
	display: block; padding: .9rem 1rem; border-radius: 8px;
	background: #f7f8fa; color: #24282d; text-decoration: none;
	transition: background .15s ease;
}
.blog-article-nav a:hover { background: #eef1f5; }
.blog-article-nav a.next { text-align: right; }
.blog-article-nav .label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; margin-bottom: .25rem; }
.blog-article-nav .headline { display: block; font-weight: 600; line-height: 1.3; }
@media (max-width: 640px) {
	.blog-article-nav { grid-template-columns: 1fr; }
	.blog-article-nav a.next { text-align: left; }
}

/*
 * Related-stories + More-from-author blocks. Live OUTSIDE the .blog-article
 * wrapper, so their h2s aren't styled by .blog-article .content rules.
 * The heading reads as a genuine section heading — not a tiny metadata
 * eyebrow — with enough breathing room above (border + padding) and below
 * (heading bottom margin) that the cards don't feel crowded against it.
 */
.blog-related-block,
.blog-more-from-author {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid #e9ecef;
}
.blog-more-from-author { margin-top: 2.75rem; }  /* tighter gap when it follows another block */
.blog-related-block h2,
.blog-more-from-author h2 {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: inherit;
	margin: 0 0 1.5rem;
}

/*
 * Transparency sub-footer emitted by blog_page_footer(). Keep it quiet —
 * this is a crawler/accessibility signal, not a design element.
 */
.blog-subfooter {
	border-top: 1px solid #e9ecef; margin-top: 3rem;
}
.blog-subfooter a { color: #6c757d; text-decoration: none; }
.blog-subfooter a:hover { color: #24282d; text-decoration: underline; }

/* Author byline enrichments (beat + tenure). Subdued relative to the name. */
.blog-article .byline .author-beat { font-weight: 500; }
.blog-article .byline .author-tenure { font-size: .88em; }

.blog-author-header {
	display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem;
	background: rgba(255,255,255,.06); padding: 1.5rem; border-radius: 10px;
}
.blog-author-header .avatar { width: 80px; height: 80px; border-radius: 50%; background: #6c757d; object-fit: cover; }
.blog-author-header h1 { margin: 0 0 .25rem; font-size: 1.7rem; }
.blog-author-header .beat { font-size: .95rem; opacity: .8; margin: 0 0 .5rem; }
.blog-author-header .bio { font-size: .95rem; line-height: 1.5; margin: 0; opacity: .9; }

.blog-empty {
	text-align: center; padding: 4rem 1rem; opacity: .75;
}