/*
 * NGL v2 — a post (design/news; Figma "News & Article" article 297:8595): the hero and its meta bar, the
 * body (the sidebar with the table of contents and the consultation box, the content) and the related
 * posts (their cards are in news.css).
 *
 * The content is the post's own HTML (the block editor's, or the classic editor's in older posts):
 * the design's text styles are applied to whatever it contains. Section headings (the content's
 * highest heading level, marked by ngl_v2_article_sections()) take the design's H2; the callouts are the
 * Group block's "NGL" styles (registered in news.php).
 *
 * Desktop values are the 1440px frame's; logical properties throughout, so RTL and LTR share every rule.
 */

/* ==============================================================================================
 * Hero (297:9017): text at the start, the photo (494 × 332) at the end under the design's shade
 * ============================================================================================ */

.nglv2-art__hero {
	display: flex;
	align-items: center;
	margin-top: 32px;
}

.nglv2-art__copy {
	display: flex;
	flex: 1 1 706px;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.nglv2 .nglv2-art__title {
	max-width: 642px;
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

/* 599 of text inside the quote bar. */
.nglv2 .nglv2-art__intro {
	max-width: 625px;
	font-size: 16px;
	line-height: 40px;
	color: var(--nglv2-grey);
}

.nglv2-art__media {
	position: relative;
	flex: 0 0 494px;
	align-self: stretch;
	min-height: 332px;
	overflow: hidden;
}

/* The shade is drawn 363 tall over the 332 photo (its dark end is cut off at the bottom). */
.nglv2-art__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 109.4%;
	background: linear-gradient(0deg, rgba(5, 26, 33, 0.82) 0%, rgba(5, 26, 33, 0) 55%), linear-gradient(90deg, rgba(20, 128, 93, 0.2) 0%, rgba(20, 128, 93, 0) 100%);
	pointer-events: none;
}

.nglv2 .nglv2-art__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==============================================================================================
 * Meta bar (297:9078): padding 32; four 204-wide facts spread evenly, a 48-tall rule centred between
 * each two (the rules are elements, so the space-between spreads seven items as drawn)
 * ============================================================================================ */

.nglv2 .nglv2-art__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
	padding: 32px;
}

.nglv2-art__fact {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.nglv2-art__ficon {
	display: flex;
	flex: 0 0 45px;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: #e2f5ec;
	color: #22a46f;
}

.nglv2-art__ficon .nglv2-icon {
	width: 24px;
	height: 24px;
}

.nglv2-art__ftext {
	display: flex;
	flex-direction: column;
	min-width: 151px;
}

.nglv2-art__fvalue {
	display: flex;
	align-items: center;
	min-height: 23px;
	font-size: 14px;
	line-height: 21px;
	color: var(--nglv2-ink);
}

/* «12 دقیقه», «1404/07/07»: Latin digits, as drawn (the child theme's ss01 would draw them Persian). */
.nglv2 .nglv2-art__fvalue {
	font-feature-settings: normal;
}

.nglv2-art__flabel {
	display: flex;
	align-items: center;
	min-height: 24px;
	font-size: 11px;
	line-height: 18.7px;
	color: #586965;
}

.nglv2-art__sep {
	flex: 0 0 1px;
	align-self: center;
	height: 48px;
	background: rgba(109, 190, 69, 0.35);
}

/* ==============================================================================================
 * Body (297:9766): 80 under the meta bar; the eyebrow «محتوا», then (32 under it) the sidebar (288)
 * at the start and the content (888), 24 apart
 * ============================================================================================ */

.nglv2-art__body {
	margin-top: 80px;
}

.nglv2-art__layout {
	display: grid;
	grid-template-columns: 288px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 32px;
}

.nglv2-art__aside {
	position: sticky;
	top: calc(var(--nglv2-header-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.admin-bar .nglv2-art__aside {
	top: calc(var(--nglv2-header-h) + 32px + 24px);
}

/* Table of contents (297:9805): white, r12, padding 20. */
.nglv2-toc {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px;
	border-radius: 12px;
	background: #fff;
}

.nglv2 .nglv2-toc__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #168b52;
}

.nglv2-toc__title::before {
	content: "";
	flex: 0 0 4px;
	height: 16px;
	border-radius: 2px;
	background: #00c07a;
}

.nglv2 .nglv2-toc__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* The design reserves a 2px border at the start of each link and draws the current one's at the end. */
.nglv2 .nglv2-toc__link {
	display: block;
	padding-block: 6px;
	padding-inline: 12px;
	border-inline: 2px solid transparent;
	font-size: 14px;
	line-height: 20px;
	color: #64748b;
	transition: color 0.25s, border-color 0.25s;
}

.nglv2 .nglv2-toc__link:hover {
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-toc__link.is-active {
	border-inline-end-color: var(--nglv2-accent);
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-toc__link:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 2px;
}

/* Consultation box (297:9834): dark green, r12, padding 20; the headset in a white tile. */
.nglv2-art__consult {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border-radius: 12px;
	background: #0d4036;
	text-align: center;
}

.nglv2-art__consult-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #fff;
	color: #0d4036;
}

.nglv2-art__consult-icon .nglv2-icon {
	width: 24px;
	height: 24px;
}

/* Title and text are 8 apart; the box's gap (16) less 8. */
.nglv2 .nglv2-art__consult-title {
	margin-bottom: -8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
}

.nglv2 .nglv2-art__consult-text {
	align-self: stretch;
	max-width: 238px;
	margin-inline: auto;
	font-size: 12px;
	line-height: 24px;
	color: #d3d8de;
	text-align: start;
}

.nglv2 .nglv2-art__consult-btn {
	display: block;
	align-self: stretch;
	padding: 8px 16px;
	border-radius: 8px;
	background: #fff;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #0d4036;
	text-align: center;
	transition: background-color 0.25s;
}

.nglv2 .nglv2-art__consult-btn:hover {
	background: #e2f5ec;
}

.nglv2 .nglv2-art__consult-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ==============================================================================================
 * Content (297:9787): Medium 16/32 grey; section headings Bold 24/36 with a 48 × 2 green bar under
 * their start; sections 64 apart (24 + their 40 top padding), 24 between a heading and its text,
 * 28 between paragraphs, 8 above a callout
 * ============================================================================================ */

.nglv2-prose {
	min-width: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 32px;
	color: var(--nglv2-grey);
}

.nglv2-prose > * + * {
	margin-top: 28px;
}

.nglv2 .nglv2-prose :where(p, li, td, th, figcaption, blockquote) {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.nglv2 .nglv2-prose :where(strong, b) {
	font-weight: 700;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-prose a {
	color: #168b52;
	transition: color 0.25s;
}

.nglv2 .nglv2-prose a:hover {
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-prose .nglv2-prose__section {
	position: relative;
	padding-bottom: 8px;
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	color: var(--nglv2-ink);
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
}

.nglv2-prose__section::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	width: 48px;
	height: 2px;
	background: var(--nglv2-accent);
}

.nglv2-prose > .nglv2-prose__section {
	margin-top: 64px;
}

.nglv2-prose > .nglv2-prose__section:first-child {
	margin-top: 40px;
}

/* Other headings inside a section. */
.nglv2 .nglv2-prose :is(h2, h3, h4, h5, h6):not(.nglv2-prose__section) {
	font-weight: 700;
	font-size: 20px;
	line-height: 32px;
	color: var(--nglv2-ink);
}

.nglv2-prose > :is(h2, h3, h4, h5, h6):not(.nglv2-prose__section) {
	margin-top: 40px;
}

/* A list right after the paragraph that introduces it («…عبارتند از:») follows it directly. */
.nglv2-prose > p + :is(ul, ol) {
	margin-top: 0;
}

.nglv2 .nglv2-prose ul {
	list-style: disc;
}

.nglv2 .nglv2-prose ol {
	list-style: decimal;
}

.nglv2 .nglv2-prose li {
	margin-inline-start: 24px;
}

.nglv2 .nglv2-prose li > :is(ul, ol) {
	margin-top: 0;
}

/* Images and figures: as wide as the content, the caption 4 under them. In the design (299:9900) the
 * image sits 24 under the text before it, and the next section's heading 64 under the image, the
 * caption hanging into that space: 40 under a caption. */
.nglv2 .nglv2-prose img {
	display: block;
	max-width: 100%;
	height: auto;
}

.nglv2-prose > :is(figure, .wp-block-image) {
	margin-top: 24px;
}

.nglv2-prose > :is(figure, .wp-block-image):has(figcaption) + .nglv2-prose__section {
	margin-top: 40px;
}

.nglv2 .nglv2-prose :is(figure.wp-block-image, .wp-block-image figure) img:not([style*="width"]) {
	width: 100%;
}

.nglv2 .nglv2-prose figcaption,
.nglv2 .nglv2-prose .wp-element-caption {
	max-width: 616px;
	margin: 4px auto 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #64748b;
	text-align: center;
}

.nglv2 .nglv2-prose :is(.aligncenter, .wp-block-image.aligncenter) {
	margin-inline: auto;
}

.nglv2 .nglv2-prose .wp-block-gallery,
.nglv2 .nglv2-prose .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.nglv2 .nglv2-prose .wp-block-gallery > figure {
	flex: 1 1 260px;
}

/* A quote: the design's quote bar. */
.nglv2 .nglv2-prose blockquote {
	position: static;
	top: auto;
	padding-inline-start: 24px;
	border: 0;
	border-inline-start: 2px solid var(--nglv2-accent-30);
	background: none;
	font-size: 18px;
	line-height: 34px;
	color: #586965;
}

.nglv2 .nglv2-prose blockquote::before,
.nglv2 .nglv2-prose blockquote::after {
	content: none;
}

.nglv2 .nglv2-prose cite {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-style: normal;
	color: var(--nglv2-grey);
}

/* Tables: thin rules, the head row in the pale green. */
.nglv2 .nglv2-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.8;
}

.nglv2 .nglv2-prose :is(th, td) {
	padding: 10px 12px;
	border: 1px solid #dde6e3;
	text-align: start;
	vertical-align: top;
}

.nglv2 .nglv2-prose th {
	background: #e2f5ec;
	font-weight: 600;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-prose .wp-block-table {
	overflow-x: auto;
}

/* A date block left in a post's content. */
.nglv2 .nglv2-prose .wp-block-post-date {
	font-size: 14px;
	color: var(--nglv2-grey);
}

/* ----------------------------------------------------------------------------------------------
 * Callouts: a Group block with the style «کادر نکته» (blue), «کادر روش» (green) or «کادر هشدار»
 * (yellow), Figma 299:9875 / 299:9866 / 299:9890. Its first block is the title, with the icon at its
 * start; the rest is the text. Padding 16, r24, 5% tint, 30% border.
 * ------------------------------------------------------------------------------------------- */

.nglv2-prose > [class*="is-style-ngl-"] {
	margin-top: 8px;
}

.nglv2-prose > .nglv2-prose__section + * {
	margin-top: 24px;
}

.nglv2 .nglv2-prose [class*="is-style-ngl-"] {
	--nglv2-callout: #60a5fa;
	padding: 16px;
	border: 1px solid rgba(96, 165, 250, 0.3);
	border-radius: 24px;
	background: rgba(96, 165, 250, 0.05);
	font-weight: 400;
	font-size: 14px;
	line-height: 28px;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-prose .is-style-ngl-tip {
	--nglv2-callout: #168b52;
	border-color: rgba(109, 190, 69, 0.3);
	background: rgba(109, 190, 69, 0.05);
}

.nglv2 .nglv2-prose .is-style-ngl-warning {
	--nglv2-callout: #fbbf24;
	border-color: rgba(251, 191, 36, 0.3);
	background: rgba(251, 191, 36, 0.05);
}

/* Classic themes wrap a Group's blocks in an inner container; both shapes are styled. */
.nglv2 .nglv2-prose [class*="is-style-ngl-"] :where(p, li) {
	font-weight: 400;
}

.nglv2 .nglv2-prose :is([class*="is-style-ngl-"], [class*="is-style-ngl-"] > .wp-block-group__inner-container) > * + * {
	margin-top: 28px;
}

.nglv2 .nglv2-prose :is([class*="is-style-ngl-"], [class*="is-style-ngl-"] > .wp-block-group__inner-container) > :first-child:not(.wp-block-group__inner-container) {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--nglv2-callout);
}

.nglv2 .nglv2-prose :is([class*="is-style-ngl-"], [class*="is-style-ngl-"] > .wp-block-group__inner-container) > :first-child:not(.wp-block-group__inner-container)::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.3333 4L6 11.3333L2.66667 8' fill='none' stroke='%23000' stroke-width='1.33333'/%3E%3C/svg%3E") center / 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.3333 4L6 11.3333L2.66667 8' fill='none' stroke='%23000' stroke-width='1.33333'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.nglv2 .nglv2-prose :is(.is-style-ngl-warning, .is-style-ngl-warning > .wp-block-group__inner-container) > :first-child:not(.wp-block-group__inner-container)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%3E%3Cpath d='M6.86 2.57333L1.21333 12C1.09691 12.2016 1.03531 12.4302 1.03466 12.663C1.03401 12.8958 1.09433 13.1248 1.20962 13.327C1.32491 13.5293 1.49115 13.6978 1.69181 13.8159C1.89246 13.934 2.12053 13.9974 2.35333 14H13.6467C13.8795 13.9974 14.1075 13.934 14.3082 13.8159C14.5088 13.6978 14.6751 13.5293 14.7904 13.327C14.9057 13.1248 14.966 12.8958 14.9653 12.663C14.9647 12.4302 14.9031 12.2016 14.7867 12L9.14 2.57333C9.02115 2.3774 8.85381 2.21541 8.65413 2.10299C8.45445 1.99057 8.22916 1.9315 8 1.9315C7.77084 1.9315 7.54555 1.99057 7.34587 2.10299C7.14619 2.21541 6.97885 2.3774 6.86 2.57333Z'/%3E%3Cpath d='M8 6V8.66667M8 11.3333H8.00667'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%3E%3Cpath d='M6.86 2.57333L1.21333 12C1.09691 12.2016 1.03531 12.4302 1.03466 12.663C1.03401 12.8958 1.09433 13.1248 1.20962 13.327C1.32491 13.5293 1.49115 13.6978 1.69181 13.8159C1.89246 13.934 2.12053 13.9974 2.35333 14H13.6467C13.8795 13.9974 14.1075 13.934 14.3082 13.8159C14.5088 13.6978 14.6751 13.5293 14.7904 13.327C14.9057 13.1248 14.966 12.8958 14.9653 12.663C14.9647 12.4302 14.9031 12.2016 14.7867 12L9.14 2.57333C9.02115 2.3774 8.85381 2.21541 8.65413 2.10299C8.45445 1.99057 8.22916 1.9315 8 1.9315C7.77084 1.9315 7.54555 1.99057 7.34587 2.10299C7.14619 2.21541 6.97885 2.3774 6.86 2.57333Z'/%3E%3Cpath d='M8 6V8.66667M8 11.3333H8.00667'/%3E%3C/svg%3E");
}

/* ==============================================================================================
 * Related posts (299:9926): 80 under the content; eyebrow, then (32 under it) the title with «مشاهده
 * همه» at its end, then (32 under it) three cards
 * ============================================================================================ */

.nglv2-art__related {
	margin-top: 80px;
}

.nglv2-art__rhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 32px;
}

.nglv2 .nglv2-art__rtitle {
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

.nglv2-art__rlist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}

/* ==============================================================================================
 * Narrower screens (not drawn)
 * ============================================================================================ */

@media (max-width: 1199px) {
	.nglv2-art__media {
		flex-basis: 40%;
	}

	.nglv2-art__copy {
		padding-inline-end: 32px;
	}

	.nglv2 .nglv2-art__meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 32px;
		padding-inline: 0;
	}

	.nglv2-art__sep {
		display: none;
	}

	.nglv2-art__rlist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.nglv2-art__hero {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 32px;
	}

	.nglv2-art__copy {
		flex-basis: auto;
		padding-inline-end: 0;
	}

	.nglv2-art__media {
		flex-basis: auto;
		min-height: 0;
		aspect-ratio: 494 / 332;
	}

	/* One column: the table of contents, the content, then the consultation box. */
	.nglv2-art__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.nglv2-art__aside {
		display: contents;
	}

	.nglv2-toc {
		order: -1;
	}

	.nglv2-art__consult {
		order: 1;
		max-width: 480px;
		width: 100%;
		margin-inline: auto;
	}

	.nglv2-art__rlist {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.nglv2 .nglv2-art__intro {
		line-height: 32px;
	}

	.nglv2 .nglv2-art__meta {
		margin-top: 16px;
		padding-block: 24px;
		gap: 20px 16px;
	}

	.nglv2-art__ftext {
		min-width: 0;
	}

	.nglv2-art__body,
	.nglv2-art__related {
		margin-top: 56px;
	}

	.nglv2 .nglv2-prose .nglv2-prose__section {
		font-size: 21px;
		line-height: 34px;
	}

	.nglv2-prose > .nglv2-prose__section {
		margin-top: 48px;
	}

	.nglv2-prose > .nglv2-prose__section:first-child {
		margin-top: 8px;
	}
}

@media (max-width: 479px) {
	.nglv2 .nglv2-art__meta {
		grid-template-columns: minmax(0, 1fr);
	}
}