/*
 * Article body styles for Bright City Cleaning.
 *
 * WHY THIS FILE EXISTS
 * The Claude Design stylesheet deliberately resets the elements a page builder
 * would otherwise style for it:
 *
 *     p  { margin: 0; }
 *     ul { margin: 0; padding: 0; list-style: none; }
 *     h1, h2, h3, h4 { margin: 0; }
 *
 * That is correct for the six hand-built pages, where every gap is set by a
 * flex/grid `gap`. It is wrong for prose typed into the WordPress editor, which
 * emits bare <p>, <h2>, <ul> and relies on default margins. Without this file an
 * article renders as one unbroken wall of text with no bullets.
 *
 * So this restores prose defaults, scoped to .article-body only, using nothing
 * but the design's own custom properties. It is loaded solely on single posts
 * and archives. assets/css/site.css remains byte-identical to the source.
 */

/* --------------------------------------------------------------------------
   Measure
   The design sets .section-head to 62ch. Running body copy wants a little
   more; 68ch keeps lines in the comfortable 60-75 character range.
   -------------------------------------------------------------------------- */

.article-body {
	max-width: 68ch;
	font-size: var(--text-lg);
	line-height: var(--leading-body);
	color: var(--color-ink);
}

/* Vertical rhythm: one owl selector rather than per-element margins, so
   nothing double-spaces or collapses unpredictably. */
.article-body > * + * {
	margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Headings
   The source scale is used verbatim: .h2 = clamp(1.75rem, 4vw, --text-3xl),
   .h3 = --text-xl. h4/h5 continue downward on the same ramp.
   Headings get more space above than below, so each binds to its own text.
   -------------------------------------------------------------------------- */

.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-snug);
	text-wrap: balance;
}

.article-body > h2 { font-size: clamp(1.5rem, 3vw, var(--text-2xl)); }
.article-body > h3 { font-size: var(--text-xl); }
.article-body > h4 { font-size: var(--text-lg); }
.article-body > h5,
.article-body > h6 {
	font-family: var(--font-label);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
}

.article-body > h2 + *,
.article-body > h3 + *,
.article-body > h4 + *,
.article-body > h5 + *,
.article-body > h6 + * {
	margin-top: var(--space-3);
}

.article-body > * + h2 { margin-top: var(--space-7); }
.article-body > * + h3 { margin-top: var(--space-6); }
.article-body > * + h4,
.article-body > * + h5,
.article-body > * + h6 { margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   Lists - the reset removed markers and indentation; put them back
   -------------------------------------------------------------------------- */

.article-body ul,
.article-body ol {
	margin: 0;
	padding-left: var(--space-5);
	list-style: revert;
}
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }

.article-body li + li { margin-top: var(--space-2); }
.article-body li::marker { color: var(--color-primary-dark); }
.article-body ol li::marker {
	color: var(--color-ink-faint);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

/* Nested lists sit tighter than top-level ones. */
.article-body li > ul,
.article-body li > ol {
	margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Inline
   -------------------------------------------------------------------------- */

.article-body a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--color-accent-dark); }

.article-body strong,
.article-body b { font-weight: 600; color: var(--color-ink); }

.article-body em,
.article-body i { font-style: italic; }

.article-body code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: var(--color-surface-muted);
	border: var(--border-hairline);
	border-radius: var(--radius-xs);
	padding: 1px 5px;
}

.article-body pre {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: 1.5;
	background: var(--color-surface-muted);
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	overflow-x: auto;
}
.article-body pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
}

/* --------------------------------------------------------------------------
   Media - matches the design's .media treatment
   -------------------------------------------------------------------------- */

.article-body img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* An inline image is not a photograph. WordPress serves typed emoji as <img>
   tags, and the rule above inflated a 16px emoji to the full column width.
   Anything explicitly marked as an emoji, or sized like one, stays inline at
   text size. (inc/blog.php also converts most of them to plain characters, so
   this is the belt to that braces - it covers any that slip through.) */
.article-body img.wp-smiley,
.article-body img.emoji,
.article-body img[src*="/emoji/"],
.article-body img[width="16"],
.article-body img[height="16"] {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.12em;
	margin: 0 0.15em 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* A decorative emoji swapped for one of the design's own Lucide icons.
   Uses the design's .icon mask mechanism; this only sets it inline in prose. */
.article-body .bcc-inline-icon {
	vertical-align: -0.12em;
	margin-right: 0.35em;
	color: var(--color-primary-dark);
}

.article-body figure { margin: 0; }
.article-body figcaption {
	margin-top: var(--space-3);
	font-family: var(--font-label);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	color: var(--color-ink-faint);
}

/* WordPress alignment classes, kept working inside the measure. */
.article-body .aligncenter { margin-inline: auto; }
.article-body .alignwide,
.article-body .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(-1 * var(--space-5));
}
@media (max-width: 640px) {
	.article-body .alignwide,
	.article-body .alignfull { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   Blockquote - borrows the weight of the design's .quote blockquote,
   set as a rule-and-indent rather than a card so it sits inside prose.
   -------------------------------------------------------------------------- */

.article-body blockquote {
	margin: 0;
	padding-left: var(--space-5);
	border-left: 3px solid var(--color-primary);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	line-height: 1.35;
	letter-spacing: var(--tracking-tight);
	color: var(--color-ink);
}
.article-body blockquote p { font-size: inherit; }
.article-body blockquote cite {
	display: block;
	margin-top: var(--space-3);
	font-family: var(--font-label);
	font-size: var(--text-xs);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-faint);
}

.article-body hr {
	height: 1px;
	background: var(--color-line);
	border: 0;
	margin-block: var(--space-6);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.article-body .table-scroll { overflow-x: auto; }
.article-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}
.article-body th,
.article-body td {
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-bottom: var(--border-hairline);
	vertical-align: top;
}
.article-body th {
	font-family: var(--font-label);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-faint);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Article furniture
   -------------------------------------------------------------------------- */

/* Lede paragraph, set by the template from the excerpt. */
.article-lede {
	max-width: 62ch;
	font-size: var(--text-xl);
	line-height: 1.45;
	color: var(--color-ink-soft);
}

/* Meta row under the title: category, date, reading time. */
.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	font-family: var(--font-label);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-faint);
}
.article-meta a { color: inherit; text-decoration: none; }
.article-meta a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.article-meta .sep { color: var(--color-line); }

.article-hero-media {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   Share row - pills in the design's .badge idiom, made interactive
   -------------------------------------------------------------------------- */

.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-6);
	margin-top: var(--space-7);
	border-top: var(--border-hairline);
}
.share-label {
	font-family: var(--font-label);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-faint);
	margin-right: var(--space-1);
}
.share-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.share-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-label);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px var(--space-3);
	border-radius: var(--radius-pill);
	border: var(--border-hairline);
	background: var(--color-surface-muted);
	color: var(--color-ink-soft);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .14s cubic-bezier(.2,0,.2,1),
	            border-color .14s cubic-bezier(.2,0,.2,1),
	            color .14s cubic-bezier(.2,0,.2,1);
}
.share-btn:hover,
.share-btn:focus-visible {
	background: var(--color-surface);
	border-color: var(--color-primary-dark);
	color: var(--color-ink);
	text-decoration: none;
}
.share-btn .icon { width: 14px; height: 14px; }
.share-btn[aria-live] { min-width: 0; }

/* Copy-link button confirmation, driven by a data attribute the inline
   script flips. No layout shift: the label swaps in place. */
.share-btn[data-copied="true"] {
	border-color: var(--color-success);
	color: var(--color-success);
	background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Post navigation
   -------------------------------------------------------------------------- */

.post-nav {
	display: grid;
	gap: var(--space-4);
	padding-top: var(--space-6);
	margin-top: var(--space-6);
	border-top: var(--border-hairline);
}
@media (min-width: 640px) {
	.post-nav { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
	.post-nav .post-nav-next { text-align: right; }
}
.post-nav a {
	display: grid;
	gap: var(--space-2);
	text-decoration: none;
	color: inherit;
}
.post-nav .post-nav-dir {
	font-family: var(--font-label);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-faint);
}
.post-nav .post-nav-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}
.post-nav a:hover .post-nav-title { color: var(--color-accent-dark); }

/* --------------------------------------------------------------------------
   Listing extras (blog index + archives)
   -------------------------------------------------------------------------- */

.post-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-md);
}

@media (min-width: 900px) {
	.post-has-thumb {
		grid-template-columns: 200px 1fr;
		gap: var(--space-5);
		align-items: start;
	}
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-7);
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 8px var(--space-3);
	border-radius: var(--radius-pill);
	border: var(--border-hairline);
	background: var(--color-surface-muted);
	color: var(--color-ink-soft);
	font-family: var(--font-label);
	font-size: var(--text-sm);
	text-decoration: none;
}
.pagination .page-numbers:hover {
	border-color: var(--color-primary-dark);
	color: var(--color-ink);
}
.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
	.share,
	.post-nav { display: none; }
	.article-body { max-width: none; font-size: 11pt; }
}