/*
 * ZayedMD base styles — typography + editorial atoms.
 *
 * Source-of-truth: docs/design/canvas-source/01-theme.jsx
 *   (the Theme stylesheet block, ported from JSX-injected CSS into
 *   stand-alone child-theme rules).
 *
 * Type scale anchors (DECISIONS.md):
 *   48px article title (desktop) / 30px (mobile)
 *   28px H2 / 21px H3 / 19px body / 14px metadata
 *
 * Atoms ported here: .zmd-kicker, .zmd-meta, .zmd-rule, .zmd-rule-strong,
 * .zmd-hl, .zmd-prose, .zmd-divider, .zmd-placeholder, .zmd-logo, .zmd-btn,
 * .zmd-input, .zmd-listitem, .zmd-tag, .zmd-col.
 *
 * RTL is handled inline on the same selectors (no separate stylesheet) per
 * DECISIONS.md ("dark mode is a token swap on the same component scale" —
 * the same principle applies to RTL).
 */

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.rtl {
	font-family: var(--arabic);
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
	text-wrap: balance;
}

body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4 {
	font-family: var(--arabic);
	letter-spacing: 0;
}

p { margin: 0; }

/* ─── Editorial atoms ─────────────────────────────────────────────────── */

.zmd-kicker {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

body.rtl .zmd-kicker {
	letter-spacing: 0;
	text-transform: none;
}

.zmd-meta {
	font-family: var(--sans);
	font-size: 12.5px;
	color: var(--muted);
	letter-spacing: 0.01em;
}

body.rtl .zmd-meta {
	font-family: var(--arabic);
	font-size: 13px;
}

.zmd-rule {
	height: 1px;
	background: var(--rule);
	border: 0;
	margin: 0;
}

.zmd-rule-strong {
	height: 1px;
	background: var(--ink);
	border: 0;
	margin: 0;
	opacity: .9;
}

/* Headline link — body color until hover, accent on hover. */
.zmd-hl {
	color: var(--ink);
	transition: color .15s;
}

.zmd-hl:hover {
	color: var(--accent);
}

/* ─── Body prose — Substack reader-mode feel ──────────────────────────── */

.zmd-prose {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.62;
	color: var(--ink);
}

.zmd-prose p { text-wrap: pretty; }
.zmd-prose p + p { margin-top: 1.2em; }

.zmd-prose h2 {
	font-size: 28px;
	line-height: 1.25;
	margin: 2em 0 .6em;
}

.zmd-prose h3 {
	font-size: 21px;
	line-height: 1.3;
	margin: 1.6em 0 .4em;
}

.zmd-prose blockquote {
	border-inline-start: 2px solid var(--accent);
	padding-inline-start: 18px;
	margin: 1.4em 0;
	font-style: italic;
	color: var(--ink-soft);
}

.zmd-prose code {
	font-family: var(--mono);
	font-size: 0.86em;
	background: var(--paper-subtle);
	padding: 1px 5px;
	border-radius: 3px;
}

.zmd-prose .dropcap::first-letter {
	float: left;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 4.4em;
	line-height: .9;
	padding: .08em .08em 0 0;
	color: var(--ink);
}

body.rtl .zmd-prose {
	font-family: var(--arabic);
	font-size: 21px;
	line-height: 1.85;
}

body.rtl .zmd-prose .dropcap::first-letter {
	float: right;
	padding: .08em 0 0 .08em;
}

/* ─── Hairline divider with optional centered glyph ───────────────────── */

.zmd-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--muted-soft);
	margin: 2.4em 0;
}

.zmd-divider::before, .zmd-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--rule);
}

/* ─── Striped editorial placeholder (real photo / art at publish time) ── */

.zmd-placeholder {
	position: relative;
	background: var(--paper-subtle);
	background-image: repeating-linear-gradient(
		135deg,
		var(--paper-subtle) 0 9px,
		var(--paper-deep) 9px 10px
	);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.zmd-placeholder::after {
	content: attr(data-label);
	background: var(--paper);
	padding: 4px 10px;
	border: 1px solid var(--rule);
	border-radius: 2px;
}

/* ─── Logo / monogram block ───────────────────────────────────────────── */

.zmd-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--paper);
	background: var(--ink);
}

.zmd-logo[data-variant="ghost"] {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--rule-strong);
}

/* ─── Buttons — flat editorial, no shadows ────────────────────────────── */

.zmd-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 14px;
	padding: 11px 18px;
	border-radius: 2px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .12s, color .12s;
	text-decoration: none;
}

.zmd-btn-primary {
	background: var(--ink);
	color: var(--paper);
}

.zmd-btn-primary:hover {
	background: var(--accent);
	color: var(--paper);
}

.zmd-btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.zmd-btn-ghost:hover {
	background: var(--ink);
	color: var(--paper);
}

/* ─── Form fields ─────────────────────────────────────────────────────── */

.zmd-input {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--rule-strong);
	border-radius: 2px;
	outline: none;
}

.zmd-input:focus {
	border-color: var(--ink);
}

/* ─── Article list item — dense KevinMD-style row ─────────────────────── */

.zmd-listitem {
	padding: 18px 0;
	border-bottom: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

.zmd-listitem:last-child {
	border-bottom: 0;
}

/* ─── Tag chip ────────────────────────────────────────────────────────── */

.zmd-tag {
	display: inline-block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 9px;
	background: var(--paper-subtle);
	color: var(--muted);
	border-radius: 2px;
}

body.rtl .zmd-tag {
	letter-spacing: 0;
	text-transform: none;
	font-family: var(--arabic);
}

/* ─── Reading column container ────────────────────────────────────────── */

.zmd-col {
	max-width: var(--col);
	margin-inline: auto;
}

/* ─── Generic page (page.php) ─────────────────────────────────────── */

.zmd-page {
	padding: 64px 56px;
	max-width: 1100px;
	margin-inline: auto;
}

.zmd-page__title {
	font-size: 48px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 32px;
	font-weight: 600;
}

body.rtl .zmd-page__title {
	font-size: 44px;
	line-height: 1.3;
	letter-spacing: 0;
}

@media (max-width: 900px) {
	.zmd-page {
		padding: 36px 22px;
	}
	.zmd-page__title {
		font-size: 32px;
	}
	body.rtl .zmd-page__title {
		font-size: 30px;
	}
}

/* ─── 404 page ────────────────────────────────────────────────────── */

.zmd-404 {
	padding: 96px 56px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
	max-width: 720px;
}

.zmd-404__title {
	font-size: 48px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0;
	font-weight: 600;
}

body.rtl .zmd-404__title {
	font-size: 42px;
	line-height: 1.3;
	letter-spacing: 0;
}

.zmd-404__dek {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

body.rtl .zmd-404__dek {
	font-family: var(--arabic);
	font-size: 20px;
	line-height: 1.7;
}

.zmd-404__search {
	width: 100%;
	max-width: 480px;
}

.zmd-404__home {
	margin-top: 6px;
}

@media (max-width: 900px) {
	.zmd-404 {
		padding: 56px 22px;
	}
	.zmd-404__title {
		font-size: 32px;
	}
	body.rtl .zmd-404__title {
		font-size: 28px;
	}
	.zmd-404__dek {
		font-size: 17px;
	}
}