/*
Theme Name:   GripLab Road
Theme URI:    https://alignment.local
Description:  תבנית בת ל-Hello Elementor. שפה ויזואלית טכנית-מדויקת: קווים דקים, רשת מדידה עדינה, מספרים בולטים ואקצנט אחד. הכלים האינטראקטיביים יושבים בתוסף alignment-tools ולא כאן — כך שהחלפת תבנית לא שוברת אותם.
Author:       Raz
Template:     hello-elementor
Version:      0.3.0
Text Domain:  alignment-road
Tags:         rtl-language-support
*/

/* הטוקנים נטענים מ-assets/css/tokens.css לפני הקובץ הזה. */

/*
 * הגלישה האופקית מרכיבים מלאי-רוחב נחתכת בשורש ולא רק ב-body:
 * scrollWidth נמדד על אלמנט ה-html, וחיתוך ב-body לבדו לא מספיק.
 *
 * clip ולא hidden — hidden היה הופך את השורש למכולת גלילה ושובר
 * את position: sticky של הכותרת ושל תוכן העניינים.
 */
html { overflow-x: clip; }

/* ══════════════════════════════════════════════════════════
   בסיס
   ══════════════════════════════════════════════════════════ */

body {
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: var(--leading-body);
	color: var(--text);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/*
	 * ── clip ולא hidden ──
	 *
	 * רכיבים מלאי-רוחב (הפתיח) משתמשים ב-100vw, ו-100vw כולל את
	 * רוחב פס הגלילה האנכי — ולכן נוצר פס גלילה אופקי מיותר.
	 *
	 * overflow-x: hidden היה פותר את זה, אבל הוא הופך את הגוף
	 * למכולת גלילה ו**שובר את position: sticky** — כלומר את
	 * הכותרת העליונה ואת תוכן העניינים של המאמר.
	 * clip חותך בלי ליצור מכולת גלילה, ולכן sticky ממשיך לעבוד.
	 */
	overflow-x: clip;
}

/* ── טיפוגרפיה ──
   כותרות עבריות במשקל כבד ובמרווח אותיות שלילי קל. בלי הצמצום
   הן נראות רפויות בגדלים הגדולים. */

h1, h2, h3, h4, h5 {
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text);
	text-wrap: balance;
	margin-block: 0 var(--space-s);
}

h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-2); font-weight: 700; margin-top: var(--space-xl); }
h3 { font-size: var(--step-1); font-weight: 700; margin-top: var(--space-l); }
h4 { font-size: var(--step-0); font-weight: 700; }

/* קו מדידה קצר מעל כל h2 — מוטיב חוזר שמחלק את העמוד לפרקים */
.page-content h2::before,
.entry-content h2::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-bottom: var(--space-s);
	background: var(--accent);
	border-radius: 1px;
}

p, li { max-width: var(--measure); }

p { margin-block: 0 var(--space-s); }

strong { font-weight: 700; color: var(--text); }

em { font-style: normal; color: var(--accent); }

/* ── קישורים ──
   קו תחתון דק שמתעבה בריחוף. בטקסט עברי קו תחתון עבה חותך
   את התנועות ופוגע בקריאות. */
a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
	transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover { text-decoration-color: var(--accent); }

/*
 * קישורים שהם כרטיס או כפתור — בלי קו תחתון.
 *
 * הספציפיות כאן אינה מקרית: Hello Elementor מגדיר
 * `.page-content a { text-decoration: underline }` בספציפיות 0,1,1,
 * וכלל של מחלקה בודדת (0,1,0) מפסיד לו. לכן כל בורר כאן כולל
 * `.page-content` — בלעדיו הכרטיסים מקבלים קו תחתון בגוף העמוד
 * אבל לא בדף הבית, וזה נראה כמו באג אקראי.
 */
.page-content a.at-toc__link,
.page-content a.at-path,
.page-content a.at-card,
.page-content a.at-library__item,
.page-content a.at-situations__item,
.page-content .at-toolrow a,
a.at-toc__link,
a.at-path,
a.at-card {
	text-decoration: none;
}

/* ── מספרים ──
   ספרות ברוחב אחיד בכל האתר. בלי זה טבלאות של ערכי כיול
   "רוקדות" בין שורה לשורה. */
.at-num, table td, table th, .at-ltr {
	font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   פריסה
   ══════════════════════════════════════════════════════════ */

main.site-main {
	max-width: var(--wide-max);
	margin-inline: auto;
	padding-inline: var(--space-s);
}

/* עמודת הטקסט צרה יותר מהמכולה — קריאות לפני ניצול שטח */
.page-content > p,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > ul,
.page-content > ol {
	max-width: var(--content-max);
}

/*
 * אלמנטים רחבים פורצים את עמודת הטקסט.
 *
 * שים לב ש-.at-toc, .at-levels, .at-paths, .at-facts, .at-library,
 * .at-situations ו-.at-toolrow הם רשימות <ul>, ולכן הכלל שמצמצם
 * רשימות לרוחב קריאה חל גם עליהן ומעך אותן לשתי עמודות. הן חייבות
 * להופיע כאן במפורש.
 *
 * ⚠ כל <ul> חדש בתוכן חייב להתווסף לרשימה הזו. בלי זה הוא יוצא
 * ברוחב 736px בעוד השאר 1108px, ומיושר לימין בתוך תיבה צרה יותר —
 * כלומר הקצה השמאלי שלו לא מתיישר עם שום דבר אחר בדף.
 */
.page-content > .at-tool,
.page-content > .at-ranges,
.page-content > .at-twocol,
.page-content > .at-toc,
.page-content > .at-levels,
.page-content > .at-paths,
.page-content > .at-facts,
.page-content > .at-library,
.page-content > .at-situations,
.page-content > .at-toolrow,
.page-content > .at-scroll-x,
.page-content > .at-hero-media,
.page-content > .at-compare {
	max-width: none;
}

/* ══════════════════════════════════════════════════════════
   כותרת עליונה וניווט
   ══════════════════════════════════════════════════════════ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: blur(16px) saturate(150%);
	border-bottom: 1px solid var(--hairline);

	/*
	 * ⚠ תבנית האב נותנת כאן ‎padding: 16px 0‎, והוא יוצר שכבה שנייה
	 * של גובה שאי אפשר לצאת ממנה מבפנים. הסימון של הפריט הפעיל
	 * אמור לשבת על הקו התחתון של הכותרת, ולכן כל הריפוד האנכי
	 * מרוכז ב-‎.header-inner‎ — שם הניווט יכול לבטל אותו במרווח שלילי.
	 */
	padding-block: 0;
}

/*
 * ── הניווט צמוד ללוגו, מימין ──
 *
 * ⚠ ‎space-between‎ היה מפזר את הלוגו והניווט לשני קצוות הכותרת. ב-RTL
 * זה דוחף את התפריט **שמאלה** — הפוך למקובל בעברית, ועם 770px ריקים
 * ביניהם. זה לא נראה כמו באג אלא כמו יישור מכוון, ולכן שרד כל כך הרבה
 * זמן.
 *
 * ‎flex-start‎ מצמיד את הניווט ללוגו; החיפוש לבדו נדחף לקצה הנגדי
 * (ראו ‎.at-search-item‎ למטה).
 */
.site-header .header-inner {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--space-m);
	max-width: var(--full-max);
	margin-inline: auto;

	/* ‎1.75rem‎ = הריפוד שהיה כאן ועוד זה שנלקח מ-‎.site-header‎.
	   הגובה הכולל של הכותרת נשמר, רק הבעלות עליו עברה. */
	padding: 1.75rem var(--space-s);
	transition: padding-block var(--dur-base, .25s) var(--ease-out);
}

/*
 * ── כיווץ בגלילה ──
 *
 * הכותרת דביקה, ולכן היא גוזלת גובה מסך לכל אורך הקריאה. אחרי
 * הגלילה הראשונה היא מצטמצמת ל-58px בערך ומחזירה כשליש מהמסך.
 * המחלקה מתווספת ב-‎assets/js/header-shrink.js‎.
 *
 * ⚠ הכיווץ עובד על ריפוד וגובה לוגו, לא על ‎height‎ של הכותרת.
 * גובה קבוע היה מחייב לתחזק אותו בכל שינוי טיפוגרפי, והריפוד
 * נותן את אותה תוצאה מתוך התוכן עצמו.
 */
.site-header.is-shrunk .header-inner {
	padding-block: .85rem;
}

.at-logo svg {
	transition: height var(--dur-base, .25s) var(--ease-out);
}

.site-header.is-shrunk .at-logo svg {
	height: 1.9rem;
}

/* ⚠ מי שביקש תנועה מופחתת מקבל את אותו כיווץ בלי ההנפשה */
@media (prefers-reduced-motion: reduce) {
	.site-header .header-inner,
	.at-logo svg {
		transition: none;
	}
}

/* הלוגו נשאר ממורכז אנכית אחרי ש-align-items עבר ל-stretch */
.site-header .site-branding {
	display: flex;
	align-items: center;
}

/* ── מיתוג ── */

/* הלוגו מוזרק כ-SVG מוטמע מ-functions.php. הגובה נקבע כאן ולא
   ב-attributes של הקובץ, ו-color מזין את ה-currentColor שבתוכו:
   בבהיר הטקסט כמעט שחור, בכהה כמעט לבן, אותו קובץ. */
/* הלוגו לא מגיב לריחוף. שתי סיבות לכתוב את זה במפורש:
   הכלל הגלובלי של a נותן קו תחתון שמתעבה לטורקיז, ו-reset.css של
   תבנית האב מגדיר a:hover בצבע קבוע #336. ל-a:hover יש משקל (0,1,1),
   יותר מ-.at-logo לבדו, ולכן חייבים לחזור על המחלקה עם :hover. */
.at-logo,
.at-logo:hover,
.at-logo:focus,
.at-logo:active {
	display: block;
	line-height: 0;
	color: var(--text);
	text-decoration: none;
}

.at-logo svg {
	display: block;
	height: 2.45rem;
	width: auto;
}

/* במסכים צרים הרוחב הוא המשאב הנדיר, לא הגובה — הלוגו מתכווץ
   כדי לא לדחוק את כפתור התפריט. */
@media (max-width: 30rem) {
	.at-logo svg {
		height: 2rem;
	}
}

/* הכללים הבאים חלים רק בעורך אלמנטור, שמרנדר גם לוגו וגם שם —
   ובמצב חירום, אם הזרקת הלוגו תיכשל והתבנית תיפול חזרה לטקסט. */
.site-branding .site-title a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--step-0);
	font-weight: 800;
	letter-spacing: var(--tracking-tight);
	color: var(--text);
	text-decoration: none;
}

/* סמן זווית קטן לפני שם האתר — רמז ויזואלי לנושא */
.site-branding .site-title a::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	border-inline-start: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	border-end-start-radius: 2px;
	transform: rotate(-12deg);
	flex: none;
}

.site-header .site-description {
	display: none;
}

/* ── תפריט ── */

/*
 * ⚠ הניווט נמתח לגובה הכותרת המלא, כולל ביטול הריפוד האנכי של
 * ‎.header-inner‎. זה מה שמאפשר לסימון הפעיל לשבת בדיוק על הקו
 * התחתון של הכותרת במקום לרחף מעליו.
 */
.site-navigation.show {
	align-self: stretch;
	flex: 1;
	margin-block: -1.75rem;

	/* ⚠ חייב להיות מונפש יחד עם ‎padding-block‎ של ‎.header-inner‎.
	   בלי זה המרווח קופץ בזמן שהריפוד מחליק, והפס נראה מקפץ. */
	transition: margin-block var(--dur-base, .25s) var(--ease-out);
}

/*
 * ⚠ המרווח השלילי חייב להתאים **בדיוק** לריפוד של ‎.header-inner‎
 * במצב הנוכחי, אחרת הניווט חורג מהכותרת.
 *
 * זה היה הבאג: הריפוד התכווץ ל-‎.85rem‎ אבל המרווח נשאר ‎-1.75rem‎,
 * וההפרש (‎0.9rem‎) דחף את תיבת הקישור אל **מתחת** לקצה הכותרת. הפס
 * הצהוב של הפריט הפעיל מצויר בתחתית התיבה, ולכן הוא ריחף על תוכן
 * העמוד. נמדד בגלילה: כותרת 58.2px, קישור 86.4px, חריגה 13.8px.
 *
 * ⚠ שני הערכים כתובים כמספרים ולא כמשתנה מכוון: ‎custom property‎
 * אינו ניתן להנפשה, ומעבר אליו היה הופך את הכיווץ לקפיצה. אם משנים
 * אחד מהם — לשנות את השני.
 */
.site-header.is-shrunk .site-navigation.show {
	margin-block: -.85rem;
}

/* ⚠ ה-‎ul‎ הוא פריט גמיש בתוך ה-‎nav‎, ולכן הוא לא נמתח לרוחב מעצמו.
   בלי ‎flex: 1‎ כאן, ה-‎margin-inline-start: auto‎ של החיפוש למטה
   נשען על רוחב שאינו קיים ופשוט לא זז. */
.site-navigation.show > ul.menu {
	flex: 1;
}

.site-navigation ul.menu {
	display: flex;
	align-items: stretch;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	height: 100%;
	list-style: none;
}

.site-navigation ul.menu li { max-width: none; }
.site-navigation .menu-item { position: relative; }

/* החיפוש לבדו נודד לקצה הנגדי; שאר הפריטים נשארים צמודים ללוגו */
.site-navigation .at-search-item {
	margin-inline-start: auto;
}

/*
 * ⚠ הכפתור הוא ‎<button>‎ ולא ‎<a>‎, ולכן אף אחד מכללי הקישורים לא
 * חל עליו. הוא נשאר ‎inline-flex‎ בגובה 31px בתוך שורה של 95px
 * ונצמד לראשה — הזכוכית נראתה גבוהה משאר התפריט בלי סיבה נראית
 * לעין. אותו גובה ואותו ריפוד כמו הקישורים מיישרים אותה.
 */
.site-header .site-navigation .at-search-item > button {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 .8rem;
}

/*
 * ⚠ ‎.site-header‎ בתחילת הבורר אינו קישוט. תבנית האב כותבת
 * ‎display: block‎ ל-‎.site-navigation ul.menu li a‎ (0,2,2), וכל בורר
 * חלש יותר מפסיד לה — ‎align-items: center‎ נשאר בתוקף אבל חסר משמעות
 * על תיבה שאינה גמישה, והטקסט נצמד לראש הכותרת.
 */
/* ⚠ ‎> ul.menu >‎ ולא צאצא כלשהו. הבורר הרחב תפס גם את הקישורים
   שבתפריט הנשלף, אִיפֵּס להם את הריפוד האנכי וכיווץ כל שורה שם
   ל-26px. גובה מלא נכון רק לשורה העליונה. */
.site-header .site-navigation > ul.menu > .menu-item > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 .8rem;
	border-radius: 0;
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--step-0);
	font-weight: 600;
	white-space: nowrap;
	/*
	 * ⚠ ‎box-shadow‎ ולא ‎border-bottom‎. גבול היה מוסיף 2px לגובה
	 * ומזיז את הטקסט בכל ריחוף; צל פנימי מצייר את אותו קו בלי לגעת
	 * בפריסה.
	 */
	box-shadow: inset 0 -2px 0 transparent;
	transition: color var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out);
}

/* סימון מסלול: קו דק שנדלק בעמעום, לא רקע ממולא */
.site-header .site-navigation > ul.menu > .menu-item > a:hover {
	color: var(--text);
	background: none;
	box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .28);
}

/* העמוד הנוכחי והענף שהוא יושב בו — הגולש תמיד יודע איפה הוא */
.site-header .site-navigation > ul.menu > .current-menu-item > a,
.site-header .site-navigation > ul.menu > .current_page_item > a,
.site-header .site-navigation > ul.menu > .current-menu-ancestor > a,
.site-header .site-navigation > ul.menu > .current_page_ancestor > a {
	color: var(--text);
	background: none;
	box-shadow: inset 0 -2px 0 var(--accent);
}

/* חץ לפריטים עם תפריט משנה */
.site-navigation .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .34em;
	height: .34em;
	margin-inline-start: .5em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-.18em) rotate(45deg);
	opacity: .55;
	transition: transform var(--dur-fast) var(--ease-out);
}

.site-navigation .menu-item-has-children:hover > a::after {
	transform: translateY(.02em) rotate(45deg);
}

/* ── תפריטי משנה ── */

.site-navigation .sub-menu {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + .4rem);
	z-index: 10;
	min-width: 15rem;
	margin: 0;
	padding: var(--space-3xs);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-md);
	list-style: none;

	/* visibility ולא display:none — כדי שהמעבר יעבוד, ושקורא מסך
	   ידע לדלג על תפריט סגור */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.4rem);
	transition: opacity var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out),
	            visibility var(--dur-fast);
}

/*
 * ⚠ אין כאן "גשר ריחוף" בכוונה. ה-‎+ .4rem‎ ב-top נמדד מה-li, לא
 * מהקישור, וה-li גבוה יותר — הפאנל בפועל **חופף** לקישור בכ-6px
 * ואין רווח מת לחצות. פסאודו-אלמנט שימלא "רווח" כאן רק יכסה את
 * השוליים התחתונים של הקישור ויגנוב ממנו קליקים.
 */

/*
 * focus-within ולא רק hover — בלעדיו התפריט אינו נגיש במקלדת כלל,
 * ומשתמש שמנווט ב-Tab רואה את הפוקוס קופץ לקישורים בלתי נראים.
 */
.site-navigation .menu-item-has-children:hover > .sub-menu,
.site-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*
 * ── שורות הפאנל ──
 *
 * ⚠ הבורר מתחיל ב-‎.site-header‎ ומזכיר ‎ul.menu li‎ בכוונה. תבנית האב
 * כותבת לשורות האלה ‎padding‎ משלה ו-‎border-bottom‎ בהיר, וכל בורר
 * חלש יותר מפסיד — התוצאה הייתה שורות בגובה 26px עם קווים מפרידים
 * שגרמו לפאנל להיראות כמו טבלה ולא כמו תפריט.
 */
.site-header .site-navigation ul.menu li ul.sub-menu li {
	border: 0;
}

/* ⚠ ‎flex‎ ולא ‎block‎. החץ של פריט־אב הוא ‎::after‎, ועל תיבת block
   הוא יורד לשורה משלו ונראה כמו תו שנשמט. */
.site-header .site-navigation ul.menu li ul.sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
	padding: .62rem .85rem;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--step-0);
	font-weight: 500;
	line-height: var(--leading-snug);
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-out),
	            background-color var(--dur-fast) var(--ease-out);
}

.site-header .site-navigation ul.menu li ul.sub-menu a:hover {
	color: var(--text);
	background: var(--surface-hi);
}

/*
 * ⚠ הבורר הארוך אינו קישוט — הוא חייב להיות במשקל של הכלל שצובע את
 * **כל** קישורי תת-התפריט, ‎.site-header .site-navigation ul.menu li
 * ul.sub-menu a‎ שלמעלה (0,4,4). הגרסה הקודמת כאן הייתה
 * ‎.site-navigation .sub-menu .current-menu-item > a‎ במשקל (0,3,1),
 * והפסידה לאפור: העמוד שבו הגולש נמצא לא סומן כלל בתפריט המשנה.
 * נמדד — הפריט הנוכחי והשכן שלו החזירו את אותו ‎rgb(167,176,191)‎.
 *
 * ⚠ גם ‎current_page_item‎ ולא רק ‎current-menu-item‎. וורדפרס נותן
 * לעמודים את שניהם, ותפריט שנבנה מעמודים במקום מפריטי תפריט מקבל
 * לפעמים רק את הראשון.
 *
 * הכלל יושב **אחרי** ‎:hover‎ בכוונה: שניהם באותו משקל, ולכן העמוד
 * הנוכחי נשאר בצבע האקצנט גם בריחוף. המשוב על הריחוף לא אובד —
 * הרקע של ‎:hover‎ עדיין חל, כי הוא לא מוגדר כאן.
 */
.site-header .site-navigation ul.menu li ul.sub-menu .current-menu-item > a,
.site-header .site-navigation ul.menu li ul.sub-menu .current_page_item > a {
	color: var(--accent);
}

/* ── תפריט מדורג ──
   "דינמיקת הרכב" מכיל 38 עמודים בארבעה נושאים. פאנל יחיד שפורש את
   כולם בבת אחת הוא קיר טקסט — הרוחב מגיע לקצה המסך ואי אפשר לסרוק
   אותו בעין. במקום זה הרמה השנייה מציגה את ארבעת הנושאים בלבד,
   וריחוף על נושא פותח את העמודים שלו כפאנל צדדי. */

/* עוגן לפאנל הצדדי; בלעדיו הוא היה נצמד לפאנל של הרמה השנייה */
.site-navigation .sub-menu > .menu-item-has-children {
	position: relative;
}

/* פריט נושא — שורה רגילה עם חץ, לא כותרת עמודה */
.site-navigation .sub-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
}

/*
 * חץ צדדי שמסמן "יש כאן עוד", מצביע לכיוון שבו הפאנל נפתח.
 *
 * ⚠ זווית הסיבוב תלויה בכיוון הכתיבה ואינה אוניברסלית. תכונות
 * לוגיות לבדן לא פותרות את זה: ב-LTR **גם** זוג הגבולות מתהפך
 * וגם הכיוון הרצוי, ושני ההיפוכים מבטלים זה את זה — אותה זווית
 * מייצרת חץ למעלה במקום הצידה. האתר RTL, הפאנל נפתח שמאלה,
 * ולכן ‎-45°‎. תמיכה ב-LTR תדרוש דריסה מפורשת של transform.
 */
.site-navigation .sub-menu .menu-item-has-children > a::after {
	content: "";
	display: block;
	flex: none;
	width: .32em;
	height: .32em;
	margin: 0;
	border: 0;
	border-inline-end: 1.5px solid currentColor;
	border-block-start: 1.5px solid currentColor;
	transform: rotate(-45deg);
	opacity: .45;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.site-navigation .sub-menu .menu-item-has-children:hover > a::after,
.site-navigation .sub-menu .menu-item-has-children:focus-within > a::after {
	opacity: 1;
}

/*
 * רמה שלישית — פאנל צדדי.
 *
 * ⚠ ‎inset-inline-start: 100%‎ בדיוק, בלי מרווח. מרווח בין הפאנלים
 * נראה מסודר יותר אבל יוצר רצועה שאינה נמצאת באף אחד מהם, והעכבר
 * שחוצה אותה סוגר את התפריט באמצע הדרך.
 *
 * ⚠ visibility: hidden מפורש ולא inherit: הפאנל הזה נפתח בריחוף
 * משלו, ולכן הוא חייב מצב סגור עצמאי. הוא עדיין מוגן כשהפאנל שמעליו
 * סגור — אי אפשר לרחף על מה שאינו נראה, ולכן הכלל שמציג אותו לא
 * יופעל.
 */
.site-navigation .sub-menu .sub-menu {
	position: absolute;
	inset-inline-start: 100%;
	inset-block-start: calc(var(--space-3xs) * -1);
	z-index: 11;
	display: block;
	min-width: 13rem;
	margin: 0;
	padding: var(--space-3xs);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-md);
	transform: none;

	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-fast) var(--ease-out),
	            visibility var(--dur-fast);
}

.site-navigation .sub-menu .menu-item-has-children:hover > .sub-menu,
.site-navigation .sub-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.site-navigation .sub-menu .sub-menu a {
	font-weight: 500;
	padding-block: .3rem;
}

@media (max-width: 52rem) {
	/* במובייל אין ריחוף — הכל נפרש, ואין פאנלים צפים */
	.site-navigation .sub-menu .menu-item-has-children > a {
		display: block;
	}

	.site-navigation .sub-menu .menu-item-has-children > a::after {
		display: none;
	}

	.site-navigation .sub-menu .sub-menu {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}
}

/* ══════════════════════════════════════════════════════════
   נטרול הנחות של Hello Elementor בתפריט
   ══════════════════════════════════════════════════════════

   header-footer.css של תבנית האב כותבת ל-`.site-navigation ul.menu
   li ul` (ספציפיות 0,2,3) ומכתיבה רקע לבן, display:none, וחץ ▾
   משלה. בורר שמורכב ממחלקות בלבד (0,2,0) מפסיד לה — ולכן הפאנל
   יצא לבן על אתר כהה, והחץ הופיע פעמיים.

   הבלוק הזה מנטרל בדיוק את מה שצריך, בספציפיות תואמת. כל שינוי
   כאן חייב לשמור על צורת הבורר, אחרת התבנית חוזרת לנצח.
*/

/* החץ שלנו יושב על ה-<a>; החץ שלהם על ה-<li> ויוצר כפילות */
.site-navigation ul.menu li.menu-item-has-children::after {
	content: none;
}

.site-navigation ul.menu li.menu-item-has-children {
	padding-inline-end: 0;
}

/* display:flex על ה-li שובר את פריסת העמודות בתפריט־על */
.site-navigation ul.menu li {
	display: block;
}

.site-navigation ul.menu li a {
	padding: .4rem .7rem;
}

.site-navigation ul.menu li ul.sub-menu {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-md);
	min-width: 17rem;

	/* ⚠ התבנית מאפסת כאן ריפוד, והשורות נגעו בדפנות הפאנל. */
	padding: var(--space-2xs);

	/* התבנית מסתירה ב-display:none, ומצב כזה אינו ניתן להנפשה.
	   השליטה עוברת ל-visibility+opacity, שמאפשרים מעבר רך וגם
	   מוציאים את התפריט הסגור מסדר ה-Tab. */
	display: block;
	opacity: 0;
	visibility: hidden;
}

.site-navigation ul.menu li.menu-item-has-children:hover > ul.sub-menu,
.site-navigation ul.menu li.menu-item-has-children:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
}

/*
 * רמה שלישית — הפאנל הצדדי, בספציפיות שגוברת על תבנית האב.
 *
 * ⚠ הכללים כאן חייבים לשקף את אלה שלמעלה. התבנית כותבת ל-‎ul.menu
 * li ul‎ ותנצח כל בורר שמורכב ממחלקות בלבד, ולכן המיקום והמצב הסגור
 * מוגדרים פעמיים בכוונה. שינוי באחד בלי השני ישבור את התפריט.
 */
.site-navigation ul.menu li ul.sub-menu ul.sub-menu {
	display: block;
	position: absolute;
	inset-inline-start: 100%;
	inset-block-start: calc(var(--space-3xs) * -1);
	opacity: 0;
	visibility: hidden;
	min-width: 13rem;
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-md);
	padding: var(--space-3xs);
}

.site-navigation ul.menu li ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu,
.site-navigation ul.menu li ul.sub-menu li.menu-item-has-children:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 52rem) {
	/* במובייל אין ריחוף — הכל פתוח, בשורות */
	.site-navigation ul.menu li ul.sub-menu,
	.site-navigation ul.menu li ul.sub-menu ul.sub-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.site-header .header-inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xs);
	}

	/*
	 * ⚠ ביטול המתיחה לגובה של הדסקטופ. כאן הכותרת נערמת לעמודה,
	 * ו-‎margin-block‎ שלילי היה מושך את הניווט אל מעל הלוגו בזמן
	 * ש-‎flex: 1‎ מנפח אותו לגובה. הסימון התחתון ממילא חסר משמעות
	 * כשהפריטים בשורות.
	 */
	.site-navigation.show {
		flex: none;
		margin-block: 0;
	}

	/* ⚠ חובה לחזור על האיפוס גם למצב המכווץ. הכלל
	   ‎.site-header.is-shrunk .site-navigation.show‎ הוא (0,3,0) וגובר
	   על האיפוס שמעליו (0,2,0) — בלי השורה הזו המרווח השלילי היה
	   חוזר במובייל ומושך את הניווט אל מעל הלוגו. */
	.site-header.is-shrunk .site-navigation.show {
		margin-block: 0;
	}

	.site-navigation ul.menu {
		flex-wrap: wrap;
		justify-content: center;
		height: auto;
	}

	/* החיפוש חוזר לזרימה; אין קצה נגדי לדחוף אליו בעמודה */
	.site-navigation .at-search-item {
		margin-inline-start: 0;
	}

	.site-header .site-navigation .menu-item > a {
		height: auto;
		padding: .4rem .7rem;
	}


	/* במובייל אין ריחוף — תפריטי המשנה נפתחים תמיד, בשורה */
	.site-navigation .sub-menu {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.site-navigation .sub-menu a { padding: .3rem .55rem; }
	.site-navigation .menu-item-has-children > a::after { display: none; }
}

/* ══════════════════════════════════════════════════════════
   תפריט ההמבורגר — מחוץ ל-media query בכוונה
   ══════════════════════════════════════════════════════════

   ⚠ תבנית האב מחליפה להמבורגר ב-992px (המחלקה
   menu-dropdown-tablet על הכותרת), ונקודת השבירה שלנו היא
   52rem = 832px. כשהכללים ישבו בתוכה, בטווח 833-992px הפאנל
   הוצג בלי שום עיצוב: רקע לבן, שורות 20px, ובלי גלילה.

   הפאנל ממילא מכווץ ל-max-height: 0 בשולחן עבודה, ולכן כללים
   בלתי מותנים אינם מזיקים שם.
*/

/*
 * ══ הפאנל הנשלף של ההמבורגר ══
 *
 * ⚠ תבנית האב נותנת לו ‎background: #fff‎ — פאנל לבן על אתר כהה.
 * הוא לא נראה בבדיקה בשולחן עבודה כי הוא מוסתר שם לגמרי.
 *
 * ⚠ כל שלוש הרמות מקבלות ממנה ‎padding: 20px‎ זהה, ולכן ההיררכיה
 * נעלמת: עמוד בעומק שלוש נראה בדיוק כמו מקטע ראשי. ההזחה כאן
 * היא ‎padding-inline-start‎ — בעברית זה הצד הימני, והטקסט נדחף
 * שמאלה עם כל רמה.
 */
.site-header .site-navigation-dropdown,
.site-header .site-navigation-dropdown ul.menu,
.site-header .site-navigation-dropdown ul.menu li {
	background: var(--bg-raised);
}

/*
 * ⚠ הפאנל לא היה ניתן לגלילה, והתפריט מונה 69 פריטים — כל מה
 * שחרג מגובה המסך היה מחוץ להישג יד.
 *
 * המקור: תבנית האב נותנת ‎position: absolute‎ עם ‎bottom: 0‎ ובלי
 * ‎top‎. מכיוון שהמכולה היא הכותרת, זו תיבה בגובה **אפס** שהתוכן
 * רק נשפך ממנה ב-‎overflow: visible‎. אין מה לגלול — אין תיבה.
 * והכותרת דביקה, ולכן גם גלילת העמוד לא מזיזה אותו.
 *
 * ⚠ ‎dvh‎ ולא ‎vh‎ — בסלולר סרגלי הדפדפן נכנסים ויוצאים, ו-‎vh‎
 * מודד את המצב הפתוח ומחזיר פאנל שנחתך בתחתית.
 *
 * ⚠ ‎10rem‎ קבוע ולא ‎100%‎ (גובה הכותרת). ‎calc‎ שמערבב אחוז עם
 * ‎dvh‎ ב-‎max-height‎ אינו נפתר בכרום — הוא מחושב כ-‎0%‎, מאפס את
 * הגובה, והפאנל נעלם לגמרי. הקבוע גדול מהכותרת בשני מצביה
 * (143px פתוחה, 58px מכווצת) ולכן הפאנל לעולם לא חורג מהמסך.
 */
.site-header .site-navigation-dropdown {
	top: 100%;
	bottom: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.site-header .site-navigation-toggle-holder.elementor-active + .site-navigation-dropdown {
	max-height: calc(100dvh - 10rem);
}

/* ⚠ הרקע הלבן יושב על ה-‎a‎ עצמו, לא רק על המכולות. בלי השורה
   הזו הפאנל כהה אבל כל שורה בו נשארת לבנה. */
.site-header .site-navigation-dropdown ul.menu li a {
	background: transparent;
	color: var(--text-muted);
	font-size: var(--step-0);
	font-weight: 600;
	border-bottom: 1px solid var(--hairline);

	/*
	 * ⚠ ‎20px‎ מלמעלה ומלמטה הם ברירת המחדל של תבנית האב. עם 69
	 * פריטים זה תפריט באורך 2,700px — הריווח לבדו הוא מה שדוחף
	 * את רובו אל מחוץ למסך. הריפוד האופקי נשאר; רק האנכי יורד.
	 *
	 * ⚠ ‎padding-block‎ ולא ‎padding‎ מקוצר. הקיצור היה מאפס גם את
	 * ההזחה של הרמות שמוגדרת בכללים שלמטה.
	 */
	padding-block: .62rem;
	line-height: var(--leading-snug);
}

.site-header .site-navigation-dropdown ul.menu li a:hover,
.site-header .site-navigation-dropdown ul.menu li.elementor-active > a {
	color: var(--text);
	background: var(--surface);
}

.site-header .site-navigation-dropdown ul.menu .current-menu-item > a,
.site-header .site-navigation-dropdown ul.menu .current_page_item > a {
	color: var(--accent);
}

/* רמה שנייה ושלישית — הזחה, משקל קל יותר, וקו עדין שמחזיק את הענף */
.site-header .site-navigation-dropdown ul.menu ul.sub-menu > li > a {
	padding-inline-start: 2.6rem;
	font-weight: 500;
	box-shadow: inset -2px 0 0 var(--hairline);
}

.site-header .site-navigation-dropdown ul.menu ul.sub-menu ul.sub-menu > li > a {
	padding-inline-start: 4.1rem;
	font-weight: 400;
	font-size: var(--step--1);
}

/*
 * ⚠ זה השורש האמיתי לכך שהפאנל לא נגלל. תבנית האב נותנת ל-‎ul‎
 * שבתוכו ‎position: absolute‎, ולכן הרשימה מחוץ לזרימה והפאנל
 * מקבל גובה **אפס** — אין תיבה, אין מה לגלול, והרשימה נמתחת
 * כלפי מעלה אל מחוץ למסך. החזרה לזרימה הופכת אותו לתיבה אמיתית
 * שאפשר להגביל ולגלול.
 */
.site-header .site-navigation-dropdown > ul.menu {
	position: static;
}

/* ══════════════════════════════════════════════════════════
   כותרת עמוד
   ══════════════════════════════════════════════════════════ */

.at-pagehead {
	position: relative;
	margin-inline: calc(var(--space-s) * -1);
	padding: var(--space-xl) var(--space-s) var(--space-l);
	border-bottom: 1px solid var(--hairline);
	overflow: hidden;
}

/* הרשת הטכנית, דועכת כלפי מטה כדי לא להתחרות בטקסט */
.at-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to left, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
	background-size: var(--grid-cell) var(--grid-cell);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
	pointer-events: none;
}

.at-pagehead__inner {
	position: relative;
	max-width: var(--wide-max);
	margin-inline: auto;
}

.at-pagehead h1 { margin: 0; }

/* ── פירורי לחם ── */

.at-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0 0 var(--space-s);
	padding: 0;
	list-style: none;
	font-size: var(--step--2);
	color: var(--text-faint);
	max-width: none;
}

.at-crumbs li {
	display: flex;
	align-items: center;
	gap: .4rem;
	max-width: none;
}

.at-crumbs li + li::before {
	content: "";
	width: .3rem;
	height: .3rem;
	border-inline-start: 1px solid currentColor;
	border-block-start: 1px solid currentColor;
	transform: rotate(-45deg);
	opacity: .6;
}

.at-crumbs a {
	color: var(--text-faint);
	text-decoration: none;
	font-weight: 500;
}

.at-crumbs a:hover { color: var(--text-muted); }

.at-crumbs [aria-current] { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   עמוד מאמר
   ══════════════════════════════════════════════════════════

   חל רק על .site-main.is-article — עמוד שיש לו הורה. עמודי מקטע
   ודף הבית ממשיכים בפריסה הרגילה.
*/

/* ── פס התקדמות קריאה ── */

.at-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 200;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

.at-progress__bar {
	display: block;
	height: 100%;
	background: var(--accent);
	/* transform-origin בצד ההתחלה של הכיוון — ב-RTL זה הימין */
	transform-origin: right center;
	transform: scaleX(0);
	will-change: transform;
}

:root[dir="ltr"] .at-progress__bar { transform-origin: left center; }

/* ── פריסת המאמר ── */

.is-article .at-article {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);

	/*
	 * ── בכוונה בלי align-items: start ──
	 * position: sticky נעצר בגבול המכולה שלו. אם עמודת הצד מתכווצת
	 * לגובה התוכן שלה (268px מול 4,951px של המאמר), התוכן העניינים
	 * נעלם מיד אחרי הגלילה הראשונה. ברירת המחדל של grid — stretch —
	 * נותנת לו את כל גובה השורה, וזה מה שמאפשר לו להיצמד.
	 */
}

/*
 * התוכן ראשון ב-DOM, תוכן העניינים אחריו. ב-RTL העמודה השנייה
 * נופלת שמאלה — כלומר הטקסט נשאר בצד שבו מתחילים לקרוא.
 * זו גם הסדר הנכון לקורא מסך: התוכן לפני העזר.
 */
@media (min-width: 68rem) {
	.is-article .at-article {
		grid-template-columns: minmax(0, 1fr) 15rem;
	}

	.is-article .at-article.is-single-column {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * ── קו יישור אחד ──
 *
 * כל ילד ישיר של גוף המאמר — פסקה, כותרת, תמונה, כלי, טבלה,
 * תיבת הערה — חולק בדיוק את אותם קצוות. קו אנכי אחד לאורך כל
 * העמוד.
 *
 * ניסיתי קודם גישה שבה קופסאות מרופדות "מדממות" החוצה כדי שהטקסט
 * שבתוכן יתיישר עם הטקסט הרגיל. זה עבד לטקסט — אבל יצר **שני
 * קווי קופסה**, אחד לקופסאות ואחד לתמונות. שני קווים נקראים
 * כרשלנות הרבה יותר מאשר טקסט מוסט בתוך קופסה.
 *
 * ההחלטה: קצה חיצוני אחיד. טקסט בתוך קופסה מוסט פנימה בכוונה —
 * הקופסה היא מכל, וההסטה קוראת כמכוונת.
 */
.is-article .at-article__body {
	--_pad: var(--space-m);

	max-width: var(--content-max);
}

/* אף רכיב לא חורג ולא מצטמצם מהקו */
.is-article .at-article__body > * {
	margin-inline: 0;
	max-width: none;
}

/* ריפוד אחיד לכל הקופסאות — כך גם הטקסט שבתוכן על קו אחד */
.is-article .at-article__body > .at-lede,
.is-article .at-article__body > .at-tool,
.is-article .at-article__body > .at-ranges,
.is-article .at-article__body > .at-notice,
.is-article .at-article__body > .at-disclaimer {
	padding-inline: var(--_pad);
}

.is-article .at-article__body > .at-math > .at-math__summary,
.is-article .at-article__body > .at-math > .at-math__body {
	padding-inline: var(--_pad);
}

/*
 * קופסאות עם פס צבע בצד ההתחלה — הגבול נכנס לחשבון הריפוד.
 * בלי הקיזוז הטקסט שלהן נופל 3px פנימה משאר הקופסאות, וההפרש
 * הזה נראה בעין כשהן זו מתחת לזו.
 */
.is-article .at-article__body > .at-lede,
.is-article .at-article__body > .at-notice,
.is-article .at-article__body > .at-disclaimer {
	padding-inline-start: calc(var(--_pad) - 3px);
}

/* ── תוכן עניינים דביק ── */

.at-toc-sticky {
	position: sticky;
	top: 7.75rem;
	padding-inline-start: var(--space-s);
	border-inline-start: 1px solid var(--hairline);
}

@media (max-width: 67.99rem) {
	.at-toc-sticky {
		position: static;
		margin-block: var(--space-l);
		padding: var(--space-s);
		border: 1px solid var(--border);
		border-inline-start-width: 2px;
		border-inline-start-color: var(--accent);
		border-radius: var(--radius-m);
	}
}

.at-toc-sticky__title {
	margin: 0 0 var(--space-s);
	font-size: var(--step--2);
	font-weight: 700;
	/* אין רישיות בעברית — הריווח והמשקל עושים את עבודת ה-CAPS */
	letter-spacing: .12em;
	color: var(--text-faint);
}

.at-toc-sticky__title::before { display: none; }

.at-toc-sticky__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.at-toc-sticky__item { max-width: none; }

.at-toc-sticky__link {
	display: grid;
	grid-template-columns: 2.75ch 1fr;
	/* בלי זה המספר נמתח לגובה התא ולא יושב על בסיס שורת הטקסט */
	align-items: baseline;
	gap: .6rem;
	padding-block: .42rem;
	color: var(--text-faint);
	text-decoration: none;
	font-size: var(--step--1);
	line-height: 1.4;
	transition: color var(--dur-fast) var(--ease-out);
}

.page-content .at-toc-sticky__link,
.at-toc-sticky__link { text-decoration: none; }

.at-toc-sticky__num {
	font-family: var(--font-mono);
	/* בגודל שורת הטקסט ולא קטן ממנה, ומודגש — אחרת הוא נבלע */
	font-size: var(--step--1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--text-faint);
	direction: ltr;
	transition: color var(--dur-fast) var(--ease-out);
}

.at-toc-sticky__link:hover { color: var(--text-muted); }
.at-toc-sticky__link:hover .at-toc-sticky__num { color: var(--text-muted); }

.at-toc-sticky__link.is-active { color: var(--text); }
.at-toc-sticky__link.is-active .at-toc-sticky__num { color: var(--accent); }

/* ── כותרות המאמר ── */

/*
 * במאמר הכותרות מקבלות מספר תואם לתוכן העניינים. זה המוטיב
 * מ-Rimac: הקורא תמיד יודע באיזה פרק הוא נמצא.
 */
.is-article .at-article__body { counter-reset: at-section; }

/*
 * ⚠ לא grid ולא flex כאן. פריסה כזו הופכת כל צומת ילד של הכותרת
 * לפריט נפרד, ולכן כותרת שיש בה תגית inline — למשל
 * ‎<h2>מה כיול <em>לא</em> מתקן</h2>‎ — נשברה לשתי שורות עם רווח
 * באמצע. המספר יושב כ-‎::before‎ inline-block, וכל תוכן הכותרת
 * ממשיך לזרום כטקסט רגיל.
 */
.is-article .at-article__body > h2 {
	counter-increment: at-section;
	display: block;
	margin-top: var(--space-2xl);
	scroll-margin-top: 6rem;
}

/* הקו הקצר מוחלף במספר הפרק */
.is-article .at-article__body > h2::before {
	content: counter(at-section, decimal-leading-zero);
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	/* ⚠ צד מפורש ולא margin-inline-end: ה-direction: ltr שלמטה חל על
	   האלמנט עצמו, ולכן תכונה לוגית הייתה נופלת על הצד ההפוך */
	margin-left: .7rem;
	background: none;
	font-family: var(--font-mono);
	/* ביחידות em — המספר גדל יחד עם הכותרת ונשאר מיושר לבסיס השורה */
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1;
	vertical-align: baseline;
	color: var(--accent);
	direction: ltr;
}

/* ── ניווט הבא/הקודם ── */

.at-articlenav {
	position: relative;
	margin-top: var(--space-2xl);
	padding-block: var(--space-xl);
	background: var(--bg-sunken);
}


.at-articlenav__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-s);
	max-width: var(--wide-max);
	margin-inline: auto;
	padding-inline: var(--space-s);
}

.at-articlenav__link {
	position: relative;
	display: block;
	padding: var(--space-m);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	color: inherit;
	text-decoration: none;

	transition: background-color var(--dur-base) var(--ease-out);
}

.page-content .at-articlenav__link,
.at-articlenav__link { text-decoration: none; }

.at-articlenav__link:hover { background: var(--surface); }

.at-articlenav__link--prev { text-align: start; }
.at-articlenav__link--next { text-align: end; }

.at-articlenav__dir {
	display: block;
	margin-bottom: var(--space-2xs);
	font-size: var(--step--2);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--accent);
}

.at-articlenav__title {
	display: block;
	font-size: var(--step-1);
	font-weight: 700;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

.at-articlenav__section {
	display: block;
	margin-top: .3rem;
	font-size: var(--step--2);
	color: var(--text-faint);
}

.at-articlenav__slot { display: none; }

@media (min-width: 40rem) {
	.at-articlenav__slot { display: block; }
}

/* ══════════════════════════════════════════════════════════
   רכיבי תוכן
   ══════════════════════════════════════════════════════════ */

/* ההגדרה במשפט אחד — פותחת כל עמוד זווית */
.at-lede {
	position: relative;
	margin: 0 0 var(--space-l);
	padding: var(--space-m) var(--space-l);
	background: linear-gradient(
		to left,
		var(--accent-soft),
		transparent 70%
	);
	border-inline-start: 3px solid var(--accent);
	border-radius: 0 var(--radius-l) var(--radius-l) 0;
	font-size: var(--step-1);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--text);
	max-width: none;
}

.at-lede-text {
	font-size: var(--step-1);
	line-height: var(--leading-snug);
	color: var(--text-muted);
	max-width: 48ch;
	margin-bottom: var(--space-l);
}

/* ── רשימת השפעות ── */

.at-effects {
	margin-block: var(--space-s) var(--space-m);
	padding-inline-start: 0;
	list-style: none;
	max-width: var(--content-max);
}

.at-effects li {
	position: relative;
	padding-inline-start: 1.45rem;
	margin-block: var(--space-2xs);
	max-width: none;
}

/*
 * ── סימן הזווית ──
 *
 * קודם היה כאן קו אופקי קצר כסימן מדידה, אבל בעין הוא נקרא כמקף
 * ולא כתבליט רשימה — במיוחד בעברית, שבה מקף הוא סימן פיסוק נפוץ
 * בתחילת שורה.
 *
 * במקומו: זווית קטנה, אותו מוטיב כמו סמל האתר. שני גבולות שיוצרים
 * פינה, מסובבים ב-45°. על-נושאי — האתר עוסק בזוויות — ואי אפשר
 * לבלבל אותו עם פיסוק.
 */
.at-effects li::before {
	content: "";
	position: absolute;
	inset-inline-start: .15rem;
	top: .58em;
	width: .34rem;
	height: .34rem;

	/*
	 * ── למה גבולות פיזיים ולא לוגיים ──
	 * הצירוף שמאל+תחתון עם סיבוב 45° נותן חץ שמצביע שמאלה — לכיוון
	 * הטקסט ב-RTL. גבולות לוגיים היו מתהפכים עם הכיוון, אבל הסיבוב
	 * לא — והשפיץ היה מצביע למטה במקום לצד. באתר RTL בלבד, ערכים
	 * פיזיים הם הבחירה הנכונה כאן.
	 */
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
	opacity: .9;
}

/* ── שתי עמודות: מגדילים מול מקטינים ── */

.at-twocol {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	margin-block: var(--space-m) var(--space-l);
}

.at-col {
	position: relative;
	padding: var(--space-m);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	overflow: hidden;
}

/* פס צבע עליון — מבדיל בין הכיוונים בלי להסתמך על סדר הקריאה */
.at-col::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
}

.at-col--plus::before { background: var(--sig-ok); }
.at-col--minus::before { background: var(--sig-warn); }

.at-col h3 {
	margin: 0 0 var(--space-2xs);
	font-size: var(--step-0);
}

.at-col ul {
	margin: 0;
	padding-inline-start: 1.05rem;
	font-size: var(--step--1);
	line-height: 1.55;
	color: var(--text-muted);
}

.at-col li { max-width: none; margin-block: .35rem; }
.at-col li::marker { color: var(--text-faint); }

/* ── תיבת הערה ── */

.at-notice {
	margin-block: var(--space-m);
	padding: var(--space-s) var(--space-m);
	background: var(--bg-raised);
	border: 1px solid var(--hairline);
	border-inline-start: 3px solid var(--sig-ok);
	border-radius: var(--radius-m);
	max-width: var(--content-max);
}

.at-notice--warn { border-inline-start-color: var(--sig-warn); }

.at-notice p {
	margin: 0;
	max-width: none;
	font-size: var(--step--1);
	line-height: 1.6;
	color: var(--text-muted);
}

.at-notice strong { color: var(--text); }

/* ── תוכן עניינים של עמוד מקטע ── */

.at-toc {
	display: grid;
	gap: var(--space-2xs);
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	margin-block: var(--space-l);
	padding: 0;
	list-style: none;
}

.at-toc__item { max-width: none; }

.at-toc__link {
	position: relative;
	display: block;
	height: 100%;
	padding: var(--space-s) var(--space-m);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-out),
	            background-color var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}

a.at-toc__link::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width var(--dur-base) var(--ease-out);
}

a.at-toc__link:hover {
	border-color: var(--border-strong);
	background: var(--surface);
	transform: translateY(-2px);
}

a.at-toc__link:hover::after { width: 100%; }

.at-toc__title {
	display: block;
	font-weight: 700;
	margin-bottom: .2rem;
	letter-spacing: var(--tracking-tight);
}

.at-toc__desc {
	display: block;
	font-size: var(--step--1);
	color: var(--text-muted);
	line-height: 1.5;
}

/*
 * פריט שעדיין לא נכתב מסומן במפורש ואינו קישור.
 * קישור שנראה פעיל ומוביל ל-404 גרוע מהודאה שהתוכן בבנייה.
 */
.at-toc__item.is-pending .at-toc__link {
	opacity: .45;
	cursor: default;
	background: transparent;
	border-style: dashed;
}

.at-toc__soon {
	display: inline-block;
	margin-top: var(--space-2xs);
	padding: .05rem .45rem;
	border: 1px solid currentColor;
	border-radius: var(--radius-s);
	font-size: var(--step--2);
	font-weight: 600;
	color: var(--sig-warn);
}

/* ══════════════════════════════════════════════════════════
   מדיה
   ══════════════════════════════════════════════════════════

   שלושה רוחבים. ברירת המחדל צרה כמו עמודת הטקסט, כי תמונה
   שרחבה מהטקסט שסביבה קוטעת את הקריאה במקום לשרת אותה.
   רוחב חורג שמור לתמונות שבאמת צריכות אותו: צילומי מתלה,
   השוואות לפני/אחרי, דיאגרמות רחבות.
*/

.at-figure {
	margin-block: var(--space-l);
	max-width: var(--content-max);
}

.page-content > .at-figure--wide { max-width: var(--wide-max); }
.at-figure--wide { max-width: var(--wide-max); }

.page-content > .at-figure--full,
.at-figure--full {
	max-width: none;
	margin-inline: calc(var(--space-s) * -1);
}

/*
 * מסגרת המדיה — יחס גובה-רוחב קבוע מונע קפיצת פריסה בזמן טעינה.
 *
 * max-height היא תקרה מכוונת: ביחס 3:2 ברוחב חורג התמונה תופסת
 * כמעט מסך שלם, והגולש מאבד את ההקשר בטקסט שמסביב. התקרה גוברת
 * על היחס והתמונה נחתכת מעט — object-fit: cover מטפל בזה בלי
 * לעוות. עדיף חיתוך קל על תמונה שמשתלטת על העמוד.
 */
.at-figure__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-l);
	border: 1px solid var(--border);
	background: var(--bg-sunken);
	aspect-ratio: var(--at-ratio, 16 / 9);
	max-height: 58vh;

	/*
	 * width: 100% הוא חובה ולא קישוט.
	 *
	 * בלעדיו, max-height יחד עם aspect-ratio גורם לדפדפן לכווץ את
	 * ה**רוחב** כדי לשמור על היחס — והתמונה נסוגה פנימה ולא מתיישרת
	 * עם הטקסט שסביבה. עם רוחב מפורש, max-height חותך את הגובה
	 * במקום, ו-object-fit: cover מטפל בחיתוך בלי לעוות.
	 */
	width: 100%;
}

.at-figure__frame > img,
.at-figure__frame > video,
.at-figure__frame > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}

/* תמונות דיאגרמה — להכיל ולא לחתוך */
.at-figure--contain .at-figure__frame > img {
	object-fit: contain;
	padding: var(--space-s);
}

/* ⚠ תקרת הגובה מבוטלת לדיאגרמות.
   58vh נועד למנוע **תמונה** שממלאת מסך שלם. דיאגרמה היא לא תמונה:
   קוראים אותה, לא סוקרים אותה. התקרה כיווצה אותה לפי הצלע הצרה,
   ומכיוון שגודל הגופן ב-SVG נמדד ביחידות ה-viewBox הוא התכווץ יחד
   איתה — תווית של 14 יחידות הופיעה בתשעה פיקסלים.
   נמדד ב-diag-audit.py: הביטול מחזיר את היחס מ-0.65 ל-0.94. */
.at-figure--contain .at-figure__frame {
	max-height: none;
}

/* ── כיתוב ──
   סימן מדידה מוביל, עקבי עם רשימות ההשפעות. */
.at-figure__caption {
	display: flex;
	gap: .6rem;
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
	/* וורדפרס מטה figcaption באיטליק כברירת מחדל. בעברית אין
	   איטליק אמיתי, והדפדפן מזייף אותו בהטיה שנראית שבורה. */
	font-style: normal;
	line-height: 1.5;
	color: var(--text-muted);
	max-width: var(--measure);
}

.at-figure__caption::before {
	content: "";
	flex: none;
	width: .55rem;
	height: 2px;
	margin-top: .72em;
	background: var(--accent);
	opacity: .8;
	border-radius: 1px;
}

.at-figure__credit {
	color: var(--text-faint);
	font-size: var(--step--2);
}

/* ══ ממלא מקום מעוצב ══
   כשעדיין אין מדיה, המקום מסומן במפורש עם תיאור מה אמור להיות
   שם. עדיף על תמונה שבורה, ועדיף על להשאיר את העמוד ריק ולשכוח.
   הרשת ברקע מקשרת אותו לשפה הטכנית של האתר. */

.at-media-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: var(--space-m);
	text-align: center;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-l);
	background-color: var(--bg-sunken);
	background-image:
		linear-gradient(to left, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
	background-size: var(--grid-cell) var(--grid-cell);
	aspect-ratio: var(--at-ratio, 16 / 9);
	/* אותה תקרה כמו מסגרת המדיה — כדי שהמעבר לתמונה אמיתית
	   לא יזיז את הפריסה */
	max-height: 58vh;
	color: var(--text-faint);
}

.at-media-slot__icon {
	width: 2rem;
	height: 2rem;
	opacity: .5;
}

.at-media-slot__kind {
	font-size: var(--step--2);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--sig-warn);
}

.at-media-slot__desc {
	max-width: 34ch;
	font-size: var(--step--1);
	line-height: 1.45;
	margin: 0;
}

/* ── וידאו ── */

.at-video .at-figure__frame { background: #000; }

/* כפתור הפעלה על תמונת פוסטר */
.at-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: #fff;
}

.at-video__play::before {
	content: "";
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, .35);
	transition: transform var(--dur-base) var(--ease-spring),
	            background-color var(--dur-fast) var(--ease-out);
}

.at-video__play:hover::before {
	transform: scale(1.08);
	background: rgba(0, 0, 0, .72);
}

.at-video__play svg {
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	margin-inline-start: .18rem; /* משולש נראה ממורכז כשהוא מוזז מעט */
	pointer-events: none;
}

/* ── השוואה לפני/אחרי ── */

.at-compare {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-block: var(--space-l);
	max-width: var(--wide-max);
}

.at-compare .at-figure { margin-block: 0; max-width: none; }

/* תווית פינה שמסמנת איזה צד זה — בלי לקרוא את הכיתוב */
.at-compare__label {
	position: absolute;
	inset-block-start: var(--space-2xs);
	inset-inline-start: var(--space-2xs);
	z-index: 2;
	padding: .1rem .5rem;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, .65);
	backdrop-filter: blur(6px);
	font-size: var(--step--2);
	font-weight: 700;
	color: #fff;
}

/* ── תמונה בכרטיס ── */

.at-card-media {
	position: relative;
	margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) var(--space-s);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	background: var(--bg-sunken);
}

.at-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── טבלאות תוכן ── */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}

th, td {
	text-align: right;
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--hairline);
	vertical-align: top;
}

thead th {
	color: var(--text-faint);
	font-weight: 600;
	font-size: var(--step--2);
	letter-spacing: .03em;
	border-bottom-color: var(--border);
}

tbody th { font-weight: 600; }

/* טבלאות רחבות גוללות בתוך עצמן. גוף העמוד לעולם לא גולל אופקית. */
.at-scroll-x {
	overflow-x: auto;
	max-width: 100%;
	overscroll-behavior-x: contain;
}

/* ══════════════════════════════════════════════════════════
   דף הבית
   ══════════════════════════════════════════════════════════ */

.at-hero {
	position: relative;
	padding: var(--space-2xl) 0 var(--space-l);
	text-align: center;
	overflow: hidden;
}

.at-hero::before {
	content: "";
	position: absolute;
	inset: -20% -50% auto;
	height: 140%;
	background:
		radial-gradient(ellipse 50% 55% at 50% 0%, var(--accent-soft), transparent 70%);
	pointer-events: none;
}

.at-hero > * { position: relative; }

.at-hero__kicker {
	display: inline-block;
	margin: 0 0 var(--space-m);
	padding: .2rem .85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--bg-raised);
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--text-muted);
	max-width: none;
}

.at-hero h1 {
	margin: 0 auto var(--space-m);
	max-width: 17ch;
	font-size: var(--step-5);
	font-weight: 800;
}

.at-hero__lede {
	margin: 0 auto;
	max-width: 46ch;
	font-size: var(--step-1);
	line-height: var(--leading-snug);
	color: var(--text-muted);
}

/* ── מדיית הפתיח ──
   רחבה מכל שאר האתר ובלי תקרת הגובה הרגילה. זו התמונה היחידה
   שמותר לה להשתלט על המסך הראשון — זה בדיוק התפקיד שלה. */

.at-hero-media {
	margin-block: var(--space-l) var(--space-2xl);
	max-width: var(--full-max);
	margin-inline: auto;
}

.at-hero-media .at-figure {
	margin-block: 0;
	max-width: none;
}

.at-hero-media .at-figure__frame,
.at-hero-media .at-media-slot {
	max-height: 72vh;
	border-radius: var(--radius-xl);
}

/* זוהר עדין סביב המסגרת — מרים אותה מהרקע בלי צל כבד */
.at-hero-media .at-figure__frame {
	box-shadow: var(--shadow-md), 0 0 0 1px var(--hairline);
}

.at-hero-media .at-figure__caption {
	max-width: none;
	justify-content: center;
	text-align: center;
}

/* ══════════════════════════════════════════════════════════
   הצהרת מיקום — "לאן הגעת"
   ══════════════════════════════════════════════════════════ */

.at-position {
	max-width: var(--content-max);
	margin-inline: auto;
	margin-block: var(--space-2xl);
	text-align: center;
}

.at-position__statement {
	margin: 0 auto var(--space-m);
	max-width: 36ch;
	font-size: var(--step-2);
	font-weight: 700;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--text);
}

.at-position__statement em {
	color: var(--accent);
	font-style: normal;
}

.at-position p {
	margin-inline: auto;
	color: var(--text-muted);
}

/* שלוש נקודות מפתח בשורה */
.at-facts {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-block: var(--space-l) 0;
	padding: var(--space-m) 0 0;
	border-top: 1px solid var(--hairline);
	list-style: none;
	max-width: none;
}

.at-facts li {
	max-width: none;
	font-size: var(--step--1);
	color: var(--text-muted);
	line-height: 1.5;
}

.at-facts strong {
	display: block;
	margin-bottom: .2rem;
	font-size: var(--step-0);
	color: var(--text);
}

/* ══════════════════════════════════════════════════════════
   ניתוב לפי רמת ידע
   ══════════════════════════════════════════════════════════

   שלושה מסלולים, לא לפי נושא אלא לפי כמה הגולש כבר יודע.
   השאלה בגוף ראשון בכוונה — קל יותר לזהות את עצמך במשפט
   "אני לא יודע מה זה בכלל" מאשר בקטגוריה בשם "יסודות".
*/

.at-levels {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin-block: var(--space-l) var(--space-2xl);
	padding: 0;
	list-style: none;
}

.at-levels li { max-width: none; }

.at-level {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-m);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-out),
	            background-color var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}

.page-content a.at-level,
a.at-level { text-decoration: none; }

a.at-level:hover {
	border-color: var(--accent);
	background: var(--surface);
	transform: translateY(-3px);
}

/* ── מד רמה ──
   שלושה פסים שמתמלאים לפי הרמה. קריא במבט חטוף, ועקבי עם
   השפה הטכנית של האתר. */
.at-level__meter {
	display: flex;
	gap: 3px;
	margin-bottom: var(--space-s);
}

.at-level__meter span {
	width: 1.4rem;
	height: 3px;
	border-radius: 2px;
	background: var(--border-strong);
}

.at-level__meter span.is-on { background: var(--accent); }

/* ── התווית היא כותרת הכרטיס, לא תגית ──
   ⚠ קודם היא הייתה ‎--step--2‎ (‎~12px‎) עם ‎letter-spacing: .06em‎ —
   מידות של תגית זעירה. הבעיה: היא זו שאומרת **למי הכרטיס מיועד**,
   וזו ההחלטה שהמבקר צריך לעשות בשנייה הראשונה. עכשיו היא בגודל h2,
   והציטוט שמתחתיה ירד לגודל גוף — ההיררכיה מתאימה לתפקיד.
   ⚠ המרווח בין האותיות ירד: ‎.06em‎ נועד לטקסט זעיר, ובגודל ‎~26px‎
   הוא מפרק את המילה העברית. */
.at-level__tag {
	font-size: var(--step-2);
	font-weight: 800;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--accent);
	margin-bottom: var(--space-2xs);
}

/*
 * ── למה span ולא p ──
 * הכרטיס כולו הוא <a>, ו-wpautop של וורדפרס לא יודע לטפל ב-<p>
 * בתוך קישור: הוא מוסיף <br>, מזריק <p></p> ריקים, ואף סוגר את
 * הקישור באמצע ופותח חדש — מה שהופך שלושה כרטיסים לשישה שבורים.
 * span עם display:block נותן את אותה תוצאה ויזואלית ושורד.
 */
.at-level__tag,
.at-level__q,
.at-level__desc { display: block; }

.at-level__q {
	margin: 0 0 var(--space-2xs);
	font-size: var(--step-0);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--text);
	max-width: none;
}

.at-level__desc {
	margin: 0 0 var(--space-m);
	font-size: var(--step--1);
	line-height: 1.55;
	color: var(--text-muted);
	max-width: none;
}

/* דוחף את הקריאה לפעולה לתחתית הכרטיס, כך שכל השלושה מיושרים */
.at-level__go {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--accent);
}

.at-level__go::after {
	content: "";
	width: .38rem;
	height: .38rem;
	border-inline-start: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-fast) var(--ease-out);
}

a.at-level:hover .at-level__go::after {
	transform: rotate(45deg) translate(2px, 2px);
}

.at-level[aria-disabled="true"] {
	opacity: .45;
	pointer-events: none;
	border-style: dashed;
	background: transparent;
}

/* ── כותרת מקטע ── */

/* ⚠ מיושר להתחלה ולא למרכז. הרכיב הזה קיים רק בדף הבית (ארבעה
   מופעים), וכל התוכן סביבו — הפתיח, הכרטיסים, הספרייה, הפאנלים —
   נשען על השפה הימנית. כותרת ממורכזת מעליהם לא התיישרה לכלום. */
.at-section-head {
	margin-block: var(--space-2xl) var(--space-m);
	text-align: start;
}

.at-section-head h2 {
	margin: 0 0 var(--space-2xs);
	font-size: var(--step-3);
}

/* הקו מעל h2 נצמד לשפה הימנית יחד עם הכותרת */
.at-section-head h2::before { margin-inline: 0 auto; }

.at-section-head p {
	margin: 0;
	max-width: 50ch;
	color: var(--text-muted);
}

/* ── כרטיסי "מה מעניין אותך" ── */

.at-paths {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-block: var(--space-l) var(--space-2xl);
	padding: 0;
	list-style: none;
}

.at-paths li { max-width: none; }

.at-path {
	position: relative;
	display: block;
	height: 100%;
	padding: var(--space-m);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}

.at-path:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.at-path__icon {
	display: block;
	font-size: 1.6rem;
	line-height: 1;
	margin-bottom: var(--space-2xs);
	filter: grayscale(.25);
}

.at-path__title {
	display: block;
	font-weight: 700;
	font-size: var(--step-0);
	margin-bottom: .2rem;
	letter-spacing: var(--tracking-tight);
}

.at-path__desc {
	display: block;
	font-size: var(--step--1);
	color: var(--text-muted);
	line-height: 1.5;
}

.at-path[aria-disabled="true"] {
	opacity: .45;
	pointer-events: none;
	border-style: dashed;
	background: transparent;
}

.at-path__soon {
	display: inline-block;
	margin-top: var(--space-2xs);
	padding: .05rem .45rem;
	border: 1px solid currentColor;
	border-radius: var(--radius-s);
	font-size: var(--step--2);
	font-weight: 600;
	color: var(--sig-warn);
}

/* ── פתק מצב הבנייה ── */

.at-buildnote {
	margin-block: var(--space-2xl);
	padding: var(--space-m) var(--space-l);
	background: var(--bg-sunken);
	border: 1px dashed var(--border);
	border-radius: var(--radius-l);
	font-size: var(--step--1);
	color: var(--text-muted);
}

.at-buildnote h2 {
	margin: 0 0 var(--space-2xs);
	font-size: var(--step-0);
	color: var(--text);
}

.at-buildnote h2::before { display: none; }
.at-buildnote ul { margin: 0; padding-inline-start: 1.2rem; }
.at-buildnote li { max-width: none; margin-block: .3rem; }

/* ══════════════════════════════════════════════════════════
   פוטר
   ══════════════════════════════════════════════════════════ */

.site-footer {
	margin-top: var(--space-3xl);
	padding-block: var(--space-l);
	border-top: 1px solid var(--hairline);
	background: var(--bg-sunken);
	color: var(--text-faint);
	font-size: var(--step--1);
}

.site-footer .footer-inner {
	max-width: var(--full-max);
	margin-inline: auto;
	padding-inline: var(--space-s);
}

/* ══════════════════════════════════════════════════════════
   נגישות
   ══════════════════════════════════════════════════════════ */

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

.at-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* דילוג לתוכן — מופיע רק בפוקוס מקלדת */
.at-skip-link {
	position: absolute;
	inset-inline-start: var(--space-s);
	top: -4rem;
	z-index: 999;
	padding: var(--space-2xs) var(--space-s);
	background: var(--surface);
	border: 1px solid var(--accent);
	border-radius: var(--radius-m);
	text-decoration: none;
	transition: top var(--dur-fast) var(--ease-out);
}

.at-skip-link:focus { top: var(--space-s); }

/* ── מתג מצב תצוגה ── */

.at-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out);
}

.at-theme-toggle:hover {
	color: var(--text);
	border-color: var(--border-strong);
}

.at-theme-toggle svg { width: 1rem; height: 1rem; }
.at-theme-toggle .at-icon-sun { display: none; }
:root[data-theme="light"] .at-theme-toggle .at-icon-sun { display: block; }
:root[data-theme="light"] .at-theme-toggle .at-icon-moon { display: none; }

/* ══════════════════════════════════════════════════════════
   הכביש — שכבת העיצוב החדשה
   ══════════════════════════════════════════════════════════

   כל מה שמתחת דורס את הפריסה הקודמת. העיקרון: הרקע הוא אספלט
   אמיתי, התוכן צף מעליו, וגוף המאמר יושב על גיליון חלק.
   ההבדל בין הכביש לגיליון הוא מרקם מול חלקות — לא בהיר מול כהה.
   ══════════════════════════════════════════════════════════ */

/* ── שכבות הרקע ──
   --road-tile מוזרק מ-functions.php כ-data URI. הוא אריח שנתפר
   ללא תפר וחוזר, ולכן גודל האבן קבוע בכל רוחב מסך. */
.at-road,
.at-road-lum,
.at-lane {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

.at-road {
	z-index: 0;
	background: var(--road-base);
	background-image: var(--road-tile);
	background-repeat: repeat;
	/* ⚠ חייב לבוא אחרי הקיצור background, שמאפס background-size.
	   ⚠ --road-tile-render ולא --road-tile-size: השני מזין את המסכה
	   של הפס הצהוב וחייב להישאר בגודל האמיתי של הקובץ. */
	background-size: var(--road-tile-render) var(--road-tile-render);
}

/* בהירות שמשתנה לאורך העמוד: כתמי תיקון, אזורי שחיקה וצל.
   בלי זה האספלט נקרא כטפט אחיד ולא כמשטח אמיתי. */
.at-road-lum {
	z-index: 1;
	background:
		radial-gradient(1300px 500px at 78% -4%, rgba(255, 255, 255, .12), transparent 62%),
		radial-gradient(900px 400px at 6% 34%, rgba(0, 0, 0, .42), transparent 60%),
		radial-gradient(1000px 460px at 96% 76%, rgba(255, 255, 255, .055), transparent 62%),
		linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .34) 100%);
}

/* ── קו הנתיב הצהוב ──
   רץ לכל אורך האתר בשוליים השמאליים. הפריסה מקצה לו מסדרון
   (--lane-clear) ולכן אף אלמנט לא יכול לעלות עליו. */
.at-lane {
	z-index: 2;
	inset: 0 auto 0 var(--lane-x);
	width: var(--lane-w);
}

/*
 * ── למה זו מסכה ולא ציור ──
 *
 * צבע כביש נמרח דק על משטח מחוספס: הוא מכסה את ראשי האבנים ולא
 * מגיע לחריצים העמוקים ביניהן. לכן המסכה כאן היא **מפת הגבהים של
 * האספלט עצמו** — ראש אבן לבן, חריץ שחור — וכל כתם כהה בתוך הקו
 * הוא חריץ אמיתי במיקומו.
 *
 * ניסיתי קודם לצייר "קילופים" כאליפסות. זה נראה מלאכותי בכל
 * גודל ובכל עיוות, כי העין מזהה צורות חוזרות.
 *
 * בונוס: חריץ שנופל על שפת הקו אוכל אותה, וכך הקצוות נשברים
 * בלי עבודה נוספת. הפילטר מוסיף על זה עיוות דו-תדרי.
 */
.at-lane__paint {
	position: absolute;
	inset: 0;
	background: var(--accent);
	filter: url(#at-paint-edge);
	-webkit-mask-image: var(--road-mask),
		linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .55) 9%, #fff 22%,
			rgba(255, 255, 255, .42) 34%, #fff 47%, rgba(255, 255, 255, .6) 58%,
			#fff 71%, rgba(255, 255, 255, .38) 82%, #fff 93%);
	mask-image: var(--road-mask),
		linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .55) 9%, #fff 22%,
			rgba(255, 255, 255, .42) 34%, #fff 47%, rgba(255, 255, 255, .6) 58%,
			#fff 71%, rgba(255, 255, 255, .38) 82%, #fff 93%);
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-size: var(--road-tile-size) var(--road-tile-size), 100% 100%;
	mask-size: var(--road-tile-size) var(--road-tile-size), 100% 100%;
	mask-mode: luminance, alpha;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* שכבה דקה של האספלט מעל הצבע — נותנת לו את גוון הכביש */
.at-lane__tex {
	position: absolute;
	inset: 0;
	background-image: var(--road-tile);
	background-repeat: repeat;
	background-attachment: fixed;
	mix-blend-mode: multiply;
	opacity: .22;
}

/* התוכן מעל שכבות הכביש.
   ⚠ הכותרת לא נכללת כאן. היא sticky עם z-index 100, וכלל כללי
   שמחיל position: relative היה מבטל את ההיצמדות שלה ומוריד את
   התפריט הנפתח מתחת לרכיבים אחרים. */
main.site-main,
.site-footer,
.at-progress {
	position: relative;
	z-index: 4;
}

.site-header {
	z-index: 100;   /* נשאר sticky מהכלל המקורי */
}

/* ── מסדרון הקו ──
   ⚠ ריפוד קבוע גזל 75px מהווידאו בדף הבית. במסך רחב המכולה
   ממורכזת ומשאירה שוליים טבעיים גדולים מהקו, ואז הריפוד מיותר.
   לכן הוא מופעל רק כשהמכולה באמת מתקרבת לקו.

   עמוד מאמר הוא חריג: הוא רחב יותר (גיליון + רצועה) ולכן מגיע
   לקו גם במסך רחב — שם הריפוד קבוע. */
@media (max-width: 76rem) {
	.site-header .header-inner,
	main.site-main,
	.site-footer .footer-inner {
		padding-left: max(var(--gutter), var(--lane-clear));
	}
}

main.site-main.is-article {
	max-width: calc(var(--article-shell) + var(--lane-clear) + var(--gutter));
	padding-left: max(var(--gutter), var(--lane-clear));
	padding-right: var(--gutter);
}

/* ══ כותרת העמוד — על האספלט, מיושרת לימין ══ */

.at-pagehead__inner {
	max-width: calc(var(--measure) + 2 * var(--sheet-pad));
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* צל טקסט: כותרת מעל מרקם מאבדת ניגודיות בלי זה */
.at-pagehead h1,
.at-pagehead .at-crumbs {
	text-shadow: 0 4px 26px rgba(0, 0, 0, .92);
}

/* ══ פריסת המאמר — תוכן מימין, רצועה משמאל ══ */

@media (min-width: 68rem) {
	.is-article .at-article {
		grid-template-columns: minmax(0, 1fr) var(--rail-w);
		gap: var(--space-l);
	}
}

/*
 * גיליון הקריאה. הרוחב נגזר מהטקסט ועוד השוליים, ולא להפך —
 * אחרת נוצר שטח מת גדול בצד שמאל של הגיליון אחרי היישור לימין.
 */
.is-article .at-article__body {
	max-width: calc(var(--content-max) + 2 * var(--sheet-pad));
	margin-inline-start: 0;
	margin-inline-end: auto;
	padding: var(--space-2xl) var(--sheet-pad) var(--space-xl);
	background: linear-gradient(180deg, var(--bg-raised) 0%, #171a20 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow:
		0 26px 70px -22px rgba(0, 0, 0, .9),
		inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* עמוד מקטע — התוכן צף ישירות מעל הכביש, בלי גיליון */
.page-content:not(.at-article__body) {
	max-width: var(--full-max);
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* ══ מגש מודעה ══
   משטח שקוע ומוצהר. שתי מטרות: לתת למודעה רקע ניטרלי שלא נלחם
   באספלט, ולסמן לגולש בבירור שזה לא תוכן של האתר.
   הגובה שמור מראש כדי שהעמוד לא יקפוץ כשהיחידה נטענת. */
.at-ad {
	margin-block: var(--space-xl);
	border-radius: var(--radius-l);
	overflow: hidden;
	background: rgba(9, 11, 15, .55);
	border: 1px solid var(--hairline);
	backdrop-filter: blur(10px);
}

.at-ad__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem .8rem;
	font-family: var(--font-mono);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--text-faint);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* מידות חייבות LTR — ב-RTL "300×600" מוצג כ-"600×300" */
.at-ad__size {
	direction: ltr;
	unicode-bidi: isolate;
}

.at-ad__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(-45deg,
		rgba(255, 255, 255, .018) 0 10px, transparent 10px 20px);
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .08em;
	text-align: center;
	padding: var(--space-2xs);
}

.at-ad--inline .at-ad__slot { min-height: var(--ad-h-inline, 280px); }
.at-ad--end .at-ad__slot    { min-height: var(--ad-h-end, 250px); }
.at-ad--rail .at-ad__slot   { min-height: var(--ad-h-rail, 600px); }

/*
 * משבצת שיש בה קריאייטיב אמיתי. הגובה השמור, הפסים והריפוד נועדו
 * למקום פנוי בלבד — עם מודעה הם רק היו מוסיפים שוליים סביבה.
 * הסלקטורים חוזרים על שלושת המיקומים כדי לגבור על הגובה שלמעלה.
 */
.at-ad__slot--filled {
	display: block;
	padding: 0;
	background: none;
}

.at-ad--inline .at-ad__slot--filled,
.at-ad--end .at-ad__slot--filled,
.at-ad--rail .at-ad__slot--filled { min-height: 0; }

.at-ad__slot--filled a { display: block; }

/* ⚠ הכלל שמעל דרס את מודעת הבית: ‎.hsad‎ מוגדרת ‎display: flex‎
   עם מרכוז אנכי ב-ad-rotation.css, אבל בספציפיות (0,1,0) —
   והסלקטור שמעל הוא (0,2,1). התוצאה הייתה תוכן שנדבק לראש
   התיבה ו-147px של שחור ריק מתחתיו. ההחרגה כאן ולא שם, כדי
   שהדורס והפתרון יישבו זה לצד זה. הריפוד גם הוא כאן: כללי
   הריפוד המקוריים יושבים ב-container queries שלא תמיד חלים. */
.at-ad__slot--filled a.hsad {
	display: flex;
	padding: 24px clamp(20px, 4vw, 40px);
}

.at-ad__slot--filled img {
	display: block;
	width: 100%;
	height: auto;
}

.at-ad--rail {
	margin-block: var(--space-m) 0;
}

@media (max-width: 68rem) {
	.at-ad--rail { margin-block: var(--space-m); }
	.at-ad--rail .at-ad__slot { min-height: var(--ad-h-rail-narrow, 280px); }
}

/* ══ טבלאות — גלישה פנימית ══
   טבלת טווחים רחבה מגלילה בתוך המכל שלה ולא שוברת את הדף. */
.at-ranges,
.at-scroll-x {
	overflow-x: auto;
}

/* ── קריאוּת מעל האספלט ──
   כל טקסט שיושב ישירות על המרקם מקבל צל. מרקם גוזל ניגודיות:
   אותו אפור שנקרא היטב על משטח אחיד נבלע בין האבנים. */
.at-toc-sticky,
.at-toc-sticky__title,
.at-toc-sticky__link,
.at-crumbs,
.at-pagehead h1 {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .8);
}

.at-toc-sticky__link { color: var(--text-muted); }
.at-toc-sticky__link:hover,
.at-toc-sticky__link.is-current { color: var(--accent); }
.at-toc-sticky__title { color: var(--text-faint); }

/* ── רשתות כרטיסים: auto-fill ולא auto-fit ──
   ⚠ auto-fit מקפל עמודות ריקות, ולכן פריטי השורה האחרונה נמתחים
   לרוחב מלא. רשת של שבעה כרטיסים בשלוש עמודות נראית שבורה: שתי
   שורות צרות ואחת רחבה. auto-fill משאיר את העמודה הריקה במקומה
   וכל הכרטיסים נשארים באותו רוחב. */
/* ⚠ רק .at-toc. הכלל הזה היה גורף וריסק רכיבים שכל מהותם היא מספר
   טורים קבוע: .at-twocol ו-.at-compare קרסו לטור אחד, ו-.at-facts
   ירד משלושה טורים לשניים. */
.at-toc {
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* המשך/הקודם הם תמיד שניים ואמורים למלא — כאן auto-fit נכון */
.at-articlenav__inner {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
/* ══ מסך צר ══
   ⚠ ל-grid item יש min-width: auto, ולכן הגיליון סירב להתכווץ מתחת
   לרוחב התוכן שלו וגלש מהתא. min-width: 0 הוא התיקון.
   בנוסף: ריפוד של 3.5rem מכל צד ומסדרון של 5.2rem גוזלים יחד יותר
   מ-160px, וזה רבע ממסך טלפון. שניהם מתכווצים. */
.is-article .at-article__body {
	min-width: 0;
}

@media (max-width: 60rem) {
	:root {
		--sheet-pad: 1.25rem;
		--lane-w: 10px;
		--lane-clear: 1.9rem;
		--lane-x: .55rem;
	}

	.is-article .at-article__body {
		max-width: 100%;
		border-radius: var(--radius-l);
	}

	main.site-main {
		max-width: 100%;
	}
}

/* ── מידת קריאה לטקסט בלבד ──
   ⚠ הצמצום ל---measure חל על פסקאות וכותרות, ולא על המכולה.
   הניסיון הקודם צמצם את --content-max עצמו וכיווץ יחד איתו את
   הסימולטור, הטבלאות והירו — רכיבים שצריכים כל פיקסל. */
.is-article .at-article__body > p,
.is-article .at-article__body > ul,
.is-article .at-article__body > ol,
.is-article .at-article__body > h2,
.is-article .at-article__body > h3,
.is-article .at-article__body > h4,
.is-article .at-article__body > .at-lede {
	max-width: var(--measure);
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* ══ עמודי קטגוריה ══
   עמוד שער אינו דף הבית ואינו מאמר: אין לו הורה, ולכן single.php
   נותן לו את הפריסה ה"רגילה" — והיא נפרשה על 1108px בעוד שגיליון
   המאמר הוא 848px. ההפרש הזה הוא מה שגרם להם להיראות מרודדים
   ולא באותו קו עם שאר האתר.

   הפתרון: אותו רוחב ואותו קצה ימני כמו גיליון המאמר. בלי גיליון
   עצמו — הכרטיסים כבר פאנלים, ומשטח מתחת לפאנלים הוא הכלה כפולה.

   ⚠ דף הבית מוחרג (body.home). שם הירו הרחב הוא בחירה מכוונת. */
body:not(.home) main.site-main:not(.is-article) {
	max-width: calc(var(--article-shell) + var(--lane-clear) + var(--gutter));
	padding-left: max(var(--gutter), var(--lane-clear));
	padding-right: var(--gutter);
}

body:not(.home) main.site-main:not(.is-article) > .page-content,
body:not(.home) main.site-main:not(.is-article) > .at-pagehead {
	max-width: calc(var(--content-max) + 2 * var(--sheet-pad));
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* ══════════════════════════════════════════════════════════
   ריחוף על קישורים
   ══════════════════════════════════════════════════════════
   ⚠ reset.css של תבנית האב מגדיר a:active, a:hover { color: #333366 } —
   כחול-סגול שלא קיים בפלטה, ועל רקע כהה הוא כמעט בלתי קריא. המשקל
   שלו (0,1,1) גובר על כל מחלקה בודדת, ולכן הוא תפס כל קישור באתר
   שאין לו כלל ריחוף ספציפי יותר. */
a:hover,
a:focus-visible {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════
   פתיח דף הבית
   ══════════════════════════════════════════════════════════ */

/* ── הווידאו כתמונה ממוסגרת ──
   קודם הוא נגע בקצוות ונקרא כרקע. מסגרת, פינות ועומק הופכים אותו
   לאובייקט שמונח על הכביש — באותה שפה של הגיליון והכרטיסים. */
.at-hero-full {
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow:
		0 30px 80px -28px rgba(0, 0, 0, .95),
		inset 0 1px 0 rgba(255, 255, 255, .08);
}

/*
 * ── פריצה לרוחב המסך בדף הבית בלבד ──
 *
 * הקליפ הורחב ל-21:9 בהרחבת פריים (לא בחיתוך), ולכן המסגרת כאן
 * מקבלת בדיוק את היחס שלו — הווידאו נכנס שלם וממלא את הרוחב.
 *
 * ⚠ הניסיון הקודם לרוחב מלא נכשל מסיבה אחרת: הרצועה הייתה בערך
 * 3.9:1 בעוד הקליפ 16:9, כך שיותר ממחצית הגובה נחתך. כאן היחס
 * תואם ואין חיתוך בכלל.
 *
 * ⚠ רק בדף הבית. בעמודי המאמרים יש עמודת צד, ופריצה לרוחב מלא
 * שם עוברת מתחתיה ודורסת את תוכן העניינים.
 *
 * ⚠ 100vw ולא 100% — 100% היה רוחב המכולה. הפיצוי במרווח השלילי
 * מרכז את הרצועה מחדש מול העמודה שהיא יושבת בתוכה.
 */
body.home .at-hero-full {
	aspect-ratio: 21 / 9;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
	border-inline: 0;

	/*
	 * ── ביטול הפריצה בשביל התוכן ──
	 *
	 * המסגרת פורצת לרוחב המסך אבל הכיתוב שעליה הוא חלק מהעמוד,
	 * ולכן הוא חייב להתחיל בדיוק במקום שבו מתחיל כל טקסט אחר.
	 * הריפוד כאן הוא בדיוק המרווח השלילי שמעליו, ולכן תיבת התוכן
	 * של המסגרת חוזרת לחפוף לעמודה שממנה היא פרצה.
	 *
	 * ⚠ ‎50%‎ נמדד מול ההורה — ‎main.site-main‎ — ולכן זה נכון בכל
	 * רוחב ובכל נקודת שבירה בלי לנחש מספרים.
	 *
	 * ⚠ ניסיון קודם חישב ‎(100vw − --wide-max) / 2‎ ופספס ב-6px:
	 * תבנית האב קובעת ל---site-main‏ ‎max-width: 1140px‎ מעל
	 * ‎1200px‎ בסלקטור חזק יותר, כך ש---wide-max כלל לא בתוקף שם.
	 *
	 * ⚠ הרקע והשכבות שמעליו הם ‎position: absolute‎ עם ‎inset: 0‎,
	 * שנמדד מול תיבת הריפוד — הווידאו ממשיך לכסות את כל הרוחב.
	 */
	padding-inline: calc(50vw - 50%);

	/*
	 * ── צמוד לכותרת העליונה ──
	 *
	 * הרצועה המרקמית שהייתה כאן גזלה 36px מהמבט הראשון, ובגובה
	 * חלון טיפוסי זה בדיוק מה שדחף את שורות הכיתוב מתחת לקיפול.
	 *
	 * ⚠ אפס ולא שלילי. מרווח שלילי היה מכניס את ראש הסרטון מתחת
	 * לכותרת האטומה — מרוויחים גובה ומאבדים פריים.
	 */
	margin-block-start: 0;
}

/* המקווקו בשפה התחתונה הוסר — הוא התחרה בטיקר הצהוב על אותה
   פינה, ושני סימוני כביש באותו אזור נקראים כרעש. */

/*
 * ── שתי השפות של הווידאו ──
 *
 * ⚠ המסגרת הגדירה ‎border: 1px solid var(--border)‎ — כלומר לבן ב-9%,
 * ובזום שאינו 100% הוא מרונדר כ-‎0.57px‎. בפועל לא היה שם קו: מה
 * שנראה היה שורת הפיקסלים האחרונה של הווידאו נחתכת ישר לתוך מרקם
 * האספלט של הסקשן הבא, שהוא רועש ומנוקד. המפגש בין משטח צילומי חלק
 * לרעש גבוה קורא כחיתוך גס ומפוקסל.
 *
 * הפתרון: קו שחור מלא, בלי שקיפות, בשתי השפות. שחור אטום הוא היחיד
 * שקורא כגבול מכוון מול הווידאו **ומול** מרקם האספלט — כל ערך עם
 * אלפא מתערבב עם מה שמאחוריו ומאבד את הקצה שוב.
 *
 * ⚠ לא צהוב. הטיקר הצהוב יושב באותה פינה, ושני אלמנטים צהובים שם
 * נקראים כרעש — בדיוק הסיבה שהמקווקו שהיה כאן הוסר.
 *
 * ⚠ ‎border-inline: 0‎ נשאר: הרצועה פורצת לרוחב המסך, וקו אנכי בקצוות
 * היה נחתך בשולי החלון.
 */
body.home .at-hero-full {
	border-block: 2px solid #000;
	border-inline: 0;
}

/* ── הכיתוב על הווידאו ──
   פאנל זכוכית במקום טקסט חשוף עם צל. טקסט מעל וידאו נע מאבד
   ניגודיות בכל פריים אחר, וצל טקסט לבדו לא פותר את זה. */
/* ── הכיתוב על הווידאו, בלי קופסה ──
   ⚠ פאנל זכוכית פתר את הקריאוּת אבל נקרא כמלבן שחור שהודבק על
   הסרטון. הפתרון כאן הוא הצללה כיוונית שנטמעת בווידאו עצמו:
   כהה בפינה שבה יושב הטקסט, שקופה לגמרי בשאר הפריים. */
.at-hero-full .at-hero__inner {
	width: auto;
	max-width: min(46rem, 94%);
	margin-inline-start: 0;
	margin-inline-end: auto;
	margin-block-end: var(--space-l);
	margin-inline: var(--space-l);
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
}

/* הצללה קלה בלבד. הכותרת יושבת על טיקר צהוב ולא זקוקה לה;
   היא נשארת רק כדי להחזיק את שורות ההסבר והכפתורים. */
.at-hero-full .at-hero__scrim {
	background: linear-gradient(to top,
		rgba(8, 10, 14, .72) 0%, rgba(8, 10, 14, .32) 26%, transparent 52%);
}

/* צל רב-שכבתי: אחד הדוק שמחזיק את קצה האות, ואחד רחב שמפריד
   מהרקע. שכבה אחת לא מספיקה מעל וידאו נע. */
.at-hero-full .at-hero__title,
.at-hero-full .at-hero__lede {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .95),
		0 3px 14px rgba(0, 0, 0, .9),
		0 8px 40px rgba(0, 0, 0, .75);
}

/* ══ דף הבית ══
   הכותרת בצהוב ישירות על הווידאו, וההסבר על פס הצבע. הניגוד בין
   טקסט חופשי לפס מלא הוא מה שיוצר את ההיררכיה — שני פסים זה אחרי
   זה היו נוכחות אחת כבדה בלי סדר פנימי.
   הכפתורים יצאו אל מתחת לסרטון (ראו functions.php). */
body.home .at-hero-full .at-hero__title {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--accent);
	font-weight: 800;
	/* צל רב-שכבתי: אחד הדוק לקצה האות ואחד רחב להפרדה מהרקע.
	   שכבה אחת לא מספיקה מעל וידאו נע. */
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .95),
		0 3px 14px rgba(0, 0, 0, .9),
		0 8px 40px rgba(0, 0, 0, .8);
}

body.home .at-hero-full .at-hero__title::before { content: none; }

body.home .at-hero-full .at-hero__title em {
	color: var(--text);
	font-style: normal;
	text-decoration: none;
}

/* ההסבר נשאר על הפס, צמוד לשפה הימנית ועם שוליים שחוקים */
body.home .at-hero-full .at-hero__lede {
	position: relative;
	z-index: 0;
	display: block;
	width: fit-content;
	max-width: calc(100% + var(--space-l));
	margin: var(--space-xs) 0 0;
	margin-inline-start: calc(var(--space-l) * -1);
	padding: var(--space-2xs) var(--space-m) var(--space-2xs) var(--space-l);
	background: none;
	color: #14161a;
	font-weight: 600;
	font-size: var(--step-0);
	text-shadow: none;
	box-shadow: none;
}

body.home .at-hero-full .at-hero__lede::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--accent);
	filter: url(#at-paint-edge);
}

/*
 * ── יישור הכיתוב לעמודת התוכן ──
 *
 * קודם השוליים היו ‎--space-l‎ קבוע ביחס למסגרת. כשהמסגרת הייתה
 * ברוחב העמודה זה נראה מיושר במקרה; מרגע שהיא פרצה ל-100vw
 * הטקסט נשאר צמוד לקצה המסך בזמן שכל שאר העמוד התחיל הרבה
 * פנימה. עכשיו הריפוד של המסגרת עושה את העבודה, והשוליים כאן
 * מתאפסים.
 */
body.home .at-hero-full .at-hero__inner {
	margin-inline: 0 auto;
	max-width: min(46rem, 100%);

	/*
	 * ── להרים את הכיתוב מעל קו הקיפול ──
	 *
	 * ביחס 21:9 על מסך מלא הפתיח גבוה מהחלון שנשאר אחרי הכותרת
	 * העליונה, והשורות התחתונות נחתכו במבט הראשון. המרווח הגדול
	 * יותר מהתחתית מרים אותן פנימה.
	 *
	 * ⚠ הכיוון מבלבל: ‎margin-block-end‎ גדול יותר *מרים* את
	 * הטקסט, כי הוא נדחף כלפי מעלה מתחתית המסגרת.
	 */
	margin-block-end: var(--space-2xl);
}

/*
 * ── הפס הצהוב, היוצא מן הכלל ──
 *
 * התיבה עצמה מתחילה על קו העמודה כמו הכותרת, כך שהטקסט מיושר.
 * מה שנמשך עד קצה המסך הוא הצבע בלבד — פס שנמרח מהשוליים
 * פנימה במקום מלבן שמרחף באמצע.
 *
 * ⚠ לוגי ולא פיזי. הכלל הקודם השתמש בקיצור ‎padding‎ שבו הצד
 * הימני הוא ההתחלה בעברית — קל לטעות בו בכיוון.
 */
body.home .at-hero-full .at-hero__lede {
	margin-inline-start: 0;
	max-width: 100%;
	padding-inline-start: 0;
	padding-inline-end: var(--space-m);
}

/*
 * ⚠ הצבע נמתח החוצה במקום שהתיבה תזוז. מרווח שלילי היה גורר
 * איתו גם את הטקסט, ולכן היה צריך ריפוד נגדי בדיוק באותו גודל —
 * מספר שאי אפשר לכתוב כאן, כי הוא נגזר מרוחב ההורה.
 *
 * ⚠ ‎overflow: hidden‎ של המסגרת הוא שגוזר את העודף בדיוק בקצה
 * המסך. בלעדיו הפס היה מוסיף גלילה אופקית.
 */
body.home .at-hero-full .at-hero__lede::before {
	inset-block: 0;
	inset-inline-end: 0;
	inset-inline-start: -50vw;
}

/* ── הכפתורים, מתחת לסרטון ──
   על האספלט ולא על הווידאו, מיושרים לימין כמו שאר התוכן. */
.at-hero__actions--below {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-block: var(--space-m) var(--space-xl);
	max-width: var(--wide-max);
	margin-inline: auto;
	justify-content: flex-start;
}
/* ══ עמודי שער — כותרת מעל, טיקר על ההסבר ══
   שם הכותרת מופיעה ממילא ב-.at-pagehead, ולכן זו שבתוך הווידאו
   הייתה כפילות. */
body:not(.home) .at-hero-full .at-hero__title {
	display: none;
}

body:not(.home) .at-pagehead h1 {
	font-size: var(--step-5);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--accent);
	text-shadow: 0 4px 26px rgba(0, 0, 0, .92);
}

/* ── הטיקר ──
   פס צבע צהוב עם שוליים שחוקים, בלי רצועת אספלט מאחוריו.
   ⚠ המרקם הממוסך ירד יחד עם האספלט. הוא עבד רק כשהיה כביש
   מסביב שנתן לכתמים הכהים משמעות; בלעדיו הם נקראו כחורים
   בגבינה. שחיקת הקצוות לבדה נותנת את תחושת הצבע הנמרח.

   ⚠ margin-inline-start שלילי מבטל את השוליים של .at-hero__inner
   ומצמיד את הפס לשפה הימנית של הסרטון בלי רווח. */
body:not(.home) .at-hero-full .at-hero__lede {
	position: relative;
	z-index: 0;
	width: fit-content;
	max-width: calc(100% + var(--space-l));
	margin: 0;
	margin-inline-start: calc(var(--space-l) * -1);
	padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-l);
	background: none;
	color: #14161a;
	font-weight: 700;
	text-shadow: none;
	clip-path: none;
	box-shadow: none;
}

body:not(.home) .at-hero-full .at-hero__lede::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--accent);
	filter: url(#at-paint-edge);
	box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .9);
}
.at-hero-full .at-hero__actions {
	margin-block-start: var(--space-s);
}

.at-hero-full .at-hero__title,
.at-hero-full .at-hero__lede,
.at-hero-full .at-hero__actions {
	max-width: none;
}

.at-hero-full .at-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-block-start: var(--space-s);
}

.at-hero__title em {
	font-style: normal;
	color: var(--accent);
}

/* ── כפתורים ──
   הראשי מקבל את הצהוב ואת הזוהר שלו; המשני הוא זכוכית על הווידאו. */
.at-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border-radius: var(--radius-m);
	font-weight: 800;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.at-btn--primary {
	background: var(--accent);
	color: #14161a;
	box-shadow: 0 14px 32px -12px rgba(245, 207, 69, .6);
}

.at-btn--primary:hover {
	color: #14161a;
	transform: translateY(-1px);
	box-shadow: 0 18px 40px -12px rgba(245, 207, 69, .75);
}

.at-btn--ghost {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(10px);
	color: var(--text);
}

.at-btn--ghost:hover {
	color: var(--accent);
	border-color: rgba(245, 207, 69, .5);
	background: rgba(245, 207, 69, .1);
}



/* כפתור אינו קישור טקסט — הקו התחתון הגלובלי לא שייך כאן */
.at-btn,
.at-btn:hover,
.at-btn:focus-visible {
	text-decoration: none;
}

/* הסמן האנכי חצה את סימון הכביש שבשפה התחתונה */
.at-hero__cue { display: none; }

/* ⚠ tools.css של התוסף נטענת אחרי style.css, ולכן כלל בעל אותו
   משקל מפסיד לה. שרשור המחלקה מעלה את המשקל בלי !important. */
.at-btn.at-btn,
.at-btn.at-btn:hover,
.at-btn.at-btn:focus-visible {
	text-decoration: none;
}
/* ── הפרדה מהכותרת ──
   ⚠ בתוסף יש margin-block-start שלילי שמושך את הפתיח אל מתחת
   לכותרת, ו-tools.css נטענת אחרי style.css — לכן כלל בעל אותו
   משקל מפסיד לה. שרשור המחלקה מעלה משקל בלי !important.
   המרווח החיובי הוא מה שגורם לווידאו להיקרא כאובייקט שצף על
   הכביש ולא כהמשך של סרגל הניווט. */
.at-hero-full.at-hero-full {
	margin-block-start: var(--space-l);
}

/* ההסבר יושב על אזור בהיר של הווידאו ונבלע. משקל ובהירות
   מעט גבוהים יותר, ועדיין בלי רקע. */
.at-hero-full .at-hero__lede {
	color: #f2f5f9;
	font-weight: 500;
}
/* ══ הלוגו ══
   שני הצבעים שבו נשלטים מבחוץ: החלקים הכהים דרך currentColor,
   והצהוב דרך --logo-accent. כך אותו קובץ אחד משרת כל הקשר.

   ⚠ הצהוב של האתר (#f5cf45) נותן על רקע לבן יחס של 1.5:1 בלבד —
   "Lab" והטבעת פשוט נעלמים. בכל הקשר בהיר הוא מוחלף בזהב עמוק
   שעובר את סף 3:1 הנדרש לאלמנט גרפי. */
.at-logo {
	--logo-accent: var(--accent);
	color: var(--text);
}

/* הדפסה — הדף יוצא על נייר לבן */
@media print {
	.at-logo {
		--logo-accent: #a8801a;
		color: #0d1117;
	}
}

/* מחלקת שירות לכל מקום שבו הלוגו יונח על משטח בהיר בעתיד */
.at-logo--on-light {
	--logo-accent: #a8801a;
	color: #0d1117;
}

/* ══ ניווט הבא/הקודם ══
   ⚠ בעיצוב הישן היה כאן טריז אלכסוני (המוטיב מ-Rimac) מעל משטח
   אפור מלא־רוחב. שניהם לא שרדו את המעבר לכביש: הטריז נקרא כצורה
   שנשארה בלי סיבה, והמשטח האפור שטח את האספלט ויצר חור גדול
   בעמוד שבו יש רק כרטיס אחד.

   במקומם: הכרטיסים צפים על הכביש כמו כל שאר התוכן, והגבול מסומן
   בקו צבע שחוק — אותה שפה של הקו בשמאל ושל הטיקר. */
.at-articlenav {
	background: none;
	padding-block: var(--space-l) var(--space-2xl);
	margin-top: var(--space-2xl);
}

.at-articlenav::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 5px;
	margin-inline: auto;
	max-width: var(--article-shell);
	background: var(--paint-white);
	opacity: .38;
	filter: url(#at-paint-edge);
	clip-path: none;
}

/* כרטיס בודד לא משאיר עמודה רפאים.
   ⚠ .at-articlenav__slot הוא div ריק שנשלח כשאין הבא או קודם;
   בלי הכלל הזה הרשת שומרת לו מקום מלא. */
/* ⚠ ב-RTL, inline-start הוא הצד הימני. כדי להצמיד לימין צריך
   margin-inline-start: 0 ו-end: auto — ההפך מהאינטואיציה. */
.at-articlenav__inner:has(.at-articlenav__slot) {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(var(--content-max) + 2 * var(--sheet-pad));
	margin-inline-start: 0;
	margin-inline-end: auto;
}

.at-articlenav__slot { display: none; }

/* הכרטיס צף על האספלט */
.at-articlenav__link {
	background: linear-gradient(158deg, rgba(27, 31, 38, .92), rgba(23, 26, 32, .86));
	backdrop-filter: blur(12px);
	box-shadow: 0 20px 46px -22px rgba(0, 0, 0, .9);
}

/* ══ הפינות החתוכות הוסרו ══
   המוטיב מ-Öhlins שייך לעיצוב הקודם, בדיוק כמו הטריז האלכסוני
   מ-Rimac. שניהם היו ציטוטים גיאומטריים ממותגים אחרים; בשפת
   הכביש התפקיד שלהם נלקח על ידי סימוני צבע ושוליים שחוקים.

   ⚠ .at-btn מוגדר ב-tools.css שנטענת אחרי style.css, ולכן
   נדרש שרשור מחלקה כדי לגבור עליה בלי !important. */
/* .at-btn עדיין נחתך ב-tools.css של התוסף, שנטענת אחרי הסגנון
   של התבנית — שם הדריסה עדיין נחוצה. */
.at-articlenav__link,
.at-btn.at-btn {
	clip-path: none;
	border-radius: var(--radius-m);
}

/* ══ קריאוּת של טקסט על האספלט ══
   נמדד על הרינדור ולא מחושב מול צבע אחיד: המרקם מוריד את
   הניגודיות מתחת לסף. הצל שכבר קיים עוזר לתפיסה אבל אינו
   נספר בתקן, ולכן הצבע עצמו חייב לעמוד בו. */
/* ⚠ .at-crumbs [aria-current] הוא בעל משקל (0,2,0) וגובר על
   סלקטור אלמנט. חייבים לחזור עליו במפורש. */
.at-crumbs,
.at-crumbs a,
.at-crumbs [aria-current],
.at-toc-sticky__title,
.at-toc-sticky__text,
.at-toc-sticky__link {
	color: var(--text-on-road);
}

.at-crumbs a:hover,
.at-toc-sticky__link:hover,
.at-toc-sticky__link.is-current,
.at-toc-sticky__link[aria-current] {
	color: var(--accent);
}

/* המספור היה ב-17% לבן — כמעט בלתי נראה על מרקם */
.at-toc-sticky__num {
	color: rgba(255, 255, 255, .42);
}

/* ══ פתיח בטלפון ══
   ⚠ לפתיח יש aspect-ratio קבוע. במסך של 390px הוא יוצא בגובה
   ~220px בעוד שהכותרת, הפס והכפתורים דורשים כפול — התוכן גלש
   כלפי מעלה ונחתך ב-overflow: hidden. חצי הכותרת פשוט נעלם.

   בטלפון הגובה נקבע מהתוכן ולא מהיחס, והטיפוגרפיה מתכווצת כדי
   שהפס לא יבלע את הסרטון. */
@media (max-width: 48rem) {
	.at-hero-full.at-hero-full {
		aspect-ratio: auto;
	}

	.at-hero-full .at-hero__inner {
		margin-inline: var(--space-s);
		margin-block-end: var(--space-s);
		max-width: calc(100% - var(--space-s));
	}

	body.home .at-hero-full .at-hero__title {
		font-size: var(--step-2);
	}

	/* ⚠ שלושת הסלקטורים חובה. כללי הדסקטופ ממוקדים לפי body.home /
	   body:not(.home) — סלקטור אחד בלי גוף פשוט מפסיד להם במשקל,
	   והטיקר נשאר עם margin של 36px‏ שחורג מהפתיח ונחתך. */
	.at-hero-full .at-hero__lede,
	body.home .at-hero-full .at-hero__lede,
	body:not(.home) .at-hero-full .at-hero__lede {
		margin-inline-start: calc(var(--space-s) * -1);
		max-width: calc(100% + var(--space-s));
		padding: var(--space-3xs) var(--space-s) var(--space-3xs) var(--space-m);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}

	.at-hero__actions--below {
		padding-inline: var(--space-s);
	}
}
/* ⚠ בדסקטופ הווידאו הוא object-fit: contain כדי לשמור על
   הפרופורציות המקוריות. בטלפון המכל גדל כדי להכיל את הטקסט,
   ואז contain יוצר פסים שחורים מעל ומתחת שנראים כתקלה.
   שם עדיף חיתוך קל — הסרטון מופשט ממילא. */
@media (max-width: 48rem) {
	.at-hero-full .at-hero__media,
	.at-hero-full video,
	.at-hero-full img {
		object-fit: cover;
	}

	/* ⚠ טווח קבוע ולא vh: גובה החלון בטלפון משתנה עם סרגלי
	   הדפדפן, ו---min-height ב-vh נתן פתיח שממלא כמעט מסך שלם
	   לפני שמגיעים לתוכן. הגג נדיב מספיק כדי שהטקסט לא ייחתך. */
	.at-hero-full.at-hero-full {
		min-height: 21rem;
		max-height: 32rem;
	}
}

/* ══ הספרייה ══
   שישה אשכולות ידע כטקסט על האספלט, בלי קופסאות.

   ⚠ הגרסה הראשונה נראתה "זרוקה" על הדף, אבל לא בגלל היעדר
   הקופסאות — בגלל שני באגים: קו תחתון שירשה מ-.page-content a
   של Hello Elementor, וחץ שנדחף לקצה השורה. אחרי שתוקנו, גרסת
   הטקסט עומדת בפני עצמה. אין להסיק מכאן שצריך קופסאות.

   ⚠ שני דברים מחזיקים את הסדר ואין לצמצם אותם: רווח --space-2xl
   בין העמודות (מול --space-s אנכית) הוא מה שגורם להן להיקרא
   כעמודות, והמונה יושב מעל השם ולא לצידו כדי שהשמות לא יישברו. */
.at-library {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-s) var(--space-2xl);
	margin-block: var(--space-l) 0;
	padding: 0;
	list-style: none;
}

/* ⚠ מבטל את p, li { max-width: var(--measure) } הגלובלי משורה 79 */
.at-library > li { max-width: none; }

/* ⚠ המונה מוצב מעל השם דרך order, לא בסדר ה-HTML. כששניהם חלקו
   שורה, "צמיגים וחישוקים" ו"רכיבי המתלה" נשברו לשתי שורות בעוד
   השאר נשארו על אחת, והבסיסים בתוך השורה יצאו לא מיושרים. */
.at-library__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3xs);
	align-content: start;
	height: 100%;
	padding-block: var(--space-m);
	border-block-start: 2px solid var(--border);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--dur-base) var(--ease-out);
}

.at-library__name {
	order: 2;
	font-size: var(--step-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	transition: color var(--dur-base) var(--ease-out);
}

.at-library__count {
	order: 1;
	justify-self: start;
	color: var(--accent);
	font-size: var(--step--2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --text-muted ולא --text-on-road: מאז שיש קופסה הטקסט יושב על
   --bg-raised, בדיוק כמו .at-toolpanel__lede. */
.at-library__desc {
	order: 3;
	margin-block-start: var(--space-2xs);
	max-width: none;
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: var(--leading-snug);
}

.at-library__item:hover,
.at-library__item:focus-visible { border-block-start-color: var(--accent); }

.at-library__item:hover .at-library__name,
.at-library__item:focus-visible .at-library__name { color: var(--accent); }

@media (max-width: 62rem) {
	.at-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
	.at-library { grid-template-columns: 1fr; }
}

/* ══ לפי מצב ══
   שמונת המדריכים בגוף ראשון. הכותרות הן התוכן — הן כבר מנוסחות
   כמו שאדם מנסח את הבעיה שלו, ולכן אין תיאורים מתחתיהן.

   ⚠ החץ צמוד לכותרת ולא נדחף לקצה השורה. בגרסה הראשונה הוא היה
   עם margin-inline-start: auto, וזה יצר פער ריק בין "יום מסלול"
   לחץ שלו — זה מה שנקרא "זרוק" על הדף. */
.at-situations {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-2xl);
	margin-block: var(--space-l) 0;
	padding: 0;
	list-style: none;
}

/* ⚠ מבטל את p, li { max-width: var(--measure) } הגלובלי משורה 79 */
.at-situations > li { max-width: none; }

.at-situations__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	padding-block: var(--space-s);
	border-block-start: 1px solid var(--border);
	color: inherit;
	font-size: var(--step-0);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out);
}

.at-situations__item::after {
	content: "‹";
	color: var(--accent);
	font-size: var(--step-0);
	line-height: 1;
}

.at-situations__item:hover,
.at-situations__item:focus-visible {
	color: var(--accent);
	border-block-start-color: var(--accent);
}

.at-situations__item:hover::after,
.at-situations__item:focus-visible::after { color: var(--accent); }

@media (max-width: 40rem) {
	.at-situations { grid-template-columns: 1fr; }
}

/* ══ פאנלי הכלים ══
   כאן הקופסה מוצדקת: הכלים הם אובייקטים אמיתיים, והצילום דורש
   מסגרת. זו הסיבה שהספרייה ו"לפי מצב" נטולי קופסה והם לא.

   הצילומים נושאים את נטל ההוכחה אחרי שההמחשה החיה ירדה מהדף,
   ולכן הם צילומי מסך אמיתיים של הכלים בפעולה. */
.at-toolpanels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-l);
	margin-block: var(--space-l);
}

.at-toolpanel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2xs);
	padding: var(--space-m);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-md);
}

/* ⚠ img ו-a הם inline, ו-wpautop עוטף כל inline שיושב ישירות בתוך
   בלוק ב-<p> משלו. ה-<p> הזה שבר את margin-block-start: auto של
   הכפתור, כי הוא הפך לילד ה-flex במקומו. העטיפה ב-div כאן היא מה
   שמונע את זה — לא קישוט. אין לשטח אותה חזרה. */
.at-toolpanel__media {
	align-self: stretch;
	margin-block-end: var(--space-2xs);
}

.at-toolpanel__shot {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-s);
}

.at-toolpanel__cta { margin-block-start: auto; }

.at-toolpanel__name {
	margin: 0;
	font-size: var(--step-1);
}

/* בתוך פאנל, לא על האספלט — --text-muted מותר כאן */
.at-toolpanel__lede {
	margin: 0;
	max-width: none;
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: var(--leading-snug);
}

.at-toolrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-toolrow > li { max-width: none; }

.at-toolrow a {
	padding-block-end: var(--space-4xs);
	border-block-end: 1px solid var(--border);
	color: var(--text-on-road);
	font-size: var(--step--1);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out);
}

.at-toolrow a:hover,
.at-toolrow a:focus-visible {
	color: var(--accent);
	border-block-end-color: var(--accent);
}

@media (max-width: 48rem) {
	.at-toolpanels { grid-template-columns: 1fr; }
}

/* ⚠ בדף הבית ירדו כפתורי ה-CTA שהיו מתחת לווידאו. הם גישרו על
   קצב הסקשנים הרגיל (--space-2xl), ובלעדיהם הוא נקרא כאזור מת
   בין הווידאו לתוכן. מדרגה אחת למטה בסולם, לא ערך שרירותי. */
body.home .at-hero-full.at-hero-full {
	margin-block-end: var(--space-xl);
}

body.home .at-hero-full + .at-section-head {
	margin-block-start: var(--space-xl);
}

/* ══ משבצת המודעה בתוך המאמר — פריצה בנייד ══
   המשבצת יושבת בתוך .at-article__body, שיש לו --sheet-pad משני
   הצדדים. במסך של 360px זה הותיר לה 232px בלבד — צר מדי אפילו
   ל-300×250, בעוד שאותה משבצת בדף הבית מקבלת 308px.

   ⚠ ה-breakpoint כאן חייב להישאר זהה לזה שבו --sheet-pad מצטמצם
   ל-1.25rem. אם אחד מהם יזוז והשני לא, הפריצה תהיה בגודל הלא נכון
   והמודעה תחרוג מהגיליון או תישאר צרה.

   ⚠ גובר על .is-article .at-article__body > * { margin-inline: 0 }
   במשקל (0,3,0) מול (0,2,0) — לא בסדר ההופעה. */
@media (max-width: 60rem) {
	.is-article .at-article__body > .at-ad--inline {
		margin-inline: calc(var(--sheet-pad) * -1);
	}
}