/*
 * Lucid: article stylesheet (singular views only; also loaded in the editor).
 *
 * Contents
 *  1. Article header, meta and media
 *  2. Facts bar
 *  3. Long-form content
 *  4. Block styles (also used in the editor)
 *  5. Table of contents
 *  6. Article footer: tags, author, post navigation, related
 *  7. Comments
 */

/* 1. Article header, meta and media --------------------------------------- */
.entry {
	min-width: 0;
}

.entry-header,
.entry-footer,
.facts {
	max-width: var(--lc-measure, 40rem);
	margin-inline: auto;
}

.entry-kicker {
	margin: 0 0 0.5rem;
}

.entry-title {
	margin: 0;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
	line-height: 1.15;
}

.entry-subtitle {
	margin: 0.75rem 0 0;
	color: var(--lc-muted);
	font-size: 1.2rem;
	line-height: 1.45;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 1rem 0 0;
	color: var(--lc-muted);
	font-size: 0.9rem;
}

.entry-media {
	max-width: var(--lc-wide, 56rem);
	margin: 1.75rem auto 0;
}

.entry-media__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-radius, 6px);
}

.entry-media__caption {
	margin-top: 0.5rem;
	color: var(--lc-muted);
	font-size: 0.875rem;
}

/* 2. Facts bar ------------------------------------------------------------- */
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin-block: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	background: var(--lc-surface-alt);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius, 6px);
}

.facts__item {
	min-width: 7rem;
}

.facts dt {
	color: var(--lc-muted);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.facts dd {
	margin: 0;
	font-weight: 600;
}

/* 3. Long-form content ----------------------------------------------------- */
.entry-content {
	max-width: var(--lc-wide, 56rem);
	margin: 2rem auto 0;
	font-size: 1.125rem;
	line-height: 1.75;
}

.entry-content > * {
	max-width: var(--lc-measure, 40rem);
	margin-inline: auto;
}

.entry-content > * + * {
	margin-block: 1.35em 0;
}

.entry-content > .alignwide,
.entry-content > .wp-block-table,
.entry-content > .wp-block-code,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed {
	max-width: var(--lc-wide, 56rem);
}

.entry-content > .alignfull {
	max-width: none;
}

.entry-content > :is(h2, h3, h4, h5, h6) {
	margin-block: 2.2em 0;
	line-height: 1.25;
}

.entry-content > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.75em;
}

.entry-content h2 {
	font-size: 1.75rem;
}

.entry-content h3 {
	font-size: 1.375rem;
}

.entry-content h4 {
	font-size: 1.15rem;
}

/* Linked headings and anchors land below a sticky header. */
.entry-content :is(h2, h3, h4) {
	scroll-margin-top: var(--lc-scroll-offset, 1rem);
}

.entry-content a {
	text-decoration-thickness: 0.08em;
}

.entry-content :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.entry-content li + li {
	margin-top: 0.35em;
}

.entry-content li > :is(ul, ol) {
	margin-top: 0.35em;
}

.entry-content img {
	height: auto;
}

.entry-content :is(figcaption, .wp-element-caption) {
	margin-top: 0.5rem;
	color: var(--lc-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.entry-content blockquote {
	margin-inline: auto;
	padding: 0.25rem 0 0.25rem 1.1rem;
	border-inline-start: 4px solid var(--lc-accent);
}

.entry-content blockquote p {
	margin: 0;
}

.entry-content blockquote p + p {
	margin-top: 0.75em;
}

.entry-content :is(cite, .wp-block-quote__citation) {
	display: block;
	margin-top: 0.5rem;
	color: var(--lc-muted);
	font-size: 0.9rem;
	font-style: normal;
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--lc-border);
	margin-block: 2.5rem;
}

.entry-content :not(pre) > code,
.entry-content kbd {
	padding: 0.1em 0.35em;
	background: var(--lc-surface-alt);
	border: 1px solid var(--lc-border);
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.88em;
}

.entry-content pre,
.wp-block-code {
	padding: 1rem 1.15rem;
	overflow-x: auto;
	background: #14161f;
	color: #eef0f6;
	border-radius: var(--lc-radius, 6px);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9rem;
	line-height: 1.6;
	tab-size: 4;
}

.entry-content pre code,
.wp-block-code code {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	white-space: pre;
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: 0.975rem;
	line-height: 1.5;
}

.wp-block-table :is(th, td) {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--lc-border);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	background: var(--lc-surface-alt);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--lc-surface-alt);
}

/* Embeds keep their ratio and never overflow. */
.wp-block-embed iframe {
	max-width: 100%;
}

/* Alignment and captions for classic-editor / legacy content. */
.alignleft {
	float: left;
	max-width: 50%;
	margin: 0.25em 1.5em 1em 0;
}

.alignright {
	float: right;
	max-width: 50%;
	margin: 0.25em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

@media (max-width: 40em) {
	.alignleft,
	.alignright {
		float: none;
		max-width: 100%;
		margin-inline: auto;
	}
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	margin-top: 0.5rem;
	color: var(--lc-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* A second cue for the post author's own comments (border, not just colour). */
.bypostauthor > .comment-body {
	border-inline-start: 4px solid var(--lc-accent);
	padding-inline-start: 0.75rem;
}

/* 4. Block styles ---------------------------------------------------------- */
.wp-block-group:is(.is-style-lucid-note, .is-style-lucid-safety, .is-style-lucid-pros, .is-style-lucid-cons) {
	padding: 1rem 1.2rem;
	background: var(--lc-surface);
	border: 1px solid var(--lc-border);
	border-inline-start-width: 6px;
	border-radius: var(--lc-radius, 6px);
}

.wp-block-group:is(.is-style-lucid-note, .is-style-lucid-safety, .is-style-lucid-pros, .is-style-lucid-cons) > :first-child {
	margin-top: 0;
}

.wp-block-group:is(.is-style-lucid-note, .is-style-lucid-safety, .is-style-lucid-pros, .is-style-lucid-cons) > :last-child {
	margin-bottom: 0;
}

.wp-block-group.is-style-lucid-note {
	border-inline-start-color: var(--lc-accent);
	background: var(--lc-accent-soft);
}

/* Semantic colours are fixed (not preset-driven) and always paired with dark text. */
.wp-block-group.is-style-lucid-safety {
	border-inline-start-color: #b3261e;
	background: #fdf1ef;
	color: #231f1a;
}

.wp-block-group.is-style-lucid-pros {
	border-inline-start-color: #1a7f4b;
	background: #eef8f2;
	color: #231f1a;
}

.wp-block-group.is-style-lucid-cons {
	border-inline-start-color: #9a5b00;
	background: #fff6e8;
	color: #231f1a;
}

/* A glyph as a second cue, so meaning never rests on colour alone. */
.is-style-lucid-safety > :first-child::before {
	content: "⚠ " / "";
}

.is-style-lucid-pros > :first-child::before {
	content: "+ " / "";
}

.is-style-lucid-cons > :first-child::before {
	content: "− " / "";
}

.is-style-lucid-note > :first-child::before {
	content: "ℹ " / "";
}

ul.is-style-lucid-checklist,
ol.is-style-lucid-checklist {
	padding-inline-start: 0;
	list-style: none;
}

.is-style-lucid-checklist > li {
	position: relative;
	padding-inline-start: 1.75em;
}

.is-style-lucid-checklist > li::before {
	content: "✓" / "";
	position: absolute;
	inset-inline-start: 0;
	color: var(--lc-link);
	font-weight: 700;
}

.wp-block-table.is-style-lucid-comparison :is(th, td):first-child {
	position: sticky;
	left: 0;
	background: var(--lc-surface);
	font-weight: 600;
}

.wp-block-table.is-style-lucid-comparison thead th:first-child {
	background: var(--lc-surface-alt);
}

/* 5. Table of contents ----------------------------------------------------- */
.toc {
	background: var(--lc-surface-alt);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius, 6px);
	font-size: 1rem;
	line-height: 1.5;
}

.toc__title {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	font-family: var(--lc-font-head);
	font-weight: 700;
	cursor: pointer;
}

.toc[open] .toc__title {
	border-bottom: 1px solid var(--lc-border);
}

.toc__nav {
	padding: 0.75rem 1rem 1rem;
}

.toc__list,
.toc__sub {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.toc__sub {
	margin-top: 0.25rem;
}

.toc li + li {
	margin-top: 0.3rem;
}

.toc a {
	display: inline-block;
	padding-block: 0.1rem;
}

/* 6. Article footer -------------------------------------------------------- */
.entry-footer {
	margin-top: 2rem;
}

.tag-list {
	margin: 0;
	color: var(--lc-muted);
	font-size: 0.95rem;
}

.tag-list__label {
	font-weight: 600;
}

.page-links {
	max-width: var(--lc-measure, 40rem);
	margin: 1.5rem auto 0;
}

.page-links > a,
.page-links > span:not(.page-links__label) {
	display: inline-block;
	min-width: 2.5rem;
	margin-inline-end: 0.35rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius, 6px);
	text-align: center;
}

.author-box {
	display: flex;
	gap: 1.1rem;
	max-width: var(--lc-measure, 40rem);
	margin: 2.5rem auto 0;
	padding: 1.25rem;
	background: var(--lc-surface-alt);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius, 6px);
}

.author-box__avatar img {
	display: block;
	border-radius: 50%;
}

.author-box__title {
	margin: 0;
	font-size: 1.1rem;
}

.author-box__label {
	display: block;
	color: var(--lc-muted);
	font-family: var(--lc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.author-box__bio {
	margin: 0.4rem 0 0;
}

.post-navigation {
	max-width: var(--lc-wide, 56rem);
	margin: 2.5rem auto 0;
}

.post-navigation .nav-links {
	display: grid;
	gap: 1rem;
}

@media (min-width: 40em) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius, 6px);
	background: var(--lc-surface);
	color: var(--lc-text);
	text-decoration: none;
}

.post-navigation a:hover .post-nav__title {
	text-decoration: underline;
}

.post-nav__label {
	display: block;
	color: var(--lc-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.post-nav__title {
	font-weight: 600;
}

.related {
	max-width: var(--lc-wide, 56rem);
	margin: 3rem auto 0;
}

.card-grid--related {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* 7. Comments -------------------------------------------------------------- */
.comments {
	max-width: var(--lc-measure, 40rem);
	margin: 3rem auto 0;
}

.comments__title,
.comment-reply-title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
}

.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 0;
	padding-inline-start: 1.25rem;
	list-style: none;
	border-inline-start: 2px solid var(--lc-border);
}

.comment-body {
	padding-block: 1rem;
	border-top: 1px solid var(--lc-border);
}

.comment-author .avatar {
	float: left;
	margin-inline-end: 0.75rem;
	border-radius: 50%;
}

.comment-meta,
.comment-metadata {
	color: var(--lc-muted);
	font-size: 0.875rem;
}

.comment-metadata a {
	color: inherit;
}

.reply a {
	font-size: 0.9rem;
	font-weight: 600;
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.comment-form p {
	margin: 0 0 1rem;
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.comments__closed {
	color: var(--lc-muted);
}