/* ==========================================================================
   Chef Standards — singular views (posts + pages)
   Loaded only on is_singular().
   ========================================================================== */

/* ---------- Layout ---------- */
.cs-single { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

/* The shared content+sidebar grid lives in main.css, because archives and
   the blog index use it too and they do not load this file.
   What stays here is singular-only: without a sidebar, an ARTICLE column
   centres itself on the reading measure. Scoped to .cs-single so it can
   never squash an archive's card grid. */
.cs-single .cs-single__layout:not(.has-sidebar) .cs-single__main {
	max-width: var(--cs-measure);
	margin-inline: auto;
}

/* ---------- Article header ---------- */
.cs-entry-header { max-width: var(--cs-measure); margin-bottom: var(--cs-s5); }
.cs-single__layout:not(.has-sidebar) .cs-entry-header { margin-inline: auto; }

.cs-entry-header__cats { display: flex; flex-wrap: wrap; gap: var(--cs-s3); margin-bottom: var(--cs-s3); }
.cs-entry-header__cats .cs-eyebrow { margin-bottom: 0; }

.cs-entry-title {
	font-size: var(--cs-fs-h1);
	line-height: 1.08;
	letter-spacing: -0.028em;
	margin-bottom: var(--cs-s4);
}

.cs-entry-dek {
	font-family: var(--cs-serif);
	font-size: var(--cs-fs-lead);
	line-height: 1.58;
	color: var(--cs-ink-2);
	margin-bottom: var(--cs-s5);
}

/* Byline — text only; no author image. */
.cs-byline {
	padding-block: var(--cs-s4);
	border-top: 1px solid var(--cs-line);
	border-bottom: 1px solid var(--cs-line);
}
.cs-byline__text { min-width: 0; font-family: var(--cs-sans); font-size: var(--cs-fs-meta); line-height: 1.45; }
.cs-byline__author { font-weight: 650; color: var(--cs-ink); font-size: var(--cs-fs-small); }
.cs-byline__author a { text-decoration: none; }
.cs-byline__author a:hover { color: var(--cs-ember); text-decoration: underline; }
.cs-byline__detail { color: var(--cs-ink-3); margin-top: 1px; }
.cs-byline__detail .cs-meta__sep { opacity: 0.45; }

/* ---------- Featured image (LCP) ---------- */
.cs-featured { margin-bottom: var(--cs-s6); }
.cs-featured__frame {
	background: var(--cs-surface-2);
	border-radius: var(--cs-radius-lg);
	overflow: hidden;
}
.cs-featured img { width: 100%; height: auto; display: block; }
.cs-featured figcaption {
	margin-top: var(--cs-s2);
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-meta);
	line-height: 1.45;
	color: var(--cs-ink-3);
}

/* ==========================================================================
   Prose — the reading experience
   ========================================================================== */
.cs-prose {
	font-family: var(--cs-serif);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.72;
	color: #262220;
	max-width: var(--cs-measure);
	overflow-wrap: break-word;
}
.cs-single__layout:not(.has-sidebar) .cs-prose { margin-inline: auto; }

.cs-prose > * { margin-block: 0 1.25em; }
.cs-prose > *:last-child { margin-bottom: 0; }

/* Paragraphs */
.cs-prose p { margin-bottom: 1.25em; }

/* Links in body copy — clearly a link, never shouty */
.cs-prose a:not(.wp-block-button__link):not(.cs-btn) {
	color: var(--cs-ember-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.17em;
	text-decoration-color: rgba(192, 67, 28, 0.42);
	transition: text-decoration-color 0.16s var(--cs-ease), color 0.16s var(--cs-ease);
}
.cs-prose a:not(.wp-block-button__link):not(.cs-btn):hover {
	color: var(--cs-ember);
	text-decoration-color: currentColor;
}

/* ---------- Headings in body copy ---------- */
.cs-prose h2,
.cs-prose h3,
.cs-prose h4,
.cs-prose h5,
.cs-prose h6 {
	font-family: var(--cs-display);
	color: var(--cs-ink);
	/* generous space above, tight below — binds a heading to its own text */
	scroll-margin-top: calc(var(--cs-header-h) + 1rem);
}

.cs-prose h2 {
	font-size: var(--cs-fs-h2);
	line-height: 1.18;
	letter-spacing: -0.02em;
	margin-top: 2em;
	margin-bottom: 0.5em;
	padding-top: 0.85em;
	border-top: 1px solid var(--cs-line);
}
/* A listicle's first section shouldn't start with a stray rule */
.cs-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.cs-prose h3 {
	font-size: var(--cs-fs-h3);
	line-height: 1.22;
	margin-top: 1.9em;
	margin-bottom: 0.45em;
}

.cs-prose h4 {
	font-size: var(--cs-fs-h4);
	line-height: 1.3;
	margin-top: 1.7em;
	margin-bottom: 0.4em;
}

.cs-prose h5, .cs-prose h6 {
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-ink-2);
	margin-top: 1.8em;
	margin-bottom: 0.4em;
}

/* A heading directly after an image shouldn't double up on space */
.cs-prose figure + h2 { margin-top: 1.4em; }

/* ---------- Lists ---------- */
.cs-prose ul, .cs-prose ol { padding-left: 1.4em; margin-bottom: 1.25em; }
.cs-prose li { margin-bottom: 0.5em; }
.cs-prose li > ul, .cs-prose li > ol { margin-top: 0.5em; margin-bottom: 0.5em; }
.cs-prose ul > li::marker { color: var(--cs-ember); }
.cs-prose ol > li::marker { color: var(--cs-ember); font-family: var(--cs-sans); font-weight: 650; font-size: 0.9em; }

/* ---------- Images and figures ---------- */
.cs-prose figure,
.cs-prose .wp-block-image { margin-block: 1.75em; }

.cs-prose img {
	border-radius: var(--cs-radius-lg);
	background: var(--cs-surface-2);
}

.cs-prose figcaption,
.cs-prose .wp-element-caption {
	margin-top: 0.7em;
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-meta);
	line-height: 1.5;
	color: var(--cs-ink-3);
	text-align: left;
}
.cs-prose figcaption a { color: inherit; }

.cs-prose .wp-block-image.alignleft,
.cs-prose .wp-block-image.alignright { max-width: min(50%, 20rem); }
.cs-prose .alignleft { float: left; margin: 0.4em 1.75em 1.25em 0; }
.cs-prose .alignright { float: right; margin: 0.4em 0 1.25em 1.75em; }
.cs-prose .aligncenter { margin-inline: auto; text-align: center; }
.cs-prose .aligncenter figcaption { text-align: center; }

@media (max-width: 599px) {
	/* floats are hostile on a phone */
	.cs-prose .alignleft, .cs-prose .alignright {
		float: none;
		margin-inline: 0;
		max-width: 100%;
	}
}

/* Wide / full alignments. Without a sidebar these can break the measure. */
.cs-single__layout:not(.has-sidebar) .cs-prose .alignwide {
	width: min(var(--cs-mid), calc(100vw - 2 * var(--cs-gutter)));
	max-width: none;
	margin-inline: calc(50% - min(var(--cs-mid), calc(100vw - 2 * var(--cs-gutter))) / 2);
}
.cs-prose .alignfull { max-width: 100%; }

/* ---------- Galleries ---------- */
.cs-prose .wp-block-gallery { margin-block: 1.75em; }
.cs-prose .wp-block-gallery img { border-radius: var(--cs-radius); }

/* ---------- Blockquote + pullquote ---------- */
.cs-prose blockquote,
.cs-prose .wp-block-quote {
	margin: 2em 0;
	padding: 0 0 0 1.4em;
	border-left: 3px solid var(--cs-ember);
	font-family: var(--cs-display);
	font-size: 1.15em;
	font-style: italic;
	line-height: 1.45;
	color: var(--cs-ink);
}
.cs-prose blockquote p:last-child { margin-bottom: 0; }
.cs-prose blockquote cite,
.cs-prose .wp-block-quote cite {
	display: block;
	margin-top: 0.75em;
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-meta);
	font-style: normal;
	font-weight: 600;
	color: var(--cs-ink-3);
}

.cs-prose .wp-block-pullquote {
	margin: 2.25em 0;
	padding: 1.5em 0;
	border-top: 2px solid var(--cs-ink);
	border-bottom: 2px solid var(--cs-ink);
	border-left: 0;
	text-align: center;
}
.cs-prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.cs-prose .wp-block-pullquote p {
	font-family: var(--cs-display);
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
	font-style: normal;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.015em;
}

/* ---------- Tables ---------- */
.cs-prose .wp-block-table,
.cs-prose figure.wp-block-table { margin-block: 1.75em; }

/* horizontal scroll container stops wide tables blowing out the layout */
.cs-prose .wp-block-table,
.cs-prose .cs-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cs-prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-small);
	line-height: 1.5;
}
.cs-prose th, .cs-prose td {
	padding: 0.7em 0.85em;
	border: 1px solid var(--cs-line);
	text-align: left;
	vertical-align: top;
}
.cs-prose th {
	background: var(--cs-surface);
	font-weight: 700;
	letter-spacing: 0.01em;
}
.cs-prose tbody tr:nth-child(even) td { background: rgba(247, 242, 233, 0.5); }
.cs-prose .wp-block-table figcaption { margin-top: 0.7em; }

/* ---------- Code ---------- */
.cs-prose code, .cs-prose kbd, .cs-prose samp {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--cs-surface);
	border: 1px solid var(--cs-line-soft);
	border-radius: 3px;
	padding: 0.12em 0.36em;
}
.cs-prose pre {
	margin-block: 1.75em;
	padding: 1.1em 1.25em;
	background: var(--cs-ink);
	color: #ece5db;
	border-radius: var(--cs-radius-lg);
	overflow-x: auto;
	font-size: var(--cs-fs-small);
	line-height: 1.6;
}
.cs-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* ---------- Misc blocks ---------- */
.cs-prose .wp-block-separator, .cs-prose hr {
	margin-block: 2.25em;
	border: 0;
	height: 1px;
	background: var(--cs-line);
}
.cs-prose .wp-block-separator.is-style-dots { background: none; }

.cs-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	background: var(--cs-ink);
	color: var(--cs-paper);
	border-radius: var(--cs-radius);
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-small);
	font-weight: 650;
	text-decoration: none;
	transition: background-color 0.18s var(--cs-ease);
}
.cs-prose .wp-block-button__link:hover { background: var(--cs-ember); color: #fff; }

.cs-prose .wp-block-embed { margin-block: 1.75em; }
.cs-prose .wp-block-embed__wrapper { position: relative; }
.cs-prose .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ''; display: block; padding-top: 56.25%; }
.cs-prose .wp-block-embed.wp-has-aspect-ratio iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--cs-radius-lg);
}

.cs-prose .has-drop-cap:first-letter {
	float: left;
	font-family: var(--cs-display);
	font-size: 3.4em;
	font-weight: 700;
	line-height: 0.82;
	margin: 0.08em 0.1em 0 0;
	color: var(--cs-ember);
}

.cs-prose .wp-block-columns { gap: var(--cs-s5); margin-block: 1.75em; }
.cs-prose .wp-block-group { margin-block: 1.75em; }

/* WordPress "page-break" / multipage links */
.cs-page-links {
	margin-top: var(--cs-s6);
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-small);
	font-weight: 600;
}
.cs-page-links a, .cs-page-links > span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding-inline: 0.5rem; margin-right: 0.35rem;
	border: 1px solid var(--cs-line); border-radius: var(--cs-radius); text-decoration: none;
}
.cs-page-links > span { background: var(--cs-ink); color: var(--cs-paper); border-color: var(--cs-ink); }

/* ==========================================================================
   Below the article
   ========================================================================== */

/* Tags */
.cs-tags { margin-top: var(--cs-s6); max-width: var(--cs-measure); }
.cs-single__layout:not(.has-sidebar) .cs-tags { margin-inline: auto; }
.cs-tags__list { display: flex; flex-wrap: wrap; gap: var(--cs-s2); }
.cs-tags a {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: 999px;
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-meta);
	font-weight: 600;
	color: var(--cs-ink-2);
	text-decoration: none;
}
.cs-tags a:hover { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-paper); }

/* Author box */
.cs-authorbox {
	margin-top: var(--cs-s7);
	padding: var(--cs-s5);
	background: var(--cs-surface);
	border-radius: var(--cs-radius-lg);
	max-width: var(--cs-measure);
	border-left: 3px solid var(--cs-ember);
}
.cs-single__layout:not(.has-sidebar) .cs-authorbox { margin-inline: auto; }
.cs-authorbox__body { min-width: 0; font-family: var(--cs-sans); }
.cs-authorbox__eyebrow {
	font-size: var(--cs-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cs-ink-3);
	margin-bottom: var(--cs-s1);
}
.cs-authorbox__name { font-family: var(--cs-display); font-size: 1.25rem; font-weight: 700; margin-bottom: var(--cs-s2); }
.cs-authorbox__name a { text-decoration: none; }
.cs-authorbox__name a:hover { color: var(--cs-ember); }
.cs-authorbox__bio { font-size: var(--cs-fs-small); line-height: 1.6; color: var(--cs-ink-2); }
.cs-authorbox__link { display: inline-block; margin-top: var(--cs-s3); font-size: var(--cs-fs-meta); font-weight: 650; color: var(--cs-ember); text-decoration: none; }
.cs-authorbox__link:hover { text-decoration: underline; }

/* Prev / next */
.cs-postnav {
	display: grid;
	gap: var(--cs-s3);
	margin-top: var(--cs-s7);
	max-width: var(--cs-measure);
}
.cs-single__layout:not(.has-sidebar) .cs-postnav { margin-inline: auto; }
@media (min-width: 600px) { .cs-postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-postnav__item {
	display: block;
	padding: var(--cs-s4);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
	text-decoration: none;
	transition: border-color 0.18s var(--cs-ease), background-color 0.18s var(--cs-ease);
}
.cs-postnav__item:hover { border-color: var(--cs-ink); background: var(--cs-surface); }
.cs-postnav__dir {
	display: block;
	font-family: var(--cs-sans);
	font-size: var(--cs-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cs-ember);
	margin-bottom: var(--cs-s2);
}
.cs-postnav__title { font-family: var(--cs-display); font-size: var(--cs-fs-h4); font-weight: 700; line-height: 1.25; }
.cs-postnav__item--next { text-align: right; }

/* Related */
.cs-related { margin-top: var(--cs-s8); }

/* Comments */
.cs-comments { margin-top: var(--cs-s8); max-width: var(--cs-measure); font-family: var(--cs-sans); }
.cs-single__layout:not(.has-sidebar) .cs-comments { margin-inline: auto; }
.cs-comments__title {
	font-family: var(--cs-display);
	font-size: var(--cs-fs-h2);
	margin-bottom: var(--cs-s5);
	padding-bottom: var(--cs-s3);
	border-bottom: 2px solid var(--cs-ink);
}
.cs-comments .comment-list { list-style: none; margin: 0 0 var(--cs-s6); padding: 0; }
.cs-comments .comment-list ol.children { list-style: none; margin: var(--cs-s4) 0 0; padding-left: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.cs-comments .comment-body { padding: var(--cs-s4) 0; border-bottom: 1px solid var(--cs-line-soft); }
.cs-comments .comment-author { display: flex; align-items: center; gap: var(--cs-s3); font-size: var(--cs-fs-small); font-weight: 650; }
.cs-comments .comment-author img { width: 40px; height: 40px; border-radius: 999px; }
.cs-comments .comment-metadata { margin-top: var(--cs-s1); font-size: var(--cs-fs-meta); color: var(--cs-ink-3); }
.cs-comments .comment-metadata a { color: inherit; text-decoration: none; }
.cs-comments .comment-content { margin-top: var(--cs-s3); font-family: var(--cs-serif); line-height: 1.65; }
.cs-comments .reply { margin-top: var(--cs-s2); font-size: var(--cs-fs-meta); font-weight: 650; }
.cs-comments .reply a { color: var(--cs-ember); text-decoration: none; }
.cs-comments .comment-respond { margin-top: var(--cs-s6); }
.cs-comments .comment-reply-title { font-family: var(--cs-display); font-size: var(--cs-fs-h3); margin-bottom: var(--cs-s3); }
.cs-comments .comment-form > p { margin-bottom: var(--cs-s4); }
.cs-comments .comment-form label { display: block; margin-bottom: var(--cs-s1); font-size: var(--cs-fs-meta); font-weight: 650; }
.cs-comments .comment-form .submit {
	min-height: 44px; padding: 0.6rem 1.4rem; background: var(--cs-ink); color: var(--cs-paper);
	border: 1px solid var(--cs-ink); border-radius: var(--cs-radius); font-weight: 650; cursor: pointer;
}
.cs-comments .comment-form .submit:hover { background: var(--cs-ember); border-color: var(--cs-ember); }
.cs-comments .comment-notes, .cs-comments .form-submit + p { font-size: var(--cs-fs-meta); color: var(--cs-ink-3); }