/* =========================================================
   Maarble Blog Engine — Guide article styles

   Built on maarble.ir's real design system (dinakala theme):
     - font          : var(--dina-main-font)  -> yekan / IRANYekanX
     - card          : var(--dina-box-bg-color) + 10px radius
                       + 0 0 10px rgba(0,0,0,.1)   (.dina-shadow-box)
     - accent        : var(--dina-custom-color)     -> #248C6D
     - surfaces      : var(--dina-main-bg-color) / --dina-sec-bg-color
     - borders       : var(--dina-main-border-color)
     - accordion head: var(--dina-accordion-head)

   Every colour reads a --dina-* token first and only falls back to a
   literal, so the theme's dark mode (body.dina-dark*) recolours this
   plugin for free. Layout uses logical properties throughout because the
   site is RTL (dir="rtl" lang="fa-IR").
   ========================================================= */

/* Tokens live on :root because the breadcrumb, sidebar TOC, mobile TOC sheet
   and lightbox all render outside .mge-article-body. */
:root {
	--mge-accent: var(--dina-custom-color, #248c6d);
	/* Text-only accent. The brand teal is 4.16:1 on white — below WCAG AA.
	   Darkened 15% it measures 5.45:1. Backgrounds keep --mge-accent. */
	--mge-accent-ink: color-mix(in srgb, var(--mge-accent) 85%, #000);
	--mge-accent-soft: color-mix(in srgb, var(--mge-accent) 8%, transparent);
	--mge-ink: var(--dina-main-text-color, #212529);
	--mge-muted: var(--dina-sec-text-color, #616161);
	--mge-paper: var(--dina-box-bg-color, #fff);
	--mge-wash: var(--dina-main-bg-color, #f4f5f9);
	--mge-wash-2: var(--dina-accordion-head, #f7f7f9);
	--mge-line: var(--dina-main-border-color, #e9ecef);
	--mge-green: var(--dina-green-color, #28a745);
	--mge-orange: var(--dina-orange-color, #f4891d);
	--mge-red: var(--dina-red-color, #cc1818);
	--mge-radius: 10px;
	--mge-radius-sm: 6px;
	--mge-shadow: var(--dina-main-box-shadow, 0 0 10px 0 rgba(0, 0, 0, 0.1));
	--mge-shadow-sm: var(--dina-sec-box-shadow, 0 0 5px 0 rgba(0, 0, 0, 0.1));
	--mge-font: var(--dina-main-font, yekan, Tahoma, Arial, sans-serif);
}

.mge-article-body {
	background: var(--mge-paper);
	border-radius: var(--mge-radius);
	box-shadow: var(--mge-shadow);
	padding: 24px;
	font-family: var(--mge-font);
	font-size: 16px;
	line-height: 2;
	color: var(--mge-ink);
}

@media (min-width: 768px) {
	.mge-article-body {
		padding: 32px;
	}
}

/* Fallback for browsers without color-mix(). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--mge-accent-soft: rgba(36, 140, 109, 0.08);
		--mge-accent-ink: #1f775d;
	}
}

/* =========================
   Article typography
   ========================= */

.mge-article-body > :first-child {
	margin-block-start: 0;
}

.mge-article-body > :last-child {
	margin-block-end: 0;
}

.mge-article-body h2,
.mge-article-body h3,
.mge-article-body h4 {
	font-family: var(--mge-font);
	font-weight: 700;
	color: var(--mge-ink);
	line-height: 1.7;
	margin-block: 1.6em 0.7em;
	scroll-margin-block-start: calc(var(--mge-header-offset, 90px) + 16px);
}

.mge-article-body h2 {
	font-size: 1.7em;
	padding-inline-start: 12px;
	border-inline-start: 4px solid var(--mge-accent);
}

.mge-article-body h3 {
	font-size: 1.3em;
}

.mge-article-body h4 {
	font-size: 1.1em;
	color: var(--mge-muted);
}

.mge-article-body p {
	margin-block: 0 1.1em;
}

.mge-article-body a {
	color: var(--mge-accent);
	text-decoration: none;
}

.mge-article-body a:hover,
.mge-article-body a:focus-visible {
	text-decoration: underline;
}

.mge-article-body strong {
	font-weight: 700;
	color: var(--mge-ink);
}

.mge-article-body :focus-visible {
	outline: 2px solid var(--mge-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================
   Breadcrumb
   Mirrors the site's rank-math breadcrumb: inline, small, » separated.
   ========================= */

.mge-breadcrumb {
	margin-block-end: 18px;
	font-size: 0.85em;
	color: var(--mge-muted);
}

.mge-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mge-breadcrumb li {
	margin: 0;
	padding: 0;
}

.mge-breadcrumb li + li::before {
	content: "»";
	margin-inline: 6px;
	color: var(--mge-muted);
	opacity: 0.7;
}

.mge-breadcrumb a {
	color: var(--mge-muted);
	text-decoration: none;
}

.mge-breadcrumb a:hover {
	color: var(--mge-accent);
	text-decoration: underline;
}

.mge-breadcrumb [aria-current="page"] {
	color: var(--mge-ink);
	font-weight: 600;
}

/* =========================
   Hero meta — author / reviewer / dates
   ========================= */

.mge-hero-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin-block-end: 22px;
}

.mge-hero-author-review,
.mge-hero-date-box {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 260px;
	padding: 12px 16px;
	background: var(--mge-wash);
	border-radius: var(--mge-radius-sm);
}

.mge-hero-author-item,
.mge-hero-date-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* The author/reviewer shortcode wraps label+name in a plain <div>. */
.mge-hero-author-item > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mge-hero-author-label,
.mge-hero-date-label {
	font-size: 0.78em;
	line-height: 1.6;
	color: var(--mge-muted);
}

.mge-hero-author-name,
.mge-hero-date-value {
	font-size: 0.95em;
	line-height: 1.6;
	font-weight: 600;
	color: var(--mge-ink);
	text-decoration: none;
}

.mge-article-body .mge-hero-author-name:hover {
	color: var(--mge-accent);
}

.mge-hero-author-divider,
.mge-hero-date-divider {
	inline-size: 1px;
	align-self: stretch;
	background: var(--mge-line);
}

/* =========================
   Key takeaways
   ========================= */

.mge-key-takeaways {
	margin-block: 0 26px;
	padding: 18px 20px;
	background: var(--mge-accent-soft);
	border-inline-start: 5px solid var(--mge-accent);
	border-radius: var(--mge-radius-sm);
}

.mge-key-takeaways > h2,
.mge-key-takeaways > h3 {
	margin-block: 0 0.6em;
	padding-inline-start: 0;
	border-inline-start: 0;
	font-size: 1.15em;
	color: var(--mge-accent);
}

.mge-key-takeaways ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mge-key-takeaways li {
	position: relative;
	margin-block-end: 8px;
	padding-inline-start: 24px;
	line-height: 1.9;
}

.mge-key-takeaways li:last-child {
	margin-block-end: 0;
}

.mge-key-takeaways li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 0.82em;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--mge-accent);
}

/* =========================
   Table of contents (desktop)
   Matches the Elementor Pro TOC used on maarble articles:
   thick accent border, accent header bar, underline on hover.
   ========================= */

.mge-toc-nav {
	border: 5px solid var(--mge-accent);
	border-radius: var(--mge-radius-sm);
	background: var(--mge-paper);
	overflow: hidden;
}

.mge-toc-label {
	display: block;
	margin: 0;
	padding: 8px 14px;
	background: var(--mge-accent);
	color: #fff;
	font-family: var(--mge-font);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.8;
}

.mge-toc-nav ul {
	margin: 0;
	padding: 10px 14px;
	list-style: none;
	max-block-size: var(--mge-toc-max-height, none);
	overflow-y: auto;
}

.mge-toc-nav ul ul {
	padding: 0;
	margin-inline-start: 1.5em;
}

.mge-toc-nav li {
	margin: 0;
	line-height: 1.9;
}

.mge-toc-link {
	position: relative;
	display: block;
	padding: 5px 0;
	color: var(--mge-ink);
	font-size: 0.95em;
	text-decoration: none;
	transition: color 0.15s ease;
}

.mge-toc-nav li::marker {
	color: var(--mge-accent);
	font-size: 14px;
}

.mge-article-body .mge-toc-link:hover,
.mge-toc-link:hover {
	color: var(--mge-accent);
}

.mge-toc-link.active {
	color: var(--mge-accent);
	font-weight: 700;
}

/* Sticky sidebar TOC when the theme column allows it. */
@media (min-width: 992px) {
	.mge-toc-nav {
		position: sticky;
		inset-block-start: calc(var(--mge-header-offset, 90px) + 16px);
	}

	.mge-toc-nav ul {
		--mge-toc-max-height: calc(100vh - var(--mge-header-offset, 90px) - 120px);
	}
}

/* =========================
   Mobile TOC (inline trigger + sticky bar + bottom sheet)
   ========================= */

.mge-toc-mobile {
	display: none;
}

@media (max-width: 991px) {
	.mge-toc-nav {
		display: none;
	}

	.mge-toc-mobile {
		display: block;
		margin-block: 0 20px;
	}

	.mge-toc-mobile-inline-trigger,
	.mge-toc-mobile-bar-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		inline-size: 100%;
		padding: 12px 14px;
		background: var(--mge-paper);
		border: 2px solid var(--mge-accent);
		border-radius: var(--mge-radius-sm);
		font-family: var(--mge-font);
		font-size: 0.95em;
		font-weight: 700;
		color: var(--mge-accent);
		cursor: pointer;
	}

	.mge-toc-mobile-inline-icon,
	.mge-toc-mobile-bar-icon {
		display: inline-flex;
		flex: 0 0 auto;
	}

	.mge-toc-mobile-inline-label,
	.mge-toc-mobile-bar-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: start;
	}

	.mge-toc-mobile-bar {
		position: fixed;
		inset-inline: 0;
		inset-block-start: var(--mge-header-offset, 0px);
		z-index: 998;
		padding: 8px 12px;
		background: var(--mge-paper);
		box-shadow: var(--mge-shadow-sm);
	}

	.mge-toc-mobile-bar-trigger {
		border-width: 1px;
		border-color: var(--mge-line);
		color: var(--mge-ink);
	}

	.mge-toc-mobile-overlay {
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.45);
	}

	.mge-toc-mobile-sheet {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 1000;
		max-block-size: 78vh;
		display: flex;
		flex-direction: column;
		background: var(--mge-paper);
		border-start-start-radius: 16px;
		border-start-end-radius: 16px;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
	}

	.mge-toc-mobile-sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px;
		border-block-end: 1px solid var(--mge-line);
	}

	.mge-toc-mobile-sheet-header h2 {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 1.05em;
		font-weight: 700;
		color: var(--mge-ink);
	}

	.mge-toc-mobile-sheet-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 34px;
		block-size: 34px;
		padding: 0;
		background: var(--mge-wash);
		border: 0;
		border-radius: 50%;
		color: var(--mge-ink);
		cursor: pointer;
	}

	.mge-toc-mobile-sheet-nav {
		overflow-y: auto;
		padding: 8px 16px 20px;
		-webkit-overflow-scrolling: touch;
	}

	.mge-toc-mobile-sheet-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mge-toc-mobile-sheet-nav .mge-toc-link {
		padding: 10px 0;
		border-block-end: 1px solid var(--mge-line);
	}

	html.mge-toc-sheet-open,
	body.mge-toc-sheet-open {
		overflow: hidden;
	}

	body.mge-toc-sheet-open {
		position: fixed;
		inline-size: 100%;
	}
}

/* =========================
   FAQ accordion
   ========================= */

.mge-faq-card {
	margin-block: 0 26px;
	border: 1px solid var(--mge-line);
	border-radius: var(--mge-radius);
	overflow: hidden;
}

.mge-faq-item + .mge-faq-item {
	border-block-start: 1px solid var(--mge-line);
}

.mge-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px;
	background: var(--mge-wash-2);
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	color: var(--mge-ink);
	transition: color 0.15s ease;
}

.mge-faq-item > summary::-webkit-details-marker {
	display: none;
}

.mge-faq-item > summary:hover {
	color: var(--mge-accent);
}

.mge-faq-item[open] > summary {
	background: var(--mge-accent-soft);
	color: var(--mge-accent);
}

.mge-faq-question {
	flex: 1 1 auto;
	line-height: 1.8;
}

.mge-faq-icons {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	background: var(--mge-paper);
	color: var(--mge-accent);
	box-shadow: var(--mge-shadow-sm);
}

.mge-faq-icon {
	display: none;
	line-height: 0;
}

.mge-faq-item .mge-faq-icon-closed {
	display: inline-flex;
}

.mge-faq-item[open] .mge-faq-icon-closed {
	display: none;
}

.mge-faq-item[open] .mge-faq-icon-opened {
	display: inline-flex;
}

.mge-faq-answer {
	padding: 14px 16px;
	background: var(--mge-paper);
	color: var(--mge-ink);
}

.mge-faq-answer p:last-child {
	margin-block-end: 0;
}

/* =========================
   CTA
   ========================= */

.mge-cta-box {
	margin-block: 26px;
	padding: 22px 24px;
	background: var(--mge-accent);
	border-radius: var(--mge-radius);
	color: #fff;
	text-align: center;
}

.mge-cta-box h2 {
	margin-block: 0 0.5em;
	padding-inline-start: 0;
	border-inline-start: 0;
	font-size: 1.35em;
	color: #fff;
}

.mge-cta-box p {
	margin-block-end: 1.1em;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.9;
}

.mge-cta-box p:last-child {
	margin-block-end: 0;
}

.mge-cta-btn {
	display: inline-block;
	padding: 11px 26px;
	background: #fff;
	border-radius: var(--mge-radius-sm);
	font-weight: 700;
	color: var(--mge-accent);
	text-decoration: none;
	box-shadow: var(--mge-shadow-sm);
	transition: transform 0.15s ease;
}

.mge-cta-btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

/* =========================
   Related content
   ========================= */

.mge-related-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	margin-block: 26px;
}

@media (min-width: 576px) {
	.mge-related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mge-related-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--mge-paper);
	border: 1px solid var(--mge-line);
	border-radius: var(--mge-radius);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.mge-related-item:hover {
	border-color: var(--mge-accent);
	box-shadow: var(--mge-shadow-sm);
}

.mge-related-item strong {
	font-size: 1em;
	line-height: 1.8;
}

.mge-article-body .mge-related-item a {
	color: var(--mge-ink);
	text-decoration: none;
}

.mge-article-body .mge-related-item:hover a {
	color: var(--mge-accent);
}

.mge-related-item span {
	font-size: 0.87em;
	line-height: 1.8;
	color: var(--mge-muted);
}

/* =========================
   Article lists
   ========================= */

.mge-article-body ul,
.mge-article-body ol {
	margin-block: 0 1.2em;
	padding-inline-start: 1.4em;
}

.mge-article-body li {
	margin-block-end: 0.45em;
	line-height: 1.95;
}

.mge-article-body ol {
	list-style-type: persian;
}

.mge-article-body li::marker {
	color: var(--mge-accent);
}

/* Semantic list variants, opt-in via class in content_html. */
.mge-list-tip,
.mge-list-info,
.mge-list-warning,
.mge-list-risk {
	list-style: none;
	padding-inline-start: 0;
}

.mge-list-tip > li,
.mge-list-info > li,
.mge-list-warning > li,
.mge-list-risk > li {
	position: relative;
	padding-inline-start: 26px;
}

.mge-list-tip > li::before,
.mge-list-info > li::before,
.mge-list-warning > li::before,
.mge-list-risk > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	inset-block-start: 0.8em;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 2px;
}

.mge-list-tip > li::before {
	background: var(--mge-green);
}

.mge-list-info > li::before {
	background: var(--mge-accent);
}

.mge-list-warning > li::before {
	background: var(--mge-orange);
}

.mge-list-risk > li::before {
	background: var(--mge-red);
}

/* =========================
   Note cards
   ========================= */

.mge-note-card {
	margin-block: 0 22px;
	padding: 16px 18px;
	background: var(--mge-wash);
	border-inline-start: 5px solid var(--mge-accent);
	border-radius: var(--mge-radius-sm);
}

.mge-note-card > :last-child {
	margin-block-end: 0;
}

.mge-note-card strong {
	display: block;
	margin-block-end: 4px;
}

.mge-note-info {
	border-inline-start-color: var(--mge-accent);
}

.mge-note-tip {
	border-inline-start-color: var(--mge-green);
}

.mge-note-warning {
	border-inline-start-color: var(--mge-orange);
}

.mge-note-risk {
	border-inline-start-color: var(--mge-red);
}

/* =========================
   Tables
   ========================= */

.mge-table-wrap {
	margin-block: 0 24px;
	overflow-x: auto;
	border-radius: var(--mge-radius);
	box-shadow: var(--mge-shadow-sm);
	-webkit-overflow-scrolling: touch;
}

.mge-article-body table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	background: var(--mge-paper);
}

.mge-article-body:not(:has(.mge-table-wrap)) table,
.mge-article-body table:not(.mge-table-wrap table) {
	margin-block: 0 24px;
}

.mge-article-body th,
.mge-article-body td {
	padding: 11px 14px;
	text-align: start;
	vertical-align: top;
	line-height: 1.8;
	border-block-end: 1px solid var(--mge-line);
}

.mge-article-body thead th {
	background: var(--mge-accent);
	color: #fff;
	font-weight: 700;
	border-block-end: 0;
	white-space: nowrap;
}

.mge-article-body tbody tr:nth-child(even) {
	background: var(--mge-wash);
}

.mge-article-body tbody tr:last-child th,
.mge-article-body tbody tr:last-child td {
	border-block-end: 0;
}

/* First body column reads as a row header. */
.mge-article-body tbody th:first-child,
.mge-article-body tbody td:first-child {
	font-weight: 600;
	color: var(--mge-ink);
}

/* =========================
   Content images
   Matches the site: centred, 10px radius, soft shadow.
   ========================= */

.mge-article-body figure,
.mge-content-image {
	margin: 24px auto;
	text-align: center;
}

.mge-article-body img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--mge-radius);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.mge-article-body figcaption {
	margin-block-start: 8px;
	font-size: 0.85em;
	line-height: 1.8;
	color: var(--mge-muted);
}

.mge-lightbox-trigger {
	cursor: zoom-in;
}

/* =========================
   Image lightbox
   ========================= */

.mge-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.85);
}

/* display:flex above outranks the UA [hidden] rule, so restate it. */
.mge-lightbox[hidden],
.mge-toc-mobile-sheet[hidden] {
	display: none;
}

body.mge-lightbox-open {
	overflow: hidden;
}

.mge-lightbox__close {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	background: rgba(255, 255, 255, 0.14);
	border: 0;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

.mge-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.26);
}

.mge-lightbox__stage {
	max-inline-size: min(1100px, 100%);
	max-block-size: 100%;
	text-align: center;
}

.mge-lightbox__image {
	max-inline-size: 100%;
	max-block-size: 82vh;
	border-radius: var(--dina-main-radius, 10px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mge-lightbox__caption {
	margin-block-start: 12px;
	font-family: var(--dina-main-font, yekan, Tahoma, Arial, sans-serif);
	font-size: 14px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.86);
}

/* =========================
   Buttons
   ========================= */

.mge-article-body .mge-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: var(--mge-radius-sm);
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var(--mge-accent);
}

.mge-article-body .mge-btn:hover {
	filter: brightness(0.94);
	text-decoration: none;
}

.mge-article-body .mge-btn--green {
	background: var(--mge-green);
}

.mge-article-body .mge-btn--orange {
	background: var(--mge-orange);
}

.mge-article-body .mge-btn--red {
	background: var(--mge-red);
}

/* =========================
   Debug output
   ========================= */

.mge-debug-json {
	margin-block: 20px;
	padding: 14px 16px;
	background: var(--mge-wash);
	border: 1px solid var(--mge-line);
	border-radius: var(--mge-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.7;
	color: var(--mge-ink);
	white-space: pre-wrap;
	overflow-x: auto;
}

/* =========================
   Elementor / theme overrides
   The Guide body is often placed inside an Elementor text widget, which
   resets margins on its children; restore the plugin's own rhythm.
   ========================= */

.elementor-widget-text-editor .mge-article-body,
.elementor-widget-theme-post-content .mge-article-body {
	color: var(--mge-ink);
}

.mge-article-body .elementor-widget-container > :last-child {
	margin-block-end: 0;
}

/* =========================
   Motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
	.mge-article-body *,
	.mge-toc-mobile * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.mge-article-body .mge-cta-btn:hover {
		transform: none;
	}
}

/* =========================================================
   Editorial polish
   Added after the wrappers were wired up: the theme's featured
   image widget renders the source image at full height on Guide
   pages, and long-form Persian text needs a measure cap.
   ========================================================= */

/* The theme/Elementor featured image has no aspect cap, so a square
   source rendered ~1200px tall above the fold. Crop it to a banner. */
body.single-guide .elementor-widget-theme-post-featured-image img,
body.single-guide .mge-hero-image img {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--mge-radius);
	box-shadow: var(--mge-shadow);
}

@media (max-width: 767px) {
	body.single-guide .elementor-widget-theme-post-featured-image img,
	body.single-guide .mge-hero-image img {
		aspect-ratio: 4 / 3;
	}
}

/* Lead paragraph carries the intro. */
.mge-article-body > p:first-of-type {
	font-size: 1.1em;
	font-weight: 500;
}

/* Breathing room before each new section. */
.mge-article-body > h2:not(:first-child) {
	margin-block-start: 2.2em;
}

/* Persian digits in data columns must not jitter between rows. */
.mge-article-body th,
.mge-article-body td {
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   Accessibility corrections
   ========================================================= */

/* Accent-coloured TEXT uses the darkened token (5.45:1 vs 4.16:1). */
.mge-article-body a,
.mge-toc-link.active,
.mge-key-takeaways > h2,
.mge-key-takeaways > h3 {
	color: var(--mge-accent-ink);
}

.mge-article-body .mge-toc-link:hover,
.mge-toc-link:hover,
.mge-article-body a:hover,
.mge-article-body a:focus-visible {
	color: var(--mge-accent-ink);
}

/* White on the teal header bar is also 4.16:1 — darken the bar, not the text. */
.mge-toc-label {
	background: var(--mge-accent-ink);
}

/* Tables: .mge-table-wrap is never emitted, so let the table scroll itself
   on phones instead of crushing three Persian columns into 390px. */
@media (max-width: 575px) {
	.mge-article-body table:not(.mge-table-wrap table) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mge-article-body table:not(.mge-table-wrap table) tbody,
	.mge-article-body table:not(.mge-table-wrap table) thead {
		display: table;
		inline-size: max-content;
		min-inline-size: 100%;
	}
}

/* =========================================================
   Site-native layout
   The /blog/ posts put everything inside one .dina-shadow-box
   (white, 10px radius, 30px padding). When the Guide template is
   built the same way, the plugin must not draw a second card
   inside the theme's card.
   ========================================================= */

.dina-shadow-box .mge-article-body {
	background: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

/* The meta row reuses the theme's .dina-post-det / .dina-post-details
   classes, so it inherits the site styling. Only wrapping is added. */
.mge-post-meta {
	flex-wrap: wrap;
	row-gap: 8px;
	align-items: center;
}

.mge-post-meta .dina-post-details {
	display: flex;
	align-items: center;
	gap: 6px;
	inline-size: auto;
}

.mge-post-meta .dina-author-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.mge-post-meta img.avatar {
	border-radius: 50%;
	inline-size: 32px;
	block-size: 32px;
}

@media (max-width: 767px) {
	.mge-post-meta .dina-post-details {
		margin-inline-end: 18px;
	}
}