/**
 * Single blog post (article) – hero, then grid: ToC | content | share (sticky sidebars)
 */

/* Skip to content (תקן ישראלי 5568 / WCAG 2.1 – מקלדת) */
.scab-skip-link {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100000;
	padding: 12px 20px;
	margin: 8px;
	background: var(--color-accent, #25292d);
	color: var(--color-background, #fff);
	font-family: var(--font-body, "Almoni", sans-serif);
	font-size: 18px;
	line-height: 1.3;
	text-decoration: none;
	border-radius: 4px;
	transform: translateY(-120%);
	transition: transform 0.2s ease;
}

.scab-skip-link:focus {
	outline: 3px solid var(--color-secondary, #c1d330);
	outline-offset: 2px;
}

.scab-skip-link:focus,
.scab-skip-link:focus-visible {
	transform: translateY(0);
}

.article_post_page {
	padding-bottom: 48px;
}

/* רקע הנקודות (::before) מאחורי הכותרת — גובה כמו אזור תמונת הגיבור */
.article_post_page .pcat_section_category::before {
	height: 670px;
}

.article_main {
	width: 100%;
	box-sizing: border-box;
}

/* Hero: RTL row — first in DOM = title (מימין), second = image (משמאל) */
.article_hero_section .article_hero_row {
	display: flex;
	flex-direction: row;
	direction: rtl;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 2;
}

.article_hero_text {
	flex: 1 1 0;
	min-width: 0;
	text-align: right;
}

.article_hero_title {
	margin: 0 0 16px;
}

.article_hero_figure {
	flex: 0 1 44%;
	max-width: 520px;
	width: 100%;
	margin: 0;
}

.article_hero_img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(21, 21, 21, 0.08);
}

.article_header_meta .article_meta {
	margin: 0;
	color: var(--color-text);
}

/* Three columns: ToC (left) | main (center) | share (right); LTR grid so order matches reference */
.article_layout_wrap {
	width: 100%;
	margin-top: 8px;
	padding-bottom: 48px;
	max-width: min(var(--container-max, 1200px), 100%);
	margin-left: auto;
	margin-right: auto;
}

.article_layout {
	display: grid;
	align-items: start;
	justify-content: center;
	direction: ltr;
	gap: clamp(20px, 3vw, 48px);
	width: 100%;
	box-sizing: border-box;
}

.article_layout--has-toc {
	grid-template-columns: minmax(160px, 220px) minmax(0, 680px) 52px;
}

.article_layout--no-toc {
	grid-template-columns: minmax(0, 680px) 52px;
	justify-content: center;
}

.article_col_toc {
	direction: rtl;
	text-align: right;
	position: sticky;
	top: 100px;
	align-self: start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-left: 8px;
	box-sizing: border-box;
}

.article_col_main {
	direction: rtl;
	text-align: right;
	min-width: 0;
	margin: 0 auto;
	width: 100%;
}

.article_inner {
	max-width: none;
}

.article_col_share {
	position: sticky;
	top: 100px;
	align-self: start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 4px;
}

/* Share — עמודה אנכית, אייקונים מינימליים */
.article_share_list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.article_share_link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	color: #6b6b6b;
	text-decoration: none;
	cursor: pointer;
	border-radius: 6px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.article_share_link:hover {
	color: var(--color-accent, #25292d);
	background: rgba(0, 0, 0, 0.04);
}

.article_share_link:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
}

button.article_share_link {
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.article_share_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.article_share_icon svg {
	display: block;
}

/* Table of contents — קווים אנכיים, מצב פעיל */
.article_toc {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

.article_toc_title {
	margin: 0 0 18px;
	font-family: var(--font-body, "Almoni", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-transform: none;
}

.article_toc_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.article_toc_item {
	margin: 0 0 4px;
}

.article_toc_item:last-child {
	margin-bottom: 0;
}

.article_toc_link {
	display: block;
	padding: 10px 12px;
	font-family: var(--font-body, "Almoni", sans-serif);
	font-size: 15px;
	line-height: 1.45;
	color: #6b6b6b;
	text-decoration: none;
	font-weight: 400;
	border-inline-start: 3px solid transparent;
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		font-weight 0.2s ease;
}

.article_toc_link:hover {
	color: var(--color-text);
}

.article_toc_link.is-active {
	color: var(--color-text);
	font-weight: 700;
	border-inline-start-color: var(--color-text);
}

.article_toc_link:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
	border-radius: 2px;
}

.article_lead {
	margin: 0 0 32px;
	color: var(--color-text);
	max-width: 65ch;
	font-family: var(--font-body, "Almoni", sans-serif);
	font-size: 26px;
	line-height: 1.45;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.article_body {
	margin: 0 0 48px;
	color: var(--color-text);
	max-width: 65ch;
}

.article_body h2 {
	scroll-margin-top: 100px;
}

.article_body > *:first-child {
	margin-top: 0;
}

.article_body p,
.article_body li {
	font-family: var(--font-body, "Almoni", sans-serif);
	font-size: 20px;
	line-height: 1.45;
	margin: 0 0 1em;
}

.article_body h2,
.article_body h3,
.article_body h4 {
	font-family: var(--font-body, "Almoni", sans-serif);
	font-weight: 700;
	color: var(--color-text);
	margin: 1.5em 0 0.65em;
	line-height: 1.25;
}

.article_body h2 {
	font-size: 32px;
}

.article_body h3 {
	font-size: 26px;
}

.article_body h4 {
	font-size: 22px;
}

.article_body a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.article_body a:hover {
	color: var(--color-primary);
}

.article_body a:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
	border-radius: 2px;
}

.article_body ul,
.article_body ol {
	padding-right: 1.25em;
	margin: 0 0 1em;
}

.article_body img {
	max-width: 100%;
	height: auto;
}

.article_body blockquote {
	margin: 1.25em 0;
	padding: 16px 24px;
	border-right: 4px solid var(--color-primary);
	background: rgba(224, 181, 150, 0.12);
	border-radius: 0 8px 8px 0;
}

/* תוכן אחרי גוף המאמר — מחוץ לגריד (עטיפה .article_post_after) */
.article_post_after {
	width: 100%;
	box-sizing: border-box;
}

/* מוצרים במאמר — רוחב מלא כמו בעמוד הבית */
.article_post_page .article_products_section {
	width: 100%;
	margin-top: 48px;
	box-sizing: border-box;
}

.article_post_page .article_products_section .article_products_heading {
	margin: 0 auto 24px;
	padding-inline: var(--global-padding, 32px);
	max-width: 100%;
	text-align: center;
	color: var(--color-text);
}

.article_post_page .article_products_section .pg_block {
	margin-right: 0;
	margin-left: 0;
}

/* FAQ — כמו בדף הבית / קטגוריה */
.article_post_page .article_faq_region {
	width: 100%;
	margin-top: 56px;
	padding-top: 0;
	box-sizing: border-box;
}

.article_post_page .article_faq_region .hdg_wrap {
	padding-top: 48px;
	padding-bottom: 24px;
}

.article_post_page .article_faq_acc_wrap .acc_block {
	/* ברירת מחדל של הבלוק: padding צדדי כמו בעמוד הבית */
	padding-right: var(--global-padding, 32px);
	padding-left: var(--global-padding, 32px);
}

.article_post_page .acc_item_head {
	min-height: 44px;
	align-items: center;
}

.article_post_page .acc_item_head:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
}

/* מאמרים נוספים — אותן כרטיסיות כמו בבלוג, עד 3 */
.article_related_section {
	margin-top: 48px;
	padding-top: 48px;
	padding-bottom: 40px;
	box-sizing: border-box;
}

.article_related_title {
	margin: 0 0 32px;
	text-align: center;
	color: var(--color-text);
}

.article_related_section .pcat_card_media::before {
	content: "לקריאת המאמר" !important;
}

.article_related_grid_wrap {
	max-width: 100%;
}

@media (max-width: 1100px) {
	.article_layout--has-toc {
		grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) 48px;
		gap: 24px;
	}

	.article_hero_figure {
		max-width: 46%;
	}
}

@media (max-width: 900px) {
	.article_layout--has-toc,
	.article_layout--no-toc {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.article_col_main {
		order: 1;
	}

	.article_col_toc {
		order: 2;
		position: static;
		max-height: none;
		overflow: visible;
		padding-left: 0;
	}

	.article_col_share {
		order: 3;
		position: static;
		max-height: none;
		overflow: visible;
		padding-top: 0;
	}

	.article_share_list {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
	}
}

@media (max-width: 768px) {
	/* תוכן עניינים — מוסתר במובייל */
	.article_col_toc {
		display: none !important;
	}

	.article_hero_section .article_hero_row {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.article_hero_figure {
		max-width: 100%;
		flex: 1 1 auto;
		order: 2;
	}

	.article_hero_text {
		order: 1;
	}

	.article_body p,
	.article_body li {
		font-size: 18px;
		line-height: 1.5;
	}

	.article_lead {
		font-size: 22px;
		line-height: 1.5;
	}

	.article_post_page .article_faq_region {
		margin-top: 40px;
	}

	.article_post_page .article_faq_region .hdg_wrap {
		padding-top: 32px;
		padding-bottom: 16px;
	}
}