/*
Theme Name:   GripLab
Theme URI:    https://alignment.local
Description:  תבנית בת ל-Hello Elementor. שפה ויזואלית טכנית-מדויקת: קווים דקים, רשת מדידה עדינה, מספרים בולטים ואקצנט אחד. הכלים האינטראקטיביים יושבים בתוסף alignment-tools ולא כאן — כך שהחלפת תבנית לא שוברת אותם.
Author:       Raz
Template:     hello-elementor
Version:      0.2.0
Text Domain:  alignment-child
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,
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 הם רשימות
 * <ul>, ולכן הכלל שמצמצם רשימות לרוחב קריאה חל גם עליהן ומעך
 * אותן לשתי עמודות. הן חייבות להופיע כאן במפורש.
 */
.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-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);
}

.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	max-width: var(--full-max);
	margin-inline: auto;
	padding: var(--space-xs) var(--space-s);
}

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

.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;
}

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

.site-navigation ul.menu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.site-navigation .menu-item > a {
	display: block;
	padding: .4rem .7rem;
	border-radius: var(--radius-m);
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--step--1);
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-out),
	            background-color var(--dur-fast) var(--ease-out);
}

.site-navigation .menu-item > a:hover {
	color: var(--text);
	background: var(--surface);
}

/* העמוד הנוכחי והענף שהוא יושב בו — הגולש תמיד יודע איפה הוא */
.site-navigation .current-menu-item > a,
.site-navigation .current_page_item > a {
	color: var(--accent);
	background: var(--accent-soft);
}

.site-navigation .current-menu-ancestor > a,
.site-navigation .current_page_ancestor > a {
	color: var(--text);
}

/* חץ לפריטים עם תפריט משנה */
.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);
}

/*
 * 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-navigation .sub-menu a {
	display: block;
	padding: .45rem .7rem;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--step--1);
	white-space: nowrap;
}

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

.site-navigation .sub-menu .current-menu-item > a {
	color: var(--accent);
}

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

.site-navigation .menu-item-has-children > .sub-menu:has(.sub-menu) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(13rem, 1fr);
	gap: var(--space-m);
	padding: var(--space-s);
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* כותרת עמודה — הקבוצה עצמה, שהיא גם קישור לעמוד המקטע */
.site-navigation .sub-menu .menu-item-has-children > a {
	color: var(--text);
	font-weight: 700;
	font-size: var(--step--1);
	padding-inline: var(--space-2xs);
	margin-bottom: var(--space-3xs);
	border-bottom: 1px solid var(--hairline);
	border-radius: 0;
}

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

/*
 * רמה שלישית — פריטי הנושא בתוך העמודה.
 *
 * ⚠ visibility: inherit ולא visible.
 *
 * visibility היא תכונה **יורשת**, וילד שמוגדר במפורש visible גובר
 * על הורה שמוגדר hidden. כשהתפריט־על סגור, ילדים עם visibility:
 * visible ממשיכים להירנדר וללכוד אירועי עכבר — גם כשהם שקופים
 * לגמרי מ-opacity של ההורה. התוצאה: ריחוף על אזור ריק לכאורה
 * בראש העמוד פותח את התפריט "מעצמו".
 *
 * inherit גורם להם לעקוב אחרי מצב הפאנל.
 */
.site-navigation .sub-menu .sub-menu {
	position: static;
	opacity: 1;
	visibility: inherit;
	transform: none;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

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

@media (max-width: 52rem) {
	.site-navigation .menu-item-has-children > .sub-menu:has(.sub-menu) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2xs);
		padding: 0;
	}

	.site-navigation .sub-menu .menu-item-has-children > a {
		border-bottom: 0;
		margin-bottom: 0;
	}

	.site-navigation .sub-menu .sub-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ══════════════════════════════════════════════════════════
   נטרול הנחות של 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: 15rem;

	/* התבנית מסתירה ב-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;
}

/* תפריט־על: הפאנל שמכיל תפריט נוסף בתוכו */
.site-navigation ul.menu li ul.sub-menu:has(ul.sub-menu) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(13rem, 1fr);
	gap: var(--space-m);
	padding: var(--space-s);
}

/*
 * רמה שלישית בתוך תפריט־העל — בלי רקע משלה.
 * visibility: inherit ולא visible — ראה את ההסבר המלא למעלה.
 */
.site-navigation ul.menu li ul.sub-menu ul.sub-menu {
	display: block;
	position: static;
	opacity: 1;
	visibility: inherit;
	min-width: 0;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

@media (max-width: 52rem) {
	/* במובייל אין ריחוף — הכל פתוח, בשורות */
	.site-navigation ul.menu li ul.sub-menu,
	.site-navigation ul.menu li ul.sub-menu:has(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);
	}

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

	/* במובייל אין ריחוף — תפריטי המשנה נפתחים תמיד, בשורה */
	.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; }
}

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

.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: 2ch 1fr;
	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--2);
	font-variant-numeric: tabular-nums;
	color: var(--border-strong);
	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-faint); }

.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; }

.is-article .at-article__body > h2 {
	counter-increment: at-section;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: .7rem;
	margin-top: var(--space-2xl);
	scroll-margin-top: 6rem;
}

/* הקו הקצר מוחלף במספר הפרק */
.is-article .at-article__body > h2::before {
	content: counter(at-section, decimal-leading-zero);
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	font-family: var(--font-mono);
	font-size: var(--step-0);
	font-weight: 400;
	color: var(--accent);
	direction: ltr;
}

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

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

/*
 * מעבר אלכסוני — המוטיב מ-Rimac. נחתך בזווית אחידה (--slant-h)
 * ומוצב מחוץ לזרימה כדי שלא ידחוף את התוכן.
 */
.at-articlenav::before {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--slant-h) * -1);
	inset-inline: 0;
	height: var(--slant-h);
	background: var(--bg-sunken);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.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;
	/* פינה חתוכה — המוטיב מ-Öhlins */
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
	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);
}

/* ── כיתוב ──
   סימן מדידה מוביל, עקבי עם רשימות ההשפעות. */
.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); }

.at-level__tag {
	font-size: var(--step--2);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--accent);
	margin-bottom: var(--space-3xs);
}

/*
 * ── למה 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-1);
	font-weight: 700;
	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: center;
}

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

/* הקו מעל h2 מיושר למרכז במקטעים ממורכזים */
.at-section-head h2::before { margin-inline: auto; }

.at-section-head p {
	margin: 0 auto;
	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; }