/*
 * ZayedMD mobile-responsive polish.
 *
 * Loaded globally — supplements the inline mobile breakpoints already
 * present in tokens.css / base.css / header-footer.css / homepage.css /
 * article.css / about.css / category.css / newsletter.css.
 *
 * Source-of-truth: docs/design/canvas-source/05-mobile-pages.jsx.
 *
 * This file consolidates cross-cutting mobile concerns:
 *   - Article-action icons (share / save) row matching MobileArticleEN
 *   - Body padding adjustments at <600px (super-narrow)
 *   - Reduced-motion handling
 *   - Focus-visible polish for keyboard navigation
 *   - Dropcap behaviour scaling on mobile
 */

/* ─── Article action icons (share + save) ─────────────────────────── */

.zmd-article__actions {
	display: flex;
	gap: 12px;
	color: var(--muted);
}

.zmd-article__action-btn {
	background: transparent;
	border: 0;
	padding: 4px;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	transition: color .15s;
}

.zmd-article__action-btn:hover {
	color: var(--ink);
}

/* ─── Super-narrow phone tweaks (≤480px) ──────────────────────────── */

@media (max-width: 480px) {
	.zmd-article__header {
		padding: 28px 18px 14px;
	}

	.zmd-article__title {
		font-size: 28px;
		letter-spacing: -0.015em;
	}

	body.rtl .zmd-article__title {
		font-size: 26px;
	}

	.zmd-article__dek {
		font-size: 17px;
	}

	body.rtl .zmd-article__dek {
		font-size: 18px;
	}

	.zmd-article__hero-art {
		height: 200px;
		margin-top: 20px;
		margin-bottom: 24px;
	}

	.zmd-prose {
		font-size: 17px;
	}

	body.rtl .zmd-prose {
		font-size: 19px;
	}

	.zmd-prose .dropcap::first-letter {
		font-size: 3.6em;
	}

	.zmd-hero {
		padding: 24px 18px;
	}

	.zmd-hero__title {
		font-size: 28px;
	}

	.zmd-cat-header__title {
		font-size: 32px;
	}

	body.rtl .zmd-cat-header__title {
		font-size: 28px;
	}

	.zmd-nl-hero__title {
		font-size: 32px;
	}

	body.rtl .zmd-nl-hero__title {
		font-size: 28px;
	}

	.zmd-author-bio {
		padding: 28px 18px;
	}

	.zmd-author-bio__title {
		font-size: 32px;
	}

	body.rtl .zmd-author-bio__title {
		font-size: 28px;
	}
}

/* ─── Reduced-motion preferences ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.skip-link {
		transition: none;
	}
}

/* ─── Focus-visible polish (keyboard navigation) ──────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.zmd-input:focus-visible {
	outline-offset: 0;
	border-color: var(--ink);
	outline-color: var(--ink);
}

/* The mouse-state focus on .zmd-input is already set by base.css; the
   above adds a visible outline only for keyboard users. */

/* ─── Print styles ───────────────────────────────────────────────── */

@media print {
	.zmd-site-header,
	.zmd-site-footer,
	.zmd-newsletter-band,
	.zmd-newsletter-inline,
	.zmd-related,
	.zmd-medium-strip,
	.zmd-cat-aside,
	.skip-link,
	.zmd-pagination {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}

	.zmd-prose {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
	}

	.zmd-prose a {
		color: #000;
		text-decoration: underline;
	}

	.zmd-prose a[href]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}

	.zmd-takeaways,
	.zmd-refs {
		page-break-inside: avoid;
	}
}