/**
 * FUNFERY Blog archive and single-post presentation.
 *
 * Divi Theme Builder owns the module structure. This file owns the visual
 * system and also keeps Divi's classic archive/single fallback usable when a
 * Theme Builder assignment is missing.
 */

body.ff-blog-shell {
	background: var(--ff-color-surface);
	color: var(--ff-color-text);
	overflow-x: hidden;
}

@supports (overflow: clip) {
	body.ff-blog-shell {
		overflow-x: clip;
	}
}

body.ff-blog-shell :where(.et-l--body, #main-content) {
	min-inline-size: 0;
}

/* Theme Builder rows use the same 120rem shell as the storefront. */
body.ff-blog-shell.et-tb-has-body
	.et-l--body
	.et_pb_section:has(
		:is(
			.ff-blog-hero,
			.ff-blog-grid,
			.et_pb_blog,
			.ff-post-title,
			.et_pb_post_title,
			.ff-post-content,
			.et_pb_post_content
		)
	) {
	inline-size: 100%;
	max-inline-size: none;
	padding-inline: var(--ff-gutter);
	margin-inline: 0;
}

body.ff-blog-shell.et-tb-has-body
	.et-l--body
	.et_pb_row:has(
		:is(
			.ff-blog-hero,
			.ff-blog-grid,
			.et_pb_blog,
			.ff-post-title,
			.et_pb_post_title,
			.ff-post-content,
			.et_pb_post_content
		)
	) {
	inline-size: min(100%, var(--ff-container-width)) !important;
	max-inline-size: none !important;
	padding-inline: 0 !important;
	margin-inline: auto !important;
}

body.ff-blog-shell.et-tb-has-body
	.et-l--body
	:where(
		.ff-blog-hero,
		.ff-blog-grid,
		.et_pb_blog,
		.ff-post-title,
		.et_pb_post_title,
		.ff-post-content,
		.et_pb_post_content
	) {
	min-inline-size: 0;
	max-inline-size: 100%;
	margin-inline: 0;
}

body.ff-blog-single.et-tb-has-body
	.ff-post-shell
	> .et_pb_column {
	min-inline-size: 0;
}

/* Release Divi's classic 80% frame only when no Theme Builder body matched. */
body.ff-blog-shell:not(.et-tb-has-body) #main-content > .container {
	inline-size: min(
		100%,
		calc(var(--ff-container-width) + (2 * var(--ff-gutter)))
	) !important;
	max-inline-size: none !important;
	padding: clamp(3.5rem, 6vw, 7rem) var(--ff-gutter)
		clamp(4rem, 7vw, 7rem) !important;
	margin-inline: auto;
}

body.ff-blog-shell:not(.et-tb-has-body)
	#main-content
	> .container::before {
	display: none !important;
	content: none !important;
}

body.ff-blog-shell:not(.et-tb-has-body)
	#main-content
	> .container
	> #content-area,
body.ff-blog-shell:not(.et-tb-has-body) #left-area {
	inline-size: 100% !important;
	max-inline-size: none !important;
}

body.ff-blog-shell:not(.et-tb-has-body) #left-area {
	float: none !important;
	padding: 0 !important;
}

body.ff-blog-shell:not(.et-tb-has-body) #sidebar {
	display: none !important;
}

/* Optional Theme Builder hero class: ff-blog-hero. */
body.ff-blog-index .ff-blog-hero {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: clamp(3.5rem, 7vw, 7rem);
}

body.ff-blog-index .ff-blog-hero :where(h1, .entry-title) {
	max-inline-size: 11ch;
	margin: 0;
	font-size: clamp(3rem, 6vw, 6.5rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
}

body.ff-blog-index .ff-blog-hero :where(p, .ff-blog-hero__lede) {
	max-inline-size: 42rem;
	margin: 0;
	color: var(--ff-color-text-muted);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.55;
}

/* Archive grid: Divi Blog Grid, Divi fullwidth Blog, and classic fallback. */
body.ff-blog-index.et-tb-has-body
	:is(.ff-blog-grid, .et_pb_blog_grid)
	.et_pb_salvattore_content,
body.ff-blog-index.et-tb-has-body
	:is(.ff-blog-grid, .et_pb_blog, .et_pb_posts)
	> .et_pb_ajax_pagination_container,
body.ff-blog-index:not(.et-tb-has-body) #left-area {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
	align-items: stretch;
}

body.ff-blog-index.et-tb-has-body
	:is(.ff-blog-grid, .et_pb_blog_grid)
	.et_pb_salvattore_content
	> .column {
	display: contents;
}

/* Divi 5 inserts an inner grid wrapper inside the pagination container. Divi
 * 5.9 used .et_pb_blog_grid_wrapper while 5.11 renders
 * .et_pb_blog_posts.et_grid_module. Span either contract across the outer grid
 * and inherit its responsive tracks so the article grid is not squeezed into
 * the first column. */
body.ff-blog-index.et-tb-has-body
	:is(.ff-blog-grid, .et_pb_blog, .et_pb_posts)
	> .et_pb_ajax_pagination_container
	> :is(
		.et_pb_blog_grid_wrapper,
		.et_pb_blog_posts.et_grid_module
	) {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: inherit;
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: none;
	gap: inherit;
	align-items: inherit;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post {
	display: flex;
	min-inline-size: 0;
	min-block-size: 100%;
	flex-direction: column;
	padding: 1rem;
	border: 0.0625rem solid rgb(185 205 209 / 58%);
	border-radius: var(--ff-radius-lg);
	margin: 0 !important;
	background: var(--ff-color-surface);
	box-shadow: var(--ff-shadow-sm);
	overflow: hidden;
	transition:
		transform var(--ff-transition-fast),
		border-color var(--ff-transition-fast);
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.entry-featured-image-url {
	display: block;
	inline-size: calc(100% + 2rem);
	aspect-ratio: 16 / 10;
	margin: -1rem -1rem 1.2rem;
	border-radius: var(--ff-radius-lg) var(--ff-radius-lg)
		var(--ff-radius-md) var(--ff-radius-md);
	background: var(--ff-color-background);
	overflow: hidden;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.entry-featured-image-url
	img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 360ms ease;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.entry-title {
	margin: 0 0 0.65rem !important;
	font-size: clamp(1.35rem, 1.5vw, 1.75rem) !important;
	line-height: 1.18 !important;
	letter-spacing: -0.025em;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.entry-title
	a {
	color: var(--ff-color-text);
	text-decoration: none;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.post-meta {
	margin: 0 0 0.85rem;
	color: var(--ff-color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.post-meta
	a {
	color: var(--ff-color-brand);
	text-decoration-thickness: 0.0625rem;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	:where(.post-content, .post-content-inner, .entry-content) {
	color: var(--ff-color-text-muted);
	font-size: 1rem;
	line-height: 1.65;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.post-content {
	display: flex;
	min-block-size: 0;
	flex: 1;
	flex-direction: column;
}

body.ff-blog-index
	:is(
		.ff-blog-grid,
		.et_pb_blog_grid,
		.et_pb_posts,
		#left-area
	)
	article.et_pb_post
	.more-link {
	display: inline-flex;
	min-block-size: 2.75rem;
	align-items: center;
	align-self: flex-start;
	margin-block-start: auto;
	padding-block-start: 0.75rem;
	color: var(--ff-color-brand-dark);
	font-weight: 750;
	text-decoration: underline;
	text-decoration-thickness: 0.0625rem;
	text-underline-offset: 0.22em;
}

body.ff-blog-index
	:is(.et_pb_blog_grid, .et_pb_posts)
	:where(.pagination, .wp-pagenavi),
body.ff-blog-index:not(.et-tb-has-body) #left-area > .pagination {
	display: flex;
	grid-column: 1 / -1;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	padding-block-start: clamp(1.5rem, 3vw, 3rem);
	border: 0;
	clear: both;
}

body.ff-blog-index
	:is(.pagination, .wp-pagenavi)
	:where(a, span) {
	display: inline-flex;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.75rem;
	border: 0.0625rem solid var(--ff-color-border);
	border-radius: var(--ff-radius-sm);
	background: var(--ff-color-surface);
	color: var(--ff-color-text);
	font-weight: 700;
	text-decoration: none;
}

body.ff-blog-index
	:is(.pagination, .wp-pagenavi)
	:where(.current, [aria-current="page"]) {
	border-color: var(--ff-color-brand);
	background: var(--ff-color-surface-blue);
}

@media (hover: hover) and (pointer: fine) {
	body.ff-blog-index
		:is(
			.ff-blog-grid,
			.et_pb_blog_grid,
			.et_pb_posts,
			#left-area
		)
		article.et_pb_post:hover {
		border-color: var(--ff-color-border);
		transform: translateY(-0.1875rem);
	}

	body.ff-blog-index
		:is(
			.ff-blog-grid,
			.et_pb_blog_grid,
			.et_pb_posts,
			#left-area
		)
		article.et_pb_post:hover
		.entry-featured-image-url
		img {
		transform: scale(1.025);
	}
}

/* Single-post title and feature media. */
body.ff-blog-single.et-tb-has-body
	:is(.ff-post-title, .et_pb_post_title),
body.ff-blog-single:not(.et-tb-has-body)
	#left-area
	> article.et_pb_post
	> .et_post_meta_wrapper {
	inline-size: min(100%, var(--ff-container-width));
	margin-inline: auto;
}

body.ff-blog-single.et-tb-has-body
	:is(.ff-post-title, .et_pb_post_title) {
	padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 3vw, 3rem);
}

body.ff-blog-single
	:is(
		.ff-post-title,
		.et_pb_post_title,
		.et_post_meta_wrapper
	)
	:where(.entry-title, h1) {
	inline-size: min(100%, 66rem);
	max-inline-size: 66rem;
	margin: 0 auto clamp(1rem, 2vw, 1.5rem) !important;
	font-size: clamp(2.65rem, 3vw, 3.5rem) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.035em;
}

body.ff-blog-single
	:is(
		.ff-post-title,
		.et_pb_post_title,
		.et_post_meta_wrapper
	)
	:where(.post-meta, .et_pb_title_meta_container) {
	inline-size: min(100%, 66rem);
	margin-block: 0;
	margin-inline: auto;
	color: var(--ff-color-text-muted);
	font-size: 1rem;
	line-height: 1.55;
}

body.ff-blog-single
	:is(
		.ff-post-title,
		.et_pb_post_title,
		.et_post_meta_wrapper
	)
	:where(.post-meta, .et_pb_title_meta_container)
	a {
	color: var(--ff-color-brand);
}

body.ff-blog-single
	:is(
		.ff-post-title,
		.et_pb_post_title,
		.et_post_meta_wrapper
	)
	.et_pb_title_featured_container,
body.ff-blog-single
	:is(
		.ff-post-title,
		.et_pb_post_title,
		.et_post_meta_wrapper
	)
	> img {
	display: block;
	inline-size: min(100%, 66rem);
	max-inline-size: 66rem;
	margin-block: clamp(1.5rem, 2.5vw, 2.5rem) 0;
	margin-inline: auto;
	border-radius: var(--ff-radius-lg);
	overflow: hidden;
}

body.ff-blog-single
	:is(
		.ff-post-title,
		.et_pb_post_title,
		.et_post_meta_wrapper
	)
	.et_pb_title_featured_container
	img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Theme Builder may place Post Title and Post Content in separate Rows. Release
 * the shared classic 66rem cap from every single-post Post Title module so each
 * title, meta block, and featured image follows its own Divi column. */
body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(.ff-post-title, .et_pb_post_title) {
	padding-block: 0;
	margin-block: 0 !important;
	inline-size: 100%;
	max-inline-size: none;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(.ff-post-title, .et_pb_post_title)
	:where(.entry-title, h1, .post-meta, .et_pb_title_meta_container),
body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(.ff-post-title, .et_pb_post_title)
	.et_pb_title_featured_container,
body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(.ff-post-title, .et_pb_post_title)
	> img {
	inline-size: 100%;
	max-inline-size: none;
	margin-inline: 0 !important;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(.ff-post-title, .et_pb_post_title)
	:where(.entry-title, h1) {
	margin-block-end: clamp(0.75rem, 1.5vw, 1rem) !important;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(.ff-post-title, .et_pb_post_title)
	.et_pb_title_featured_container,
body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(.ff-post-title, .et_pb_post_title)
	> img {
	margin-block: clamp(1rem, 2vw, 1.5rem) 1.5rem;
}

/* Long-form article typography. */
body.ff-blog-single.et-tb-has-body
	:is(.ff-post-content, .et_pb_post_content),
body.ff-blog-single:not(.et-tb-has-body)
	#left-area
	> article.et_pb_post
	> .entry-content {
	inline-size: min(100%, var(--ff-container-width));
	max-inline-size: var(--ff-container-width);
	margin-inline: auto;
}

body.ff-blog-single:not(.et-tb-has-body) #comment-wrap,
body.ff-blog-single:not(.et-tb-has-body) #respond {
	inline-size: min(100%, 48rem);
	max-inline-size: 48rem;
	margin-inline: auto;
}

body.ff-blog-single.et-tb-has-body
	:is(.ff-post-content, .et_pb_post_content),
body.ff-blog-single:not(.et-tb-has-body)
	#left-area
	> article.et_pb_post
	> .entry-content {
	padding-block: 0 clamp(4rem, 7vw, 7rem);
	color: var(--ff-color-text);
	font-size: clamp(1.0625rem, 0.98rem + 0.18vw, 1.15rem);
	line-height: 1.78;
}

body.ff-blog-single .ff-post-layout {
	display: grid;
	inline-size: min(100%, 48rem);
	grid-template-columns: minmax(0, 48rem);
	justify-content: center;
	min-inline-size: 0;
	margin-inline: auto;
}

body.ff-blog-single .ff-post-layout--with-toc {
	grid-template-columns: minmax(0, 48rem);
	gap: 2rem;
}

/* Theme Builder owns the outer Row and column widths. Do not re-constrain its
 * Post Content wrapper to the legacy centered 66rem inline-TOC group. */
body.ff-blog-single.et-tb-has-body .ff-post-layout--with-toc {
	inline-size: 100%;
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	gap: 2rem;
	margin-inline: 0;
}

body.ff-blog-single.et-tb-has-body
	.ff-post-layout--with-toc
	> .ff-post-toc {
	inline-size: min(100%, 48rem);
	justify-self: center;
}

/* In Theme Builder, the Post Content module follows the width of its Divi
 * column. The 48rem reading measure remains only for the classic fallback. */
body.ff-blog-single.et-tb-has-body
	.ff-post-layout--with-toc
	> .ff-post-article {
	inline-size: 100%;
	max-inline-size: none;
	justify-self: stretch;
}

body.ff-blog-single .ff-post-article {
	min-inline-size: 0;
	max-inline-size: 48rem;
}

body.ff-blog-single .ff-post-toc {
	padding: 1.25rem;
	border: 0.0625rem solid var(--ff-color-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-color-background);
}

body.ff-blog-single .ff-post-toc__title {
	margin: 0 0 0.75rem;
	color: var(--ff-color-text);
	font-size: 0.875rem;
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.ff-blog-single .ff-post-toc__list {
	display: grid;
	gap: 0.125rem;
	padding: 0;
	margin: 0;
	list-style: none !important;
	counter-reset: ff-post-toc;
}

body.ff-blog-single .ff-post-toc__list li {
	padding: 0;
	margin: 0;
	list-style: none !important;
	counter-increment: ff-post-toc;
}

body.ff-blog-single .ff-post-toc__list li::marker {
	content: "";
}

body.ff-blog-single .ff-post-toc__list a {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	min-block-size: 2.75rem;
	align-items: center;
	padding-block: 0.5rem;
	color: var(--ff-color-text-muted);
	font-size: 0.9375rem;
	font-weight: 620;
	line-height: 1.4;
	text-decoration: none;
}

body.ff-blog-single .ff-post-toc__list a::before {
	color: var(--ff-color-brand);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	content: counter(ff-post-toc, decimal-leading-zero);
}

body.ff-blog-single .ff-post-toc__list a:hover {
	color: var(--ff-color-brand-dark);
}

body.ff-blog-single .ff-post-toc__list a:focus-visible {
	border-radius: 0.25rem;
	outline: 0.125rem solid var(--ff-color-brand-dark);
	outline-offset: 0.125rem;
}

/* Divi 5's native Table of Contents module is used in the Theme Builder's
 * right column. The generated inline directory remains the mobile/classic
 * fallback, so both versions share the same visual language. */
body.ff-blog-single.et-tb-has-body .ff-post-sidebar {
	display: none;
}

body.ff-blog-single .et_pb_table_of_contents {
	padding: 0;
	border-block-start: 0.0625rem solid var(--ff-color-border);
	background: transparent;
}

/* Divi 5 renders the native TOC as a Flex module and gives it the global 30px
 * module gutter. The title already owns the 12px internal rhythm. */
body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_table_of_contents.et_flex_module {
	row-gap: 0 !important;
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__title {
	padding: 1rem 0 0;
	margin: 0 0 0.75rem;
	color: var(--ff-color-text);
	font-size: 0.875rem;
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__nav {
	margin: 0;
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__list--root {
	display: grid;
	gap: 0.125rem;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	counter-reset: ff-native-post-toc;
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__item {
	padding: 0;
	margin: 0;
	list-style: none !important;
	counter-increment: ff-native-post-toc;
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__item::marker {
	content: "";
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__link {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	min-block-size: 2.75rem;
	align-items: center;
	column-gap: 0;
	padding-block: 0.5rem;
	color: var(--ff-color-text-muted);
	font-size: 0.9375rem;
	font-weight: 620;
	line-height: 1.4;
	text-decoration: none;
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__link::before {
	color: var(--ff-color-brand);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	content: counter(ff-native-post-toc, decimal-leading-zero);
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__marker {
	display: none;
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__link:hover,
body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__link--active {
	color: var(--ff-color-brand-dark);
}

body.ff-blog-single
	.et_pb_table_of_contents
	.et_pb_table_of_contents__link:focus-visible {
	border-radius: 0.25rem;
	outline: 0.125rem solid var(--ff-color-brand-dark);
	outline-offset: 0.125rem;
}

/* Divi Sidebar module. Widget titles are supplied in Appearance > Widgets;
 * this styling deliberately does not synthesize headings with pseudo text. */
body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-content: start;
	padding: 0 !important;
	border: 0 !important;
	background: transparent;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	.et_pb_widget {
	float: none !important;
	inline-size: 100% !important;
	max-inline-size: none;
	padding: 0;
	margin: 0 !important;
}

/* Block Widgets render Heading, Categories, and Tag Cloud as separate widget
 * wrappers. Keep section-to-section space generous while binding each real H2
 * to the content that follows it. Legacy widgets keep their title and content
 * in one wrapper and use the same 0.75rem internal rhythm below. */
body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	> .et_pb_widget
	+ .et_pb_widget {
	margin-block-start: 2rem !important;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	> .et_pb_widget:has(> .wp-block-heading)
	+ .et_pb_widget {
	margin-block-start: 0 !important;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.widgettitle, .widget-title, .wp-block-heading) {
	padding-block-start: 1rem;
	border-block-start: 0.0625rem solid var(--ff-color-border);
	margin: 0 0 0.75rem !important;
	color: var(--ff-color-text) !important;
	font-size: 0.875rem !important;
	font-weight: 750 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* A native Divi Heading module directly above a custom sidebar module is the
 * semantic section heading. It matches TOC and Widget titles without a class. */
body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	.et_pb_heading {
	padding: 0;
	border-block-start: 0.0625rem solid var(--ff-color-border);
	margin: 0 0 0.75rem !important;
	background: transparent;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	.et_pb_heading
	.et_pb_heading_container
	> :is(.et_pb_module_heading, .et_pb_module_header) {
	padding-block-start: 1rem;
	margin: 0;
	color: var(--ff-color-text) !important;
	font-size: 0.875rem !important;
	font-weight: 750 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Sidebar Blurb stays an author/team card. Its image is a real circular avatar
 * instead of inheriting Divi's unconstrained image treatment. */
body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	.et_pb_blurb {
	margin-block: 0 2rem !important;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	.et_pb_blurb_content {
	max-inline-size: none !important;
	margin-inline: 0 !important;
	text-align: start;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	> .et_pb_heading
	+ .et_pb_blurb
	.et_pb_main_blurb_image {
	inline-size: 5.5rem !important;
	block-size: 5.5rem !important;
	margin: 0 0 0.75rem !important;
	border: 0.0625rem solid var(--ff-color-border);
	border-radius: 50%;
	background: var(--ff-color-surface-soft);
	overflow: hidden;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	> .et_pb_heading
	+ .et_pb_blurb
	.et_pb_main_blurb_image
	.et_pb_image_wrap {
	display: block;
	inline-size: 100% !important;
	block-size: 100% !important;
	border-radius: inherit;
	overflow: hidden;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	> .et_pb_heading
	+ .et_pb_blurb
	.et_pb_main_blurb_image
	img {
	display: block;
	inline-size: 100% !important;
	max-inline-size: none;
	block-size: 100% !important;
	border-radius: inherit;
	object-fit: cover;
	object-position: center;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	.et_pb_blurb_container {
	padding-inline-start: 0;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	.et_pb_blurb
	.et_pb_module_header {
	margin: 0 0 0.375rem;
	color: var(--ff-color-text) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: normal;
	text-transform: none;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	:is(
		.ff-post-sidebar,
		.et_pb_column:has(> :is(.et_pb_table_of_contents, .et_pb_widget_area))
	)
	.et_pb_blurb_description {
	color: var(--ff-color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.widget_categories ul, .wp-block-categories-list) {
	display: grid;
	gap: 0.125rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.widget_categories li, .wp-block-categories-list li) {
	padding: 0;
	margin: 0;
	list-style: none;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.widget_categories, .wp-block-categories-list)
	a {
	display: flex;
	min-block-size: 2.75rem;
	align-items: center;
	color: var(--ff-color-text-muted);
	font-size: 0.9375rem;
	font-weight: 620;
	line-height: 1.4;
	text-decoration: none;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.tagcloud, .wp-block-tag-cloud) {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.tagcloud, .wp-block-tag-cloud)
	a {
	display: inline-flex;
	min-block-size: 2.75rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border: 0.0625rem solid var(--ff-color-border);
	border-radius: 999rem;
	background: var(--ff-color-surface-soft);
	color: var(--ff-color-text-muted);
	font-size: 0.8125rem !important;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.widget_categories, .wp-block-categories-list, .tagcloud, .wp-block-tag-cloud)
	a:hover {
	border-color: var(--ff-color-brand);
	color: var(--ff-color-brand-dark);
}

body.ff-blog-single.et-tb-has-body
	.et-l--body
	.et_pb_widget_area
	:is(.widget_categories, .wp-block-categories-list, .tagcloud, .wp-block-tag-cloud)
	a:focus-visible {
	outline: 0.125rem solid var(--ff-color-brand-dark);
	outline-offset: 0.125rem;
}

body.ff-blog-single .ff-post-article :where(p, ul, ol, blockquote, pre, table, figure) {
	margin-block: 0 1.45em;
}

body.ff-blog-single .ff-post-article :where(h2, h3, h4) {
	margin-block: 1.65em 0.6em;
	scroll-margin-block-start: 6rem;
}

body.ff-blog-single .ff-post-article h2 {
	font-size: clamp(1.85rem, 3vw, 2.65rem);
	line-height: 1.12;
}

body.ff-blog-single .ff-post-article h3 {
	font-size: clamp(1.4rem, 2.1vw, 1.85rem);
}

body.ff-blog-single .ff-post-article :where(ul, ol) {
	padding-inline-start: 1.35em;
}

body.ff-blog-single .ff-post-article li + li {
	margin-block-start: 0.4em;
}

body.ff-blog-single .ff-post-article blockquote {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 0;
	border-radius: var(--ff-radius-md);
	background: var(--ff-color-background);
	color: var(--ff-color-text);
	font-size: clamp(1.15rem, 2vw, 1.35rem);
	font-weight: 620;
	line-height: 1.55;
}

body.ff-blog-single .ff-post-article blockquote :where(p, cite):last-child {
	margin-block-end: 0;
}

body.ff-blog-single .ff-post-article :where(img, video, iframe) {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--ff-radius-md);
}

body.ff-blog-single .ff-post-article :where(figcaption, .wp-caption-text) {
	margin-block-start: 0.55rem;
	color: var(--ff-color-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: start;
}

body.ff-blog-single .ff-post-article :where(pre, table) {
	max-inline-size: 100%;
	overflow-x: auto;
}

body.ff-blog-single .ff-post-article pre {
	padding: 1rem;
	border-radius: var(--ff-radius-md);
	background: var(--ff-color-text);
	color: var(--ff-color-surface);
	font-family: var(--ff-font-mono);
	font-size: 0.9rem;
	line-height: 1.6;
}

body.ff-blog-single .ff-post-article :where(hr, .wp-block-separator) {
	border: 0;
	border-block-start: 0.0625rem solid rgb(185 205 209 / 55%);
	margin-block: clamp(2rem, 5vw, 4rem);
}

body.ff-blog-single:not(.et-tb-has-body) #left-area > article.et_pb_post {
	padding: 0;
	margin: 0;
}

body.ff-blog-single:not(.et-tb-has-body) #comment-wrap {
	padding-block: 0 clamp(4rem, 7vw, 7rem);
}

body.ff-blog-single :where(.nav-single, .post-nav, .wp-link-pages) a,
body.ff-blog-single #comment-wrap :where(.comment-reply-link, .submit) {
	display: inline-flex;
	min-block-size: 2.75rem;
	align-items: center;
}

body.ff-blog-shell
	:where(
		.more-link,
		.nav-single a,
		.post-nav a,
		.wp-link-pages a,
		.comment-reply-link
	):focus {
	outline: 0.125rem solid var(--ff-color-focus);
	outline-offset: 0.125rem;
}

@media (min-width: 75rem) {
	body.ff-blog-single .ff-post-layout--with-toc {
		inline-size: min(100%, 66rem);
		grid-template-columns: minmax(0, 14rem) minmax(0, 48rem);
		gap: 4rem;
		align-items: start;
	}

	body.ff-blog-single .ff-post-toc {
		position: sticky;
		inset-block-start: 2rem;
		padding: 0;
		border-width: 0.0625rem 0 0;
		border-radius: 0;
		background: transparent;
	}

	body.ff-blog-single .ff-post-toc__title {
		padding-block-start: 1rem;
	}
}

@media (min-width: 75rem) {
	/* Match Divi's 3/4 + 1/4 row: 73.625% main, 5.5% gutter,
	 * and 20.875% sidebar inside the canonical storefront frame. */
	body.ff-blog-single.et-tb-has-body .ff-post-shell {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 5.5%;
		overflow: visible;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell
		> .ff-post-main {
		float: none;
		flex: 0 0 73.625%;
		inline-size: 73.625% !important;
		max-inline-size: 73.625%;
		margin-inline: 0 !important;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell
		> .ff-post-sidebar {
		display: block !important;
		float: none;
		flex: 0 0 20.875%;
		inline-size: 20.875% !important;
		max-inline-size: 20.875%;
		align-self: stretch;
		padding-block-start: clamp(3rem, 5vw, 5rem);
		margin-inline: 0 !important;
		overflow: visible;
	}

	body.ff-blog-single.et-tb-has-body
		.et-l--body
		.et_pb_table_of_contents {
		position: sticky;
		inset-block-start: 2rem;
		inline-size: 100%;
		align-self: flex-start;
		margin-block: 0 !important;
	}

	body.ff-blog-single.et-tb-has-body
		.et-l--body
		.et_pb_row:has(> .et_pb_column .et_pb_post_content) {
		overflow: visible;
	}

	body.ff-blog-single.et-tb-has-body
		.et-l--body
		.et_pb_row:has(> .et_pb_column .et_pb_post_content)
		> .et_pb_column:has(> .et_pb_table_of_contents) {
		align-self: stretch;
		overflow: visible;
	}

	/* The native right-column module replaces the duplicated inline desktop
	 * directory. Theme Builder owns the main-column reading measure. */
	body.ff-blog-single.et-tb-has-body
		.ff-post-shell:has(
			.et_pb_table_of_contents
		)
		.ff-post-layout--with-toc {
		inline-size: 100%;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell:has(
			.et_pb_table_of_contents
		)
		.ff-post-layout--with-toc
		> .ff-post-toc {
		display: none;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell:has(
			.et_pb_table_of_contents .et_pb_table_of_contents__item
		)
		.ff-post-article {
		inline-size: 100%;
		max-inline-size: none;
		justify-self: stretch;
	}

	/* The native module wrapper is server-rendered, while its items arrive after
	 * Divi hydrates. Hide the inline desktop fallback from the first styled
	 * paint instead of waiting for JavaScript-generated items. */
	body.ff-blog-single.et-tb-has-body
		.et_pb_row:has(.et_pb_table_of_contents)
		.ff-post-layout--with-toc
		> .ff-post-toc {
		display: none;
	}

	/* Short posts and incomplete templates do not reserve an empty sidebar. */
	body.ff-blog-single.et-tb-has-body
		.ff-post-shell:not(:has(
			.ff-post-sidebar :is(
				.et_pb_table_of_contents__item,
				.et_pb_widget
			)
		)) {
		display: block !important;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell:not(:has(
			.ff-post-sidebar :is(
				.et_pb_table_of_contents__item,
				.et_pb_widget
			)
		))
		> .ff-post-main {
		inline-size: min(100%, 66rem) !important;
		max-inline-size: 66rem;
		margin-inline: auto !important;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell:not(:has(
			.ff-post-sidebar :is(
				.et_pb_table_of_contents__item,
				.et_pb_widget
			)
		))
		> .ff-post-sidebar {
		display: none !important;
	}
}

@media (max-width: 74.9375rem) {
	body.ff-blog-index.et-tb-has-body
		:is(.ff-blog-grid, .et_pb_blog_grid)
		.et_pb_salvattore_content,
	body.ff-blog-index.et-tb-has-body
		:is(.ff-blog-grid, .et_pb_blog, .et_pb_posts)
		> .et_pb_ajax_pagination_container,
	body.ff-blog-index:not(.et-tb-has-body) #left-area {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* A two-Row Theme Builder layout keeps secondary profile/navigation columns
	 * out of the compact flow. Both main columns then share the full Row frame. */
	body.ff-blog-single.et-tb-has-body
		.et-l--body
		:is(
			.et_pb_row:has(> .et_pb_column .et_pb_post_title),
			.et_pb_row:has(> .et_pb_column .et_pb_post_content)
		) {
		display: block !important;
	}

	body.ff-blog-single.et-tb-has-body
		.et-l--body
		:is(
			.et_pb_row:has(> .et_pb_column .et_pb_post_title),
			.et_pb_row:has(> .et_pb_column .et_pb_post_content)
		)
		> .et_pb_column:has(> :is(.et_pb_post_title, .et_pb_post_content)) {
		float: none;
		flex: 0 0 100%;
		inline-size: 100% !important;
		max-inline-size: none;
		margin-inline: 0 !important;
	}

	body.ff-blog-single.et-tb-has-body
		.et-l--body
		:is(
			.et_pb_row:has(> .et_pb_column .et_pb_post_title),
			.et_pb_row:has(> .et_pb_column .et_pb_post_content)
		)
		> .et_pb_column:has(
			> :is(
				.et_pb_heading,
				.et_pb_blurb,
				.et_pb_widget_area,
				.et_pb_table_of_contents
			)
		) {
		display: none !important;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-layout--with-toc
		> .ff-post-toc {
		display: block !important;
	}
}

@media (max-width: 61.25rem) {
	body.ff-blog-single.et-tb-has-body:has(.ff-post-layout--with-toc)
		.et-l--body
		.et_pb_table_of_contents {
		display: none !important;
	}

	body.ff-blog-single.et-tb-has-body .ff-post-shell {
		display: block !important;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell
		> .ff-post-main {
		float: none;
		inline-size: 100% !important;
		max-inline-size: none;
		margin-inline: 0 !important;
	}

	body.ff-blog-single.et-tb-has-body
		.ff-post-shell
		> .ff-post-sidebar {
		display: none !important;
	}
}

@media (max-width: 47.9375rem) {
	body.ff-blog-shell:not(.et-tb-has-body) #main-content > .container {
		padding-block-start: 2.75rem !important;
	}

	body.ff-blog-index.et-tb-has-body
		:is(.ff-blog-grid, .et_pb_blog_grid)
		.et_pb_salvattore_content,
	body.ff-blog-index.et-tb-has-body
		:is(.ff-blog-grid, .et_pb_blog, .et_pb_posts)
		> .et_pb_ajax_pagination_container,
	body.ff-blog-index:not(.et-tb-has-body) #left-area {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ff-blog-index .ff-blog-hero {
		padding-block: 3rem;
	}

	body.ff-blog-index .ff-blog-hero :where(h1, .entry-title) {
		font-size: clamp(2.75rem, 14vw, 4.25rem);
	}

	body.ff-blog-single.et-tb-has-body
		:is(.ff-post-title, .et_pb_post_title) {
		padding-block-start: 0;
	}

	body.ff-blog-single
		:is(
			.ff-post-title,
			.et_pb_post_title,
			.et_post_meta_wrapper
		)
		:where(.entry-title, h1) {
		font-size: clamp(2.125rem, 9.75vw, 2.875rem) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ff-blog-shell *,
	body.ff-blog-shell *::before,
	body.ff-blog-shell *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}