/* =========================================================================
   WeatherDuck — Article (single post)
   =========================================================================
   Loaded on the front end AND inside the block editor, so what you type is
   what you publish.

   Every rule is scoped with :is(.wd-article, .editor-styles-wrapper) —
   the first matches the published page, the second matches the block
   editor canvas. Add a selector to that list, never a whole duplicate rule.

   Colours, spacing and sizes come from design-tokens.css. Don't hardcode.
   ========================================================================= */

:is(.wd-article, .editor-styles-wrapper) {
	/* Local knobs, derived from the global tokens. */
	--wd-article-measure: var(--wd-content-max);
	--wd-article-shell: var(--wd-content-max);
	--wd-article-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wd-article-font-head: var(--wd-font);
	--wd-article-rhythm: var(--wd-space-2xl);
}

/* === Page frame (front end only) === */

.wd-article-page {
	background: var(--wd-bg-page);
	padding: var(--wd-space-3xl) var(--wd-space-lg) calc(var(--wd-space-3xl) * 2);
}

.wd-article {
	max-width: var(--wd-article-shell);
	margin: 0 auto;
}

/* Use the forecast interface's content width throughout the article. */
.wd-article__head,
.wd-article .wd-article__body > :not(.wp-block-table, .wp-block-image, .wp-block-gallery),
.wd-article__author {
	max-width: var(--wd-article-measure);
	margin-left: auto;
	margin-right: auto;
}

/* === Shared typography === */

:is(.wd-article, .editor-styles-wrapper) {
	font-family: var(--wd-article-font-body);
	font-size: var(--wd-font-size-lg);
	line-height: 1.7;
	color: var(--wd-text-primary);
}

:is(.wd-article, .editor-styles-wrapper) :is(h1, h2, h3, h4) {
	font-family: var(--wd-article-font-head);
	color: var(--wd-text-primary);
	line-height: 1.2;
	text-wrap: balance;
	margin: var(--wd-article-rhythm) 0 var(--wd-space-md);
}

:is(.wd-article, .editor-styles-wrapper) h1 {
	font-size: clamp(var(--wd-font-size-3xl), 5vw, var(--wd-font-size-4xl));
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 0;
}

:is(.wd-article, .editor-styles-wrapper) h2 {
	font-size: var(--wd-font-size-2xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	padding-top: var(--wd-space-lg);
	border-top: 1px solid var(--wd-border);
}

:is(.wd-article, .editor-styles-wrapper) h3 {
	font-size: var(--wd-font-size-xl);
	font-weight: 600;
}

:is(.wd-article, .editor-styles-wrapper) p {
	margin: 0 0 var(--wd-space-xl);
}

:is(.wd-article, .editor-styles-wrapper) :is(ul, ol) {
	margin: 0 0 var(--wd-space-xl);
	padding-left: var(--wd-space-2xl);
}

:is(.wd-article, .editor-styles-wrapper) li {
	margin-bottom: var(--wd-space-sm);
}

:is(.wd-article, .editor-styles-wrapper) li::marker {
	color: var(--wd-green);
}

:is(.wd-article, .editor-styles-wrapper) strong {
	font-weight: 700;
}

:is(.wd-article, .editor-styles-wrapper) a {
	color: var(--wd-green);
	text-underline-offset: 0.18em;
}

:is(.wd-article, .editor-styles-wrapper) a:hover {
	color: var(--wd-green-hover);
}

/* === Short-answer callout (blockquote) === */

:is(.wd-article, .editor-styles-wrapper) blockquote {
	margin: var(--wd-article-rhythm) 0;
	padding: var(--wd-card-padding);
	background: var(--wd-green-light);
	border-left: 4px solid var(--wd-green);
	border-radius: var(--wd-radius-sm);
	font-size: var(--wd-font-size-lg);
}

:is(.wd-article, .editor-styles-wrapper) blockquote p:last-child {
	margin-bottom: 0;
}

/* === Tables === */

:is(.wd-article, .editor-styles-wrapper) .wp-block-table {
	margin: var(--wd-article-rhythm) 0;
	overflow-x: auto;          /* keeps wide tables off the page scrollbar */
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-md);
	background: var(--wd-bg-card);
	box-shadow: var(--wd-shadow-sm);
}

:is(.wd-article, .editor-styles-wrapper) .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 30rem;
	font-family: var(--wd-article-font-head);
	font-size: var(--wd-font-size-md);
	line-height: 1.5;
}

:is(.wd-article, .editor-styles-wrapper) .wp-block-table :is(th, td) {
	padding: var(--wd-space-md) var(--wd-space-lg);
	border: 0;
	border-bottom: 1px solid var(--wd-border);
	text-align: left;
	vertical-align: top;
}

:is(.wd-article, .editor-styles-wrapper) .wp-block-table th {
	font-size: var(--wd-font-size-sm);
	font-weight: 700;
	color: var(--wd-text-secondary);
	background: var(--wd-bg-subtle);
	border-bottom: 1px solid var(--wd-border-strong);
	white-space: nowrap;
}

:is(.wd-article, .editor-styles-wrapper) .wp-block-table tr:last-child td {
	border-bottom: 0;
}

:is(.wd-article, .editor-styles-wrapper) .wp-block-table figcaption {
	padding: var(--wd-space-md) var(--wd-space-lg);
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-muted);
}

/* === Images and separators === */

:is(.wd-article, .editor-styles-wrapper) :is(img, .wp-block-image img) {
	max-width: 100%;
	height: auto;
	border-radius: var(--wd-radius-md);
}

:is(.wd-article, .editor-styles-wrapper) figcaption {
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-muted);
	margin-top: var(--wd-space-sm);
}

:is(.wd-article, .editor-styles-wrapper) hr {
	margin: var(--wd-article-rhythm) 0;
	border: 0;
	border-top: 1px solid var(--wd-border);
}

/* === Article head (front end only) === */

.wd-article__head {
	margin-bottom: var(--wd-space-2xl);
}

.wd-article__kicker {
	font-family: var(--wd-article-font-head);
	font-size: var(--wd-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wd-green);
	margin: 0 0 var(--wd-space-md);
}

.wd-article__title {
	margin: 0 0 var(--wd-space-lg);
}

.wd-article__standfirst {
	font-size: var(--wd-font-size-xl);
	line-height: 1.5;
	color: var(--wd-text-secondary);
	margin: 0 0 var(--wd-space-xl);
}

.wd-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wd-space-sm) var(--wd-space-lg);
	font-family: var(--wd-article-font-head);
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-muted);
	padding-bottom: var(--wd-space-lg);
	border-bottom: 1px solid var(--wd-border);
}

.wd-article__byline {
	color: var(--wd-text-secondary);
	font-weight: 600;
}

.wd-article__hero {
	margin: 0 0 var(--wd-article-rhythm);
}

/* === Author box === */

.wd-article__author {
	display: flex;
	gap: var(--wd-space-lg);
	align-items: flex-start;
	margin-top: var(--wd-space-3xl);
	padding: var(--wd-card-padding);
	background: var(--wd-bg-card);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-md);
	box-shadow: var(--wd-shadow-sm);
}

.wd-article__avatar {
	border-radius: var(--wd-radius-pill);
	flex: none;
}

.wd-article__author-name {
	font-family: var(--wd-article-font-head);
	font-weight: 700;
	font-size: var(--wd-font-size-md);
	margin: 0 0 var(--wd-space-xs);
}

.wd-article__author-bio {
	font-size: var(--wd-font-size-md);
	color: var(--wd-text-secondary);
	margin: 0;
	line-height: 1.6;
}

/* === Block editor canvas === */

.editor-styles-wrapper {
	background: var(--wd-bg-page);
}

/* Match the published reading column so line breaks land in the same place. */
.editor-styles-wrapper .wp-block {
	max-width: var(--wd-article-measure);
}

.editor-styles-wrapper :is(.wp-block-table, .wp-block-image, .wp-block-gallery) {
	max-width: var(--wd-article-shell);
}

.editor-styles-wrapper .wp-block[data-align="wide"],
.editor-styles-wrapper .wp-block[data-align="full"] {
	max-width: none;
}

/* The editor renders the post title separately — style it to match the page. */
.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title {
	font-family: var(--wd-article-font-head);
	font-size: clamp(var(--wd-font-size-3xl), 5vw, var(--wd-font-size-4xl));
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* === Responsive === */

@media (max-width: 768px) {
	.wd-article-page {
		padding: var(--wd-space-2xl) var(--wd-space-md) var(--wd-space-3xl);
	}

	:is(.wd-article, .editor-styles-wrapper) {
		--wd-article-rhythm: var(--wd-space-xl);
		font-size: var(--wd-font-size-md);
	}

	:is(.wd-article, .editor-styles-wrapper) h2 {
		font-size: var(--wd-font-size-xl);
	}

	.wd-article__standfirst {
		font-size: var(--wd-font-size-lg);
	}

	/* Keep wide evidence images inside the phone viewport while preserving
	   their wider presentation on larger screens. */
	:is(.wd-article .wd-article__body, .editor-styles-wrapper)
		> :is(.wp-block-image, figure).alignwide {
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: 100%;
		margin-inline: 0;
	}

	:is(.wd-article .wd-article__body, .editor-styles-wrapper)
		> :is(.wp-block-image, figure).alignwide > :is(img, a),
	:is(.wd-article .wd-article__body, .editor-styles-wrapper)
		> :is(.wp-block-image, figure).alignwide > a > img {
		display: block;
		inline-size: 100%;
		max-inline-size: 100%;
		block-size: auto;
	}

	/* Two-column evidence tables become stacked cards. This is easier to scan
	   than a horizontally scrolling table on a phone. */
	:is(.wd-article, .editor-styles-wrapper) .wp-block-table {
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	:is(.wd-article, .editor-styles-wrapper) .wp-block-table table,
	:is(.wd-article, .editor-styles-wrapper) .wp-block-table tbody,
	:is(.wd-article, .editor-styles-wrapper) .wp-block-table tr,
	:is(.wd-article, .editor-styles-wrapper) .wp-block-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	:is(.wd-article, .editor-styles-wrapper) .wp-block-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	:is(.wd-article, .editor-styles-wrapper) .wp-block-table tbody {
		display: grid;
		gap: var(--wd-space-md);
	}

	:is(.wd-article, .editor-styles-wrapper) .wp-block-table tr {
		background: var(--wd-bg-card);
		border: 1px solid var(--wd-border);
		border-radius: var(--wd-radius-md);
		box-shadow: var(--wd-shadow-sm);
		overflow: hidden;
	}

	:is(.wd-article, .editor-styles-wrapper) .wp-block-table td {
		padding: var(--wd-space-md) var(--wd-space-lg);
		border-bottom: 0;
	}

	:is(.wd-article, .editor-styles-wrapper) .wp-block-table td:first-child {
		font-size: var(--wd-font-size-sm);
		font-weight: 700;
		color: var(--wd-text-secondary);
		background: var(--wd-bg-subtle);
		border-bottom: 1px solid var(--wd-border);
	}
}

@media (max-width: 480px) {
	.wd-article__author {
		flex-direction: column;
		gap: var(--wd-space-md);
	}
}