/**
 * Board 13 (Article / ArticleArchive / ContentPage) — S291-w8.
 * Every rule below serves a HANDBACK.md §Build notes slot (marked A2..SEO).
 * Scoped to single posts, the post archives and plain pages only: the shop,
 * search, cart, checkout and account markup is never selected here.
 */

/* ============ A2: the reading sheet ============ */
.single-post .inside-article {
	background: #fff;
}
@media (min-width: 769px) {
	.single-post .inside-article {
		max-width: 696px;
		margin: 32px auto 0;
		padding: 32px 48px 48px;
		border: 1px solid var(--line, #E7EEEC);
		border-radius: 20px;
	}
}

/* ============ A3: featured image under the head, 16:9 ============ */
.single-post .inside-article > .featured-image {
	max-width: none;
	padding: 0;
	margin: 0 0 24px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--teal-wash, #EAF4F2);
}
.single-post .inside-article > .featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (min-width: 769px) {
	.single-post .inside-article > .featured-image {
		margin-bottom: 32px;
		border-radius: 12px;
	}
}

/* ============ A4: breadcrumb ============ */
.single-post .woocommerce-breadcrumb {
	font-size: 12px;
	color: var(--slate, #5C6B69);
	line-height: 1.8;
	margin: 0 0 12px;
}
.single-post .woocommerce-breadcrumb a {
	color: var(--teal, #0E5C57);
}

/* ============ A5: reading-time kicker ============ */
.drjafari-article-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	font-size: 12.5px;
	line-height: 1.8;
	margin-bottom: 12px;
}
.drjafari-article-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--slate, #5C6B69);
	font-size: 12.5px;
	line-height: 1.8;
}
.drjafari-article-time svg {
	flex: none;
}

/* ============ A6: lede ============ */
.drjafari-article-lede {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 2;
	color: var(--slate, #5C6B69);
}
@media (min-width: 769px) {
	.drjafari-article-lede {
		font-size: 17px;
	}
}

/* ============ A7: the byline label ============ */
.drjafari-byline {
	margin: 4px 0 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--teal-wash, #EAF4F2);
	border: 1px solid var(--teal-soft, #BFE0DC);
	border-radius: 12px;
}
@media (min-width: 769px) {
	.drjafari-byline {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
	}
	.drjafari-byline.is-unreviewed {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		max-width: 480px;
	}
}
.drjafari-byline__row {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 10px 16px;
	min-width: 0;
}
.drjafari-byline__row + .drjafari-byline__row {
	border-top: 1px dashed var(--teal-soft, #BFE0DC);
}
@media (min-width: 769px) {
	.drjafari-byline__row {
		padding: 12px 20px;
	}
	.drjafari-byline__row + .drjafari-byline__row {
		border-top: 0;
		border-inline-start: 1px dashed var(--teal-soft, #BFE0DC);
	}
}
.drjafari-byline dt {
	font-size: 12px;
	font-weight: 500;
	color: var(--slate, #5C6B69);
	line-height: 1.8;
}
.drjafari-byline dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink, #1E2A29);
	line-height: 1.8;
}
.drjafari-byline__seal {
	flex: none;
}
.drjafari-byline__link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--teal, #0E5C57);
	text-decoration: underline;
	text-underline-offset: .25em;
}
.drjafari-byline__link:focus-visible {
	outline: 2px solid var(--teal-mid, #1A8079);
	outline-offset: 2px;
}

/* ============ A8: body type (18px / 2.1 on every width — the oracle reads
   phone widths too, so the board's 16px phone step is not applied) ============ */
.single-post .entry-content {
	font-size: 18px;
	line-height: 2.1;
	color: var(--ink, #1E2A29);
}
.single-post .entry-content h2 {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.6;
	color: #0A3A38;
	margin: 1.8em 0 .5em;
}
.single-post .entry-content h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ink, #1E2A29);
	margin: 1.5em 0 .4em;
}
.single-post .entry-content a {
	color: var(--teal, #0E5C57);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
}
.single-post .entry-content ul {
	padding-inline-start: 1.3em;
}
.single-post .entry-content li {
	margin-bottom: .35em;
	padding-inline-start: .2em;
}
.single-post .entry-content li::marker {
	color: var(--teal-mid, #1A8079);
}

/* ============ A9: her general note (renders only when ruled) ============ */
.drjafari-article-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 32px;
	padding: 16px;
	border-radius: 12px;
	background: #FBF8F3;
	border: 1px solid var(--line, #E7EEEC);
	color: var(--slate, #5C6B69);
}
.drjafari-article-note p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--slate, #5C6B69);
}
@media (min-width: 769px) {
	.drjafari-article-note {
		padding: 16px 20px;
	}
}

/* ============ A11: the shelf (renders only when ruled) ============ */
.drjafari-article-shelf {
	margin-top: 48px;
}
.drjafari-article-shelf .drjafari-section-h {
	margin-bottom: 16px;
}

/* ============ A12: consult band + more articles ============ */
.single-post .drjafari-consult {
	margin-top: 48px;
}
.drjafari-consult-inner {
	background: var(--orange-tint, #F7E6DA);
	border: 1px solid var(--orange-soft, #F7C9A6);
	border-radius: 18px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
@media (min-width: 769px) {
	.drjafari-consult-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 24px 32px;
		border-radius: 20px;
	}
}
.drjafari-consult-copy {
	font-weight: 700;
	font-size: 14.5px;
	color: #0A3A38;
	line-height: 1.85;
}
@media (min-width: 769px) {
	.drjafari-consult-copy {
		font-size: 16px;
	}
}
.drjafari-more {
	margin-top: 48px;
}
.drjafari-more .drjafari-section-h {
	margin-bottom: 12px;
}
.drjafari-more .drjafari-blog-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
@media (min-width: 769px) {
	.drjafari-more .drjafari-blog-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 18px;
	}
}
.drjafari-more .drjafari-blog-card {
	display: flex;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--line, #E7EEEC);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	min-height: 88px;
}
@media (min-width: 769px) {
	.drjafari-more .drjafari-blog-card {
		flex-direction: column;
		border-radius: 18px;
		gap: 0;
	}
}
.drjafari-more .drjafari-blog-image {
	width: 86px;
	flex: none;
	background: var(--teal-wash, #EAF4F2);
}
@media (min-width: 769px) {
	.drjafari-more .drjafari-blog-image {
		width: 100%;
		height: 130px;
	}
}
.drjafari-more .drjafari-blog-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.drjafari-more .drjafari-blog-body {
	padding: 12px 4px 12px 12px;
	flex: 1;
	min-width: 0;
}
@media (min-width: 769px) {
	.drjafari-more .drjafari-blog-body {
		padding: 16px 18px 18px;
	}
}
.drjafari-more .drjafari-blog-tag {
	color: var(--teal-mid, #1A8079);
	font-weight: 600;
	font-size: 11px;
	line-height: 1.6;
	margin-bottom: 4px;
}
.drjafari-more .drjafari-blog-title {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ink, #1E2A29);
	line-height: 1.7;
}
@media (min-width: 769px) {
	.drjafari-more .drjafari-blog-title {
		font-size: 15px;
	}
}
.drjafari-more .drjafari-blog-card:hover .drjafari-blog-title {
	text-decoration: underline;
	text-underline-offset: .25em;
}
.drjafari-more .drjafari-blog-card:focus-visible {
	outline: 2px solid var(--teal-mid, #1A8079);
	outline-offset: 2px;
}
.drjafari-see-all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--teal, #0E5C57);
	text-decoration: none;
}
@media (min-width: 769px) {
	.drjafari-see-all {
		font-size: 13.5px;
	}
}

/* ============ B1: the /mag/ head ============ */
.drjafari-archive-head {
	padding: 24px 16px 16px;
}
@media (min-width: 769px) {
	.drjafari-archive-head {
		padding: 40px 24px 24px;
	}
}
.drjafari-archive-head .page-title {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.5;
	color: #0A3A38;
}
@media (min-width: 769px) {
	.drjafari-archive-head .page-title {
		font-size: 32px;
	}
}

/* ============ B2: the archive grid (desk 3 columns + lead card) ============ */
@media (min-width: 769px) {
	.blog main.site-main,
	.archive.category main.site-main,
	.archive.tag main.site-main {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		align-items: start;
	}
	.blog main.site-main > header.page-header,
	.archive.category main.site-main > header.page-header,
	.archive.tag main.site-main > header.page-header,
	.blog main.site-main > .paging-navigation,
	.archive.category main.site-main > .paging-navigation,
	.archive.tag main.site-main > .paging-navigation {
		grid-column: 1 / -1;
	}
	.blog:not(.paged) main.site-main > article.post:first-of-type {
		grid-column: 1 / -1;
	}
}
.blog article.post .post-image,
.archive.category article.post .post-image,
.archive.tag article.post .post-image {
	order: -1;
}

/* ============ B3: card excerpts clamp to two lines ============ */
.blog article.post .entry-summary p,
.archive.category article.post .entry-summary p,
.archive.tag article.post .entry-summary p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog article.post .drjafari-blog-tag,
.archive.category article.post .drjafari-blog-tag,
.archive.tag article.post .drjafari-blog-tag {
	color: var(--teal-mid, #1A8079);
	font-weight: 600;
	font-size: 11px;
	line-height: 1.6;
	margin-bottom: 4px;
}
article.post .drjafari-article-time {
	font-size: 11.5px;
}
@media (min-width: 769px) {
	article.post .drjafari-article-time {
		font-size: 12px;
	}
}

/* ============ B4: one link per card — the title link is stretched ============ */
.blog article.post .inside-article,
.archive.category article.post .inside-article,
.archive.tag article.post .inside-article {
	position: relative;
}
.blog article.post .entry-title a::after,
.archive.category article.post .entry-title a::after,
.archive.tag article.post .entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.blog article.post .entry-title a:hover,
.archive.category article.post .entry-title a:hover {
	text-decoration: underline;
	text-underline-offset: .25em;
}
.blog article.post .inside-article:focus-within,
.archive.category article.post .inside-article:focus-within,
.archive.tag article.post .inside-article:focus-within {
	outline: 2px solid var(--teal-mid, #1A8079);
	outline-offset: 2px;
}

/* ============ C1: plain pages — board 7 head, one card, column 744 ============ */
/* body.page, not .page: post_class() also puts "page" on <article>, which never carries .woocommerce-page, so a bare
   .page reached cart, checkout and account (S294-w7). Every :not() class here is a body class. */
@media (min-width: 769px) {
	body.page:not(.woocommerce-page):not(.home):not(.drjafari-consult-page):not(.page-id-454) .inside-article {
		max-width: 744px;
		margin-inline: auto;
	}
}

/* ============ C2: Elementor accordion restyled, markup untouched ============ */
.elementor-accordion {
	border: 1px solid var(--line, #E7EEEC);
	border-radius: 12px;
	overflow: hidden;
}
.elementor-accordion-item + .elementor-accordion-item {
	border-top: 1px solid var(--line, #E7EEEC);
}
.elementor-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 8px 16px;
	cursor: pointer;
}
.elementor-accordion .elementor-tab-title.elementor-active {
	background: var(--teal-wash, #EAF4F2);
}
.elementor-accordion .elementor-accordion-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--teal-wash, #EAF4F2);
	color: var(--teal, #0E5C57);
}
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: var(--teal, #0E5C57);
	color: #fff;
}
.elementor-accordion .elementor-accordion-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink, #1E2A29);
	line-height: 1.8;
}
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
	color: #0A3A38;
}
.elementor-accordion .elementor-tab-content {
	padding: 4px 16px 16px 56px;
	padding-inline-start: 56px;
	padding-inline-end: 16px;
	background: var(--teal-wash, #EAF4F2);
	font-size: 15px;
	line-height: 2;
}

/* ============ C3: page lede (renders only when ruled) ============ */
.drjafari-page-lede {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.95;
	color: var(--slate, #5C6B69);
	max-width: 60ch;
}
@media (min-width: 769px) {
	.drjafari-page-lede {
		font-size: 15px;
	}
}