/* ==========================================================================
   Mari Bertumbuh — articles and pages (singular views only)
   Uses tokens from main.css.
   ========================================================================== */

/* Article header
   ========================================================================== */

.mb-article {
	min-width: 0;
}

.mb-article__header > * + * {
	margin-top: var(--mb-space-4);
}

.mb-article__header .mb-breadcrumb ol {
	margin-bottom: 0;
}

.mb-article__title {
	font-size: var(--mb-text-3xl);
	font-weight: var(--mb-weight-bold);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.mb-article__dek {
	color: var(--mb-color-muted);
	font-size: var(--mb-text-lg);
	line-height: var(--mb-leading-normal);
}

.mb-byline {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
	padding-block: var(--mb-space-3);
	border-block: 1px solid var(--mb-color-line);
}

.mb-byline__avatar {
	flex: none;
	border-radius: 50%;
	background: var(--mb-color-bg-alt);
}

.mb-byline__author {
	font-size: var(--mb-text-sm);
	font-weight: var(--mb-weight-semibold);
}

.mb-byline__author a {
	color: var(--mb-color-text);
}

.mb-byline__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mb-space-2);
	color: var(--mb-color-muted);
	font-size: var(--mb-text-xs);
}

.mb-byline__updated::before,
.mb-byline__reading::before {
	content: "·";
	margin-right: var(--mb-space-2);
}

.mb-article__media {
	margin-block: var(--mb-space-5);
}

.mb-article__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--mb-radius-lg);
	background: var(--mb-color-bg-alt);
}

.mb-article__media figcaption {
	margin-top: var(--mb-space-2);
	color: var(--mb-color-muted);
	font-size: var(--mb-text-xs);
}

/* Table of contents
   ========================================================================== */

.mb-toc {
	max-width: var(--mb-measure);
	margin-block: var(--mb-space-5);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius);
	background: var(--mb-color-bg-alt);
}

.mb-toc__summary {
	min-height: var(--mb-tap);
	padding: var(--mb-space-3) var(--mb-space-4);
	font-size: var(--mb-text-sm);
	font-weight: var(--mb-weight-bold);
	cursor: pointer;
}

.mb-toc__list {
	margin: 0;
	padding: 0 var(--mb-space-4) var(--mb-space-4) var(--mb-space-7);
	font-size: var(--mb-text-sm);
}

.mb-toc__list li + li {
	margin-top: var(--mb-space-2);
}

.mb-toc__list a {
	color: var(--mb-color-text);
}

/* Prose (article and page content)
   ========================================================================== */

.mb-prose {
	max-width: var(--mb-measure);
	font-family: var(--mb-font-serif);
	font-size: var(--mb-text-md);
	line-height: var(--mb-leading-prose);
	overflow-wrap: break-word;
}

@media (min-width: 48em) {
	.mb-prose {
		font-size: 1.1875rem;
	}
}

.mb-prose > * + * {
	margin-top: 1.25em;
}

.mb-prose h2,
.mb-prose h3,
.mb-prose h4 {
	margin-top: 1.9em;
	scroll-margin-top: var(--mb-space-5);
}

.mb-prose h2 {
	font-size: var(--mb-text-xl);
}

.mb-prose h3 {
	font-size: var(--mb-text-lg);
}

.mb-prose h4 {
	font-family: var(--mb-font-ui);
	font-size: var(--mb-text-base);
	font-weight: var(--mb-weight-bold);
}

.mb-prose h2 + *,
.mb-prose h3 + *,
.mb-prose h4 + * {
	margin-top: 0.6em;
}

.mb-prose a {
	text-decoration-thickness: 1px;
}

.mb-prose ul,
.mb-prose ol {
	padding-left: 1.25em;
}

.mb-prose li + li {
	margin-top: 0.4em;
}

.mb-prose li::marker {
	color: var(--mb-color-brand);
}

.mb-prose blockquote {
	padding-left: var(--mb-space-5);
	border-left: 3px solid var(--mb-color-brand);
	font-size: var(--mb-text-lg);
	font-style: italic;
}

.mb-prose blockquote > * + * {
	margin-top: 0.75em;
}

.mb-prose cite {
	display: block;
	color: var(--mb-color-muted);
	font-family: var(--mb-font-ui);
	font-size: var(--mb-text-sm);
	font-style: normal;
}

.mb-prose .wp-block-pullquote {
	padding-block: var(--mb-space-5);
	border-block: 2px solid var(--mb-color-brand);
	text-align: left;
}

.mb-prose .wp-block-pullquote blockquote {
	padding: 0;
	border: 0;
	font-size: var(--mb-text-xl);
}

.mb-prose figure {
	margin-inline: 0;
}

.mb-prose img {
	border-radius: var(--mb-radius-sm);
}

.mb-prose figcaption,
.mb-prose .wp-element-caption {
	margin-top: var(--mb-space-2);
	color: var(--mb-color-muted);
	font-family: var(--mb-font-ui);
	font-size: var(--mb-text-xs);
	line-height: var(--mb-leading-normal);
}

.mb-prose .alignwide,
.mb-prose .alignfull {
	max-width: 100%;
}

.mb-prose hr {
	border: 0;
	border-top: 1px solid var(--mb-color-line);
}

.mb-prose code {
	padding: 0.1em 0.3em;
	border-radius: var(--mb-radius-sm);
	background: var(--mb-color-bg-alt);
	font-size: 0.875em;
}

.mb-prose pre {
	overflow-x: auto;
	padding: var(--mb-space-4);
	background: var(--mb-color-bg-alt);
	font-size: var(--mb-text-sm);
	line-height: var(--mb-leading-normal);
}

.mb-prose pre code {
	padding: 0;
	background: none;
}

/* Data tables: scroll inside their own box, never the page. */
.mb-prose .wp-block-table {
	overflow-x: auto;
}

.mb-prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mb-font-ui);
	font-size: var(--mb-text-sm);
	font-variant-numeric: tabular-nums;
	line-height: var(--mb-leading-snug);
}

.mb-prose th,
.mb-prose td {
	padding: var(--mb-space-2) var(--mb-space-3);
	border-bottom: 1px solid var(--mb-color-line);
	text-align: left;
	vertical-align: top;
}

.mb-prose thead th {
	border-bottom: 2px solid var(--mb-color-text);
	font-weight: var(--mb-weight-bold);
}

/* Numeric columns (all but the first) align right for comparison. */
.mb-prose td:not(:first-child),
.mb-prose th:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

.mb-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--mb-color-bg-alt);
}

.mb-prose .wp-block-embed__wrapper iframe {
	width: 100%;
}

/* Article footer
   ========================================================================== */

.mb-article__footer {
	max-width: var(--mb-measure);
	margin-top: var(--mb-space-7);
}

.mb-article__footer > * + * {
	margin-top: var(--mb-space-6);
}

.mb-article__footer .mb-ad {
	margin-block: 0;
}

.mb-article__footer .mb-author--box {
	padding-block: var(--mb-space-5);
	border-block: 1px solid var(--mb-color-line);
}

.mb-article__disclaimer {
	color: var(--mb-color-muted);
	font-size: var(--mb-text-xs);
}

.mb-page-links {
	display: flex;
	gap: var(--mb-space-2);
	margin-top: var(--mb-space-5);
	font-size: var(--mb-text-sm);
}

/* Share
   ========================================================================== */

.mb-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mb-space-3);
}

.mb-share__label {
	color: var(--mb-color-muted);
	font-size: var(--mb-text-xs);
	font-weight: var(--mb-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mb-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-share__button {
	display: inline-grid;
	place-items: center;
	width: var(--mb-tap);
	height: var(--mb-tap);
	padding: 0;
	border: 1px solid var(--mb-color-line);
	border-radius: 50%;
	background: var(--mb-color-bg);
	color: var(--mb-color-text);
	cursor: pointer;
}

.mb-share__button:hover {
	border-color: var(--mb-color-text);
	background: var(--mb-color-text);
	color: var(--mb-color-bg);
}

.mb-share__status {
	color: var(--mb-color-brand);
	font-size: var(--mb-text-xs);
	font-weight: var(--mb-weight-semibold);
}

/* Related & comments
   ========================================================================== */

.mb-related {
	margin-top: var(--mb-space-4);
}

.mb-comments-wrap {
	padding-block: var(--mb-space-7);
}

.mb-comments {
	max-width: var(--mb-measure);
	font-size: var(--mb-text-sm);
}

.mb-comments__list,
.mb-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-comments__list .children {
	margin-left: var(--mb-space-5);
}

.mb-comments__list .comment-body {
	padding-block: var(--mb-space-4);
	border-bottom: 1px solid var(--mb-color-line);
}

.mb-comments__list .comment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mb-space-3);
	align-items: center;
	color: var(--mb-color-muted);
	font-size: var(--mb-text-xs);
}

.mb-comments__list .avatar {
	border-radius: 50%;
	vertical-align: middle;
}

.mb-comments__reply-title {
	margin-top: var(--mb-space-6);
	font-size: var(--mb-text-lg);
}

.comment-form > p + p {
	margin-top: var(--mb-space-3);
}

.comment-form label {
	display: block;
	font-weight: var(--mb-weight-semibold);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--mb-space-2) var(--mb-space-3);
	border: 1px solid var(--mb-color-line-strong);
	border-radius: var(--mb-radius);
}

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