/*
 * article.css — single blog POST template (templates/single.html).
 * Ports the "article" section of _design/site-mockup.html 1:1 into the live
 * theme. Recipes use single-recipe.html and are NOT affected by this file.
 *
 * RTL Arabic, mobile-first. All colors/tokens go through theme.json presets
 * + the --ka-* mode vars (color-modes.css) so all six color modes recolor
 * everything — no orphaned light/dark values.
 *
 * Reuses from style.css / _base.css (do not redefine here):
 *   .ka-eyebrow, .ka-btn, .ka-btn--ghost, .ka-rcard (+ children),
 *   .ka-rec-grid, .ka-rec-head, .ka-crumb, .ka-pager
 * This file only adds the article column, byline, cover, prose system,
 * share row, and a few single-post polish tweaks.
 */

/* ============================================================
   Article column — narrow, centered reading measure
   ============================================================ */
.ka-article {
	max-width: 780px;
	margin-inline: auto;
}

/* breadcrumb sits above the article, constrained to the reading column */
main > .ka-crumb {
	max-width: 780px;
	margin-inline: auto;
}

/* category eyebrow: .ka-eyebrow already styles the chip; just space + reset link */
.ka-article__cat {
	margin-top: 1.2rem;
	margin-bottom: 0;
}
.ka-article__cat a {
	color: inherit;
	text-decoration: none;
}

/* title */
.ka-article__title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--heading);
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.2;
	font-weight: 700;
	margin: 0.8rem 0 0;
}

/* ============================================================
   Byline — avatar + author + date + reading time
   ============================================================ */
.ka-byline {
	align-items: center;
	gap: 0.8rem;
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	margin: 1.2rem 0 0;
}
.ka-byline__av {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1;
}
/* mirror the mockup: in dark modes the avocado seed reads as lime */
html[data-mode="dark"] .ka-byline__av,
html[data-mode="navy"] .ka-byline__av,
html[data-mode="sepiadark"] .ka-byline__av {
	color: var(--wp--preset--color--accent);
}
.ka-byline__meta {
	gap: 0.15rem;
}
.ka-byline__name {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}
.ka-byline__name a {
	color: inherit;
	text-decoration: none;
}
.ka-byline__sub {
	color: var(--wp--preset--color--contrast-muted);
}
.ka-byline__sub .wp-block-post-date,
.ka-byline__sub time {
	font-variant-numeric: tabular-nums;
}
.ka-byline__dot {
	opacity: 0.7;
}

/* ============================================================
   Cover image
   ============================================================ */
.ka-article__cover {
	margin: 1.4rem 0 1.8rem;
}
.ka-article__cover img,
.ka-article__cover .wp-block-post-featured-image__overlay {
	border-radius: var(--wp--custom--radius--lg);
}
.ka-article__cover img {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	display: block;
	box-shadow: var(--wp--custom--shadow--strong);
}

/* ============================================================
   Prose — the article body typography system
   ============================================================ */
.ka-prose {
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--contrast);
	line-height: 1.95;
	font-size: 1.05rem;
}

/* spacing rhythm between flow children */
.ka-prose > * {
	margin-block: 0;
}
.ka-prose > * + * {
	margin-top: 1.1rem;
}

/* headings */
.ka-prose h2,
.ka-prose h3,
.ka-prose h4 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--heading);
	font-weight: 700;
	line-height: 1.3;
}
.ka-prose h2 {
	font-size: clamp(1.45rem, 3.4vw, 1.7rem);
	margin-top: 2.2rem;
	margin-bottom: 0.2rem;
}
.ka-prose h3 {
	font-size: clamp(1.2rem, 2.8vw, 1.35rem);
	margin-top: 1.8rem;
	margin-bottom: 0.2rem;
}
.ka-prose h4 {
	font-size: 1.1rem;
	margin-top: 1.4rem;
	margin-bottom: 0.2rem;
}
/* tighten the gap when a paragraph follows a heading */
.ka-prose h2 + *,
.ka-prose h3 + *,
.ka-prose h4 + * {
	margin-top: 0.6rem;
}

.ka-prose p {
	line-height: 1.95;
	overflow-wrap: anywhere;
}

/* links — use primary-strong so the link reads on dark surfaces too
   (in the 3 dark modes primary-strong is the LIGHT tone; in light modes
   it is the darker green/terracotta/blue, which still clears AA on surface). */
.ka-prose a {
	color: var(--wp--preset--color--primary-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--primary-strong) 45%, transparent);
	transition: text-decoration-color var(--wp--custom--transition--base) var(--wp--custom--transition--ease);
}
.ka-prose a:hover {
	text-decoration-color: var(--wp--preset--color--primary-strong);
}

/* lists */
.ka-prose ul,
.ka-prose ol {
	margin: 1.1rem 0;
	padding-inline-start: 1.6rem;
	display: grid;
	gap: 0.5rem;
}
.ka-prose ul {
	list-style: none;
	padding-inline-start: 0;
}
.ka-prose ul > li {
	position: relative;
	padding-inline-start: 1.7rem;
}
.ka-prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.35rem;
	top: 0.78em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
.ka-prose ol {
	list-style: decimal;
}
.ka-prose ol > li {
	padding-inline-start: 0.4rem;
}
.ka-prose ol > li::marker {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}
.ka-prose li {
	line-height: 1.85;
}
.ka-prose li > ul,
.ka-prose li > ol {
	margin: 0.5rem 0 0;
}

/* strong / emphasis */
.ka-prose strong,
.ka-prose b {
	color: var(--wp--preset--color--heading);
	font-weight: 800;
}

/* blockquote */
.ka-prose blockquote {
	margin: 1.6rem 0;
	padding: 1rem 1.3rem;
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--contrast);
	font-size: 1.08rem;
}
.ka-prose blockquote > :first-child {
	margin-top: 0;
}
.ka-prose blockquote > :last-child {
	margin-bottom: 0;
}
.ka-prose blockquote cite {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.85rem;
	font-style: normal;
	color: var(--wp--preset--color--contrast-muted);
}

/* images / figures inside the body */
.ka-prose img,
.ka-prose .wp-block-image img {
	border-radius: var(--wp--custom--radius--lg);
	display: block;
}
.ka-prose figure {
	margin: 1.6rem 0;
}
.ka-prose figcaption {
	margin-top: 0.6rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* inline code + code blocks */
.ka-prose :not(pre) > code {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--heading);
	padding: 0.15em 0.45em;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--preset--color--border);
	direction: ltr;
	unicode-bidi: embed;
}
.ka-prose pre {
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.1rem 1.3rem;
	overflow-x: auto;
	font-size: 0.92rem;
	line-height: 1.7;
	direction: ltr;
	text-align: start;
}
.ka-prose pre code {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--contrast);
}

/* tables */
.ka-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin: 1.4rem 0;
}
.ka-prose th,
.ka-prose td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	text-align: start;
}
.ka-prose th {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--heading);
	font-weight: 700;
}

/* horizontal rule */
.ka-prose hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 2rem 0;
}

/* ============================================================
   Tags + share row
   ============================================================ */
.ka-article__tags {
	margin-top: 1.8rem;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}
.ka-article__tags a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}
.ka-article__tags a:hover {
	color: var(--wp--preset--color--primary);
}

.ka-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.ka-share .ka-btn {
	font-size: 0.95rem;
	padding: 0.65rem 1.2rem;
}
.ka-share svg {
	flex: none;
}

/* ============================================================
   Related section — reuses .ka-rec-head / .ka-rec-grid / .ka-rcard
   from style.css; only the read-also header link + excerpt here.
   ============================================================ */
.ka-rec-head__link {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.ka-rec-head__link:hover {
	color: var(--wp--preset--color--primary-strong);
}
.ka-rec-head__link svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.ka-rcard__excerpt {
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.92rem;
	line-height: 1.7;
	margin: 0.5rem 0 0;
}
.ka-rcard__excerpt p {
	margin: 0;
}

/* ============================================================
   Comments — clean, on-brand
   ============================================================ */
.ka-comments {
	margin-top: 0;
	padding-top: 2.2rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.ka-comments__title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--heading);
	font-weight: 700;
	margin: 0 0 1.4rem;
}
.ka-comment {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding: 1.1rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.ka-comment:first-of-type {
	border-top: 0;
}
.ka-comment__av {
	flex: none;
}
.ka-comment__av img {
	border-radius: 999px;
	display: block;
}
.ka-comment__main {
	min-width: 0;
	flex: 1;
}
.ka-comment__name,
.ka-comment__name a {
	color: var(--wp--preset--color--heading);
	font-weight: 700;
	text-decoration: none;
}
.ka-comment__body {
	color: var(--wp--preset--color--contrast);
	line-height: 1.8;
}
.ka-comment__body p {
	margin: 0;
}
.ka-comments__form {
	margin-top: 2rem;
	padding: 1.6rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}
.ka-comments__form label {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--heading);
	margin-bottom: 0.4rem;
	font-size: 0.92rem;
}
.ka-comments__form input[type="text"],
.ka-comments__form input[type="email"],
.ka-comments__form input[type="url"],
.ka-comments__form textarea {
	width: 100%;
	padding: 0.7rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
}
.ka-comments__form .wp-block-button__link,
.ka-comments__form .form-submit input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	font-weight: 700;
	padding: 0.7rem 1.6rem;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

/* ============================================================
   Mobile refinement (≤ 480px) — keep it very readable on phones
   ============================================================ */
@media (max-width: 480px) {
	.ka-prose {
		font-size: 1.02rem;
	}
	.ka-byline {
		gap: 0.6rem;
		font-size: 0.85rem;
	}
	.ka-article__cover {
		margin: 1.1rem 0 1.4rem;
	}
	.ka-article__cover img {
		aspect-ratio: 16 / 10;
	}
	.ka-share .ka-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	.ka-comments__form {
		padding: 1.2rem;
	}
}

/* respect reduced-motion for any link/transition niceties */
@media (prefers-reduced-motion: reduce) {
	.ka-prose a {
		transition: none;
	}
}