/**
 * MRD v2: style blok bersama.
 *
 * Dimuat di frontend dan di editor (add_editor_style), jadi selector tidak boleh
 * bergantung pada wrapper halaman seperti .entry-content.
 */

/* ===== Tombol ===== */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--dur-fast, 160ms) ease, transform var(--dur-fast, 160ms) var(--ease-out, ease);
}

.wp-block-button__link:not(.has-background) {
	background-color: var(--color-accent);
}

.wp-block-button__link:not(.has-text-color) {
	color: var(--color-accent-ink);
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--color-text);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 0;
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

/* ===== Kutipan ===== */
.wp-block-quote {
	margin-inline: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.012em;
}

.wp-block-quote::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	font-size: 4rem;
	line-height: 1;
	color: var(--color-accent);
}

.wp-block-quote p {
	margin: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.875rem;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	color: var(--color-text-muted);
}

.wp-block-pullquote {
	margin: 2.25em 0;
	padding: 0;
	border: 0;
	text-align: left;
}

.wp-block-pullquote blockquote {
	margin: 0;
}

.wp-block-pullquote blockquote::before {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-bottom: 1.25rem;
	border-radius: 2px;
	background: var(--color-accent);
}

.wp-block-pullquote p {
	font-family: var(--font-heading);
	font-weight: var(--heading-weight);
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: var(--heading-tracking);
	text-wrap: balance;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	font-style: normal;
	color: var(--color-text-muted);
}

/* ===== Daftar: bullet orange, nomor memakai aksen gelap karena termasuk teks ===== */
ul.wp-block-list > li::marker {
	color: var(--color-accent);
}

ol.wp-block-list > li::marker {
	color: var(--color-accent-text);
	font-weight: 700;
}

/* ===== Tabel =====
 * .table-scroll membungkus tabel klasik (bukan blok) di isi tulisan, lihat mrdnews_wrap_tables().
 * Gayanya sama dengan blok Tabel; atribut lama seperti border dan cellpadding ikut tertimpa.
 */
.wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
}

.table-scroll {
	overflow-x: auto;
}

.wp-block-table table,
.table-scroll > table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

/*
 * Blok Tabel bawaan membagi kolom sama rata lalu memotong kata di tengah saat kolomnya sempit
 * ("Spotif" lalu "y" di ponsel). Lebar kolom dibiarkan mengikuti isi seperti tabel klasik; tabel
 * yang tidak muat digeser ke samping.
 */
.wp-block-table table.has-fixed-layout {
	table-layout: auto;
}

.wp-block-table table.has-fixed-layout th,
.wp-block-table table.has-fixed-layout td {
	word-break: normal;
}

.wp-block-table th,
.wp-block-table td,
.table-scroll th,
.table-scroll td {
	padding: 0.75rem 1rem 0.75rem 0;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.wp-block-table th,
.table-scroll th {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-text-muted);
}

/* Core memberi thead dan tfoot garis 3px warna teks; disamakan dengan garis tema. */
.wp-block-table thead,
.table-scroll thead {
	border-bottom: 1px solid var(--color-border-strong);
}

.wp-block-table tfoot,
.table-scroll tfoot {
	border-top: 1px solid var(--color-border-strong);
}

.wp-block-table td:last-child,
.wp-block-table th:last-child,
.table-scroll td:last-child,
.table-scroll th:last-child {
	padding-right: 0;
}

.wp-block-table tbody tr:last-child td,
.table-scroll tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * Tabel yang lebih lebar dari layar memudar di sisi yang masih bisa digeser, supaya kolom
 * yang tersembunyi terlihat ada. Timeline gulir tidak aktif kalau tabel muat, jadi tanpa efek.
 */
@property --table-fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --table-fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@keyframes mrdnews-table-fade {
	0% {
		--table-fade-start: 0px;
		--table-fade-end: 2.5rem;
	}

	8%,
	92% {
		--table-fade-start: 2.5rem;
		--table-fade-end: 2.5rem;
	}

	100% {
		--table-fade-start: 2.5rem;
		--table-fade-end: 0px;
	}
}

@supports (animation-timeline: scroll()) {
	.wp-block-table,
	.table-scroll {
		mask-image: linear-gradient(to right, transparent, #000 var(--table-fade-start), #000 calc(100% - var(--table-fade-end)), transparent);
		animation: mrdnews-table-fade linear both;
		animation-timeline: scroll(self inline);
	}
}

.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-embed figcaption {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	text-align: left;
}

/* ===== Blok cari (widget dan konten) ===== */
.wp-block-search .wp-block-search__label {
	font-size: var(--text-sm);
	font-weight: 700;
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: var(--space-xs);
}

.wp-block-search .wp-block-search__input {
	min-height: 48px;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.wp-block-search .wp-block-search__button {
	min-height: 48px;
	margin: 0;
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-weight: 700;
}

/* ===== Blok query (pattern artikel): tampil seperti kartu tema ===== */
.wp-block-post-title a {
	color: var(--color-headline);
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--color-accent-text);
}

.wp-block-post-terms {
	font-size: var(--text-xs);
	font-weight: 700;
}

.wp-block-post-terms a {
	color: var(--color-accent-text);
	text-decoration: none;
}

.wp-block-post-date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* ===== Gambar dan pemisah ===== */
.wp-block-image {
	margin-inline: 0;
}

.wp-block-image img {
	border-radius: var(--radius-md);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin-block: 2.5rem;
}

/* ===== Kode ===== */
code,
kbd {
	padding: 0.125em 0.375em;
	border-radius: 6px;
	background: var(--color-surface);
	font-size: 0.9em;
}

pre,
.wp-block-code {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: 0.9375rem;
	line-height: 1.6;
}

pre code,
.wp-block-code code {
	padding: 0;
	background: none;
	font-size: inherit;
}

/* ===== Latar aksen: teksnya selalu warna teks-di-atas-aksen ===== */
/* Preset ink berubah terang di mode gelap; di atas orange teks harus tetap gelap supaya terbaca. */
.has-accent-background-color:not(.has-text-color) {
	color: var(--color-accent-ink);
}

.has-accent-background-color.has-ink-color {
	color: var(--color-accent-ink) !important;
}

.has-accent-background-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* ===== Penanda (marker orange) ===== */
mark:not(.has-inline-color) {
	background: linear-gradient(to top, var(--color-accent-soft) 45%, transparent 45%);
	color: inherit;
}

/* ===== Gaya blok tema (didaftarkan di inc/block-styles.php) ===== */
.is-style-mrdnews-callout {
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-md);
	background: var(--color-accent-soft);
	font-size: 1rem;
	line-height: 1.65;
}

.is-style-mrdnews-callout > :first-child {
	margin-top: 0;
}

.is-style-mrdnews-callout > :last-child {
	margin-bottom: 0;
}

ul.is-style-mrdnews-checklist {
	list-style: none;
	padding-left: 0;
}

.is-style-mrdnews-checklist li {
	position: relative;
	padding-left: 2rem;
}

.is-style-mrdnews-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--color-accent);
	-webkit-mask: var(--mask-check) center / contain no-repeat;
	mask: var(--mask-check) center / contain no-repeat;
}

.is-style-mrdnews-warning {
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-md);
	box-shadow: inset 0 0 0 2px var(--color-accent);
	font-size: 1rem;
	line-height: 1.65;
}

.is-style-mrdnews-warning > :first-child {
	margin-top: 0;
}

.is-style-mrdnews-warning > :last-child {
	margin-bottom: 0;
}

.wp-block-separator.is-style-mrdnews-accent {
	width: 56px;
	height: 4px;
	margin-inline: auto;
	border: 0;
	border-radius: 2px;
	background: var(--color-accent);
	opacity: 1;
}

.wp-block-quote.is-style-mrdnews-big-quote {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: var(--heading-tracking);
}

.wp-block-quote.is-style-mrdnews-big-quote::before {
	height: 0.45em;
	font-size: 2.4em;
}

.wp-block-image.is-style-mrdnews-framed {
	padding: 0.625rem;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.wp-block-image.is-style-mrdnews-framed img {
	border-radius: var(--radius-md);
}

.wp-block-image.is-style-mrdnews-framed figcaption {
	margin-inline: 0.25rem;
	margin-bottom: 0.25rem;
}