/* ============================================================
   PLANTISIMA - single post (single.css)
   Loaded only on single posts (see plantisima_single_styles).
   Brand tokens come from style.css :root.
   ============================================================ */

/* ---- Top wash (match the homepage hero) -------------------------------- */
/* The homepage hero carries a subtle terracotta radial wash under the menu.
   Mirror it at the top of single posts so the area below the header is
   consistent site-wide. Anchored near the top, it fades out as you scroll. */
body.single {
	background-image: radial-gradient(1100px 620px at 80% -90px, rgba(197, 107, 62, 0.10), transparent 60%);
	background-repeat: no-repeat;
}

/* ---- Reading surface & measure ----------------------------------------- */
/* Kadence puts a square white background (.content-bg) on the <article>. The
   rounded card is .entry-content-wrap inside it, so make the article itself
   transparent or its square corners poke out behind the rounded ones. */
.single-entry.content-bg {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* White "paper" article card, centered on the cream canvas, with a
   comfortable reading column. Replaces the stark full-width white box. */
.single-entry .entry-content-wrap {
	max-width: 860px;
	margin-inline: auto;
	background: var(--brand-surface);
	border: 1px solid var(--brand-sand);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(27, 58, 43, 0.05);
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

/* Body copy: larger, airier, with a capped measure for readability. */
.single-content {
	font-size: 1.15rem;
	line-height: 1.75;
	color: #36433c; /* slightly softer than pure ink for long reading */
}
.single-content > p,
.single-content > ul,
.single-content > ol {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}
.single-content > p { margin: 0 0 1.4em; }
.single-content > ul,
.single-content > ol { margin: 0 auto 1.5em; padding-left: 1.4em; }
.single-content li { margin: 0.4em 0; }
.single-content a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Branded section headings (the numbered listicle H2s) -------------- */
.single-content h2 {
	max-width: 68ch;
	margin: 1.5em auto 0.5em;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--brand-forest);
}
.single-content h3 {
	max-width: 68ch;
	margin: 1.8em auto 0.5em;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	color: var(--brand-ink);
}

/* ---- Inline images & figures ------------------------------------------- */
/* Consistent treatment: rounded, soft shadow, generous spacing, captions. */
.single-content img {
	border-radius: 10px;
	display: block;
	height: auto;
}
.single-content figure,
.single-content .wp-block-image {
	margin: 2rem auto;
}
.single-content figure img,
.single-content .wp-block-image img {
	box-shadow: 0 6px 20px rgba(27, 58, 43, 0.10);
}
.single-content figcaption,
.single-content .wp-element-caption {
	margin-top: 0.6rem;
	font-size: 0.92rem;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	color: var(--global-palette5);
}

/* Featured image at its NATURAL aspect ratio. Kadence otherwise forces a fixed
   ratio box (.post-thumbnail height:0 + padding-bottom, absolute inner, img
   object-fit:cover), which crops/stretches. Scoped to .article-post-thumbnail
   so related-post card thumbnails keep their uniform cropped ratio. */
.single .article-post-thumbnail {
	height: auto !important;
	padding-bottom: 0 !important;
	margin: 0 0 1.75rem;
}
.single .article-post-thumbnail .post-thumbnail-inner {
	position: static !important;
}
.single .article-post-thumbnail img {
	position: static !important;
	width: 100%;
	height: auto !important;
	object-fit: initial !important;
	border-radius: 12px;
	display: block;
}

/* ---- Article header (eyebrow, title, deck, meta) ----------------------- */
.single-entry .entry-header { margin-bottom: 1.5rem; }

.post-eyebrow {
	display: inline-block;
	margin-bottom: 0.85rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--brand-sage);
	color: var(--brand-forest);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.post-eyebrow:hover { background: var(--brand-accent); color: #fff; }

.single-entry .entry-title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.15;
	margin: 0 0 0.6rem;
}

.post-deck {
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--global-palette5);
	margin: 0.4rem 0 1rem;
	max-width: 60ch;
}

/* "Follow us on Google" button (under the meta, above the featured image). */
.follow-google {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0.25rem;
	padding: 0.5rem 1rem;
	border: 1px solid #dadce0;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
	font-size: 0.9rem;
	font-weight: 400;
	color: #3c4043;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.follow-google strong {
	font-weight: 700;
	color: #202124;
}
.follow-google:hover {
	color: #3c4043;
	border-color: #c6c9cd;
	box-shadow: 0 1px 4px rgba(60, 64, 67, 0.18);
}
.follow-google-icon { flex: none; }

/* End-of-article "preferred source" callout */
.source-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	max-width: 68ch;
	margin: 2.75rem auto 0.5rem;
	padding: 1.5rem 1.75rem;
	/* Tint of the brand terracotta accent (matches the hero's accent wash). */
	background: rgba(197, 107, 62, 0.08);
	border: 1px solid rgba(197, 107, 62, 0.20);
	border-radius: 14px;
}
.source-callout-text { flex: 1 1 18rem; }
.source-callout-title {
	margin: 0 0 0.35rem;
	max-width: none;
	font-family: var(--global-heading-font-family);
	font-size: 1.45rem;
	line-height: 1.2;
	color: var(--brand-ink);
}
.source-callout p:not(.source-callout-title) {
	margin: 0;
	max-width: none;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--global-palette5);
}
.source-callout .follow-google { flex: none; margin: 0; }

@media (max-width: 600px) {
	.source-callout { padding: 1.25rem 1.35rem; }
}

.single-entry .entry-meta {
	font-size: 0.92rem;
	color: var(--global-palette5);
}
/* Category already appears as the eyebrow pill above the title; drop it from
   the meta row so it isn't duplicated next to author/date/read time. */
.single-entry .entry-meta .category-links { display: none; }

/* ---- Table of contents (LuckyWP, auto-inserted before first heading) ---- */
.single-content .lwptoc {
	max-width: 68ch;
	margin: 2rem auto 2.5rem;
	background: #f3f5ec; /* soft sage tint */
	border: 1px solid var(--brand-sand);
	border-left: 3px solid var(--brand-forest);
	border-radius: 10px;
	padding: 1.1rem 1.4rem;
}
/* The single visible box is .lwptoc above; neutralise LuckyWP's inner box. */
.single-content .lwptoc_i {
	display: block;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
.single-content .lwptoc_header { margin-bottom: 0.4rem; }
.single-content .lwptoc_title {
	font-family: var(--global-heading-font-family);
	font-size: 1.15rem;
	color: var(--brand-forest);
}
.single-content .lwptoc_items { font-size: 0.98rem; }
.single-content .lwptoc_item > a { color: var(--brand-ink); text-decoration: none; }
.single-content .lwptoc_item > a:hover { color: var(--brand-accent); text-decoration: underline; }
.single-content .lwptoc_toggle a { color: var(--brand-accent); }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 600px) {
	.single-content { font-size: 1.25rem; }
	/* Drop the white card on phones: content stretches to the width on the
	   cream page with a single modest side padding (no doubled inset, no box). */
	.single .entry-content-wrap {
		max-width: none;
		margin-inline: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 1.25rem 1.1rem;
	}
}

/* Trim Kadence's large (5rem) default gap above the article on mobile. */
@media (max-width: 767px) {
	.single .content-area {
		margin-top: 0.75rem;
		margin-bottom: 1.5rem;
	}
}