/*! Theme Name: oribsn | Author: Ori Ben-Simon | Author URI: oribsn.dev | Description: Ori Ben-Simon | Version: 1.0.0 | Text Domain: oribsn */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
*{outline: none !important;}
.right{float:right; display:inline-block;}
.left{float:left; display:inline-block;}
.clearfix{overflow: hidden;}
.clearfix:after, .clearfix:before{content: "";display: table;}
.clearfix:after{clear:both;}
.both{clear:both; width:0; height:0; overflow:hidden; display:block;}
.ease, .ease > a, .ease > a:before, .ease:before, .ease > a:after, .ease:after {-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.ease2, .ease2 > a, .ease2 > a:before, .ease2:before, .ease2 > a:after, .ease2:after {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.shadow{box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,.35);}
.align_center{text-align: center;}
.align_right{text-align: right;}
.align_left{text-align: left;}
.inline{display: inline-block;}
.hide{display: none;}
.cover{background-size: cover; background-position: center center; background-repeat: no-repeat;}
.frow {display: flex; flex-direction: row;}
a {color: inherit; text-decoration: none;}
*{box-sizing: border-box;}
strong{font-weight: 700;}
.sec_bg {position: relative;}
.bg_im img {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center center; z-index: 1;}
.sec_bg > .wrap {position: relative; z-index: 2;}
.noscroll {overflow: hidden;}
::-webkit-scrollbar {display: none;}
* {-ms-overflow-style: none; scrollbar-width: none;}

:root {
	/* Pink / Plum */
	--pink-light: #E291BA;
	--pink-dark: #3C1328;
	
	/* Indigo / White-Blue */
	--indigo-light: #FCFCFF;
	--indigo-dark: #323EAD;
	
	/* Green */
	--green-light: #8FCAA7;
	--green-dark: #1C3D29;
	
	/* Purple / Lilac */
	--purple-light: #D5D8EE;
	--purple-dark: #443558;
	
	/* Azure / Bright Blue */
	--azure-light: #A9B2FF;
	--azure-dark: #1A2BBB;
	
	/* Slate / Grey-Blue */
	--slate-light: #E2E8F0;
	--slate-dark: #24344A;
	
	/* Yellow / Brown */
	--yellow-light: #FFDA8A;
	--yellow-dark: #5D4103;
	
	/* Olive / Beige */
	--olive-light: #ECE5C1;
	--olive-dark: #4A4424;
}

html { font-size: 18px; }
/* הוספנו overscroll-behavior: none; לביטול מחוות הניווט של הדפדפן */
body, html { margin: 0; padding: 0; background-color: #f6f6f6; font-family: "adapter-hebrew-text", sans-serif; font-weight: 500; font-style: normal; }
h1, h2, h3, h4, h5, h6 { font-family: "lexia-hebrew", sans-serif; font-weight: 500; }
.home_wrap { width: 100vw; height: 100vh; overflow: hidden; background: #f6f6f6 url('assets/img/layout/home_bg.jpg') center center / cover no-repeat; position: relative; touch-action: none; overscroll-behavior: none; position: fixed; top: 0; left: 0; }
.textscape-home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.dot-grid { display: none; } /* אפשר למחוק את הדיב הזה מה-HTML */

/* מירכוז הטקסט בעזרת Flexbox שחסין לבעיות RTL */
/* ביטלנו את המירכוז, הקטנו מידות ומיקמנו בצד ימין למעלה */
.center-content { 
	position: absolute; 
	top: 4.5rem;      /* מרחק מלמעלה */
	right: 6.5rem;   /* מרחק מימין (מתחשב ב-60px של סרגל הצד) */
	width: auto; 
	height: auto; 
	z-index: 50; 
	display: block; /* מבטל את הפלקס שמרכז הכל */
	text-align: right; 
	direction: rtl; 
	pointer-events: none; 
}

.center-content > * { pointer-events: auto; }

/* הילה (ענן זכוכית חלבית) מאחורי טקסט הפתיחה */
.center-content::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 170%; /* רחב יותר מהטקסט כדי לעטוף אותו יפה */
	height: 180%;
	
	/* ענן לבן שמתמזג לשקיפות */
	background: radial-gradient(
		ellipse at center, 
		rgba(255, 255, 255, 0.95) 20%, 
		rgba(255, 255, 255, 0.6) 55%, 
		rgba(255, 255, 255, 0) 75%
	);
	
	/* אפקט הטשטוש (Blur) על התמונות שחולפות מאחור */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	
	/* מסכת חיתוך כדי שהטשטוש עצמו לא יהיה מרובע, אלא יתפייד כמו הענן */
	-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
	
	z-index: -1; /* יושב מתחת לטקסט */
	pointer-events: none; /* שלא יפריע ללחיצות או גרירה */
}

.main-title { 
	font-size: 39px; 
	color: #000; 
	margin-bottom: 1.5rem; 
	line-height: 1.1; 
	font-weight: 500; 
	font-family: "lexia-hebrew", sans-serif; 
	text-align: right; /* יישור לימין */
}

.main-text { 
	font-size: 18px; 
	color: #333; 
	max-width: 18rem; 
	margin: 0; /* הורדנו את המרווח התחתון של הכפתור שכבר לא שם */
	line-height: 1.6; 
	text-align: right; /* יישור לימין */
}
.main-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 2.22222222rem; border: 1px solid #000; border-radius: 2.22222222rem; text-decoration: none; color: #000; height: 2.22222222rem; line-height: 2.22222222rem; transition: background 0.3s, color 0.3s; font-size: 19.8px; }
.main-btn:hover { background: rgba(0,0,0,0.05); }

/* הקנבס עצמו */
.infinite-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; direction: ltr; cursor: grab; }
.infinite-canvas:active { cursor: grabbing; }
/* מניעת סימון (Highlight) בזמן גרירה בקנבס */
.infinite-canvas,
.canvas-item {
	user-select: none;
	-webkit-user-select: none; /* לספארי וכרום */
	-moz-user-select: none; /* לפיירפוקס */
}
/* ביטול גרירת תמונות וקישורים טבעית של הדפדפן (שלא יתנגש עם גרירת הקנבס) */
.canvas-item img,
.canvas-item a {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.canvas-item:hover img { transform: rotate(1deg); }
.canvas-item:hover { z-index: 20; }

/* =========================================
   עמוד הבית - גריד בצלאל / ריבועים וקונטיין
   ========================================= */
/* העוטף של הפריט בקנבס */
.canvas-item { 
   position: absolute; 
   transition: opacity 0.3s; 
   display: none; 
   perspective: 1000px; /* <--- התוספת החשובה! נותן עומק תלת-ממדי */
}

/* העוטף של הריבוע המושלם */
.canvas-item .item-aspect-box {
   width: clamp(180px, 20vw, 300px); 
   aspect-ratio: 1/1; 
   overflow: hidden;  
   background-color: transparent; 
   transform-style: preserve-3d; /* מוודא שהאנימציה נשארת בתלת-מימד */
   will-change: transform; /* רמז לדפדפן להאיץ את האנימציה */
}
.canvas-item a { 
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; 
	height: 100%; 
}

/* הגדרת קונטיין לכל התמונות - האנכיות יתכווצו */
.canvas-item img { 
	max-width: 100%; 
	max-height: 100%; 
	width: auto; 
	height: auto; 
	object-fit: contain; /* הסוד! התמונה כולה נכנסת בריבוע בלי להיחתך */
	display: block; 
	box-shadow: 0px 10px 30px rgba(0,0,0,0.05); /* הצללה עדינה */
}

/* --- תפריט צד (הדר) --- */
.site-header { position: fixed; top: 0; right: -60px; width: 60px; height: 100vh; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(30px); border-left: 2px solid #000; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3vh 0 40px; z-index: 100000; pointer-events: none; transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.site-header.active { right: 0; }
.site-header > * { pointer-events: auto; }
.site-header.no_m {display: flex !important;}

/* עיצוב הלוגו מבוסס התמונה */
.header-logo a { display: block; width: 100%; padding: 0 15px; transition: opacity 0.3s; }
.header-logo a:hover { opacity: 0.7; }
.site-logo-img { width: 100%; max-width: 50px; height: auto; display: block; margin: 0 auto; object-fit: contain; }

/* תפריט הניווט (שונה למינוס 90 מעלות) */
/* תפריט הניווט (תפריט ידני עם פילטרים) */
.header-nav {
	width: 58px;
	overflow: hidden;
}
/* תפריט הניווט (תפריט ידני עם פילטרים) */
.header-nav ul { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	width: 100%; /* מוודא שהתפריט תופס את כל רוחב סרגל הצד */
}

.header-nav li.mitem { 
	width: 100%; /* תופס את כל ה-60px של סרגל הצד */
	margin: 0;   /* ביטול המרווחים כדי שהפריטים ייגעו אחד בשני במדויק */
}

.header-nav li.mitem a { 
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 2.5vh 0;
	font-size: 16px; 
	color: #000; 
	text-decoration: none; 
	transition: background-color 0.3s, opacity 0.3s; 
	font-weight: 500; 
	white-space: nowrap;

	/* הקסם החדש: כיווניות טקסט אנכית ששומרת על גבולות הלייאוט (קריאה מלמטה למעלה) */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.page-template-about .header-nav li.mitem a, .page-template-about .header-bottom, .page-template-about .header-bottom .copyright {
	color: var(--green-dark) !important;
}


/* הגדרת צבעי רקע בלחיצה (Active) ובמעבר עכבר (Hover) */
.header-nav li.hover-yellow a:hover, .header-nav li.active-yellow a { background-color: var(--yellow-light); }
.header-nav li.hover-purple a:hover, .header-nav li.active-purple a { background-color: var(--azure-light); }
.header-nav li.hover-olive a:hover, .header-nav li.active-olive a { background-color: var(--olive-light); }
.header-nav li.hover-pink a:hover, .header-nav li.active-pink a { background-color: var(--pink-light); }

/* השארת צבע התפריט דלוק לאחר לחיצה (Active State) לכל העמודים */
.header-nav li.active-yellow a { background-color: var(--yellow-light, #FFDA8A) !important; }
.header-nav li.active-purple a { background-color: var(--azure-light, #A9B2FF) !important; }
.header-nav li.active-olive a { background-color: var(--olive-light, #ECE5C1) !important; }
.header-nav li.active-pink a { background-color: var(--pink-light, #E291BA) !important; }

/* הטקסט בתחתית הסרגל */
.header-bottom { display: flex; flex-direction: column; align-items: center; font-size: 16px; font-weight: 500; line-height: 1.1; font-family: "lexia-hebrew", sans-serif; color: #000; }
/* תוספת לטקסט בתחתית הסרגל *//* עיצוב סמל הקופירייט עצמו ככפתור */
.header-bottom .copyright { 
	cursor: pointer; 
	transition: all 0.3s ease; 
	
	/* נותנים לו מידות זהות לגובה של הסטריפ כדי שייראה אחיד */
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

/* המצב הצהוב הדלוק: קורה בהובר, או כשהוא מקבל קלאס דרך ה-JS */
.header-bottom .copyright:hover,
.header-bottom .copyright.is-active,
.header-bottom .copyright.is-pinned {
	background: rgba(255, 218, 138, 0.85); /* אותו צהוב זכוכיתי כמו הסטריפ */
	backdrop-filter: blur(3.15px);
	-webkit-backdrop-filter: blur(3.15px);
	color: #111; /* מוודא שהסמל בולט ושחור על הצהוב */
}

/* צביעת תפריט הצד לפי הפלטה הדינמית */
.header-nav li.mitem a,
.header-bottom,
.header-bottom .copyright,
.header-logo a {
	color: var(--theme-text) !important;
}

/* עדכון צבע הקו המפריד של סרגל הצד */
.site-header {
	border-left-color: var(--theme-text) !important;
	/* אנחנו שומרים על הטשטוש (blur) אבל נותנים לו גוון קל מהרקע */
	background: rgba(var(--theme-bg-rgb, 255, 255, 255), 0.10); 
}

/* צביעת האייקון של התפריט (אם יש כזה) */
.header-nav li.mitem a::before {
	background-color: var(--theme-text);
}


/* ==========================================
   עיצוב הלוגו הטקסטואלי החדש (יפתח אלוני)
   ========================================== */
.site-title-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	font-family: "lexia-hebrew", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
	transition: opacity 0.3s ease;
}

.site-title-link:hover {
	opacity: 0.6;
}

/* מוודא שהלוגו נצבע אוטומטית בצבע הדינמי של העמוד */
.header-logo a.site-title-link {
	color: var(--theme-text) !important;
}



/* ==========================================
   שיוך הפלטות (רקע + טקסט) לקלאס של ה-body
   ========================================== */
body.palette-pink   { --theme-bg: var(--pink-light);   --theme-text: var(--pink-dark); }
body.palette-indigo { --theme-bg: var(--indigo-light); --theme-text: var(--indigo-dark); }
body.palette-green  { --theme-bg: var(--green-light);  --theme-text: var(--green-dark); }
body.palette-purple { --theme-bg: var(--purple-light); --theme-text: var(--purple-dark); }
body.palette-azure  { --theme-bg: var(--azure-light);  --theme-text: var(--azure-dark); }
body.palette-slate  { --theme-bg: var(--slate-light);  --theme-text: var(--slate-dark); }
body.palette-yellow { --theme-bg: var(--yellow-light); --theme-text: var(--yellow-dark); }
body.palette-olive  { --theme-bg: var(--olive-light);  --theme-text: var(--olive-dark); }

/* החלה אוטומטית של הצבעים על העמוד הבודד */
body[class*="type-"] { 
	background-color: var(--theme-bg); 
	color: var(--theme-text); 
}

/* ==========================================
   הכנות ראשוניות ללייאוטים לפי סוג פוסט
   ========================================== */
body.type-title .post-text-area { font-size: 54px; text-align: center; }
body.type-short .post-text-area { font-size: 27px; }
body.type-medium .post-text-area { font-size: 21.6px; }
body.type-article .post-text-area { font-size: 18px; max-width: 800px; margin: 0 auto; padding-top: 30px; padding-right: 90px; }

/* ביטול נעילת הגלילה של עמוד הבית ברגע שנכנסים לפוסט בודד + חסימת גלילה אופקית */
body.single { overflow-x: hidden; overflow-y: auto; height: auto; overscroll-behavior: auto; }


/* ==========================================
   הגדרות בסיס לעמוד סינגל
   ========================================== */
.single-post-wrap {
	position: relative;
	padding-right: 60px; /* קיזוז של תפריט הצד */
	min-height: 100vh;
	display: flex;
	flex-direction: column; 
	padding-top: 80px;
	padding-bottom: 0; 
	padding-left: 40px;
	color: var(--theme-text); 
	/* שורת ה-overflow נמחקה מפה כדי שהסטיקי יעבוד! */
	overflow-x: clip;
}

.post-content-container {
	width: 100%;
	max-width: 1440px; /* הוגדל מ-1300 ל-1440 לפי בקשתך קודם */
	margin: auto; /* מממרכז את אזור הפוסט אנכית במסך בלי לשבור את הגריד! */
}

.post-inner {
	display: grid;
	gap: 60px;
	width: 100%;
}

.post-image-area img {
	width: 100%;
	height: auto;
	max-height: 75vh;
	display: block;
	object-fit: contain;
}

/* ==========================================
   כותרות פלואידיות (.ltitle) - קו מפריד שואב צבע אוטומטית
   ========================================== */
.ltitle-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	color: inherit; /* יורש אוטומטית את צבע הטקסט מה-body */
	margin-bottom: 30px;
	padding-left: 40px; /* שומר שהקו לא ייגע ממש בקצה השמאלי של המסך */
}

.ltitle {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	margin-left: 20px;
	letter-spacing: 5.6px;
	font-family: "lexia-hebrew", sans-serif;
}

.ltitle-wrap::after {
	content: '';
	flex-grow: 1; /* לוקח את שאר המרחב כדי לצייר קו */
	height: 1px;
	background-color: currentColor; /* הקו מקבל את צבע הטקסט הדינמי */
	opacity: 0.4;
}

/* ==========================================
   אזור התחתית והטיקרים
   ========================================== */
.single-bottom-section {
	width: 100%; /* מושך את האזור למלא את הפדינג השמאלי של המסך */
	margin-left: 0;
	margin-top: 120px; /* מינימום רווח מהפוסט שמעל */
	padding-bottom: 27px;
	padding-right: 50px; /* <--- הנה המרווח החדש של 50px מימין! */
	box-sizing: border-box; /* מוודא שהפדינג לא ישבור לנו את הרוחב */
}

/* ==========================================
   עטיפת הטיקר הכללית - איפוס כיווניות לאנימציה חלקה
   ========================================== */
.ticker-wrap {
   width: 100vw;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   direction: ltr;
   margin: 0; /* איפוס למרג'ין השלילי הקודם */
}

.ticker-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

/* עצירת כל הטיקרים באתר במעבר עכבר */
.ticker-wrap:hover .ticker-track {
	animation-play-state: paused;
}

.ticker-content {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* ==========================================
   טיקר תמונות - נע מימין לשמאל
   ========================================== */
.ticker-images .ticker-content {
	gap: 20px;
	padding-right: 20px; /* מרווח בין הלופ הראשון לשני */
}

.ticker-images img {
	height: 240px; /* גובה קבוע לכל התמונות, הרוחב משתנה אוטומטית */
	width: auto;
	object-fit: cover;
}

.ticker-images .ticker-track {
	animation: ticker-move-left 22s linear infinite;
}

/* קו הפרדה מתחת לתמונות */
.bottom-divider {
	height: 1px;
	width: 100%;
	background-color: var(--theme-text);
	opacity: 0.4;
	margin: 20px 0;
}

/* ==========================================
   טיקר טקסט - נע משמאל לימין
   ========================================== */
.ticker-text .ticker-content {
	color: var(--theme-text);
	font-size: 39px; /* גודל פונט לפי העיצוב */
	font-weight: 500;
}

.ticker-text .ticker-track {
	/* כדי לנוע ימינה בלופ, אנחנו מתחילים מחצי המרחק לאחור */
	transform: translateX(-50%);
	animation: ticker-move-right 60s linear infinite;
}

/* ==========================================
   האנימציות של הטיקרים
   ========================================== */
@keyframes ticker-move-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes ticker-move-right {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

/* מוודא שהקישור עוטף את התמונה בתוך הטיקר בצורה נכונה */
.ticker-images .ticker-item {
	display: inline-block;
	flex-shrink: 0;
	line-height: 0; /* מונע רווחים מיותרים בתחתית התמונה */
	transition: opacity 0.3s ease;
}

.ticker-images .ticker-item:hover {
	opacity: 0.8;
}

.ticker-images img {
	height: 240px;
	width: auto;
	object-fit: cover;
	display: block;
}

.ticker-images a, .ticker-images img, .ticker-text a {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

/* מוודא שהתוכן בטיקר לא נשבר לשורות */
.ticker-images .ticker-content {
	display: flex;
	gap: 20px;
	padding-right: 20px;
	white-space: nowrap;
}


.ticker-interactive .ticker-track { animation: none !important; cursor: grab; }
.ticker-interactive:active .ticker-track { cursor: grabbing; }
.ticker-interactive .ticker-item { perspective: 1000px; }
.ticker-interactive .ticker-item img { transform-style: preserve-3d; will-change: transform; pointer-events: none; }

/* ==========================================
   Article - סיפור קצר (וריאציה אחת בלבד)
   ========================================== */
body.type-article .post-inner {
	grid-template-columns: 5fr 4fr; /* תמונה קצת יותר צרה מהטקסט */
	align-items: start;
	gap: 83px;
}
body.type-article .post-image-area {
	order: 2; /* תמונה בצד שמאל */
	position: sticky;
	top: 80px;
}
body.type-article .post-text-area {
	order: 1; /* טקסט בצד ימין */
}
body.type-article .article-title {
	font-size: 70px;
	font-weight: 700;
	margin-bottom: 1.2rem;
	line-height: 1.06;
	color: var(--theme-text);
}

/* מטה דאטה - מחבר, זמן קריאה ושתפו */
body.type-article .article-meta {
	border-bottom: 1px solid var(--theme-text); /* גבול תחתון בלבד */
	padding: 0 0 15px 0;
	margin-bottom: 40px;
	display: flex;
	align-items: center;
	font-size: 16px;
	gap: 34px;
	font-weight: 700;
	line-height: 1.32;
}
body.type-article .meta-right {
	display: flex;
	gap: 34px;
	align-items: center;
}
body.type-article .meta-separator {
	opacity: 0.5;
}

/* כפתור שתפו */
body.type-article .meta-left .action-share {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: opacity 0.3s;
	font-weight: bold;
	color: inherit;
}
body.type-article .meta-left .action-share:hover {
	opacity: 0.5;
}
body.type-article .meta-left .action-share svg {
	transition: transform 0.3s;
}

/* ==========================================
   תמונות מוטמעות וקפשן (כיתוב) בתוך גוף הסיפור
   ========================================== */
/* העוטף של התמונה המובנה של וורדפרס */
body.type-article .article-content [id^="attachment"], body.type-article .article-content p > img {
	margin-top: 40px; /* מרווח נשימה מעל התמונה */
	margin-bottom: 40px; /* מרווח מתחת לכל הבלוק (תמונה + כיתוב) */
	max-width: 100%; /* מוודא שזה לא גולש מרוחב הטקסט */
}

/* התמונה עצמה בתוך העוטף */
body.type-article .article-content [id^="attachment"] img {
	margin-bottom: 15px; /* המרווח המדויק בין התמונה לטקסט הקפשן שמתחתיה */
	display: block;
	width: 100%;
	height: auto;
}

/* טקסט הקפשן המובנה של וורדפרס */
body.type-article .article-content .wp-caption-text {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.32;
	margin: 0; /* מאפס שוליים מובנים של וורדפרס אם יש */
	text-align: right;
}

/* ==========================================
   טיפוגרפיה של גוף הסיפור
   ========================================== */
/* עיצוב הטקסט הרץ */
body.type-article .article-content {
	font-size: 18px; /* בפיקסלים כמו שביקשת */
	line-height: 1.32; /* גובה שורה */
	font-weight: 500;
}

/* אות ראשונה גדולה (Drop Cap) */
body.type-article .article-content > p:first-of-type::first-letter {
	font-size: 50px;
	font-weight: bold;
	font-family: "lexia-hebrew", sans-serif;
	line-height: 1; /* מקזז את הרווח מעל האות כדי שתשב בקו אחד עם שורת הטקסט */
	padding-top: 6px;
	color: var(--theme-text);
}

/* כותרות פנימיות */
body.type-article .article-content h2,
body.type-article .article-content h3,
body.type-article .article-content h4,
body.type-article .article-content h5,
body.type-article .article-content h6 {
	font-size: 24px;
	font-weight: bold;
	margin-top: 35px;
	margin-bottom: 15px;
	line-height: 1.32;
}

/* קפשן של תמונה (נמשך מהמדיה באדמין) */
body.type-article .post-image-area figure {
	margin: 0;
}
body.type-article .post-image-area figcaption {
	font-size: 14px;
	font-weight: 400;
	margin-top: 15px;
	opacity: 0.8;
}

/* ==========================================
   Postcard Medium - וריאציה 1
   ========================================== */
body.type-medium.layout-var-1 .post-inner {
	grid-template-columns: 4fr 4fr 1fr;
	align-items: start; /* קריטי כדי שהסטיקי יעבוד */
}

body.type-medium.layout-var-1 .post-image-area {
	order: 1; /* תמונה בימין */
	max-width: 100%;
	/* הגדרות הסטיקי */
	position: -webkit-sticky;
	position: sticky;
	top: 100px;
	padding-right: 50px;
	height: calc(100vh - 80px);
}

body.type-medium.layout-var-1 .post-text-area {
	order: 2; /* טקסט ארוך בשמאל */
	max-width: 46.625rem; /* בדיוק 746 פיקסלים */
	font-size: 63px; /* גודל פונט מוגדל */
	font-weight: 300; /* משקל הפונט מהעיצוב */
	line-height: 1.06;
	font-family: "lexia-hebrew", sans-serif;
}

/* עיצוב אזור הפעולות מתחת לתמונה */
.post-actions {
	display: flex;
	justify-content: flex-start;
	gap: 20px;
	margin-top: 100px;
	font-size: 12px;
	font-weight: 500;
	opacity: 0.8;
	font-family: "lexia-hebrew", sans-serif;
}

.post-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	transition: opacity 0.3s;
	color: inherit;
	text-decoration: none;
}

.post-actions a:hover {
	opacity: 0.5;
}

/* ==========================================
   Postcard Short - וריאציה 1
   ========================================== */
body.type-short.layout-var-1 .post-inner {
	grid-template-columns: 1fr 1fr;
	align-items: stretch; /* מבטיח ששתי העמודות נמתחות לאותו גובה בדיוק */
}

body.type-short.layout-var-1 .post-image-area {
	order: 1; /* תמונה בימין */
	padding-top: 30px;
	padding-right: 50px;
	/* הפיכה לפלקס כדי לשלוט במיקום הכפתורים */
	display: flex;
	flex-direction: column;
}

body.type-short.layout-var-1 .post-text-area {
	order: 2;
	font-size: 39px;
	padding-left: 80px;
	padding-top: 130px;
	line-height: 1.06;
	font-family: "lexia-hebrew", sans-serif;
}

body.type-short.layout-var-1 .post-image-area img {
	display: block;
	width: 78%;
	height: auto;
}

/* מיקום כפתורי הפעולות ספציפית לוריאציה זו */
body.type-short.layout-var-1 .post-actions {
	margin-top: auto; /* זורק את הכפתורים לתחתית המוחלטת של העמודה */
	transform: translateY(57px); /* דוחף אותם 57 פיקסלים מתחת לקו התחתית */
	padding-bottom: 57px;
	position: static;
	display: flex;
	gap: 25px;
}

/* ==========================================
   Postcard Title - וריאציה 1 (כותרת מעל תמונה, רחבה)
   ========================================== */
body.type-title.layout-var-1 .post-inner {
	display: flex;
	flex-direction: column;
	gap: 60px; /* מרווח יפה בין טיקר הכותרת לתמונה */
}

/* הכותרת עוברת להיות ראשונה */
body.type-title.layout-var-1 .post-text-area {
	order: 1; 
	width: calc(100% + 60px);
}

/* התמונה יורדת למטה וממורכזת */
body.type-title.layout-var-1 .post-image-area {
	order: 2; 
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center; 
}

body.type-title.layout-var-1 .post-image-area img {
	width: 100%;
	max-width: 917px; /* רחבה יותר מהגלויות האחרות */
	max-height: 50vh; /* הגבלת גובה כמו בעיצוב */
	object-fit: contain;
}

/* הפיכת כפתורי השיתוף לתואמים לרוחב התמונה */
body.type-title.layout-var-1 .post-actions {
	margin-top: 92px;
	width: 100%;
}

body.type-title.layout-var-1 .post-actions a {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}
body.type-title.layout-var-1 .post-actions a:hover {
	opacity: 0.5;
}

/* עיצוב טיקר הכותרת העליונה */
body.type-title.layout-var-1 .main-title-ticker .ticker-content {
	font-size: 63px;
	font-weight: 300;
	line-height: 1.1;
	font-family: "lexia-hebrew", sans-serif;
	color: var(--theme-text);
	white-space: nowrap;
}

body.type-title.layout-var-1 .main-title-ticker .ticker-track {
	/* נע באותו סגנון של הטיקר התחתון, אפשר לשחק עם הזמן להאצה/האטה */
	transform: translateX(-50%);
	animation: ticker-move-right 200s linear infinite;
}

/* פריט בתוך טיקר הכותרת */
body.type-title.layout-var-1 .main-title-ticker .t-item {
	display: inline-flex;
	align-items: center;
	direction: rtl;
}

/* הזרקת העיגול המפריד אוטומטית דרך CSS */
body.type-title.layout-var-1 .main-title-ticker .t-item::after {
	content: '\2022'; /* קוד ה-CSS לנקודה עבה (Bullet) */
	margin: 5px 20px 0; /* המרווח מכל צד של העיגול - אפשר להגדיל/להקטין */
	font-size: 0.8em; /* הקטנה עדינה של העיגול כדי שלא יהיה גס מדי */
}


/* ==========================================
   בר עליון (Top Bar) ומד התקדמות
   ========================================== */
.single-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	/*background-color: var(--theme-bg);*/
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 110px 0 50px;
	color: var(--theme-text);
}

.spaced-text {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.3em; /* יוצר את הריווח הרחב בין האותיות והמספרים */
	white-space: nowrap;
}

.top-bar-line {
	flex-grow: 1;
	height: 1px;
	background-color: currentColor;
	margin: 0 30px;
	position: relative;
}

.scroll-progress {
	position: absolute;
	top: -1px; /* עולה טיפה למעלה כדי להיות ממורכז על הקו הדק */
	right: 0; /* מתחיל מימין (RTL) */
	height: 3px; /* עבה יותר מהקו הרגיל */
	background-color: var(--theme-text);
	width: 0%;
	opacity: 1 !important;
}

/* ==========================================
   הגדרות בסיס לעמוד סינגל (עדכון פדינג עליון)
   ========================================== */
.single-post-wrap {
	padding-right: 60px; 
	min-height: 100vh;
	display: flex;
	flex-direction: column; 
	padding-bottom: 0; 
	padding-left: 40px;
	color: var(--theme-text); 
}


#page-transition-curtain {
	position: fixed;
	top: 0;
	right: 100%; /* מתחיל מחוץ למסך משמאל */
	width: 100%;
	height: 100vh;
	z-index: 99999;
	pointer-events: none;
	transition: right 1.5s cubic-bezier(0.19, 1, 0.22, 1);
	will-change: right;
}

/* כשהוא אקטיבי בטעינה, הוא ישר מכסה את המסך (בלי אנימציה) */
#page-transition-curtain.active {
	right: 0;
	transition: none !important;
}

/* קלאס ליציאה מהמסך (ימינה) */
body.curtain-exiting #page-transition-curtain {
	right: -100% !important;
	transition: right 1.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* קלאס לכניסה למסך (משמאל לימין) */
body.curtain-entering #page-transition-curtain {
	right: 0 !important;
	transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}


/* ==========================================
   עמוד אודות - הגדרות בסיס וצבעים
   ========================================== */
/* הגדרת משתני הצבע ברמת העוטף כך שגם הבר העליון ישאב אותם */
.about_wrap {
	--theme-bg: var(--green-light);
	--theme-text: var(--green-dark);
	
	background-color: var(--theme-bg);
	color: var(--theme-text);
	min-height: 100vh;
	overflow-x: hidden;
}

.about-main {
	padding-top: 160px; /* מרווח גדול יותר מהבר העליון */
	padding-right: 110px; /* קיזוז של סרגל הצד */
	padding-left: 50px;
	display: flex;
	flex-direction: column;
	gap: 50px; /* מרווח אנכי אחיד בין כל הבלוקים בעמוד */
}

/* מוודא שהבר העליון בעמוד אודות מקבל את הרקע הנכון */
.about_wrap .single-top-bar {
	/*background-color: var(--theme-bg);*/
	color: var(--theme-text);
}


/* ==========================================
   שורת התמונות העליונה (הירו)
   ========================================== */
.about-hero-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px; /* המרווח בין התמונות */
	width: 100%;
}

.hero-img-col img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	box-shadow: 0px 10px 30px rgba(0,0,0,0.05); /* הצללה עדינה כמו בסינגל */
}

/* ==========================================
   טיקר ענק (עליון)
   ========================================== */
.about-ticker-huge .ticker-content {
	font-size: 80px; /* קבוע בפיקסלים */
	font-weight: 700;
	line-height: 1.1;
	font-family: "lexia-hebrew", sans-serif;
	color: var(--theme-text);
}

/* ==========================================
   טיקר תחתון בינוני
   ========================================== */
.about-ticker-medium .ticker-content {
	font-size: 70px; /* קבוע בפיקסלים */
	font-weight: 500;
	font-family: "lexia-hebrew", sans-serif;
	color: var(--theme-text);
}

.about-ticker-huge .ticker-track {
	transform: translateX(-50%);
	animation: ticker-move-right 40s linear infinite; /* תנועה חלקה ואיטית ימינה */
}

/* מרווח בין המשפטים בטיקר הענק */
.about-ticker-huge .t-item {
	padding-left: 30px; 
}


/* ==========================================
   טקסט ביוגרפיה
   ========================================== */
.about-bio-text {
   max-width: 33.33333333rem;
   margin: 0 auto;
   font-size: 18px;
   line-height: 1.32;
   font-weight: 500;
   text-align: right;
}


/* ==========================================
   קו הפרדה (דברים נוספים)
   ========================================== */
.about-divider-wrap {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 100%;
}

.divider-text {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.3em; /* יוצר את הריווח בין האותיות כמו בעיצוב */
	white-space: nowrap;
}

.divider-line {
	flex-grow: 1; /* מותח את הקו על פני שאר המקום הפנוי */
	height: 1px;
	background-color: var(--theme-text);
	opacity: 0.4;
}


/* ==========================================
   שורת תמונות תחתונה
   ========================================== */
.about-bottom-images {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
	align-items: start; /* מאפשר לתמונות להיות בגבהים שונים */
}

.btm-img-col img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}


/* ==========================================
   טיקר תחתון בינוני
   ========================================== */
.about-ticker-medium {
	margin-left: -40px;
	margin-right: -60px;
	width: calc(100% + 100px);
	margin-bottom: -80px; /* מבטל את הפאדינג התחתון של העמוד כדי שיישב בתחתית */
	padding-bottom: 40px;
}

.about-ticker-medium .ticker-content {
	font-size: clamp(30px, 4vw, 55px);
	font-weight: 500;
	font-family: "lexia-hebrew", sans-serif;
	color: var(--theme-text);
}

.about-ticker-medium .ticker-track {
	transform: translateX(0); /* מתחיל רגיל ונע שמאלה */
	animation: ticker-move-left 50s linear infinite;
}

.about-ticker-medium .t-item {
	padding-left: 30px; 
}

.about_wrap .single-bottom-section {padding-right: 0;}


/* --- Single Post: Layout Medium Var 2 (Updated & Fixed) --- */
.layout-var-2-wrap {
	position: relative;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
}

.l2-img-container {
	position: fixed;
	top: 10vh; /* מרווח התחלתי */
	/* המרכוז קורה עכשיו ב-JS כדי לא להתנגש עם הגרירה */
	height: 75vh;
	z-index: 101; /* תוקן: גבוה יותר מהפייד (שהוא 10) */
	cursor: grab;
	transform-origin: center center; /* עבור אנימציית ה-Scale */
}

.l2-img-container img {
	height: 100%;
	width: auto;
	pointer-events: none; /* מונע באגים בגרירה */
}

.l2-img-container.dragging {
	cursor: grabbing;
}

.l2-text-area {
	font-size: 108px;
	font-weight: 800;
	line-height: 1.1;
	text-align: right;
	max-width: 1400px;
	margin: 100vh auto 40vh auto; 
	padding: 0 5vw;
	direction: rtl;
}

.l2-text-area .char {
	color: rgba(30, 41, 59, 0.1);
}

.l2-fixed-bottom-fade {
	position: sticky !important; /* הופך את האלמנט לדביק במקום קבוע */
	bottom: 0;                   /* נצמד לתחתית המסך */
	right: 0;
	width: 100%;
	height: 35vh;
	pointer-events: none;
	z-index: 100;                /* מעל התגובות והפוטר בזמן הגלילה */
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	margin-top: -35vh;           /* טריק כדי שה-sticky לא יתפוס מקום פיזי וידחוף את התגובות מטה */
}

/* מוודא שהמעטפת מאפשרת לאלמנט הדביק לרוץ בתוכה */
body.type-medium.layout-var-2 .layout-var-2-wrap {
	position: relative !important;
	display: flex;
	flex-direction: column;
}

.l2-fixed-bottom-fade .post-actions {
	padding: 0 50px 6vh 5vw;
	pointer-events: auto;
}
.l2-fixed-bottom-fade.is-absolute .post-actions {
	padding-right: 50px;
}

.type-medium.layout-var-2 .single-post-wrap { 
	position: relative;
	z-index: 1;
}
/* ביטול ה-sticky עבור האקשיינס בלייאוט 2 כדי שייגללו עם העמוד */
.type-medium.layout-var-2 .post-actions {
	position: relative !important; /* משחרר את הנעיצה */
	top: auto !important;
	margin-top: 20px; /* רווח מהתמונה, שנה לפי הצורך */
}

/* הבטחת זרימה תקינה של התמונה בלייאוט זה */
.type-medium.layout-var-2 .post-image-area {
	height: auto !important;
	position: relative !important;
}




/* --- Single Post: Layout Medium Var 3 (Typemachine - Fixed RTL) --- */
.layout-var-3-wrap {
	position: relative;
	display: flex;
	/* הופך את הסדר: האלמנט הראשון ב-HTML (התמונה) יהיה משמאל, והשני (הטקסט) מימין */
	flex-direction: row-reverse; 
	align-items: flex-start;
	gap: 6vw;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 50px 0 0; /* פאדינג 50 פיקסל מימין ומשמאל */
	direction: rtl;
}

/* עמודת התמונה (Sticky - עכשיו משמאל) */
.l3-img-col {
	flex: 0 0 490px; /* קיבוע עמודת התמונה ל-490 פיקסלים בדיוק */
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.l3-img-col img {
	width: 100%; /* יתפרס בדיוק על ה-490 פיקסלים */
	height: auto;
	max-height: 75vh;
}

/* עמודת הטקסט המוקלד (עכשיו מימין) */
.l3-text-col {
	flex: 1; /* כעת ייקח הרבה יותר מקום בזכות קיבוע התמונה */
	font-size: clamp(24px, 3.5vw, 48px);
	font-weight: 800;
	line-height: 1.2;
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* אזור הטקסט המוקלד עצמו */
#l3TypedArea {
	width: 100%;
}

/* הפלייסהולדר (נשאר עם 68px כברירת מחדל) */
.l3-placeholder {
	display: flex;
	align-items: center;
	opacity: 1;
	transition: opacity 0.4s ease;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.06;
	margin-top: 68px;
	margin-inline-start: 0;
}

/* --- התוספת החדשה --- */
/* אם אזור הטקסט עדיין ריק (מצב התחלתי), נבטל את המרווח העליון של הפלייסהולדר שאחריו */
#l3RevealedText:empty + .l3-placeholder {
	margin-top: 0;
}

.l3-placeholder.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.l3-ph-text {
	background: linear-gradient(90deg, var(--ph-grad-start, #4A4424) 0%, var(--ph-grad-end, #B0A256) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* סמן כתיבה מהבהב */
.l3-cursor {
	color: var(--ph-grad-end, #B0A256);
	font-weight: 400;
	animation: l3-blink 1s step-end infinite;
	margin-inline-start: 2px;
}

@keyframes l3-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}


/* --- Single Post: Layout Title Var 2 --- */
body.type-title.layout-var-2 .single-post-wrap {
	padding-left: 0;
}
body.type-title.layout-var-2 .post-inner {
	padding-bottom: 0;
}
.layout-title-var-2-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	direction: rtl;
}

/* עיצוב הטקסט (30 פיקסלים, בולד, גובה שורה 1.06) */
.t2-text {
	font-size: 30px;
	font-weight: 800; /* או bold */
	line-height: 1.06;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 20; /* מעל העיגולים */
	font-family: "lexia-hebrew", sans-serif;
}


/* אזור התמונות - הקונטיינר החיצוני */
.t2-images-container {
	position: relative;
	width: 100vw;
	max-width: 100%;
	overflow: hidden; 
	display: flex;
	align-items: center;
	padding: 4vw 0;
	direction: ltr; /* קריטי לטיקר חלק */
}

/* 2 העיגולים (אליפסות) שיוצרים את אפקט החיתוך */
.t2-circle {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 150vw;
	height: 35vw; 
	border-radius: 50%;
	z-index: 10;
	pointer-events: none;
}

.t2-circle-top { top: -47vh; }
.t2-circle-bottom { bottom: -47vh; }

/* מסילת התמונות - שינוי קריטי: האנימציה הוסרה מכאן! */
.t2-img-track {
	display: flex;
	width: max-content;
	z-index: 1; 
}

/* כל קבוצת תמונות - האנימציה עברה לפה */
.t2-ticker-group {
	display: flex;
	flex-shrink: 0; /* מונע מהקבוצה להתכווץ ולשבור את הלופ */
	gap: 2vw; 
	padding-right: 2vw; /* מרווח ימני שווה לרווח כדי שהחיבור יהיה בלתי נראה */
	animation: t2-scroll 45s linear infinite; 
}

/* התמונות עצמן */
.t2-ticker-group img {
	display: block;
	width: 31vw; 
	height: 68vh; 
	object-fit: cover; 
	object-position: center center;
	flex-shrink: 0; 
}

/* תנועה חלקה משמאל לימין - זז בדיוק 100% מהגודל של קבוצה אחת! */
@keyframes t2-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); } 
}


/* ==========================================
   עמוד אודות - אזור הספרים (Repeater)
   ========================================== */
.about-books-section {
	width: 100%;
	margin-top: 60px;
}

.books-container {
	max-width: 33.3333rem; /* שווה בדיוק ל-589 פיקסלים בהתבסס על פונט 18px */
	margin: 60px auto 0 auto;
	display: flex;
	flex-direction: column;
}

.book-item {
	display: flex;
	gap: 50px; /* מרווח בין הטקסט לתמונה */
	align-items: flex-start;
	padding-bottom: 45px; /* מרווח פנימי מעל הקו */
	margin-bottom: 45px; /* מרווח חיצוני מתחת לקו */
	border-bottom: 1px solid #1C3D29; /* קו ההפרדה שביקשת */
}

/* מסיר את הקו מהספר האחרון ברשימה */
.book-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* עמודת התמונה (משמאל) */
.book-cover {
	flex: 0 0 160px; /* רוחב קבוע לתמונת הספר */
}

.book-cover img {
	width: 100%;
	height: auto;
	display: block;
}

/* עמודת הטקסט (מימין) */
.book-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: right;
	color: var(--theme-text);
}

.book-title {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 12px;
	line-height: 1.39;
}

.book-authors {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 12px;
	line-height: 1.32;
}

.book-meta {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.32;
}

.book-excerpt {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.32;
	margin-bottom: 20px;
}
/* כפתור "לרכישה" */
.book-link {
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	color: var(--theme-text);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: opacity 0.3s;
	align-self: flex-start;
}

.book-link:hover {
	opacity: 0.5;
}

/* הזרקת החץ כרקע (מופיע משמאל לטקסט בזכות ה-RTL וה-Flex) */
.book-link::after {
	content: '';
	display: block;
	width: 14px;
	height: 14px; /* אם החץ שלך לא ריבוע מושלם, אפשר לשחק עם הגובה */
	background-image: url('assets/img/svg/arr_left_sm.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/* אם החץ שחור וצריך לרשת את הצבע מהנושא, אפשר להשתמש בפילטר הבא: */
	/* filter: brightness(0) saturate(100%) invert(...); */
}

/* ==========================================
   עמוד אודות - כפתור ויקיפדיה (עיצוב סופי ומדויק)
   ========================================== */
.bio-actions {
	display: flex;
	/* קריטי: ב-RTL flex-start ממקם את האלמנט בצד ימין של המסך */
	justify-content: flex-start; 
	margin-top: 30px;
}

/* הכפתור עצמו - גיאומטריה ופונטים מדויקים */
.wiki-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* מרווח בין האייקון לטקסט */
	
	/* גאומטריה קשיחה לפי הדרישה */
	height: 31px; /* גובה קבוע 31px */
	padding: 0 12px; /* פדינג אופקי כדי שהטקסט לא ייגע במסגרת */
	border: 1px solid var(--theme-text); /* מסגרת דקה */
	
	/* בורדר רדיוס 5 פיקסלים מחושב לפי פונט בסיס 18px */
	border-radius: 0.27777778rem; 
	
	/* פונטים לפי דרישה */
	font-size: 16px;
	font-weight: 500;
	color: var(--theme-text);
	text-decoration: none;
	
	/* אנימציה חלקה לכל המעברים */
	transition: all 0.3s ease; 
}

/* אפקט הובר - הרקע מתכהה והטקסט מקבל את צבע הרקע הדינמי */
.wiki-btn:hover { background-color: var(--theme-text); color: var(--theme-bg); }

/* הזרקת האייקון בעזרת mask לשליטה מלאה בצבע משתנה */
.wiki-btn::before { content: ''; display: block; width: 16px; height: 16px; background-color: var(--theme-text); -webkit-mask-image: url('assets/img/svg/wikipedia.svg'); mask-image: url('assets/img/svg/wikipedia.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color 0.3s ease; }

/* צבע האייקון בהובר משתנה גם הוא לצבע הרקע הדינמי */
.wiki-btn:hover::before { background-color: var(--theme-bg); }


/* ==========================================
   Single Post: Layout Medium Var 4 (Scroll & Fade)
   ========================================== */
.layout-var-4-wrap {
	width: 100%;
	position: relative;
}
.l4-sticky-container {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.l4-img-col {
	position: absolute;
	top: 0; /* הועלה למעלה, מחוץ לאמצע המסך */
	left: 50%;
	transform: translateX(-50%); /* ממורכז אופקית בלבד */
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
	width: 266px; /* רוחב התחלתי מדויק כפי שביקשת */
	will-change: transform, left, width;
}
.l4-scroll-prompt {
	font-size: 22px; /* גודל מדויק כפי שביקשת */
	font-weight: 500;
	margin-bottom: 104px;
	text-align: center;
	background: linear-gradient(90deg, var(--ph-grad-start, #4A4424) 0%, var(--ph-grad-end, #B0A256) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.l4-img-col img {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: cover;
}
.l4-content-col {
	position: absolute;
	right: 5vw;
	width: 590px; /* רוחב מדויק לטקסט ולטופס */
	height: 100vh;
	z-index: 1;
}
.l4-text-scroll {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
}
.l4-the-text {
	font-size: 30px; /* גודל פונט זהה ללייאאוט 3 */
	font-weight: 800;
	line-height: 1.2;
	color: var(--theme-text);
	margin-bottom: 60px;
}

/* הפייד בתחתית הטקסט - עכשיו בתוך העמודה לבידוד מוחלט */
.l4-fade-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%; 
	height: 40vh; /* כיסוי רחב וחלק כדי להעלים יפה את הטקסט */
	z-index: 10;
	pointer-events: none;
}

/* עיצוב טופס (מוקאפ) */
.l4-form-mockup {
	border: 1px solid var(--theme-text);
	border-radius: 12px;
	padding: 30px;
	background: transparent;
	margin-bottom: 25vh; /* מרווח כדי שהטקסט יעלה הרבה מעבר לפייד */
}
.l4-accordion {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 800;
	font-size: 18px;
	border-bottom: 1px solid var(--theme-text);
	padding-bottom: 20px;
	margin-bottom: 30px;
	color: var(--theme-text);
}
.l4-form-inner h4 {
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 20px;
	color: var(--theme-text);
}
.l4-inputs {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}
.l4-inputs input {
	flex: 1;
	background: transparent;
	border: 1px solid var(--theme-text);
	padding: 12px 15px;
	border-radius: 8px;
	color: var(--theme-text);
	font-size: 14px;
	outline: none;
}
.l4-inputs input::placeholder, .l4-form-inner textarea::placeholder {
	color: var(--theme-text);
	opacity: 0.6;
}
.l4-form-inner textarea {
	width: 100%;
	background: transparent;
	border: 1px solid var(--theme-text);
	padding: 15px;
	border-radius: 8px;
	height: 120px;
	color: var(--theme-text);
	font-size: 14px;
	outline: none;
	margin-bottom: 20px;
	resize: none;
}
.l4-btn-wrap {
	display: flex;
	justify-content: center;
}
.l4-form-inner button {
	background-color: var(--theme-text);
	color: var(--theme-bg);
	border: none;
	padding: 10px 40px;
	border-radius: 50px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: opacity 0.3s;
}
.l4-form-inner button:hover {
	opacity: 0.8;
}

/* כפתורי הפעולה בתחתית הפייד */
.l4-fixed-actions {
	position: absolute;
	bottom: 6vh;
	right: 5vw;
	z-index: 20;
	padding: 0 !important;
	margin: 0 !important;
}

/* ==========================================
   Single Post: Layout Short Var 2 (3D Flip)
   ========================================== */
.layout-short-var-2-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding-top: 80px;
}

/* עוטף הגלויה שיוצר את זווית הראייה התלת מימדית */
.s2-flip-container {
	perspective: 1500px;
	width: 468px; /* רוחב הגלויה המומלץ */
	margin: 50px auto 0;
	/* שורת ה-cursor הוסרה מכאן */
}

/* האלמנט שמסתובב */
.s2-flip-inner {
	position: relative;
	width: 100%;
	height: 588px;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); /* סיבוב חלק ואלגנטי */
}

/* כשהגלויה מסתובבת */
.s2-flip-inner.is-flipped {
	transform: rotateY(180deg);
}

/* הצד הקדמי (תמונה) והאחורי (טקסט) */
.s2-flip-front, 
.s2-flip-back {
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden; /* לספארי */
}

.s2-flip-front {
	display: block;
}

.s2-flip-front img {
	width: 100%;
	height:100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}

/* הצד האחורי - מוסתר מאחורי התמונה עד ללחיצה */
.s2-flip-back {
	position: absolute;
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
	height: 100%;
	/* הופך את הצד כדי שיישב נכון מאחור */
	transform: rotateY(180deg); 
	
	/* רקע הכרטיס הוא צבע הטקסט, והטקסט עצמו הוא צבע הרקע */
	background-color: var(--theme-text);
	color: var(--theme-bg);
	
	display: flex;
	justify-content: center;
	padding: 40px;
	overflow: hidden;
}

.s2-back-text {
	/*font-size: 35px;*/ /* גודל מדויק כפי שביקשת */
	font-size: clamp(20px, 2.1vw, 50px);
	font-weight: 500;
	line-height: 1.15;
	max-height: 100%;
	overflow-y: auto; 
	-ms-overflow-style: none; 
	scrollbar-width: none;
}
.s2-back-text::-webkit-scrollbar { display: none; }

/* שורת הכפתורים שמתחת לגלויה */
.s2-controls-row {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 50px 50px 100px;
}

.s2-instruction {
	position: absolute;
	right: 50%;
	transform: translateX(50%);
	font-size: 16px;
	font-weight: 500;
	opacity: 0.5;
	color: var(--theme-text);
}

/* אנימציית הבהוב עדינה לטקסט ההנחיה */
.s2-instruction {
	animation: instruction-blink 1.2s ease-in-out infinite;
}

@keyframes instruction-blink {
	0%, 100% { opacity: 0; } /* מצב עמום */
	50% { opacity: 0.5; }      /* מצב מודגש */
}

.s2-actions {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
	padding: 0 !important;
}

/* עיצוב מוקאפ הטופס */
.s2-form-mockup {
	width: 100%;
	max-width: 590px;
	border: 1px solid var(--theme-text);
	border-radius: 12px;
	padding: 30px;
	background: transparent;
	margin-bottom: 50px; 
}
.s2-accordion {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 800;
	font-size: 18px;
	border-bottom: 1px solid var(--theme-text);
	padding-bottom: 20px;
	margin-bottom: 30px;
	color: var(--theme-text);
}
.s2-form-inner h4 {
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 20px;
	color: var(--theme-text);
}
.s2-inputs {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}
.s2-inputs input {
	flex: 1;
	background: transparent;
	border: 1px solid var(--theme-text);
	padding: 12px 15px;
	border-radius: 8px;
	color: var(--theme-text);
	font-size: 14px;
	outline: none;
}
.s2-inputs input::placeholder, .s2-form-inner textarea::placeholder {
	color: var(--theme-text);
	opacity: 0.6;
}
.s2-form-inner textarea {
	width: 100%;
	background: transparent;
	border: 1px solid var(--theme-text);
	padding: 15px;
	border-radius: 8px;
	height: 120px;
	color: var(--theme-text);
	font-size: 14px;
	outline: none;
	margin-bottom: 20px;
	resize: none;
}
.s2-btn-wrap {
	display: flex;
	justify-content: center;
}
.s2-form-inner button {
	background-color: var(--theme-text);
	color: var(--theme-bg);
	border: none;
	padding: 10px 40px;
	border-radius: 50px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: opacity 0.3s;
}
.s2-form-inner button:hover {
	opacity: 0.8;
}


/* ==========================================
   Single Post: Layout Medium Var 5 (Custom Dark Palette)
   ========================================== */

/* ביטול מגבלות העמוד הכלליות כדי לאפשר לוריאציה 5 להימתח מקצה לקצה */
body.type-medium.layout-var-5 .post-content-container {
	max-width: 100%;
}
body.type-medium.layout-var-5 .post-inner {
	display: block; /* ביטול הגריד שיוצר רווחים */
	height: 100vh !important;
}
body.type-medium.layout-var-5 .single-post-wrap {
	padding-left: 0;
	padding-top: 0; /* אנחנו רוצים שהתמונה תימתח עד הבר העליון או מעליו */
	overflow-x: hidden;
}

/* העוטף של הלייאאוט עצמו */
.layout-var-5-wrap {
	display: flex;
	flex-direction: row; /* בגלל ה-RTL התמונה תהיה מימין */
	width: 100%;
	height: 100vh; /* מתיחה על כל הגובה */
	margin: 0;
}

.l5-img-col {
	flex: 0 0 55%; /* תופס 55% מהמסך כמו בעיצוב */
	position: relative;
	height: 100vh;
}

.l5-img-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.l5-gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.l5-text-col {
	flex: 0 0 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	padding: 80px 6vw 40px 6vw; /* 80px למעלה כדי להתחמק מהבר העליון */
	text-align: right;
	direction: rtl;
	height: 100vh;
}

.l5-the-text {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.39;
	max-width: 580px;
	color: var(--theme-text); /* יונק את הצבע החדש (הבהיר) */
}

.l5-actions {
	position: absolute;
	bottom: 60px; /* מרווח נושם מלמטה */
	right: 50px; /* מרווח נושם מימין */
	margin-top: 0;
	display: flex;
	gap: 25px;
	z-index: 10; /* מוודא שזה צף מעל התמונה והגרדיאנט */
	color: var(--theme-text); /* יונק את הצבע הבהיר של הטקסט */
}

/* מוודא שהאייקונים והטקסט בכפתורים מיושרים יחד */
.l5-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

.l5-actions a:hover {
	opacity: 0.5;
}

/* עדכון לוריאציה 5 - חפיפת טקסט על תמונה */
body.layout-var-5 .l5-text-col {
	flex: 0 0 50%; /* הגדלנו מעט את שטח הקולונה */
	margin-right: -10vw; /* הזזה אגרסיבית ימינה לתוך שטח התמונה */
	padding-right: 0; /* ביטול הרווח הימני כדי לאפשר את החפיפה */
	z-index: 10; /* מוודא שהטקסט תמיד מעל התמונה והגרדיאנט */
}

body.layout-var-5 .l5-img-col {
	flex: 0 0 60%; /* הגדלנו את התמונה כדי שיהיה לה מספיק "בשר" מתחת לטקסט */
}

body.layout-var-5 .l5-the-text {
	max-width: 458px; /* צמצום קל של רווח השורות כדי להדגיש את החפיפה */
}
body.layout-var-5 .single-top-bar { 
	background-color: transparent !important; 
	color: var(--theme-text) !important; 
}


/* ==========================================
   Single Post: Layout Short Var 3
   ========================================== */
.layout-short-var-3-wrap {
	width: 100%;
	padding-right: 50px; /* הריווח שהוספת מתחת לבר העליון */
}

.s3-content-inner {
	display: flex;
	justify-content: space-between;
	align-items: stretch !important; /* כופה על העמודות להיות בדיוק באותו גובה */
	width: 100%;
	direction: rtl; 
}

/* עמודת הטקסט והכפתורים - צד ימין *//* עמודת הטקסט והכפתורים - צד ימין */
.s3-text-col {
	flex: 1; 
	display: flex;
	flex-direction: column;
	justify-content: space-between !important; /* דוחף בכוח את הטקסט למעלה ואת הכפתורים לתחתית העמודה */
	padding-left: 6vw; 
}

.s3-the-text {
	font-size: 35px; /* גודל מדויק לדרישה */
	font-weight: 500;
	line-height: 1.06;
	color: var(--theme-text);
	max-width: 500px; /* מונע מהטקסט להימתח מדי ושומר עליו בגוש נעים לקריאה */
}

.s3-actions {
	margin-top: auto !important; /* דורס כל מרווח קשיח קודם ודוחף למטה */
	display: flex;
	justify-content: flex-start; 
	gap: 25px;
	color: var(--theme-text);
	padding-bottom: 5px; /* יישור קל כדי שהכפתורים יהיו בדיוק בקו אחד עם התמונה */
}

.s3-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

.s3-actions a:hover {
	opacity: 0.5;
}

/* עמודת התמונה - צד שמאל */
.s3-img-col {
	flex: 0 0 596px; /* רוחב קשיח ומדויק לדרישה */
}

.s3-img-col img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* התאמה למסכים קטנים יחסית כדי שה-596 לא ישבור את המסך */
@media only screen and (max-width: 1141px) {
	.s3-img-col {
		flex: 0 0 45vw; /* במסכים צרים התמונה תצטמצם באחוזים */
	}
}



/* ==========================================
   Single Post: Layout Short Var 4 (Updated)
   ========================================== */

/* ביטול מגבלות העמוד הכלליות כדי לאפשר מירכוז מושלם */
body.type-short.layout-var-4 .post-content-container {
	max-width: 100%;
}
body.type-short.layout-var-4 .post-inner {
	display: block;
}
body.type-short.layout-var-4 .single-post-wrap {
	padding-left: 0;
	overflow-x: hidden;
}

.layout-short-var-4-wrap {
	position: relative;
	width: 100%;
	min-height: calc(100vh - 80px);
	display: flex;
	flex-direction: column; /* שונה ל-column כדי שהפעולות ירדו מתחת לתוכן */
	align-items: center; 
	justify-content: center;
	padding: 80px 0; 
}

/* הקונטיינר של ה-800 פיקסלים */
.s4-content-inner {
	width: 800px;
	max-width: 90vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	direction: rtl;
}

/* עמודת התמונה */
.s4-img-col {
	flex: 0 0 356px;
	width: 356px;
}

.s4-img-col img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* עמודת הטקסט */
.s4-text-col {
	flex: 0 0 388px;
	width: 388px;
	text-align: right;
}

.s4-the-text {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.06;
	color: var(--theme-text);
}

/* הכפתורים - מיקום סטטי במרחק 132 פיקסלים מהתוכן */
.s4-actions {
	position: static; /* ביטול הפוזישן האבסולוטי */
	margin-top: 132px; /* המרווח המדויק שביקשת */
	display: flex;
	gap: 25px;
	color: var(--theme-text);
	z-index: 10;
	
	/* יישור לימין בקו אחד עם תוכן הגלויה (800px) */
	width: 800px;
	max-width: 90vw;
	justify-content: flex-start;
}

.s4-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
	font-size: 12px;
	font-weight: 500;
}

.s4-actions a:hover {
	opacity: 0.5;
}


/* ==========================================
   Single Post: Layout Title Var 3 (Text Frame)
   ========================================== */
.layout-title-var-3-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(100vh - 80px); /* מותח על כל העמוד */
	direction: ltr; /* קריטי! אנחנו כופים LTR כדי שמילים כמו left ו-right יעבדו אבסולוטית בלי בלבול */
}

/* המסגרת שעוטפת בדיוק את התמונה */
.t3-frame {
	position: relative;
	display: inline-block;
	margin: auto; /* ממורכז אנכית ואופקית */
}

.t3-image {
	position: relative;
	z-index: 2;
}

/* גובה מקסימלי, רוחב אוטומטי - שומר על פרופורציות! */
.t3-image img {
	display: block;
	max-height: 60vh;
	width: auto;
	max-width: 75vw; /* שומר שלא יחרוג במסכים קטנים */
	object-fit: contain;
}

/* העוגנים הבלתי נראים שמחזיקים את הטקסט */
.t3-anchor {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	direction: rtl;
}

/* מרווח קבוע של 45px מהתמונה לכל כיוון */
.t3-anchor.top { top: -45px; left: 0; width: 100%; height: 0; }
.t3-anchor.bottom { bottom: -45px; left: 0; width: 100%; height: 0; }
.t3-anchor.right { right: -45px; top: 0; width: 0; height: 100%; }
.t3-anchor.left { left: -45px; top: 0; width: 0; height: 100%; }

/* עיצוב הטקסט (כותרת מודגשת) */
.t3-text {
	font-size: 30px;
	font-weight: 700;
	font-family: "lexia-hebrew", sans-serif;
	color: var(--theme-text);
	white-space: nowrap; /* מונע מהטקסט להישבר לשורות */
	line-height: 1;
}

/* הסיבובים - דואגים שהבסיס תמיד יפנה לתמונה */
.t3-anchor.top .t3-text { transform: none; }
.t3-anchor.bottom .t3-text { transform: rotate(180deg); }
.t3-anchor.right .t3-text { transform: rotate(90deg); }
.t3-anchor.left .t3-text { transform: rotate(-90deg); }

/* אזור כפתורי הפעולה בתחתית הלייאוט */
.t3-actions {
	width: 100%;
	display: flex;
	gap: 25px;
	padding-right: 50px;
	margin-top: auto;
	margin-bottom: 50px;
	direction: rtl; /* מחזיר ל-RTL כדי שהכפתורים יהיו מסודרים נכון פנימית */
	color: var(--theme-text);
}

.t3-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

.t3-actions a:hover {
	opacity: 0.5;
}


/* ==========================================
   Single Post: Layout Title Var 4 (Tiled Pattern)
   ========================================== */
.layout-title-var-4-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	direction: rtl;
	padding-right: 50px;
}

/* העוטף של אזור התמונות */
.t4-image-mask {
	width: 100%;
	height: 45vh; /* גובה התחלתי יפה שתופס כמעט חצי מסך */
	max-height: 500px;
	overflow: hidden;
	position: relative;
}

/* התמונה עצמה שמשוכפלת כמו אריחים */
.t4-tile-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
	
	/* יוצר Tile ברוחב 30% מהמסגרת - הגובה מסתדר אוטומטית לפי הפרופורציה! */
	background-size: 30% auto; 
	
	/* האנימציה - 120 שניות הלוך ושוב לתנועה סופר איטית ומרגיעה */
	animation: t4-camera-pan 120s linear infinite alternate;
}

/* תנועה של 45 מעלות אלכסונית לפינה השמאלית העליונה */
@keyframes t4-camera-pan {
	0% { background-position: 0px 0px; }
	100% { background-position: -2000px -2000px; }
}

/* הטקסט מתחת לתמונה */
.t4-text {
	font-size: 30px; /* גודל מדויק */
	font-weight: 400; /* משקל מדויק */
	line-height: 1.06; /* גובה שורה מדויק */
	color: var(--theme-text);
	text-align: center;
	margin-top: 30px; /* המרווח המדויק שביקשת מהתמונה */
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	font-family: "lexia-hebrew", sans-serif;
}

/* כפתורי הפעולה בתחתית */
.t4-actions {
	width: 100%;
	display: flex;
	gap: 25px;
	margin-top: 60px;
	color: var(--theme-text);
}

.t4-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

.t4-actions a:hover {
	opacity: 0.5;
}


/* ==========================================
   Single Post: Layout Title Var 5 (Text Above Image)
   ========================================== */
.layout-title-var-5-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(100vh - 80px); /* מותח על כל העמוד */
	direction: rtl; 
}

/* עיצוב הטקסט (כותרת מודגשת כמו ב-var 3) */
.t5-text {
	font-size: 30px;
	font-weight: 700;
	font-family: "lexia-hebrew", sans-serif;
	color: var(--theme-text);
	margin-bottom: 30px; /* מרווח זהה למרחק העוגן בוריאציה 3 */
	text-align: center;
	line-height: 1;
}

/* התמונה זהה לחלוטין ל-var 3 (שומרת על פרופורציות ומקסימום) */
.t5-image {
	position: relative;
	z-index: 2;
}

.t5-image img {
	display: block;
	max-height: 60vh;
	width: auto;
	max-width: 75vw; /* שומר שלא יחרוג במסכים קטנים */
	object-fit: contain;
}

/* כפתורי פעולה בתחתית למטה משמאל/ימין */
.t5-actions {
	width: 100%;
	display: flex;
	justify-content: flex-start; /* מצמיד לימין בזכות ה-RTL */
	gap: 25px;
	margin-top: auto;
	margin-bottom: 50px;
	color: var(--theme-text);
}

.t5-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

.t5-actions a:hover {
	opacity: 0.5;
}

/* ==========================================
   Single Post: Layout Title Var 6 (Typographic Scroll)
   ========================================== */

/* הבטחת מניעת חריגות ברמת העמוד, מבלי לשבור סטיקי! */
body.type-title.layout-var-6 {
	overflow-x: hidden;
}

body.type-title.layout-var-6 .post-content-container { max-width: 100%; }
body.type-title.layout-var-6 .post-inner { display: block; }
body.type-title.layout-var-6 .single-post-wrap {
	padding-left: 0;
	padding-top: 0; 
	overflow-x: clip;
}

.layout-title-var-6-wrap {
	position: relative;
	width: 100%;
	padding-top: 80px; /* קיזוז של הבר העליון */
	
	/* הפתרון למרווח הלבן! clip מסתיר גלישה אופקית אבל מאפשר למנגנון ה-sticky לרוץ רגיל */
}

/* הרקע הדביק שומר על גובה המסך בדיוק */
.t6-sticky-bg {
	position: sticky;
	top: 80px;
	height: calc(100vh - 80px);
	width: 100%;
	overflow: hidden;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; 
}

/* הטקסט עצמו מחושב לפי גובה המסך */
.t6-text-row {
	white-space: nowrap;
	
	/* נניח ויצרת 6 שורות ב-PHP, אנחנו מחלקים את המסך ל-7 כדי לתת שורת מרווח */
	--total-lines-space: 8; 
	
	/* מחשב את גובה השורה המדויק לפי גובה המסך הפנוי */
	line-height: calc((100vh - 80px) / var(--total-lines-space));
	
	/* מחשב את גודל הפונט בחזרה מתוך ה-line-height של ה-0.8 */
	font-size: calc(((100vh - 80px) / var(--total-lines-space)) / 0.8);
	
	font-weight: 300; 
	font-family: "lexia-hebrew", sans-serif;
	color: var(--theme-text);
	width: 100%;
	direction: rtl; 
}

.t6-row-inner {
	display: inline-block;
	padding-left: 50vw;  /* שולי ביטחון עצומים */
	padding-right: 50vw; 
	margin-left: -50vw; 
	margin-right: -50vw;
	will-change: transform;
	width: max-content;
	white-space: nowrap;
	/* הפתרון: דוחף את הקונטיינר חזק ימינה כדי לייצר זנב טקסט שממתין מחוץ למסך */
	margin-right: -100vw;
}

/* שכבת התוכן הנגללת מעל הטקסט */
.t6-scroll-layer {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	/* מושך את השכבה הזו למעלה כדי שתתחיל יחד עם הטקסט ולא תדחוף אותו למטה! */
	margin-top: calc(-100vh + 80px);
}

/* הספייסר ההתחלתי: משאיר מסך נקי לפני שהתמונה נכנסת למטה */
.t6-spacer {
	height: 100vh; 
	width: 100%;
	pointer-events: none;
}

.t6-image-wrapper {
	position: relative;
	z-index: 3;
}

.t6-image-wrapper img {
	display: block;
	max-height: 60vh;
	width: auto;
	max-width: 75vw;
	object-fit: contain;
}

/* הספייסר התחתון: שומר על המעטפת פתוחה והרקע מקובע בדיוק עד שהתמונה חולפת */
.t6-bottom-spacer {
	height: 100vh; 
	width: 100%;
	pointer-events: none;
}

/* כפתורי הפעולה - יצאו החוצה, יופיעו רגיל מלמטה יחד עם הפוטר */
.t6-actions {
	position: relative;
	width: 100%;
	display: flex;
	gap: 25px;
	color: var(--theme-text);
	z-index: 10;
}

.t6-actions a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

.t6-actions a:hover {
	opacity: 0.5;
}








/* ==========================================
   Comments Module
   ========================================== */

.postcard-comments-wrapper {
	width: 100%;
	max-width: 800px; /* קיבוע הרוחב המדויק ל-800 פיקסלים */
	margin: 78px auto 0 auto;
	color: inherit; /* יורש את צבע הטקסט מהפלטה */
	box-sizing: border-box;
}

/* --- תצורת הגלויה --- */
.postcard-form {
	display: flex;
	border: 1px solid currentColor;
	border-radius: 16px;
	padding: 40px;
	gap: 40px;
	transition: all 0.4s ease;
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.16);
}

.postcard-right {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.textarea-wrapper {
	position: relative;
	flex: 1;
	display: flex;
}

.postcard-right textarea {
	cursor: pointer;
	flex: 1;
	background: transparent;
	border: none;
	color: inherit;
	resize: none;
	font-size: 22px; 
	font-weight: 600;
	line-height: 1.39;
	outline: none;
	font-family: "lexia-hebrew", sans-serif;
	padding: 0; /* קריטי: מאפס כל ריווח פנימי כדי שהטקסט יתחיל בדיוק בקצה */
	margin: 0;
}

.postcard-right textarea::placeholder {
	color: currentColor;
	opacity: 0.7;
	font-size: 22px; /* פלייסהולדר של התגובה */
	font-weight: 300;
	line-height: 1.39;
}

/* הסמן המהבהב המזויף *//* הסמן המהבהב המזויף - עכשיו מעוצב כקו דק שתואם לסמן האמיתי של הדפדפן *//* הסמן המהבהב המזויף */
.fake-cursor {
	position: absolute;
	right: 0; /* יושב בדיוק על אותו קו ימני כמו הטקסטאריה */
	top: 4px; /* כיוונון גובה עדין */
	width: 2px; /* אני ממליץ להשאיר על 2 פיקסלים כדי שיהיה זהה בעוביו לסמן האמיתי של הדפדפן וכך לא תרגיש שהם מתחלפים */
	height: 25px; 
	background-color: currentColor;
	animation: blinkCursor 1s step-end infinite;
	pointer-events: none;
}

/* העלמת הסמן ברגע שהשדה בפוקוס או כשמתחילים להקליד */
.postcard-right textarea:focus + .fake-cursor,
.postcard-right textarea:not(:placeholder-shown) + .fake-cursor {
	display: none;
}

@keyframes blinkCursor {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.moderation-notice {
	font-size: 13px;
	opacity: 0.6;
	margin-top: 10px;
}

/* הקו המפריד */
.postcard-divider {
	width: 1px;
	background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%);
	background-position: right;
	background-size: 1px 8px;
	background-repeat: repeat-y;
	opacity: 1; /* אופסיטי מלא כפי שביקשת */
}

.postcard-left {
	flex: 0 0 310px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/* --- Floating Labels חכם ב-CSS --- */
.postcard-inputs {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.floating-group {
	position: relative;
	border-bottom: 1px solid currentColor;
	padding-top: 25px; /* מקום ללייבל כשהוא צף למעלה */
}

.floating-group input {
	cursor: pointer;
	width: 100%;
	background: transparent;
	border: none;
	color: inherit;
	outline: none;
	padding: 5px 0 10px 0; /* הוספתי פאדינג תחתון כדי להרחיק קצת את הטקסט מהקו התחתון */
	font-size: 18px; 
	font-weight: 600;
	font-family: inherit; /* משתמש בפונט אדפטר - בהנחה שזה הפונט הכללי של העמוד */
}

.floating-group label {
	cursor: pointer;
	position: absolute;
	right: 0;
	bottom: 15px; /* מוריד את הלייבל קצת למטה במצב ההתחלתי (היה 25px) */
	font-size: 22px; 
	font-family: "lexia-hebrew", sans-serif; /* שינוי הפונט ללקסיה */
	font-weight: 300;
	line-height: 1.39;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0.7;
}

/* מצב הלייבלים כשהם צפים למעלה */
.floating-group input:focus ~ label,
.floating-group input:not(:placeholder-shown) ~ label {
	bottom: 40px; /* מקטין את העלייה - במקום לעלות ל-0, הם עולים רק ל-5px */
	font-size: 14px; 
	opacity: 0.7; 
}

/* --- הבול והמצבים (ריק לעומת מלא) --- */
.stamp-btn {
	position: relative;
	background: transparent;
	border: none;
	cursor: pointer;
	width: 123.2px;
	height: 137px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: auto;
	color: inherit; 
}

.stamp-svg-wrapper {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
}

.stamp-shape {
	width: 100%;
	height: 100%;
	transition: opacity 0.4s ease;
}

.stamp-content {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px; /* מרווח בין המטוס לטקסט */
	transition: color 0.4s ease;
}

.plane-svg-wrapper {
	width: 46px; 
	display: flex;
	justify-content: center;
}

.stamp-plane {
	width: 100%;
	height: auto;
}

.stamp-text {
	font-size: 20px; /* תוקן ל-20px */
	font-weight: 700; /* תוקן למשקל 700 */
	line-height: 0.87; /* תוקן גובה שורה */
}

.stamp-bg-extras {
	position: absolute;
	z-index: 2;
	top: -45px;
	right: -74px;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	width: 227.5px; 
	height: 104.4px; 
}

.stamp-bg-extras img { 
	width: 100%;
	height: 100%;
	object-fit: contain; 
}

/* ------------------------------------- */
/* מצב "ריק" (לפני מילוי)                  */
/* ------------------------------------- */
.state-empty .stamp-shape { 
	opacity: 0.4; 
}

.state-empty .stamp-content { 
	color: var(--theme-bg, currentColor); /* תוקן לצבע הרקע דרך המשתנה הנכון */
}

/* ------------------------------------- */
/* מצב "מלא" (תוך כדי הקלדה)               */
/* ------------------------------------- */
.state-filled .stamp-shape { 
	opacity: 1; 
}

.state-filled .stamp-content { 
	color: #ffffff; 
}

.state-filled .stamp-bg-extras { 
	opacity: 1; 
}

/* --- מגירת התגובות --- */
.comments-drawer-container {
	margin-top: 20px;
	border: 1px solid currentColor;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.16);
}

.comments-toggle-btn {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	transition: all 0.3s ease;
}

.toggle-content {
	display: flex;
	align-items: center;
	gap: 6px; /* מרווח קל בין הטקסט למספר */
}

.comments-title {
	font-family: "lexia-hebrew", serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.39;
}

.comments-count {
	font-family: "lexia-hebrew", serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.39;
	position: relative;
	top: -10px; /* מושך את המספר מעט למעלה ביחס לטקסט */
}

.comments-drawer-content {
	max-height: 0;
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 0 40px;
}


.comments-drawer-container.is-open .comments-drawer-content {
	max-height: 2000px; 
	opacity: 1;
	padding: 0 40px 40px;
}

/* עיצוב התגובה הבודדת *//* ==========================================
   עיצוב התגובות המוצגות (מגירה פתוחה)
   ========================================== */

/* הרוחב המקסימלי, מירכוז התגובות, וקו מקווקוו *//* --- עיצוב התגובה הבודדת ברשימה --- */
.postcard-comment-item {
	padding: 40px 0;
	box-sizing: border-box;
	
	/* יצירת קו מפריד אופקי בסטייל של הדיווידר האנכי */
	background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
	background-position: bottom;
	background-size: 8px 1px; /* הקו הוא ברוחב 8 פיקסלים ובגובה פיקסל אחד */
	background-repeat: repeat-x; /* חזרה על ציר ה-X */
}

/* הסרת המרווח מעל התגובה הראשונה ברשימה */
.comments-list > .postcard-comment-item:first-of-type,
.comments-list > div:first-child .postcard-comment-item {
	padding-top: 0;
}

/* הסרת הקו המפריד מהתגובה האחרונה בהחלט */
.comments-list > .postcard-comment-item:last-of-type,
.comments-list > div:last-child .postcard-comment-item {
	background-image: none !important;
}

/* ==========================================
   ניהול מצב מגירה פתוחה (החץ)
   ========================================== */

/* מוודא שהכפתור נשאר גלוי גם כשהמגירה פתוחה (דורס הגדרות קודמות) */
.comments-drawer-container.is-open .comments-toggle-btn {
	display: flex !important; 
	padding-bottom: 0;
}

/* כשפותחים את המגירה - מעלימים רק את בלוק הטקסט והמספר */
.comments-drawer-container.is-open .toggle-content {
	display: none !important;
}

/* אנימציה וסיבוב של החץ כלפי מעלה */
.comments-drawer-container .chevron-icon {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.comments-drawer-container.is-open .chevron-icon {
	transform: rotate(180deg); /* הופך את החץ למעלה */
	margin-right: auto; /* דוחף את החץ שמאלה באופן אבסולוטי (מעולה ל-RTL) */
}
/* עיצוב הטקסט בתוך התגובה */
.comment-text {
	font-family: "lexia-hebrew", serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.39;
	margin-bottom: 10px;
	max-width: 557px;
}

.comment-text p::before { content: "״"; }
.comment-text p::after { content: "״"; }

/* עיצוב המטא (שם ומיקום) */
.comment-meta {
	font-family: "lexia-hebrew", serif;
	font-size: 18px;
	font-weight: 300;
	opacity: 0.8;
}

/* --- מצבי שגיאה (ולידציה) --- */

/* צביעת הפלייסהולדר והבורדר בשדות הקטנים (שמאל) */
.floating-group.has-error {
	border-bottom-color: #ff4d4d !important;
}

.floating-group.has-error label {
	color: #ff4d4d !important;
}

/* צביעת הפלייסהולדר ב-Textarea (ימין) */
.postcard-right textarea.has-error::placeholder {
	color: #ff4d4d !important;
}

/* אנימציית רעד קלה לשדה עם שגיאה */
.has-error {
	animation: shake 0.4s ease-in-out;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(5px); }
	75% { transform: translateX(-5px); }
}

/* --- הודעת הצלחה אחרי שליחה --- */
.postcard-success-message {
	text-align: center;
	padding: 60px 20px;
	border: 1px solid currentColor;
	border-radius: 16px;
	font-family: "lexia-hebrew", serif;
}

.postcard-success-message h3 {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 15px;
}

.postcard-success-message p {
	font-size: 18px;
	opacity: 0.8;
}

.postcard-form-container.state-empty .stamp-btn {
	pointer-events: none;
}


/* אזור קרדיטים בסיידבר (עיצוב ופיתוח) */
.site-credits {
	margin-top: 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px; /* המרווח בין המעצב למפתח */
}

.designer-credit {
	font-size: 10px;
	color: var(--theme-text, #000);
	opacity: 0.6;
	text-align: center;
	line-height: 1.1;
}

.dev-credit {
	display: flex;
	flex-direction: column; /* מסדר את האייקון מעל הטקסט */
	align-items: center;
	justify-content: center;
	gap: 0; /* מרווח עדין בין האייקון למילה oribsn */
	font-size: 10px;
	font-family: monospace;
	color: var(--theme-text, #000);
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.dev-credit:hover {
	opacity: 1;
}

.dev-credit svg {
	opacity: 0.8;
}

.author-name-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; transition: opacity 0.3s ease; }
.author-name-link:hover { opacity: 0.6; }

/* הכנה לאנימציה - הסתרה מוחלטת בטעינה למניעת הבהוב (FOUC) */
/* הוסרו הקלאסים של עמוד הבית כדי שיוצגו מיד ללא אנימציה */
.single-top-bar, .post-text-area, .about-bio-text, 
.post-image-area, .about-hero-images, 
.post-actions, .bio-actions {
	opacity: 0;
	will-change: transform, opacity;
}





/* ==========================================
   החלת 100VH גורף לכל הגלויות (מירכוז, דחיפת תגובות וקיבוע כפתורים)
   ========================================== */

/* 1. קיבוע העמוד ל-100VH, מירכוז התוכן ודחיפת התגובות מטה */
body.type-title .post-inner,
body.type-short .post-inner {
	height: calc(100vh - 80px) !important; /* תמיד הגודל יהיה 100VH */
	display: flex;
	align-items: center; /* ממרכז את כלל התוכן פנימה לתוך ה-View */
	position: relative; /* הופך את כל המסך לעוגן (Anchor) עבור כפתורי השיתוף */
	box-sizing: border-box;
	padding-bottom: 80px;
}

/* מוודא שהלייאאוטים הפנימיים נמתחים יפה בתוך ה-Flex */
body.type-title .post-inner > div,
body.type-short .post-inner > div,
body.type-medium .post-inner > div {
	width: 100%;
}


/* 2. ניתוק כפתורי השיתוף וקיבוע שלהם באותו מיקום בפינה למטה */
body.type-title .post-actions,
body.type-short .post-actions {
	position: absolute !important;
	bottom: 50px !important;
	right: 50px !important; /* מיושר לכותרת העליונה - אפשר לשנות ערך זה למה שמדויק לכם */
	left: auto !important;
	margin: 0 !important;
	z-index: 100;
	display: flex;
	gap: 20px;
}

/* 3. ביטול position מקומי לעטיפות פנימיות כדי שהכפתורים יברחו תמיד ל-100VH הראשי */
.layout-var-2-wrap, .layout-var-3-wrap, .layout-var-5-wrap,
.layout-short-var-2-wrap, .layout-short-var-3-wrap, .layout-short-var-4-wrap,
.layout-title-var-2-wrap, .layout-title-var-3-wrap, .layout-title-var-4-wrap, .layout-title-var-5-wrap, .layout-title-var-6-wrap {
	position: static !important;
}

/* ==========================================
   החרגות לייאאוטים ארוכים (טייטל 6 בלבד)
   ========================================== */

/* 1. ביטול 100VH לטייטל 6 כדי שהמעטפת תכיל את כל הגלילה */
body.type-title.layout-var-6 .post-inner { 
	height: auto !important; 
	display: block; 
}


/* 3. מוודא שאזור הפוטר תמיד "ידרוס" ויסתיר אלמנטים דביקים שעולים עליו */
.single-bottom-section, #comments {
	position: relative;
	z-index: 20;
	background-color: inherit;
}

/* ביטול גרירת רפאים (Ghost Drag) של תמונות בכל האתר */
img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

/* עיצוב לינקים בתוך טקסט הגלויות */
.post-inner a {
	color: inherit; /* שואב אוטומטית את הצבע הכהה/בהיר של הפלטה הנוכחית */
	transition: opacity 0.3s ease;
	position: relative;
	z-index: 10; /* מבטיח שאפשר ללחוץ עליהם גם כשיש אלמנטים צפים באזור */
}

.post-inner a:hover {
	opacity: 0.6;
}



/* ==========================================
   תיקוני חוויית גלילה: Layout 6 - טייטל (טקסטים זזים)
   ========================================== */

/* 1. פיתיון גלילה: הגלויה מבצבצת מלמטה במסך הראשון */
body.type-title.layout-var-6 .t6-spacer {
	/* במקום 100vh שדוחף את התמונה מסך שלם למטה, 
	   אנחנו נותנים 80vh כדי שהתמונה "תעלה" ותציץ מהתחתית */
	height: 80vh !important; 
}

/* 2. הקדמת התגובות: מתחילים לגלול לקומנטס לפני שהתמונה נעלמת */
body.type-title.layout-var-6 .t6-bottom-spacer {
	/* במקום רווח ענק שמאלץ גלילת-סרק, הקטנו משמעותית את הרווח מתחת לתמונה 
	   כדי שאזור הקומנטס והפוטר יעלו מיד בעקבותיה */
	height: 10vh !important; 
}

/* 3. ליטוש התמונה עצמה (שתשב יפה מעל הטקסט שזז) */
body.type-title.layout-var-6 .t6-image-wrapper {
	position: relative;
	z-index: 10; /* מבטיח שהתמונה תמיד תסתיר את הטקסט שמאחוריה כשהיא עולה */
	padding-bottom: 40px; /* מרווח נשימה טבעי לפני הקומנטס */
}

/* ==========================================
   תיקון שורט וריאציה 3 (מרווחים זהים, גובה תמונה ויישור אלכסוני)
   ========================================== */

/* 1. מרווחים שווים למעלה ולמטה במעטפת הראשית */
body.type-short.layout-var-3 .post-inner {
	align-items: stretch !important; 
	padding-top: 20px !important;    
	padding-bottom: 60px !important; 
}

/* 2. העברת הגובה המלא (100%) פנימה לתוך העטיפות כדי למנוע דליפת פלקסבוקס */
body.type-short.layout-var-3 .layout-short-var-3-wrap,
body.type-short.layout-var-3 .s3-content-inner {
	height: 100%;
	width: 100%;
	display: flex;
}

/* 3. הטקסט ננעל לתקרה (ללא פאדינג עודף שידחוף אותו למטה) */
body.type-short.layout-var-3 .s3-text-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important; /* הקסם שדוחף את הטקסט למעלה */
	padding-top: 0 !important; /* מאפס שאריות קודמות */
	height: 100%;
}

/* 4. התמונה ננעלת לרצפה ומקבלת מגבלת גובה חכמה */
body.type-short.layout-var-3 .s3-img-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-end !important; /* הקסם שדוחף את התמונה למטה */
	height: 100%;
}

/* 5. שומר שהתמונה לא תחרוג מגבולות המסך והמרווחים */
body.type-short.layout-var-3 .s3-img-col img {
	max-height: calc(100vh - 240px); 
	width: 100%;
	object-fit: cover; 
}

/* ==========================================
   מניעת הבהוב (FOUC) בלייאאוט טייטל 3 (תמונה ווילון וטקסטים שיוצאים מהמרכז)
   ========================================== */

/* 1. התמונה מתחילה כשהיא "חתוכה" לחלוטין (מוסתרת למטה) כבר בטעינת העמוד */
body.type-title.layout-var-3 .t3-image img {
	clip-path: inset(100% 0 0 0); 
	will-change: clip-path;
}

/* 2. הטקסטים מתחילים שקופים לחלוטין בטעינת העמוד */
body.type-title.layout-var-3 .t3-anchor {
	opacity: 0; 
	will-change: transform, opacity;
}

body.type-medium.layout-var-1 .post-actions {
	position: fixed;
	bottom: 50px;
	right: 50px;
}
body.type-medium.layout-var-1 .post-image-area img {
	object-position: right center;
}


/* ==========================================
   עמוד אודות - אזור צור קשר (בואו נדבר)
   ========================================== */
.about-contact-section {
	width: 100%;
	margin-top: 80px;
}

.contact-content-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px; /* מרווח בין הפרטים לסושיאל */
	margin-top: 60px;
	margin-bottom: 20px;
}

.contact-details {
	display: flex;
	flex-direction: column;
	gap: 15px;
	text-align: left;
}

.contact-item {
	font-family: "lexia-hebrew", serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--theme-text);
	text-decoration: none;
	transition: opacity 0.3s ease;
	line-height: 1.2;
}

.contact-item:hover {
	opacity: 0.6;
}

.contact-social {
	display: flex;
	gap: 15px;
	align-items: center;
}

/* העיגול החיצוני של הסושיאל *//* העיגול החיצוני של הסושיאל - עכשיו משמש גם כרקע לאייקון */
.social-icon {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transition: transform 0.3s ease, opacity 0.3s ease;
	text-decoration: none;
	
	/* הגדרות תמונת הרקע המשותפות לכל האייקונים */
	background-size: 44px; /* גודל האייקון בתוך העיגול */
	background-position: center;
	background-repeat: no-repeat;
}

.social-icon:hover {
	transform: scale(1.08);
	opacity: 0.85;
}

/* שיוך נתיבי ה-SVG ישירות כתמונת רקע לכל קלאס */
.social-icon.icon-ig {
	background-image: url('assets/img/svg/instagram.svg');
}

.social-icon.icon-fb {
	background-image: url('assets/img/svg/facebook.svg');
}

.social-icon.icon-yt {
	background-image: url('assets/img/svg/youtube.svg');
}



/* ==========================================
   טוסט העתקת קישור (Share Toast)
   ========================================== */
.share-toast {
	position: fixed; /* צף חופשי כדי לא לרשת שקיפות מאף אלמנט */
	z-index: 100000;
	
	/* היפוך צבעים דינמי בהתאם לפלטה */
	background-color: var(--theme-text);
	color: var(--theme-bg);
	
	padding: 10px 18px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "adapter-hebrew-text", sans-serif;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	
	/* הגדרות כניסה / יציאה */
	opacity: 0;
	pointer-events: none;
	/* ממורכז אופקית, ומוזז קצת למטה לקראת האנימציה */
	transform: translate(-50%, calc(-100% + 10px));
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-toast.show {
	opacity: 1;
	/* עולה למקום הסופי שלו בדיוק מעל הכפתור */
	transform: translate(-50%, -100%);
}

.toast-link-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor; 
	-webkit-mask-image: url('assets/img/svg/link.svg');
	mask-image: url('assets/img/svg/link.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}


/* ==========================================
   פופאפ תמונה (לייטבוקס - צפו בגלויה)
   ========================================== */
.image-lightbox {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1000000; /* מעל הכל, כולל התפריט ותמונות ה-sticky */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.image-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* רקע חצי שקוף בצבע הכהה של הפלטה האקטיבית */
.lightbox-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: var(--theme-text);
	opacity: 0.5; /* 50% שקיפות כמו בעיצוב */
	z-index: 1;
	cursor: pointer; /* מרמז לגולש שאפשר ללחוץ כדי לסגור */
}

/* עוטף התמונה - מתכווץ בדיוק למידות התמונה (אורך או רוחב) */
.lightbox-content {
	position: relative;
	z-index: 2;
	display: inline-block;
	/* אנימציית "זום-אין" קטנה בכניסה */
	transform: scale(0.95);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-lightbox.is-open .lightbox-content {
	transform: scale(1);
}

/* התמונה עצמה - שומרת על פרופורציות בלי להיחתך *//* התמונה עצמה - שומרת על פרופורציות בלי להיחתך, והשארנו מקום לכפתור למעלה */
.lightbox-content img {
	display: block;
	max-width: 90vw;
	max-height: 85vh; /* הוקטן מ-90 ל-85 כדי להשאיר אוויר לכפתור הסגירה */
	width: auto;
	height: auto;
	object-fit: contain;
}

/* כפתור ה-X (לבן ומעוגל) */
.lightbox-close {
	position: absolute;
	bottom: calc(100% + 12px); /* זורק את הכפתור אל מחוץ לתמונה, 12 פיקסלים מעליה */
	right: 0; /* מיישר את הכפתור בדיוק לקו הימני של התמונה */
	background-color: #ffffff;
	color: #000000;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	transition: transform 0.2s;
	z-index: 3;
	padding: 0;
}

.lightbox-close:hover {
	transform: scale(1.1);
}

/* מניעת גלילה של העמוד עצמו כשהפופאפ פתוח */
body.lightbox-active {
	overflow: hidden !important;
}


/* ==========================================
   פוטר קרדיטים גלובלי - מותאם ללייאאוט הפוסט
   ========================================== */
.site-footer {
	width: 100%;
	min-height: auto; /* בניגוד לפוסט, הפוטר לא צריך 100vh */
	display: flex;
	flex-direction: column;
	
	/* פדינג זהה לחלוטין ל-single-post-wrap */
	padding-right: 110px;
	padding-left: 50px;
	padding-top: 0;
	padding-bottom: 40px;
	
	color: var(--theme-text);
	font-size: 12px;
	margin-top: auto;
	position: relative;
	z-index: 20;
}

/* הקו המפריד מעל הפוטר */
.site-footer::before {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	opacity: 0.4;
	margin-bottom: 25px;
}

/* מבטיח שהתוכן הפנימי של הפוטר יתיישר למקסימום של הפוסט (1440px) */
.footer-inner {
	width: 100%;
	max-width: 1440px; /* תואם ל-.post-content-container */
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	direction: rtl;
}

.footer-right {
	font-weight: 700;
}

.footer-left {
	direction: ltr;
	font-weight: 500;
}

.footer-left a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.3s ease;
}

.footer-left a:hover {
	opacity: 0.5;
}


/* ==========================================
   מצב פילטר פעיל בעמוד הבית (Native Scroll + GSAP Animation)
   ========================================== */
/* שחרור המסך והחזרת הגלילה הטבעית של הדפדפן */
html.is-filtered-view,
body.is-filtered-view {
	overflow-y: auto !important;
	height: auto !important;
	overscroll-behavior: auto !important;
}

body.is-filtered-view .home_wrap {
	position: relative !important;
	height: auto !important;
	min-height: 100vh;
	touch-action: auto !important; /* משחרר את חסימת הגלילה במסכי מגע! */
	overflow: visible !important;
}

body.is-filtered-view .infinite-canvas {
	position: relative !important; /* קריטי כדי שהקנבס ידחוף את גובה העמוד למטה */
	width: 100%;
	cursor: auto !important;
}

/* החזרת הפרופורציה הטבעית */
body.is-filtered-view .canvas-item .item-aspect-box {
	aspect-ratio: auto !important;
	height: auto !important;
	transition: border-radius 0.5s ease;
}

body.is-filtered-view .canvas-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================
   כפתור טוגל סאונד בסיידבר
   ========================================== */
.sound-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-bottom: 18px; /* מרווח מעל הקופירייט */
	margin-left: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
	color: var(--theme-text);
	outline: none;
}

.sound-toggle:hover {
	opacity: 0.6;
}

.sound-icon {
	display: block;
	width: 22px; /* גודל האייקון */
	height: 22px;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	
	/* מצב ברירת מחדל - On */
	-webkit-mask-image: url('assets/img/svg/sound-off.svg');
	mask-image: url('assets/img/svg/sound-off.svg');
}

/* מצב כבוי (Muted) */
.sound-toggle.is-muted .sound-icon {
	-webkit-mask-image: url('assets/img/svg/sound-on.svg');
	mask-image: url('assets/img/svg/sound-on.svg');
}

/* ==========================================
   הצללות אליפטיות בעמוד הבית
   ========================================== */
.home-shadow {
	position: fixed;
	pointer-events: none; /* קריטי: מבטיח שהעכבר "עובר דרכן" ולא מפריע לגרירת הקנבס */
	z-index: 1; /* יושב מתחת לקנבס (5) ולטקסט (50) אבל מעל רקע העמוד */
}

/* הצללה שמאלית עליונה *//* הצללה שמאלית עליונה *//* הצללה שמאלית עליונה */
.shadow-left {
	width: 1024.489px;
	height: 1748.834px;
	transform: rotate(12.585deg);
	border-radius: 50%; 
	background: rgba(0, 0, 0, 0.30);
	filter: blur(108px);
	
	/* החזרנו פנימה - עכשיו זה יישב טוב יותר בפינה */
	top: -945.49px;
	left: -769.42px;
}

/* הצללה ימנית עליונה */
.shadow-right {
	width: 658px;
	height: 1396px;
	transform: rotate(-35.775deg);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.20);
	filter: blur(108px);
	
	top: -780.1px;
	right: -340px;	
}



/* ==========================================
   פילטרים עליונים - עמוד הבית (שמאל למעלה)
   ========================================== */
.top-left-filters {
	position: fixed;
	top: 40px; /* התאמה אישית של מרחק מהלמעלה */
	left: 50px; /* התאמה אישית של מרחק משמאל */
	z-index: 100;
	display: flex;
	gap: 10px;
	direction: rtl;
}

.tl-filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 15px;
	background: rgba(255, 255, 255, 0.4); /* רקע שקוף כברירת מחדל */
	border-radius: 10px;
	color: var(--theme-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* --- מצב הובר כללי לכל הכפתורים --- */
.tl-filter:hover {
	background: rgba(255, 255, 255, 0.8);
}

/* --- הובר ורוד ספציפי לכפתור "הכל" --- *//* ==========================================
   מצבי הובר ואקטיב לפילטרים
   ========================================== */

/* --- הובר ורוד לכפתור "הכל" --- */
.tl-filter[data-filter="all"]:hover {
	background-color: var(--pink-light) !important;
}

/* --- "הכל" במצב פעיל - נשאר שקוף --- */
.tl-filter[data-filter="all"].active {
	background-color: transparent !important;
	/* אם תרצה שהוא יהיה מסומן איכשהו כשהוא פעיל, אפשר להוריד את ההערה מהשורה הבאה: */
	/* border: 1px solid var(--theme-text); */
}

/* --- סיפורים קצרים (צהוב) - הובר ואקטיב --- */
.tl-filter[data-filter="story"]:hover,
.tl-filter[data-filter="story"].active {
	background-color: var(--yellow-light) !important;
}

/* --- גלויות (ירוק) - הובר ואקטיב --- */
.tl-filter[data-filter="postcard"]:hover,
.tl-filter[data-filter="postcard"].active {
	background-color: var(--green-light) !important;
}


/* ==========================================
   סמן עכבר מותאם אישית (הובר על כרטיסיות)
   ========================================== */
.custom-hover-cursor {
	position: fixed;
	top: 0; left: 0;
	width: 48px; height: 48px;
	background-color: var(--azure-light); /* הסגול/תכלת מהעיצוב */
	border-radius: 50%;
	pointer-events: none;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	
	/* הקסם שמונע מהחץ לצאת מהעיגול ומחליף את הפייד */
	overflow: hidden; 
	
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
}

.custom-hover-cursor.is-visible {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.cursor-arrow {
	width: 19px; height: 19px;
	background-color: #111; /* צבע החץ */
	-webkit-mask: url('assets/img/svg/arrow-cursor.svg') center/contain no-repeat;
	mask: url('assets/img/svg/arrow-cursor.svg') center/contain no-repeat;
	
	/* אנימציה מעודכנת ל-2 שניות עם זמני המתנה */
	animation: arrowDiagonalLoop 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes arrowDiagonalLoop {
	0% { 
		transform: translate(0, 0); 
	}
	/* המתנה קצרה במרכז (50% מהזמן החץ עומד) */
	50% { 
		transform: translate(0, 0); 
	}
	/* יציאה מהירה למעלה ושמאלה */
	65% { 
		transform: translate(-50px, -50px); 
	}
	/* "שיגור" מיידי לצד השני (בלתי נראה בגלל ה-overflow) */
	65.01% { 
		transform: translate(50px, 50px); 
	}
	/* כניסה חזרה למרכז מימין למטה */
	80% { 
		transform: translate(0, 0); 
	}
	/* המתנה נוספת במרכז עד סוף הלופ */
	100% { 
		transform: translate(0, 0); 
	}
}

/* הסתרת סמן העכבר המקורי כשהסמן שלנו פעיל */
body.hide-native-cursor .canvas-item,
body.hide-native-cursor .canvas-item a {
	cursor: none !important;
}

/* ==========================================
   טיקר משנה-צורה (Morphing Ticker) משמאל למטה
   ========================================== */
.bottom-left-action {
	position: fixed;
	bottom: 40px; /* זהה למרחק העליון של הפילטרים */
	left: 50px;   /* זהה למרחק השמאלי של הפילטרים */
	z-index: 150;
	height: 40px;
}

/* המצב ההתחלתי (נראה כמו כפתור פלוס אפור) *//* המצב ההתחלתי (הכפתור הסגור) */
.morphing-ticker {
	position: relative;
	height: 40px;
	width: 40px;
	background: #F1F1F1;
	border-radius: 10px; /* עודכן מ-12px ל-10px לפי הדרישה */
	display: flex;
	align-items: center;
	direction: rtl; 
	overflow: hidden;
	box-sizing: border-box;
	transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
}

/* המצב הפתוח (בהובר או בלחיצה - הופך לירוק ונמתח) *//* המצב הפתוח (בהובר או בלחיצה - השקיפות והטשטוש נכנסים לפעולה) */
.morphing-ticker:hover,
.morphing-ticker.is-pinned {
	width: calc(100vw - 132px); 
	
	/* הגדרות השקיפות והטשטוש החדשות */
	background: rgba(143, 202, 167, 0.80); 
	backdrop-filter: blur(3.15px);
	-webkit-backdrop-filter: blur(3.15px); /* תמיכה לספארי */
	
	border-radius: 10px;
	padding-left: 60px; 
}
.morphing-ticker:hover:before, .morphing-ticker.is-pinned:before {
	content: "";
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	left: -1px;
	z-index: 2;
	background: rgba(143, 202, 167, 1); 
}

/* האייקון הראשי (פלוס שהופך ל-X) */
.ticker-icon-btn {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 10;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	/* אנימציה לסיבוב ולצבע האייקון */
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

/* סיבוב האייקון ל-X במצב פתוח (45 מעלות) */
.morphing-ticker:hover .ticker-icon-btn,
.morphing-ticker.is-pinned .ticker-icon-btn {
	transform: rotate(45deg);
	color: #1C3D29; /* צבע כהה יותר לאייקון כשהוא על רקע ירוק */
}

/* מסילת הטקסט האנימטיבית - מוסתרת בהתחלה */
.green-ticker-track {
	display: flex;
	width: max-content;
	animation: ticker-slide-right 30s linear infinite;
	padding-right: 0; 
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* הצגת הטקסט במצב פתוח */
.morphing-ticker:hover .green-ticker-track,
.morphing-ticker.is-pinned .green-ticker-track {
	opacity: 1;
	transition-delay: 0.2s; /* מחכה קצת שהריבוע יתחיל להימתח לפני שהטקסט מופיע */
}

@keyframes ticker-slide-right {
	0%   { transform: translateX(0); }
	100% { transform: translateX(50%); } 
}

/* עיצוב הטקסט והלינק בפנים (לקסיה 24px) */
.morphing-ticker .ticker-content { display: flex; white-space: nowrap; }

.morphing-ticker .t-item {
	color: #1C3D29;
	font-family: "lexia-hebrew", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 96%;
}

.morphing-ticker .t-item a {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity 0.3s ease;
}
.morphing-ticker .t-item a:hover { opacity: 0.6; }



/* ==========================================
   סטריפ קרדיטים צף (עמוד הבית - ימין למטה)
   ========================================== */
.copyright-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 16px; /* המרווח של ה-© מהסאונד עובר לפה */
}

.header-bottom .copyright {
	margin-top: 0 !important; /* איפוס מרג'ין ישן */
	cursor: pointer;
	position: relative;
	z-index: 10;
	transition: opacity 0.3s ease;
}

.header-bottom .copyright:hover {
	opacity: 0.6;
}

/* המצב הסגור של הסטריפ *//* הסטריפ הצהוב - המצב הסגור */
.home-credits-strip { 
	position: absolute; 
	right: 60px; /* יוצא שמאלה מהסיידבר */
	top: 50%; 
	transform: translateY(-50%); 
	
	/* העיצוב שביקשת: גובה, רדיוס, רקע צהוב חצי-שקוף וטשטוש */
	height: 40px; 
	border-radius: 10px; 
	background: rgba(255, 218, 138, 0.85); 
	backdrop-filter: blur(3.15px); 
	-webkit-backdrop-filter: blur(3.15px); 
	
	display: flex; 
	align-items: center; 
	overflow: hidden; 
	max-width: 0; 
	opacity: 0; 
	white-space: nowrap; 
	pointer-events: none; 
	transition: max-width 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, padding 0.6s ease; 
	direction: rtl; 
	z-index: 1000; 
}

/* הסטריפ - המצב הפתוח */
.home-credits-strip.is-active, 
.home-credits-strip.is-pinned { 
	max-width: 800px; 
	opacity: 1; 
	padding: 0 20px; 
	pointer-events: auto; 
}

/* עיצוב התוכן שבתוך הסטריפ */
.credits-content { 
	font-family: "adapter-hebrew-text", sans-serif; 
	font-size: 14px; 
	color: #111; 
	display: flex; 
	align-items: center; 
	gap: 5px; 
}

/* הטקסט של יפתח אלוני ב-Bold 700 */
.credits-content strong { 
	font-weight: 700; 
}

/* הלינקים */
.credits-content a { 
	color: inherit; 
	text-decoration: underline; 
	text-underline-offset: 3px; 
	transition: opacity 0.3s; 
	font-weight: 400; 
	margin-left: 5px;
}

.credits-content a:hover { 
	opacity: 0.5; 
}


.en-credits { 
	display: inline-flex; 
	align-items: center; 
}

.credits-content .separator { 
	margin: 0 6px; /* מרווח שווה משני צידי הקו המפריד */
	font-weight: 400;
}



/* ==========================================
   אפקט הובר לכרטיסיות: טקסט עליון וטיקר תחתון
   ========================================== */

/* שחרור החיתוך מקופסת התלת-ממד כדי שהטקסטים יוכלו לצאת החוצה */
.canvas-item .item-aspect-box {
	overflow: visible !important;
}

/* --- טקסט עליון (קטגוריה) --- */
.card-hover-label-top {
	position: absolute;
	bottom: calc(100% + 15px); /* ממוקם 15 פיקסלים מעל התמונה */
	right: 0; /* נצמד לימין */
	width: 100%; /* רוחב מדויק כמו התמונה */
	color: #000;
	text-align: right; /* יישור טקסט לימין */
	direction: rtl;
	font-family: "lexia-hebrew", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 106%;
	
	/* מצב התחלתי: שקוף ונמצא למטה */
	opacity: 0;
	transform: translateY(15px);
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
	z-index: 10;
}

/* --- טיקר תחתון (תוכן הפוסט) --- */
.card-hover-ticker-bottom {
	position: absolute;
	top: calc(100% + 15px); /* ממוקם 15 פיקסלים מתחת לתמונה */
	right: 0; /* נצמד לימין */
	width: 100%; /* מוגבל בדיוק לרוחב התמונה כפי שביקשת */
	color: #000;
	text-align: right; /* יישור לימין */
	direction: rtl;
	font-family: "lexia-hebrew", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 106%;
	
	overflow: hidden; /* חותך את הטקסט שרץ מחוץ לגבולות הריבוע */
	
	/* מצב התחלתי: שקוף ונמצא למעלה */
	opacity: 0;
	transform: translateY(-15px);
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
	z-index: 10;
}

/* --- הפעלת האנימציה בהובר --- */
.canvas-item:hover .card-hover-label-top,
.canvas-item:hover .card-hover-ticker-bottom {
	opacity: 1;
	transform: translateY(0);
}

/* --- מסילת הטיקר והאנימציה שלו --- */
/* --- מסילת הטיקר והאנימציה שלו --- */
.card-ticker-track {
	display: flex;
	width: max-content;
	direction: rtl; 
	/* הסרנו את ה-10s הקבוע. עכשיו הוא נשען על הזמן המדויק מה-PHP */
	animation: card-ticker-scroll linear infinite; 
}

.card-hover-ticker-bottom span {
	white-space: nowrap;
}

@keyframes card-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(50%); } 
}



/* ==========================================
   כפתור "הבא" צף (מבצבץ משמאל) - תיקון כיוון וראות
   ========================================== */
.next-post-peek {
	position: absolute;
	left: 0;
	top: 50vh;
	z-index: 10000;
	display: flex;
	flex-direction: row;
	direction: ltr; /* תמונה בשמאל, טקסט בימין */
	align-items: center;
	gap: 5px;
	text-decoration: none;
	
	/* מצב סגור: הגדלנו ל-75px כדי שחלק מהתמונה יציץ בבירור */
	transform: translate(calc(-100% + 55px), -50%);
	transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* פתיחה מלאה בהובר */
.next-post-peek:hover {
	transform: translate(0, -50%); 
}

.peek-img-wrap {
	width: 140px; 
	height: 100px;
	overflow: hidden;
	flex-shrink: 0;
	/* הסרנו פינות מעוגלות כפי שביקשת */
}

.peek-img-wrap img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important; 
	filter: grayscale(100%);
	transition: filter 0.5s ease;
}

.next-post-peek:hover .peek-img-wrap img {
	filter: grayscale(0%);
}

/* עיצוב הטקסט המעודכן */
.peek-text {
	color: var(--theme-text); /* צבע הטקסט של הפלטה הנוכחית */
	text-align: right;
	font-family: "adapter-hebrew-text", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 139%;
	
	/* סיבוב כלפי מעלה: writing-mode ללא rotate(180) יפנה את האותיות למעלה */
	writing-mode: vertical-rl;
	transform: none; /* ביטול הסיבוב הקודם */
	white-space: nowrap;
}

/* ==========================================
   תיקון סגירת הטיקר בכוח (דסקטופ ומובייל)
   ========================================== */
.morphing-ticker.force-close {
	width: 40px !important;
	padding-left: 0 !important;
	background: #F1F1F1 !important;
}

.morphing-ticker.force-close .ticker-icon-btn {
	transform: rotate(0deg) !important;
	color: #000 !important;
}

.morphing-ticker.force-close .green-ticker-track {
	opacity: 0 !important;
}

/* ==========================================
   תיקון רקע פוטר לעמוד אודות (החלה גלובלית על ה-Body)
   ========================================== */
body.page-template-about {
	--theme-bg: var(--green-light);
	--theme-text: var(--green-dark);
	background-color: var(--theme-bg);
	color: var(--theme-text);
}




/* ==========================================
   מצב פילטר פעיל בעמוד הבית (Native Scroll + GSAP Animation)
   ========================================== */
/* שחרור המסך והחזרת הגלילה הטבעית של הדפדפן */
html.is-filtered-view,
body.is-filtered-view {
	overflow-y: auto !important;
	overflow-x: hidden !important; /* <--- הוספנו את חסימת ה-X פה */
	height: auto !important;
	overscroll-behavior: auto !important;
}

body.is-filtered-view .home_wrap {
	position: relative !important;
	height: auto !important;
	min-height: 100vh;
	touch-action: auto !important; /* משחרר את חסימת הגלילה במסכי מגע! */
	overflow-x: hidden !important; /* <--- וכאן ליתר ביטחון על העוטף המרכזי */
	overflow-y: visible !important;
}

body.is-filtered-view .infinite-canvas {
	position: relative !important; /* קריטי כדי שהקנבס ידחוף את גובה העמוד למטה */
	width: 100%;
	cursor: auto !important;
}

/* החזרת הפרופורציה הטבעית */
body.is-filtered-view .canvas-item .item-aspect-box {
	aspect-ratio: auto !important;
	height: auto !important;
	transition: border-radius 0.5s ease;
}

body.is-filtered-view .canvas-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================
   אנימציית קרוסהייר לעמוד הבית (דסקטופ בלבד)
   ========================================== */
@media (min-width: 769px) {
	/* העלמת הסמן (בלי ה-:not שהקפיץ את המשקל) */
	.infinite-canvas {
		cursor: none !important;
	}

	#cursorCanvas {
		position: fixed;
		top: 0; 
		left: 0;
		width: 100vw; 
		height: 100vh;
		pointer-events: none; 
		z-index: 9999;
	}
}

/* ביטול מוחלט במובייל */
@media (max-width: 768px) {
	#cursorCanvas {
		display: none !important;
	}
}





.no_m {display: block !important;}
.m_only {display: none !important;}
/* התאמה למסכים עם גובה נמוך (לפטופים) */
@media only screen and (max-height: 750px) {
	
	.header-nav li.mitem a {
		padding: 15px 0; /* צמצום משמעותי של המרווח בין הלינקים */
		font-size: 14px; /* הקטנה קלה של הפונט במידת הצורך */
	}
	
	.header-logo a {
		padding: 0 10px; /* הקטנת הלוגו */
	}
	
	.header-bottom .copyright {
		margin-top: 8px; /* צמצום מרווח תחתון */
	}
}
@media only screen and (min-width: 1700px) { html { font-size: 21.25px; } }
@media only screen and (min-width: 2560px) { html { font-size: 32px; } }
@media only screen and (min-width: 5120px) { html { font-size: 64px; } }
@media only screen and (max-width: 1561px) and (max-height: 768px){}
@media only screen and (max-width: 1561px) {}
@media only screen and (max-width: 1141px) {}
@media only screen and (max-width: 1025px) {}
@media only screen and (max-width: 769px) { .no_m {display: none !important;} .m_only {display: block !important;} }
@media only screen and (max-width: 577px) {}
@media only screen and (max-width: 376px) {}
@media only screen and (max-width: 321px) {}
@media print{}

/* ==========================================
   הגדרות מובייל גלובליות (עד 768px)
   ========================================== */
@media only screen and (max-width: 768px) {
	.site-header.no_m {display: none !important;}
	/* 1. הסתרת תפריט הצד של הדסקטופ */
	.site-header {
		display: none !important;
	}
/* 2. הבר העליון (Header) */
	.mobile-top-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		z-index: 10000;
		direction: rtl; /* מסדר: המבורגר ימין, לוגו אמצע, סאונד שמאל */
		
		/* יונק את הצבע הכהה של הפלטה עבור הבורדר התחתון */
		border-bottom: 1px solid var(--theme-text, #000000);
		
		/* העיצוב שביקשת */
		background: rgba(255, 255, 255, 0.60);
		backdrop-filter: blur(30px);
		-webkit-backdrop-filter: blur(30px);
	}
	
	/* מיקום הלוגו במרכז המדויק וצביעתו */
	.mobile-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	/* הלוגו במובייל שואב את הצבע הדינמי */
	.mobile-logo .site-title-link {
		font-family: "lexia-hebrew", sans-serif;
		font-size: 24px;
		font-weight: 500;
		color: var(--theme-text, #000) !important;
	}
	
	/* כפתור הסאונד במובייל - צביעה דינמית */
	.mobile-top-bar .sound-toggle {
		margin: 0; 
		color: var(--theme-text, #000) !important;
	}
	
	/* 3. כפתור ההמבורגר (פיקסלים מדויקים) */
	.bt_menu {
		display: block;
		position: relative;
		width: 32.75px; 
		height: 27.439px;
		z-index: 10001; 
		transition: all .3s ease-in-out;
		cursor: pointer;
	}
	
	.bt_menu a { 
		display: block; 
		width: 100%; 
		height: 100%; 
	}
	
	/* פסי ההמבורגר - יונקים צבע מהפלטה */
	.bt_menu span {
		position: absolute; 
		display: block; 
		background-color: var(--theme-text, #000); 
		width: 100%; 
		height: 1.5px; /* עובי הפסים */
		border-radius: 0.75px; 
		left: 0; 
		transition: background-color 0.5s linear, top .2s .25s, opacity .2s .25s, transform .2s 0s;
	}
	
	/* חלוקה שווה של 27.439 פיקסלים */
	.bt_menu span:first-child { top: 0; }
	.bt_menu span:nth-child(2) { top: 12.7px; } 
	.bt_menu span:last-child { top: 25.4px; } 
	
	/* מצב פתוח (X) והקפאת גלילה */
	body.mopen { overflow: hidden; }
	body.mopen .bt_menu span:first-child { transform: rotate(45deg); top: 12.7px; }
	body.mopen .bt_menu span:last-child { transform: rotate(-45deg); top: 12.7px; }
	body.mopen .bt_menu span:nth-child(2) { opacity: 0; }
	body.mopen .bt_menu span {
		/* שומר על הצבע הדינמי גם כשההמבורגר פתוח */
		background-color: var(--theme-text, #000) !important; 
		transition: background .2s, top .2s, opacity .2s, transform .2s .25s;
	}
	
	/* 4. האוברליי (הרקע המטושטש) */
	.mobile-menu-overlay {
		position: fixed;
		top: 0; left: 0; 
		width: 100%; height: 100vh;
		z-index: 9998;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
		
		/* העיצוב שביקשת */
		background: rgba(217, 217, 217, 0.20);
		backdrop-filter: blur(15.85px);
		-webkit-backdrop-filter: blur(15.85px);
	}
	
	body.mopen .mobile-menu-overlay {
		opacity: 1;
		pointer-events: auto;
	}
	
	/* 5. קופסת הדרופדאון */
	.mobile-dropdown-menu {
		position: fixed;
		top: 85px; /* מתחת להדר */
		right: 20px;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 40px;
		
		/* העיצוב שביקשת */
		width: 189.85px;
		height: 196.62px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.60);
		box-shadow: 30px 40px 57.5px 0 rgba(0, 0, 0, 0.24);
		backdrop-filter: blur(30px);
		-webkit-backdrop-filter: blur(30px);
		
		/* מצב סגור */
		opacity: 0;
		pointer-events: none;
		transform: translateY(-10px);
		transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	}
	
	body.mopen .mobile-dropdown-menu {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	
	/* עיצוב הלינקים בפנים - צבועים גם הם דינמית */
	.mobile-dropdown-menu ul {
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: right;
	}
	.mobile-dropdown-menu li { margin: 20px 0; }
	.mobile-dropdown-menu a {
		font-family: "adapter-hebrew-text", sans-serif;
		font-size: 22px;
		font-weight: 500;
		color: var(--theme-text, #000); 
		text-decoration: none;
	}
	
	.site-title-link {font-size: 24px; font-weight: 500;}
	
	
	
	/* --- 6. פילטרים בעמוד הבית (מובייל) --- */
	.top-left-filters {
		/* ממקם את הפילטרים למטה, בקו אחד עם הטיקר */
		top: auto;
		bottom: 80px; /* מרווח מלמטה (מתחשב בקרדיטים) */
		left: 68px;
		width: calc(100% - 80px); /* משאיר מקום לטיקר בצד שמאל */
		justify-content: flex-end; /* מצמיד את הפילטרים לימין */
		flex-wrap: wrap; /* מאפשר שבירת שורות אם המסך ממש צר */
		gap: 8px;
	}
	
	.top-left-filters .tl-filter {
		/* העיצוב מהתמונה: רקע לבן חצי-שקוף, פינות מעוגלות וטשטוש */
		background: rgba(255, 255, 255, 0.60);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border-radius: 10px;
		padding: 10px 15px; /* קצת יותר בשרני במובייל */
		font-family: "adapter-hebrew-text", sans-serif;
		font-size: 16px; /* גודל פונט מהעיצוב */
		font-weight: 500;
		color: #000;
		height: 40px; /* תואם לגובה הטיקר */
		box-sizing: border-box;
	}
	
	/* מבטל את צבעי ההובר המיוחדים של הדסקטופ במובייל וקובע צבע אחיד לפעיל */
	.top-left-filters .tl-filter.active {
		background: rgba(255, 255, 255, 0.90) !important; /* קצת יותר אטום לפילטר הפעיל */
	}
	
	/* --- 7. טיקר תחתון בעמוד הבית (מובייל) --- */
	.bottom-left-action {
		/* ממקם את הטיקר למטה משמאל, מיושר עם הפילטרים */
		bottom: 80px;
		left: 20px; /* צמוד לשמאל במובייל */
	}
	
	/* התאמת גודל הטיקר הסגור למובייל */
	.morphing-ticker {
		background: rgba(255, 255, 255, 0.60); /* אותו רקע כמו הפילטרים */
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
	}
	
	/* התאמת רוחב הטיקר כשהוא פתוח במובייל */
	.morphing-ticker:hover,
	.morphing-ticker.is-pinned {
		width: calc(100vw - 40px); /* נפתח על כמעט כל רוחב המסך במובייל */
	}
	
	/* --- 8. אזור הקרדיטים התחתון (מובייל) --- */
	/* כדי שלא יתנגש עם הפילטרים */
	.header-bottom .copyright-wrapper {
		position: fixed;
		bottom: 20px;
		width: 100%;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0;
		z-index: 150;
	}
	
	.header-bottom .copyright {
		/* הסתרת סמל ה-C העגול במובייל, נציג רק את הטקסט */
		display: none; 
	}
	
	/* עיצוב הסטריפ של הקרדיטים במובייל (מוצג תמיד כטקסט רגיל, לא נפתח/נסגר) */
	.home-credits-strip {
		position: static;
		transform: none;
		max-width: 100%;
		opacity: 1;
		background: transparent; /* ללא רקע במובייל */
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		height: auto;
		padding: 0;
		text-align: center;
		white-space: normal; /* מאפשר שבירת שורות */
		pointer-events: auto;
	}
	
	.credits-content {
		flex-direction: column; /* מסדר את הקרדיטים בטור */
		gap: 2px;
		font-size: 12px; /* פונט קטן לפי העיצוב */
	}
	
	.credits-content .separator {
		display: none; /* מסתיר את הקו המפריד (|) בין השורות */
	}
	
	/* צבעים אקטיביים מותאמים לפילטרים במובייל בלבד (ה-JS של הדסקטופ שולט בהם!) */
	
	/* "הכל" מקבל רקע לבן אטום ובולט במקום להיות שקוף */
	.top-left-filters .tl-filter[data-filter="all"].active {
		background: rgba(255, 255, 255, 0.95) !important;
		color: #000 !important;
	}
	
	/* "גלויות" מקבל את הירוק של הפלטה */
	.top-left-filters .tl-filter[data-filter="postcard"].active {
		background: var(--green-light) !important;
	}
	
	/* "סיפורים" מקבל את הצהוב של הפלטה */
	.top-left-filters .tl-filter[data-filter="story"].active {
		background: var(--yellow-light) !important;
	}
	
	
	/* --- 8. אזור הקרדיטים הקבוע בתחתית (מובייל לכל העמודים) --- */
	.mobile-credits-fixed {
		position: fixed;
		bottom: 18px;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		font-size: 12px; /* פונט קטן כפי שביקשת */
		line-height: 1.36;
		
		/* צבע דינמי מהפלטה של העמוד! אם אין - יהיה שחור */
		color: var(--theme-text, #000); 
		
		z-index: 100;
		text-align: center;
		pointer-events: auto; /* מאפשר לחיצה על הלינקים */
	}
	
	.mobile-credits-fixed strong { 
		display: block;
		font-weight: 700; 
		margin-bottom: 4px;
	}
	
	.mobile-credits-fixed a { 
		color: inherit; 
		text-decoration: underline; 
		text-underline-offset: 2px; 
		transition: opacity 0.3s;
		margin-left: 2.3px;
	}
	
	.mobile-credits-fixed a:hover {
		opacity: 0.6;
	}
	
	/* בעמודי סינגל ואודות (שיש להם גלילה טבעית ולא 100vh נעול), 
	   ייתכן שנרצה שהקרדיטים לא יסתירו תוכן בסוף הגלילה. 
	   במידה וכן - נוכל להפוך אותם ל-relative בסוף העמוד. */
	body.single .mobile-credits-fixed,
	body.page-template-about .mobile-credits-fixed {
		position: absolute; /* דביק לתחתית המסמך האמיתית ולא למסך */
		bottom: 20px;
	}
	.en-credits {display: block;}
	
	.top-left-filters .morphing-ticker.force-close {
		width: 50px !important;
		background: rgba(255, 255, 255, 0.60) !important;
	}
	
	/* --- 9. הגדלת כרטיסיות הקנבס במובייל --- */
	.canvas-item .item-aspect-box {
		/* דורס את הגודל הקטן מהדסקטופ ומתאים בדיוק לגריד ה-JS החדש (55% מרוחב המסך) */
		width: 55vw; 
	}
	
	.shadow-left {
		transform: rotate(93.396deg);
		border-radius: 1748.834px;
		background: rgba(0, 0, 0, 0.30);
		top: -1324.26px;
		left: -861px;
	}
	.shadow-right {
		width: 1024.489px;
		height: 1748.834px;
		transform: rotate(93.396deg);
		filter: blur(108px);
		background: rgba(0, 0, 0, 0.30);
		filter: blur(108.30000305175781px);
		border-radius: 1748.834px;
		top: unset;
		bottom: -1210.1px;
		right: -340px;
	}
	
	
	/* ==========================================
	   עמוד אודות וסינגל - התאמות למובייל
	   ========================================== */
	
	/* הבר העליון (שם העמוד וה-ID) - יושב בדיוק מתחת להדר המובייל (70px) */
	.single-top-bar {
		position: absolute;
		top: 90px;
		height: 50px;
		padding: 0 20px;
	}
	
	/* מעטפת עמוד אודות */
	.about-main {
		/* מתחשב בהדר (70) + בר עליון (50) + קצת ריווח נושם */
		padding-top: 160px; 
		padding-right: 20px;
		padding-left: 20px;
		gap: 40px;
	}
	
	/* שורת תמונות עליונה */
	.about-hero-images {
		gap: 10px; /* מרווח מצומצם יותר בין 3 התמונות */
	}
	
	/* טיקר ענק (אדריכל, סופר...) */
	.about-ticker-huge .ticker-content {
		font-size: 40px; /* מוקטן משמעותית למובייל */
	}
	
	/* ביוגרפיה */
	.about-bio-text {
		font-size: 16px;
	}
	
	/* אזור בואו נדבר (צור קשר) */
	.contact-content-inner {
		flex-direction: column; /* סידור בטור */
		align-items: center; /* הצמדה לימין */
		gap: 30px;
		margin-top: 30px;
	}
	
	.contact-item {
		font-size: 20px; /* הקטנה קלה למסך הצר */
	}
	
	/* אזור ספרים */
	.book-item {
		flex-direction: column; /* תמונה מעל הטקסט */
		gap: 25px;
		padding-bottom: 35px;
		margin-bottom: 35px;
	}
	
	.book-cover {
		flex: 0 0 auto;
		width: 60%; /* תמונת הספר תופסת 60% מרוחב המסך וממורכזת */
		max-width: 220px;
	}
	
	.book-info {
		text-align: right; /* הטקסט נשאר מיושר לימין */
		width: 100%;
	}
	
	.book-title {
		font-size: 22px;
	}
	
	/* דברים נוספים - טיקר תמונות תחתון */
	.ticker-images img {
		height: 150px; /* תמונות קטנות יותר כדי שייכנסו יותר במסך נייד */
	}
	
	/* טיקר טקסט תחתון בינוני */
	.about-ticker-medium {
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px); /* מותח את הטיקר מקצה לקצה תוך התעלמות מהפדינג של העמוד */
	}
	
	.about-ticker-medium .ticker-content {
		font-size: 35px;
	}
	
	/* מרווח תחתון לעמוד שמתחשב בקרדיטים הקבועים של המובייל */
	.about_wrap .single-bottom-section {
		padding-bottom: 13px;
		padding-right: 0;
	}
	
	/* --- שורת התמונות העליונה (הירו) במובייל --- */
	.about-hero-images {
		width: 100vw;
		display: flex; /* שינוי מגריד לפלקס */
		flex-wrap: nowrap; /* מניעת שבירת שורות */
		justify-content: center; /* מירכוז התמונות */
		align-items: center; /* יישור אנכי של התמונות */
		overflow: hidden; /* מניעת גלילה אופקית אם התמונות חורגות */
		margin-left: -20px; /* ביטול שוליים שמאליים של העמוד */
		margin-right: -20px; /* ביטול שוליים ימניים של העמוד */
	}
	
	.hero-img-col {
		flex: 0 0 auto; /* התמונות ישמרו על גודלן המוגדר */
	}
	
	/* התמונה האמצעית - גדולה יותר */
	.hero-img-col {
		width: 70%; /* תופסת 70% מרוחב המסך */
	}
	
	.hero-img-col img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
		box-shadow: none; /* הסרת ההצללה לעיצוב נקי יותר לפי התמונה */
	}
	/* --- הבר העליון (Header) שקוף בעמודים פנימיים (מובייל) --- */
	body:not(.page-template-home) .mobile-top-bar {
		background: transparent; /* ביטול הרקע הלבן חצי-שקוף */
		backdrop-filter: none; /* ביטול הטשטוש (blur) */
		-webkit-backdrop-filter: none;
	}
	
	body:not(.page-template-home) .mobile-credits-fixed {
		display: none !important;
	}
	
	.contact-details {
		text-align: center;
		align-items: center;
	}
	.ltitle-wrap {
		padding-left: 0;
	}
	
	
	
	/* ==========================================
	   גלויות (Title) - התאמות מובייל וביטול נעילת מסך
	   ========================================== */
	
	/* 1. שחרור גובה 100VH לאפשר גלילה טבעית לטופס התגובות */
	body.type-title .post-inner,
	body.type-short .post-inner {
		height: auto !important;
		display: flex;
		flex-direction: column;
		padding-bottom: 20px;
		padding-top: 30px;
	}
	
	/* 2. מיקום מחדש של אזור הפעולות בתחתית התוכן (רק 'שתפו' נשאר) */
	body.type-title .post-actions,
	body.type-short .post-actions {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		left: auto !important;
		justify-content: flex-end; /* ב-RTL זה יצמיד את 'שתפו' לשמאל כמו בעיצוב */
		margin-top: 15px !important;
		padding: 0 20px !important;
		width: 100%;
	}
	
	/* 3. הסתרת כפתור 'צפייה בגלויה' במובייל */
	.post-actions .action-view {
		display: none !important;
	}
	
	/* -------------------------------------
	   Layout Title - התאמות ספציפיות ל-6 הוריאציות
	   ------------------------------------- */
	
	/* Var 1 (הגדלת התמונות לבקשת אבישי) */
	body.type-title.layout-var-1 .post-inner { gap: 25px; }
	body.type-title.layout-var-1 .main-title-ticker .ticker-content { font-size: 35px; } 
	body.type-title.layout-var-1 .post-image-area img { 
		max-height: 48vh; /* מוגדל וגבוה יותר מבדסקטופ */
		width: 100vw;
	}
	
	/* Var 2 (קול-ים - טיקר עיגולים) */
	body.type-title.layout-var-2 .t2-text { font-size: 30px; }
	body.type-title.layout-var-2 .t2-images-container { padding: 15vw 0; margin-top: -15vw;}
	body.type-title.layout-var-2 .t2-ticker-group img { width: 75vw; height: 45vh; }
	
	/* Var 3 (הר כרבולת - טקסט סביב התמונה) */
	body.type-title.layout-var-3 .layout-title-var-3-wrap { min-height: auto; padding: 40px 0; }
	body.type-title.layout-var-3 .t3-image img { width: 100%; max-width: unset; max-height: unset; height: unset; }
	body.type-title.layout-var-3 .t3-text { font-size: 20px; }
	/* קירוב הטקסטים לתמונה במסך צר */
	body.type-title.layout-var-3 .t3-anchor.top { top: -25px; }
	body.type-title.layout-var-3 .t3-anchor.bottom { bottom: -25px; }
	body.type-title.layout-var-3 .t3-anchor.right { right: -25px; }
	body.type-title.layout-var-3 .t3-anchor.left { left: -25px; }
	
	/* Var 4 (הנשיאה - אריחים) */
	body.type-title.layout-var-4 .layout-title-var-4-wrap { padding-right: 0; }
	body.type-title.layout-var-4 .t4-image-mask { width: 100vw; height: 40vh; margin: 0 -20px;}
	body.type-title.layout-var-4 .t4-tile-bg { background-size: 100% auto; } /* הגדלת האריחים במובייל */
	body.type-title.layout-var-4 .t4-text { font-size: 26px; padding: 0 20px; margin-top: 25px; }
	
	/* Var 5 (טקסט מעל תמונה) */
	body.type-title.layout-var-5 .layout-title-var-5-wrap { min-height: auto; padding: 40px 0; }
	body.type-title.layout-var-5 .t5-text { font-size: 24px; margin-bottom: 20px; }
	body.type-title.layout-var-5 .t5-image img { max-width: 100%; max-height: unset; height: unset; }
	
	/* Var 6 (טקסט נגלל ותמונה קבועה) */
	body.type-title.layout-var-6 .layout-title-var-6-wrap { padding-top: 0; }
	body.type-title.layout-var-6 .t6-sticky-bg { top: 70px; height: calc(100vh - 70px); }
	body.type-title.layout-var-6 .t6-text-row { 
		--total-lines-space: 12; /* צפיפות שורות גבוהה יותר כדי שייראה טוב במסך קטן */
		font-size: calc(((100vh - 70px) / var(--total-lines-space)) / 0.8);
	}
	body.type-title.layout-var-6 .t6-image-wrapper img { max-width: 90vw; max-height: 45vh; }
	body.type-title.layout-var-6 .t6-actions { position: relative !important; justify-content: flex-end; margin-top: 0 !important; padding: 20px !important; }
	body.type-title.layout-var-1 .post-actions {order: 3;}
	.type-title.layout-var-1 .single-post-wrap {padding-top: 160px;}
	body.type-title .post-actions, body.type-short .post-actions {justify-content: flex-start; padding: 0 !important;}
	.single-post-wrap, body.type-title.layout-var-6 .single-post-wrap, body.type-short.layout-var-4 .single-post-wrap, body.type-medium.layout-var-2 .single-post-wrap, body.type-medium.layout-var-5 .single-post-wrap {padding: 160px 20px 0;}
	
	/* --- טוסט העתקת קישור במובייל: יישור לימין --- */
	.share-toast.mobile-right-align {
		/* מבטל את המשיכה שמאלה (X) ומשאיר רק את תנועת האנימציה למעלה (Y) */
		transform: translateY(calc(-100% + 10px)) !important;
	}
	
	.share-toast.mobile-right-align.show {
		transform: translateY(-100%) !important;
	}
	body.type-title.layout-var-2 .single-post-wrap {
		padding-left: 20px;
	}
	.t2-images-container {
		max-width: unset;
		width: 100vw;
		margin: 0 -20px;
	}
	.t2-circle {
		width: 179vw;
		height: 51vw;
	}
	.t2-circle-top {
		top: -10vh;
	}
	.t2-circle-bottom {
		bottom: -10vh;
	}
	.single-bottom-section {padding-right: 0; padding-bottom: 10px;}
	.ticker-images .ticker-content {
		gap: 8px;
		padding-right: 8px; /* מרווח בין הלופ הראשון לשני */
	}
	.site-footer {font-size: 12px; padding-right: 20px; padding-left: 20px;}
	.footer-inner {display: block; text-align: center; line-height: 1.36;}
	.footer-right {margin-bottom: 4px;}
	.bottom-divider {width: 100vw; margin: 20px -20px 5px;}
	.site-footer::before {width: 100vw; margin-right: -20px;}
	.postcard-form {display: block; position: relative; padding: 30px 30px 240px;}
	.moderation-notice {position: absolute; z-index: 3; bottom: 30px; padding-left: 184px; line-height: 1.3;}
	.stamp-submit-area {position: absolute; z-index: 4; left: 30px; bottom: 30px;}
	.postcard-right textarea {height: 200px;}
	.t3-frame {width: 100vw; margin: unset;}
	body.type-title.layout-var-3 .t3-anchor.right, body.type-title.layout-var-3 .t3-anchor.left {display: none;}
	.lightbox-content img {max-width: 100vw;}
	.lightbox-close {bottom: unset; top: calc(100% + 30px); right: 50%; transform: translateX(50%);}
	
	
	/* ==========================================
	   סיפור קצר (Article) - התאמות מובייל
	   ========================================== */
	body.type-article .single-post-wrap {
		overflow-x: hidden;
	}
	
	/* משחררים את הגריד של הדסקטופ כדי שהאלמנטים יזרמו אחד מתחת לשני */
	body.type-article .post-inner {
		display: flex;
		flex-direction: column;
		gap: 0; /* מרווחים ינוהלו פרטנית לפי אלמנט */
	}
	
	/* טריק CSS: "מעלימים" את עטיפת הטקסט הכללית כדי שנוכל לשלב את התמונה באמצע */
	body.type-article .post-text-area {
		display: contents;
	}
	
	/* 1. כותרת הסיפור */
	body.type-article .article-title {
		order: 1;
		font-size: 45px; /* מוקטן ומותאם למובייל */
		line-height: 1.1;
		margin-bottom: 15px;
	}
	
	/* 2. מטא דאטה (מאת, זמן קריאה, שתפו) */
	body.type-article .article-meta {
		width: 100%;
		order: 2;
		font-size: 14px;
		margin-bottom: 30px;
		padding-bottom: 0;
		flex-wrap: wrap; /* שובר שורה באלגנטיות אם אין מקום במסך צר */
		gap: 15px;
		border: none;
	}
	
	/* 3. תמונה ראשית (הופכת לסטטית ונמתחת מקצה לקצה) */
	body.type-article .post-image-area {
		order: 3;
		position: relative !important;
		top: auto !important; /* ביטול הסטיקי */
		width: 100vw;
		margin-right: -20px; /* שובר את הפאדינג של העמוד ליצירת אפקט Edge-to-Edge */
		margin-left: -20px;
		margin-bottom: 40px;
		height: auto;
	}
	
	body.type-article .post-image-area img {
		width: 100%;
		height: auto;
		max-height: 60vh; /* מונע מהתמונה להשתלט על כל גובה המסך */
		object-fit: cover;
	}
	
	/* 4. גוף הטקסט */
	body.type-article .article-content {
		order: 4;
		font-size: 18px; /* קריא וברור למובייל */
	}
	
	/* הקטנה קלה של האות הראשונה (Drop Cap) שמותאמת לפרופורציות מובייל */
	body.type-article .article-content > p:first-of-type::first-letter {
		font-size: 45px;
		padding-top: 5px;
	}
	
	/* תמונות פנימיות בתוך הטקסט - נמתחות גם הן מקצה לקצה כמו בעיצוב */
	body.type-article .article-content [id^="attachment"], 
	body.type-article .article-content p > img {
		width: 100vw;
		max-width: 100vw;
		margin-right: -20px;
		margin-left: -20px;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	/* כיתוב תמונה (קפשן) תחת תמונות פנימיות - מחזירים לו שוליים כדי שלא יגע בקצה המסך */
	body.type-article .article-content .wp-caption-text {
		padding: 0 20px; 
		margin-top: 15px;
		font-size: 13px;
	}
	body.type-article .article-content [id^="attachment"], body.type-article .article-content p > img {
		width: 100% !important;
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
	body.type-article .article-content .wp-caption-text {
		padding: 0;
	}
	
	
	/* ==========================================
	   גלויות קצרות (Short) - התאמות מובייל V1-V4
	   ========================================== */
	
	/* 2. איפוס כללי למרווחים וגדלי פונט */
	body.type-short .post-text-area {
		padding: 0 20px !important;
		font-size: 22px !important;
		margin-top: 20px;
	}
	
	body.type-short .post-image-area {
		padding: 0 !important;
	}
	
	/* --- שורט V1 --- */
	body.type-short.layout-var-1 .post-text-area {
		padding-top: 0 !important;
	}
	
	/* --- שורט V2 (פליפ 3D) --- */
	body.type-short.layout-var-2 .layout-short-var-2-wrap {
		padding-top: 20px;
	}
	body.type-short.layout-var-2 .s2-flip-container {
		width: 85vw !important; /* התאמה לרוחב המסך */
		margin: 0 auto !important;
	}
	body.type-short.layout-var-2 .s2-flip-inner {
		height: 110vw !important; /* שומר על פרופורציה של גלויה */
		max-height: 65vh;
	}
	body.type-short.layout-var-2 .s2-back-text {
		font-size: 20px !important;
		padding: 20px !important;
	}
	/* סידור כפתורי הסיבוב והשיתוף מתחת לגלויה V2 */
	body.type-short.layout-var-2 .s2-controls-row {
		margin: 20px 20px 40px !important;
		flex-direction: column;
		gap: 15px;
		align-items: flex-end !important; /* הצמדה לשמאל */
	}
	body.type-short.layout-var-2 .s2-instruction {
		position: static !important;
		transform: none !important;
		align-self: center !important; /* משאיר את הטקסט ממורכז */
	}
	body.type-short.layout-var-2 .s2-actions {
		position: static !important;
		transform: none !important;
	}
	
	/* --- שורט V3 --- */
	body.type-short.layout-var-3 .s3-content-inner {
		flex-direction: column;
		gap: 20px;
	}
	body.type-short.layout-var-3 .s3-img-col {
		width: 100% !important;
		flex: none !important;
	}
	body.type-short.layout-var-3 .s3-text-col {
		width: 100% !important;
		padding: 0 0 0 40px !important;
	}
	body.type-short.layout-var-3 .s3-the-text {
		font-size: 22px !important;
		max-width: 100% !important;
	}
	body.type-short.layout-var-3 .s3-actions {
		margin-top: 20px !important;
		padding-bottom: 0 !important;
	}
	
	/* --- שורט V4 --- */
	body.type-short.layout-var-4 .layout-short-var-4-wrap {
		padding-top: 20px;
	}
	body.type-short.layout-var-4 .s4-content-inner {
		flex-direction: column;
		width: 100% !important;
		gap: 20px;
	}
	body.type-short.layout-var-4 .s4-img-col,
	body.type-short.layout-var-4 .s4-text-col {
		width: 100% !important;
		flex: none !important;
		padding: 0 !important;
	}
	body.type-short.layout-var-4 .s4-the-text {
		font-size: 22px !important;
		padding: 0 20px !important;
	}
	body.type-short.layout-var-4 .s4-actions {
		position: static !important;
		margin-top: 20px !important;
		width: 100% !important;
		padding: 0 20px !important;
	}
	
	/* ==========================================
	   פתרון לגלויות שורט מ-V5 ומעלה (הסתרה חכמה)
	   ========================================== */
	body.type-short:not(.layout-var-1):not(.layout-var-2):not(.layout-var-3):not(.layout-var-4) .post-inner {
		display: none !important;
	}
	
	body.type-short:not(.layout-var-1):not(.layout-var-2):not(.layout-var-3):not(.layout-var-4) .single-post-wrap::before {
		content: "גלויה זו עוצבה במיוחד למסכים רחבים. אנא פתחו ממחשב נייח כדי לצפות בה.";
		display: block;
		text-align: center;
		padding: 100px 30px;
		font-size: 22px;
		font-family: inherit;
		color: inherit;
		opacity: 0.7;
		line-height: 1.4;
	}
	body.type-short.layout-var-1 .post-actions {
		order: 3;
	}
	body.type-short.layout-var-1 .post-image-area img {
		width: 100%;
	}
	body.type-short.layout-var-1 .post-inner {
		gap: 20px;
	}
	.s2-flip-front img {
		object-fit: contain;
	}
	.layout-short-var-3-wrap {
		padding-right: 0;
	}
	.layout-short-var-4-wrap {
		min-height: unset;
	}
	
	
	/* ==========================================
	   ביטול אפקטי הובר בכרטיסיות עמוד הבית (מובייל)
	   ========================================== */
	   
	/* 1. ביטול הצגת הכותרת העליונה והטיקר התחתון בהובר/לחיצה */
	.canvas-item:hover .card-hover-label-top,
	.canvas-item:hover .card-hover-ticker-bottom,
	.canvas-item:active .card-hover-label-top,
	.canvas-item:active .card-hover-ticker-bottom {
		opacity: 0 !important;
		visibility: hidden !important;
	}
	
	/* 2. דריסת פקודות ה-JS שמטות את הכרטיס בתלת-ממד + ביטול סיבוב התמונה */
	.canvas-item .item-aspect-box {
		transform: none !important;
	}
	.canvas-item:hover img,
	.canvas-item:active img {
		transform: none !important;
	}
	
	/* 3. העלמת סמן העכבר המותאם אישית (העיגול הסגול) */
	.custom-hover-cursor {
		display: none !important;
	}
	
	/* החזרת התנהגות טבעית למסכי מגע (ליתר ביטחון) */
	body.hide-native-cursor .canvas-item,
	body.hide-native-cursor .canvas-item a {
		cursor: auto !important;
	}
	
	
	
	/* ==========================================
	   גלויות בינוניות (Medium) - התאמות מובייל
	   ========================================== */
	
	/* --- מדיום V1 --- */
	body.type-medium.layout-var-1 .post-inner {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	
	body.type-medium.layout-var-1 .post-image-area {
		position: relative !important;
		top: auto !important;
		height: auto !important;
		padding-right: 0 !important;
		order: 1; 
	}
	
	body.type-medium.layout-var-1 .post-image-area img {
		width: 100%;
		object-position: center !important; 
	}
	
	body.type-medium.layout-var-1 .post-text-area {
		order: 2; 
		max-width: 100% !important;
		font-size: 28px !important; 
		padding: 0 0 0 40px !important;
	}
	
	body.type-medium.layout-var-1 .post-actions {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		order: 3;
		margin-top: 20px !important;
	}
	
	/* --- מדיום V3 (הרצת טקסט) --- */
	body.type-medium.layout-var-3 .layout-var-3-wrap {
		flex-direction: column-reverse;
		padding-right: 0 !important;
		gap: 30px;
	}
	
	body.type-medium.layout-var-3 .l3-img-col {
		position: relative !important;
		flex: none !important;
		width: 100% !important;
	}
	
	body.type-medium.layout-var-3 .l3-text-col {
		flex: none !important;
		width: 100% !important;
		min-height: auto !important;
		padding: 0 20px;
		font-size: 22px !important; 
	}
	
	/* --- מדיום V4 (תמונה גדלה מהמרכז ונגללת טבעית) --- */
	body.type-medium.layout-var-4 .single-post-wrap {
		padding-top: 70px !important; /* גובה הבר העליון */
		overflow-x: hidden !important;
	}
	
	/* שבירת הפין של GSAP כדי לשחרר את הגלילה למצב טבעי */
	body.type-medium.layout-var-4 .pin-spacer {
		padding: 0 !important;
		height: auto !important;
		display: block !important;
		position: relative !important;
	}
	
	body.type-medium.layout-var-4 .layout-var-4-wrap {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}
	
	/* עוטף התמונה - ממורכז רוחבית, מאפשר גלילה טבעית */
	body.type-medium.layout-var-4 .l4-sticky-container {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		max-height: unset !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		overflow: visible !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		margin-left: -20px !important; /* קיזוז הפאדינג */
	}
	
	/* התמונה עצמה - מתחילה קטנה במרכז, GSAP יגדיל את הרוחב (בלי !important על width!) */
	body.type-medium.layout-var-4 .l4-img-col {
		position: relative !important;
		width: 55vw; /* גודל התחלתי שיתרחב על ידי GSAP */
		max-width: 100%;
		top: auto !important;
		left: auto !important;
		margin-top: 25vh !important; /* דוחף את התמונה לאמצע המסך התחלתי */
		transform: none !important; /* מבטל תזוזות צדדיות של GSAP */
		margin: 0 auto;
	}
	
	body.type-medium.layout-var-4 .l4-scroll-prompt {
		margin-bottom: 20px !important;
	}
	
	body.type-medium.layout-var-4 .l4-img-col img {
		width: 100% !important;
		max-height: 60vh !important;
		object-fit: cover !important;
	}
	
	/* הטקסט - ממוקם מתחת לתמונה במרחק שמבטיח הסתרה במסך הראשון */
	body.type-medium.layout-var-4 .l4-content-col {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		transform: none !important; /* מונע מ-GSAP להעיף את הטקסט למעלה/למטה */
		padding: 0 0 0 40px !important;
		margin-left: 0 !important;
		margin-top: 15vh !important; /* המרווח המדויק שמסתיר את הטקסט עד הגלילה */
		box-sizing: border-box !important;
		z-index: 10;
	}
	
	body.type-medium.layout-var-4 .l4-text-scroll {
		position: relative !important;
		width: 100% !important;
		top: auto !important;
		right: auto !important;
		transform: none !important;
	}
	
	body.type-medium.layout-var-4 .l4-the-text {
		font-size: 24px !important;
		line-height: 1.32 !important;
		text-align: right !important;
		margin-bottom: 40px !important;
	}
	
	body.type-medium.layout-var-4 .l4-fade-overlay {
		display: none !important;
	}
	
	body.type-medium.layout-var-4 .l4-fixed-actions {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		left: auto !important;
		margin-top: 0 !important;
		padding: 0 !important;
		justify-content: flex-start !important;
		transform: none !important;
	}
	
	/* ==========================================
	   מדיום V2 - תצוגת מובייל זהה ל-V1
	   ========================================== */
	body.type-medium.layout-var-2 .post-inner,
	body.type-medium.layout-var-2 .layout-var-2-wrap {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		gap: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	body.type-medium.layout-var-2 .l2-img-container {
		position: relative !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		order: 1 !important;
	}
	
	body.type-medium.layout-var-2 .l2-img-container img {
		width: 100% !important;
		max-height: 50vh !important;
		object-fit: cover !important;
		object-position: center !important;
	}
	
	body.type-medium.layout-var-2 .l2-text-area {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 20px !important;
		font-size: 22px !important;
		line-height: 1.32 !important;
		text-align: right !important;
	}
	
	body.type-medium.layout-var-2 .l2-fixed-bottom-fade {
		position: relative !important;
		bottom: auto !important;
		height: auto !important;
		margin: 10px 0 0 0 !important;
		order: 3 !important;
		display: block !important;
		background: none !important; 
	}
	
	body.type-medium.layout-var-2 .l2-fixed-bottom-fade .post-actions {
		padding: 0 20px !important;
		justify-content: flex-start !important;
	}
	
	/* ==========================================
	   מדיום V5 - תצוגת מובייל זהה ל-V1
	   ========================================== */
	body.type-medium.layout-var-5 .post-inner,
	body.type-medium.layout-var-5 .layout-var-5-wrap {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		gap: 20px !important;
	}
	
	body.type-medium.layout-var-5 .l5-img-col {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		flex: none !important;
		order: 1 !important;
	}
	
	body.type-medium.layout-var-5 .l5-img-col img {
		width: 100% !important;
		max-height: unset !important;
		object-fit: cover !important;
		object-position: center !important;
	}
	
	body.type-medium.layout-var-5 .l5-gradient-overlay {
		display: none !important;
	}
	
	body.type-medium.layout-var-5 .l5-text-col {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		flex: none !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 20px !important;
		justify-content: flex-start !important;
		text-align: right !important;
	}
	
	body.type-medium.layout-var-5 .l5-the-text {
		font-size: 22px !important;
		max-width: 100% !important;
	}
	
	body.type-medium.layout-var-5 .l5-actions {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		order: 3 !important;
		margin-top: 20px !important;
		justify-content: flex-start !important;
	}
	
	/* ==========================================
	   פתרון חכם לגלויות מדיום לא נתמכות (מ-V6 ומעלה)
	   ========================================== */
	body.type-medium:not(.layout-var-1):not(.layout-var-2):not(.layout-var-3):not(.layout-var-4):not(.layout-var-5) .post-inner {
		display: none !important;
	}
	
	body.type-medium:not(.layout-var-1):not(.layout-var-2):not(.layout-var-3):not(.layout-var-4):not(.layout-var-5) .single-post-wrap::before {
		content: "גלויה זו עוצבה במיוחד למסכים רחבים. אנא פתחו ממחשב נייח כדי לצפות בה.";
		display: block;
		text-align: center;
		padding: 100px 30px;
		font-size: 22px;
		font-family: inherit;
		color: inherit;
		opacity: 0.7;
		line-height: 1.4;
	}
	
	.home-shadow {
		position: absolute;
	}
	
	.is-filtered-view .home-shadow {
		visibility: hidden;
	}
}