/*
 * מברכים - מערכת עיצוב
 * ---------------------------------------------------------------
 * שכבה אחת שנטענת בכל עמוד באתר. כל המוצרים - ברכות, זמנים, לוח,
 * הלכה, כלים - משתמשים באותם tokens ובאותם רכיבים.
 *
 * נטענת בעדיפות 20, אחרי ערכת הבונה. זה חשוב: הבונה כותב כללים
 * באותה ספציפיות בדיוק (`.elementor-kit-124 h1` מול `.mv-scope h1`),
 * ובתיקו מנצח מי שנטען אחרון.
 *
 * סדר: tokens → בסיס → טיפוגרפיה → פריסה → רכיבים → utilities.
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
	/*
	 * דיו. ink-3 הוא צבע הטקסט המשני, והוא נבדק מול כל שבעת הרקעים
	 * של המערכת: הערך הקודם (#6a7090) נתן 4.4 מול רקע העמוד, כלומר
	 * נפילה מתחת ל-AA בטקסט קטן. הערך הנוכחי נותן 4.5 ומעלה בכולם.
	 * ink-4 נשאר בהיר בכוונה - הוא לקישוט בלבד: מפרידים, סמלים
	 * בשדות, וסימני רשימה. אסור להשתמש בו לטקסט.
	 */
	--mv-ink:      #14162e;
	--mv-ink-2:    #3d4363;
	--mv-ink-3:    #636989;
	--mv-ink-4:    #9ba1bd;

	/* --- מותג. כחול-לילה עמוק, לא רווי --- */
	--mv-primary:      #1d2657;
	--mv-primary-700:  #151c42;
	--mv-primary-600:  #26326e;
	--mv-primary-300:  #6675b8;
	--mv-primary-100:  #dde2f4;
	--mv-primary-50:   #eef1fa;

	/*
	 * הדגשה: זהב עמוק ומאופק.
	 * הערכה הקודמת החזיקה #FFDF00 - צהוב רווי - וזה בדיוק מה שגרם
	 * לאתר להיראות זול. הזהב כאן משמש **רק** לסימון "עכשיו",
	 * לזמן הקרוב, ולתשובה - ולא לכל כפתור.
	 */
	--mv-accent:      #a67c2b;
	--mv-accent-600:  #8a651d;
	--mv-accent-700:  #6b4e16;
	--mv-accent-300:  #e0c489;
	--mv-accent-50:   #fbf5e9;

	--mv-teal:     #0e6b62;
	--mv-teal-50:  #e8f3f1;

	/* --- משטחים --- */
	--mv-surface:    #ffffff;
	--mv-surface-2:  #fafbfd;
	--mv-bg:         #f4f5f9;
	--mv-bg-2:       #e9ecf4;
	--mv-line:       #e4e7f0;
	--mv-line-2:     #cfd4e4;

	/* --- מצב --- */
	--mv-ok:       #10664f;
	--mv-ok-50:    #e6f2ee;
	--mv-warn:     #8a5a10;
	--mv-warn-50:  #fbf3e4;
	--mv-danger:   #9d2731;
	--mv-danger-50:#faebec;

	/* --- טיפוגרפיה --- */
	--mv-font: "Noto Sans Hebrew", "Assistant", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--mv-font-num: var(--mv-font);

	--mv-fs-2xs:  0.75rem;    /* 12 */
	--mv-fs-xs:   0.8125rem;  /* 13 */
	--mv-fs-sm:   0.875rem;   /* 14 */
	--mv-fs-base: 0.9375rem;  /* 15 */
	--mv-fs-md:   1.0625rem;  /* 17 */
	--mv-fs-lg:   1.1875rem;  /* 19 */
	--mv-fs-xl:   1.4375rem;  /* 23 */
	--mv-fs-2xl:  1.75rem;    /* 28 */
	--mv-fs-3xl:  2.125rem;   /* 34 */

	--mv-lh-tight: 1.22;
	--mv-lh-snug:  1.45;
	--mv-lh:       1.7;

	/* --- מרווח, סולם של 4 --- */
	--mv-1: 4px;   --mv-2: 8px;   --mv-3: 12px;  --mv-4: 16px;
	--mv-5: 20px;  --mv-6: 24px;  --mv-8: 32px;  --mv-10: 40px;
	--mv-12: 48px; --mv-16: 64px; --mv-20: 80px;

	/* מרווח בין מקטעים - הקצב הראשי של כל עמוד */
	--mv-section: var(--mv-12);

	/* --- מיכל --- */
	--mv-container: 1180px;
	--mv-container-narrow: 720px;
	--mv-gutter: 24px;

	/* --- צורה. לא כדורים בכל מקום --- */
	--mv-r-xs:  6px;
	--mv-r-sm:  10px;
	--mv-r:     14px;
	--mv-r-lg:  20px;
	--mv-r-pill: 999px;

	/*
	 * צללים מאופקים. צל כבד על כל כרטיס הופך עמוד לרועש, ולכן
	 * הכרטיס הרגיל הוא שטוח לגמרי והצל שמור למה שבאמת מורם.
	 */
	--mv-shadow-sm: 0 1px 2px rgba(20,22,46,.05);
	--mv-shadow:    0 2px 6px rgba(20,22,46,.06), 0 8px 24px rgba(20,22,46,.05);
	--mv-shadow-lg: 0 6px 16px rgba(20,22,46,.08), 0 22px 48px rgba(20,22,46,.09);

	/*
	 * טבעת המיקוד בשדות. ב-22% היא נתנה 1.55:1 מול לבן, כלומר
	 * כמעט בלתי נראית - וסימן מיקוד שלא רואים אינו סימן מיקוד.
	 * ב-55% היא נותנת 3.5:1, מעל הסף של 3:1 לרכיבים שאינם טקסט.
	 */
	--mv-ring: 0 0 0 3px rgba(29,38,87,.55);
	--mv-t: 150ms cubic-bezier(.2,.6,.3,1);

	/*
	 * גובה המעטפת. עד עכשיו 58 ו-32 היו מספרי קסם משוכפלים בשלושה
	 * קבצים, וכל רכיב דביק היה צריך לנחש אותם מחדש. עכשיו זה מקום
	 * אחד, וגם ההתאמה למובייל נעשית פעם אחת.
	 */
	--mv-header-h:    58px;
	--mv-strip-h:     32px;
	--mv-bottomnav-h: 54px;
	--mv-sticky-top:  calc(var(--mv-header-h) + var(--mv-strip-h) + var(--mv-4));
}

/* ============================================================
   2. בסיס
   ============================================================ */
body.mv-app {
	background: var(--mv-bg);
	color: var(--mv-ink);
	font-family: var(--mv-font);
	font-size: var(--mv-fs-base);
	line-height: var(--mv-lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.mv-scope { font-family: var(--mv-font); color: var(--mv-ink); line-height: var(--mv-lh); }
.mv-scope *, .mv-scope *::before, .mv-scope *::after { box-sizing: border-box; }
.mv-scope img { max-width: 100%; height: auto; }

.mv-scope :focus-visible,
body.mv-app :focus-visible {
	outline: 2px solid var(--mv-primary);
	outline-offset: 2px;
	border-radius: var(--mv-r-xs);
}

/* ============================================================
   3. טיפוגרפיה
   ------------------------------------------------------------
   הכללים כאן כתובים עם `body.mv-app` כדי לנצח את ערכת הבונה,
   שכותבת `.elementor-kit-124 h1` באותה ספציפיות.
   ============================================================ */
body.mv-app h1, .mv-scope h1,
body.mv-app h2, .mv-scope h2,
body.mv-app h3, .mv-scope h3,
body.mv-app h4, .mv-scope h4 {
	font-family: var(--mv-font);
	color: var(--mv-ink);
	line-height: var(--mv-lh-tight);
	letter-spacing: -.015em;
	margin: 0 0 var(--mv-3);
	text-transform: none;
}

body.mv-app h1, .mv-scope h1 {
	font-size: clamp(1.5rem, 1.1rem + 1.7vw, var(--mv-fs-3xl));
	font-weight: 800;
}
body.mv-app h2, .mv-scope h2 {
	font-size: clamp(1.25rem, 1.05rem + .8vw, var(--mv-fs-xl));
	font-weight: 700;
}
body.mv-app h3, .mv-scope h3 { font-size: var(--mv-fs-lg); font-weight: 700; }
body.mv-app h4, .mv-scope h4 { font-size: var(--mv-fs-md); font-weight: 700; }

/*
 * כותרות על משטח כהה.
 *
 * כלל הכותרות שמעל הוא `body.mv-app h1`, כלומר ספציפיות (0,1,2), והוא
 * קובע דיו כהה. מחלקת רכיב בודדת מפסידה לו: `.mv-hero__title` היא
 * (0,1,0) ו-`.mv-sitefooter__col h2` היא (0,1,1). התוצאה הייתה כותרת
 * בצבע כחול כהה על רקע כחול כהה - גם ברצועת הפתיחה של עמוד הבית וגם
 * בארבע כותרות העמודות בתחתית.
 *
 * הפתרון אינו `!important` ואינו העלאת כל רכיב בנפרד, אלא הכרזה אחת
 * ברמת המשטח: (0,2,2), שמנצחת בלי טריקים. ברצועת הפתיחה הכותרת
 * יורשת את צבע הטקסט של המשטח, כי המשטח כבר יודע מה הצבע הנכון שלו.
 */
body.mv-app .mv-hero h1, .mv-scope .mv-hero h1,
body.mv-app .mv-hero h2, .mv-scope .mv-hero h2,
body.mv-app .mv-hero h3, .mv-scope .mv-hero h3,
body.mv-app .mv-hero h4, .mv-scope .mv-hero h4 { color: inherit; }

body.mv-app .mv-sitefooter h2, .mv-scope .mv-sitefooter h2,
body.mv-app .mv-sitefooter h3, .mv-scope .mv-sitefooter h3 { color: #fff; }

.mv-scope p { margin: 0 0 var(--mv-4); }
.mv-scope p:last-child { margin-bottom: 0; }

.mv-scope a { color: var(--mv-primary-600); text-decoration: none; }
.mv-scope a:hover { color: var(--mv-primary-700); text-decoration: underline; text-underline-offset: 2px; }

/* מספרים וזמנים - הדגשה נומרית */
.mv-num, .mv-scope time, .mv-t-time {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -.01em;
}

.mv-note { font-size: var(--mv-fs-sm); color: var(--mv-ink-3); line-height: var(--mv-lh-snug); }
.mv-lede { font-size: var(--mv-fs-md); color: var(--mv-ink-2); line-height: var(--mv-lh); max-width: 68ch; }
.mv-label-sm { font-size: var(--mv-fs-xs); font-weight: 700; color: var(--mv-ink-3); letter-spacing: .01em; }

/* ============================================================
   4. פריסה
   ============================================================ */
.mv-container { width: 100%; max-width: var(--mv-container); margin-inline: auto; padding-inline: var(--mv-gutter); }
.mv-container--narrow { max-width: var(--mv-container-narrow); }

.mv-main { display: block; padding-block: var(--mv-8) var(--mv-16); }

.mv-section + .mv-section { margin-top: var(--mv-section); }
.mv-stack > * + * { margin-top: var(--mv-6); }
.mv-stack--sm > * + * { margin-top: var(--mv-3); }
.mv-stack--lg > * + * { margin-top: var(--mv-section); }

.mv-grid { display: grid; gap: var(--mv-4); }
.mv-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mv-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mv-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mv-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.mv-split { display: grid; gap: var(--mv-6); grid-template-columns: minmax(0,1fr) 340px; align-items: start; }

/* כותרת מקטע - הקצב שחוזר בכל עמוד */
.mv-sechead {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--mv-3); flex-wrap: wrap; margin-bottom: var(--mv-5);
}
.mv-sechead h2, .mv-sechead h3 { margin: 0; }
.mv-sechead__more { font-size: var(--mv-fs-sm); font-weight: 700; white-space: nowrap; }

/* ============================================================
   5. כרטיסים - היררכיה, לא סוג אחד
   ------------------------------------------------------------
   מה שהיה: כל דבר בכרטיס עם מסגרת וצל, וכולם באותו משקל.
   מה שיש: ארבע דרגות, וברירת המחדל היא השקטה ביותר.
   ============================================================ */
.mv-card {
	background: var(--mv-surface);
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-r);
	padding: var(--mv-5);
}

/* מורם - למה שהוא הפעולה או התוצאה המרכזית בעמוד */
.mv-card--raise { box-shadow: var(--mv-shadow); border-color: transparent; }

/* שקוף - מידע משני, בלי מסגרת בכלל */
.mv-card--quiet { background: transparent; border-color: transparent; padding-inline: 0; }

/* גוונים - במשורה */
.mv-card--soft { background: var(--mv-primary-50); border-color: var(--mv-primary-100); }
.mv-card--warm { background: var(--mv-accent-50); border-color: #f0e4cb; }
.mv-card--teal { background: var(--mv-teal-50); border-color: #cfe5e1; }

/*
 * רכס צבע דק בראש הכרטיס. מזהה קבוצה במבט אחד בלי לצבוע כרטיס שלם,
 * ולכן אפשר להעמיד עשרה כרטיסים כאלה זה לצד זה בלי שהעמוד ייראה עמוס.
 */
.mv-card--rail { border-top: 3px solid var(--mv-rail, var(--mv-primary-300)); }
.mv-rail--ok     { --mv-rail: var(--mv-ok); }
.mv-rail--accent { --mv-rail: var(--mv-accent); }
.mv-rail--live   { --mv-rail: var(--mv-danger); }
.mv-rail--calm   { --mv-rail: var(--mv-teal); }

.mv-card--flush { padding: 0; overflow: hidden; }
.mv-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mv-3); margin-bottom: var(--mv-4); flex-wrap: wrap; }
.mv-card__head h2, .mv-card__head h3 { margin: 0; }
.mv-card__more { font-size: var(--mv-fs-sm); font-weight: 700; white-space: nowrap; }

/* ============================================================
   6. כרטיס תשובה - הרכיב המרכזי של האתר
   ============================================================ */
.mv-answer {
	background: var(--mv-surface);
	border-radius: var(--mv-r-lg);
	padding: var(--mv-6);
	box-shadow: var(--mv-shadow);
	border-top: 3px solid var(--mv-accent);
}
.mv-answer__q { font-size: var(--mv-fs-sm); font-weight: 700; color: var(--mv-ink-3); margin: 0 0 var(--mv-4); }
.mv-answer__rows { display: grid; gap: var(--mv-2); margin: 0; }
.mv-answer__row {
	display: grid; grid-template-columns: minmax(92px, 30%) 1fr;
	gap: var(--mv-1) var(--mv-4); align-items: baseline;
	padding: var(--mv-3) var(--mv-4);
	background: var(--mv-surface-2); border-radius: var(--mv-r-sm);
}
.mv-answer__label { font-size: var(--mv-fs-xs); font-weight: 700; color: var(--mv-ink-3); margin: 0; }
.mv-answer__value { font-size: var(--mv-fs-lg); font-weight: 800; color: var(--mv-primary); margin: 0; letter-spacing: -.015em; }
.mv-answer__value small { display: block; font-size: var(--mv-fs-xs); font-weight: 500; color: var(--mv-ink-3); margin-top: 3px; }
.mv-answer__note { margin: var(--mv-4) 0 0; font-size: var(--mv-fs-sm); color: var(--mv-ink-2); line-height: var(--mv-lh-snug); }

/* ============================================================
   7. כפתורים
   ============================================================ */
.mv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--mv-2);
	font-family: inherit; font-size: var(--mv-fs-sm); font-weight: 700; line-height: 1;
	padding: 12px var(--mv-5); min-height: 44px;
	border-radius: var(--mv-r-sm);
	border: 1px solid var(--mv-line-2);
	background: var(--mv-surface); color: var(--mv-ink);
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background var(--mv-t), border-color var(--mv-t), color var(--mv-t), box-shadow var(--mv-t);
}
.mv-btn:hover { background: var(--mv-bg-2); border-color: var(--mv-ink-4); color: var(--mv-ink); text-decoration: none; }
.mv-btn:active { transform: translateY(1px); }

.mv-btn--primary { background: var(--mv-primary); border-color: var(--mv-primary); color: #fff; }
.mv-btn--primary:hover { background: var(--mv-primary-700); border-color: var(--mv-primary-700); color: #fff; }

/*
 * הזהב הבסיסי (#a67c2b) נותן ללבן 3.79:1 בלבד - מתחת ל-AA. הכפתור
 * מתחיל לכן מהגוון הכהה יותר, שנותן 5.3, ומתכהה עוד במעבר עכבר.
 */
.mv-btn--accent { background: var(--mv-accent-600); border-color: var(--mv-accent-600); color: #fff; }
.mv-btn--accent:hover { background: var(--mv-accent-700); border-color: var(--mv-accent-700); color: #fff; }

.mv-btn--ghost { background: transparent; border-color: transparent; color: var(--mv-primary-600); }
.mv-btn--ghost:hover { background: var(--mv-primary-50); color: var(--mv-primary-700); }

.mv-btn--sm { min-height: 38px; padding: 9px var(--mv-4); font-size: var(--mv-fs-xs); }
.mv-btn--block { width: 100%; }
.mv-btn[disabled], .mv-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.mv-iconbtn {
	width: 40px; height: 40px; border-radius: var(--mv-r-sm);
	display: grid; place-items: center; flex: 0 0 auto;
	background: transparent; border: 1px solid transparent; color: inherit;
	cursor: pointer; transition: background var(--mv-t), border-color var(--mv-t);
}
.mv-iconbtn svg { width: 19px; height: 19px; }

/* ============================================================
   8. שדות
   ============================================================ */
.mv-field { display: block; }
.mv-field + .mv-field { margin-top: var(--mv-4); }
.mv-label { display: block; font-size: var(--mv-fs-xs); font-weight: 700; color: var(--mv-ink-2); margin-bottom: var(--mv-2); }

.mv-input, .mv-select {
	width: 100%; font-family: inherit; font-size: var(--mv-fs-base);
	color: var(--mv-ink); background: var(--mv-surface);
	border: 1px solid var(--mv-line-2); border-radius: var(--mv-r-sm);
	padding: 12px var(--mv-4); min-height: 46px;
	transition: border-color var(--mv-t), box-shadow var(--mv-t);
	appearance: none; -webkit-appearance: none;
}
.mv-input:hover, .mv-select:hover { border-color: var(--mv-ink-4); }
.mv-input:focus, .mv-select:focus { outline: none; border-color: var(--mv-primary); box-shadow: var(--mv-ring); }
.mv-input::placeholder { color: var(--mv-ink-3); opacity: 1; }
.mv-input[aria-invalid="true"] { border-color: var(--mv-danger); }

/* חץ ה-select, ממוקם נכון ב-RTL */
.mv-select {
	background-image: linear-gradient(45deg, transparent 50%, var(--mv-ink-3) 50%),
		linear-gradient(135deg, var(--mv-ink-3) 50%, transparent 50%);
	background-position: left calc(var(--mv-4) + 4px) center, left var(--mv-4) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-start: var(--mv-4);
	padding-inline-end: var(--mv-10);
}
.mv-select::-ms-expand { display: none; }

/* חיפוש */
.mv-search { position: relative; }
.mv-search__input { padding-inline-start: 46px; }
.mv-search__icon { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mv-ink-4); pointer-events: none; }

.mv-ac {
	position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 6px);
	background: var(--mv-surface); border: 1px solid var(--mv-line);
	border-radius: var(--mv-r); box-shadow: var(--mv-shadow-lg);
	max-height: 336px; overflow-y: auto; padding: var(--mv-2);
}
.mv-ac[hidden] { display: none; }
.mv-ac__item {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--mv-3);
	padding: 10px var(--mv-3); border-radius: var(--mv-r-xs);
	cursor: pointer; font-size: var(--mv-fs-sm); color: var(--mv-ink); text-decoration: none;
}
.mv-ac__item small { color: var(--mv-ink-3); font-size: var(--mv-fs-2xs); }
.mv-ac__item[aria-selected="true"], .mv-ac__item:hover { background: var(--mv-primary-50); text-decoration: none; }
.mv-ac__empty { padding: var(--mv-4); color: var(--mv-ink-3); font-size: var(--mv-fs-sm); text-align: center; }

/* ============================================================
   9. chips ו-badges
   ============================================================ */
.mv-chips { display: flex; flex-wrap: wrap; gap: var(--mv-2); align-items: center; }
.mv-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px var(--mv-4); min-height: 38px;
	border-radius: var(--mv-r-pill); border: 1px solid var(--mv-line-2);
	background: var(--mv-surface); color: var(--mv-ink-2);
	font-size: var(--mv-fs-sm); font-weight: 600; text-decoration: none;
	transition: all var(--mv-t); cursor: pointer;
}
.mv-chip:hover { border-color: var(--mv-primary-300); color: var(--mv-primary-600); background: var(--mv-primary-50); text-decoration: none; }
.mv-chip[aria-current="page"], .mv-chip.is-on { background: var(--mv-primary); border-color: var(--mv-primary); color: #fff; }
.mv-chip:focus-within { outline: 2px solid var(--mv-primary); outline-offset: 2px; }

.mv-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 10px; border-radius: var(--mv-r-xs);
	font-size: var(--mv-fs-2xs); font-weight: 700; line-height: 1.6;
	background: var(--mv-primary-50); color: var(--mv-primary-600);
}
.mv-badge--accent { background: var(--mv-accent-50); color: var(--mv-accent-600); }
.mv-badge--ok     { background: var(--mv-ok-50); color: var(--mv-ok); }
.mv-badge--warn   { background: var(--mv-warn-50); color: var(--mv-warn); }
.mv-badge--live   { background: var(--mv-danger-50); color: var(--mv-danger); }
.mv-badges { display: flex; flex-wrap: wrap; gap: var(--mv-2); list-style: none; margin: 0; padding: 0; }

/* ============================================================
   10. טבלאות
   ============================================================ */
.mv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--mv-r); border: 1px solid var(--mv-line); }
.mv-table { width: 100%; border-collapse: collapse; font-size: var(--mv-fs-sm); background: var(--mv-surface); }
.mv-table caption { caption-side: bottom; padding: var(--mv-3) var(--mv-4); font-size: var(--mv-fs-2xs); color: var(--mv-ink-3); text-align: start; line-height: var(--mv-lh-snug); }
.mv-table th, .mv-table td { padding: 12px var(--mv-4); text-align: start; border-bottom: 1px solid var(--mv-line); vertical-align: baseline; }
.mv-table thead th { font-size: var(--mv-fs-2xs); font-weight: 700; color: var(--mv-ink-3); background: var(--mv-surface-2); }
.mv-table tbody tr:last-child td, .mv-table tbody tr:last-child th { border-bottom: 0; }
.mv-table tbody tr:hover { background: var(--mv-surface-2); }
.mv-table .is-primary td, .mv-table .is-primary th { background: var(--mv-accent-50); }
.mv-table .is-now td { box-shadow: inset 3px 0 0 var(--mv-accent); }

/* ============================================================
   11. רשימות קישורים
   ============================================================ */
.mv-linklist { list-style: none; margin: 0; padding: 0; }
.mv-linklist li + li { border-top: 1px solid var(--mv-line); }
.mv-linklist a {
	display: flex; align-items: center; justify-content: space-between; gap: var(--mv-3);
	padding: 11px var(--mv-1); min-height: 44px;
	color: var(--mv-ink); font-size: var(--mv-fs-sm); font-weight: 600;
	transition: color var(--mv-t);
}
.mv-linklist a:hover { color: var(--mv-primary-600); text-decoration: none; }
.mv-linklist a small { color: var(--mv-ink-3); font-weight: 500; font-size: var(--mv-fs-2xs); }
/* חץ שמצביע לכיוון הנכון ב-RTL */
.mv-linklist a::after { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-inline-start: 1.5px solid var(--mv-ink-4); border-block-end: 1.5px solid var(--mv-ink-4); transform: rotate(45deg); transition: border-color var(--mv-t); }
.mv-linklist a:hover::after { border-color: var(--mv-primary); }

/* ============================================================
   12. כרטיס כלי
   ============================================================ */
.mv-tool {
	display: flex; flex-direction: column; gap: var(--mv-2);
	background: var(--mv-surface); border: 1px solid var(--mv-line);
	border-radius: var(--mv-r); padding: var(--mv-5);
	text-decoration: none; color: var(--mv-ink); height: 100%;
	transition: border-color var(--mv-t), box-shadow var(--mv-t), transform var(--mv-t);
}
.mv-tool:hover { text-decoration: none; border-color: transparent; box-shadow: var(--mv-shadow); transform: translateY(-2px); }
.mv-tool__icon { width: 38px; height: 38px; border-radius: var(--mv-r-sm); display: grid; place-items: center; margin-bottom: var(--mv-1); background: var(--mv-primary-50); color: var(--mv-primary-600); }
.mv-tool__icon svg { width: 20px; height: 20px; }
.mv-tool--accent .mv-tool__icon { background: var(--mv-accent-50); color: var(--mv-accent-600); }
.mv-tool--teal .mv-tool__icon { background: var(--mv-teal-50); color: var(--mv-teal); }
.mv-tool__title { font-size: var(--mv-fs-md); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.mv-tool__desc { font-size: var(--mv-fs-sm); color: var(--mv-ink-3); margin: 0; line-height: var(--mv-lh-snug); }
.mv-tool__meta { margin-top: auto; padding-top: var(--mv-3); font-size: var(--mv-fs-xs); font-weight: 700; color: var(--mv-primary-600); }

/* ============================================================
   13. זוג מפתח וערך
   ============================================================ */
.mv-kv { list-style: none; margin: 0; padding: 0; }
.mv-kv li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mv-4); padding: 10px 0; border-bottom: 1px solid var(--mv-line); }
.mv-kv li:last-child { border-bottom: 0; }
.mv-kv li:first-child { padding-top: 0; }
.mv-kv li > span { color: var(--mv-ink-2); font-size: var(--mv-fs-sm); }
.mv-kv li > b { font-size: var(--mv-fs-md); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.mv-kv--tight li { padding: 7px 0; }

/* ============================================================
   14. פירורי לחם
   ============================================================ */
.mv-crumbs { font-size: var(--mv-fs-2xs); color: var(--mv-ink-3); margin-bottom: var(--mv-4); }
.mv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; align-items: center; }
/* מפריד שמצביע לכיוון הנכון ב-RTL */
.mv-crumbs li + li::before { content: "‹"; margin-inline-end: 6px; color: var(--mv-ink-4); }
.mv-crumbs a { color: var(--mv-ink-3); }
.mv-crumbs a:hover { color: var(--mv-primary-600); }
.mv-crumbs [aria-current] { color: var(--mv-ink-2); font-weight: 600; }

/* ============================================================
   15. הודעות ומצבים
   ============================================================ */
.mv-alert {
	display: flex; gap: var(--mv-3); align-items: flex-start;
	padding: var(--mv-4) var(--mv-5); border-radius: var(--mv-r);
	font-size: var(--mv-fs-sm); line-height: var(--mv-lh-snug);
	background: var(--mv-primary-50); color: var(--mv-ink-2);
	border: 1px solid var(--mv-primary-100);
}
.mv-alert--warn   { background: var(--mv-warn-50); border-color: #f0e2c4; color: #6b4810; }
.mv-alert--danger { background: var(--mv-danger-50); border-color: #f2ced1; color: #7c1f27; }
.mv-alert--ok     { background: var(--mv-ok-50); border-color: #c8e4dc; color: #0d5343; }

.mv-empty { text-align: center; padding: var(--mv-12) var(--mv-5); color: var(--mv-ink-3); }
.mv-empty__title { font-size: var(--mv-fs-md); font-weight: 700; color: var(--mv-ink-2); margin-bottom: var(--mv-2); }

.mv-skeleton {
	background: linear-gradient(90deg, var(--mv-bg-2) 25%, #f2f4f9 37%, var(--mv-bg-2) 63%);
	background-size: 400% 100%; animation: mv-shimmer 1.3s ease infinite;
	border-radius: var(--mv-r-xs); color: transparent;
}
@keyframes mv-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.mv-is-loading { opacity: .5; pointer-events: none; transition: opacity var(--mv-t); }

/* ============================================================
   16. טאבים וכותרת עמוד
   ============================================================ */
.mv-tabs { display: flex; gap: var(--mv-1); border-bottom: 1px solid var(--mv-line); overflow-x: auto; scrollbar-width: none; }
.mv-tabs::-webkit-scrollbar { display: none; }
.mv-tab { padding: 11px var(--mv-4); font-size: var(--mv-fs-sm); font-weight: 700; color: var(--mv-ink-3); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; font-family: inherit; min-height: 44px; }
.mv-tab:hover { color: var(--mv-ink); }
.mv-tab[aria-selected="true"] { color: var(--mv-primary); border-bottom-color: var(--mv-primary); }

.mv-pagehead { margin-bottom: var(--mv-6); }
.mv-pagehead__eyebrow { font-size: var(--mv-fs-xs); font-weight: 700; color: var(--mv-accent-600); margin: 0 0 var(--mv-2); letter-spacing: .02em; }
.mv-pagehead h1 { margin-bottom: var(--mv-3); }
.mv-pagehead__lede { font-size: var(--mv-fs-md); color: var(--mv-ink-2); max-width: 68ch; margin: 0; line-height: var(--mv-lh); }
.mv-dateline { display: flex; flex-wrap: wrap; gap: var(--mv-2) var(--mv-4); font-size: var(--mv-fs-sm); color: var(--mv-ink-3); margin: var(--mv-3) 0 0; }

/* ============================================================
   17. מקורות
   ============================================================ */
.mv-sources { font-size: var(--mv-fs-sm); }
.mv-sources ul { list-style: none; margin: 0; padding: 0; }
.mv-sources li { padding: 8px 0; border-bottom: 1px dashed var(--mv-line-2); color: var(--mv-ink-2); }
.mv-sources li:last-child { border-bottom: 0; }
.mv-sources cite { font-style: normal; font-weight: 700; color: var(--mv-ink); }

/* ============================================================
   18. UTILITIES
   ============================================================ */
.mv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mv-muted { color: var(--mv-ink-3); }
.mv-center { text-align: center; }
.mv-nowrap { white-space: nowrap; }
.mv-hide { display: none !important; }
@media (max-width: 767px) { .mv-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .mv-hide-desktop { display: none !important; } }

/* ============================================================
   19. רספונסיביות
   ============================================================ */
@media (max-width: 1023px) {
	.mv-split { grid-template-columns: minmax(0,1fr); }
	.mv-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
	:root { --mv-gutter: 18px; --mv-section: var(--mv-10); }
	.mv-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
	:root { --mv-gutter: 16px; --mv-section: var(--mv-8); }
	.mv-grid--2, .mv-grid--3, .mv-grid--4 { grid-template-columns: minmax(0,1fr); }
	.mv-card { padding: var(--mv-4); }
	.mv-answer { padding: var(--mv-5) var(--mv-4); }
	.mv-main { padding-block: var(--mv-5) var(--mv-12); }
	.mv-answer__row { grid-template-columns: minmax(0,1fr); gap: 2px; }
	.mv-table th, .mv-table td { padding: 11px var(--mv-3); }
	.mv-kv li > b { font-size: var(--mv-fs-base); }
}

/* ============================================================
   20. העדפות משתמש
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.mv-scope *, body.mv-app * {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
	.mv-skeleton { animation: none; }
	.mv-tool:hover { transform: none; }
}

@media print {
	.mv-no-print, .mv-siteheader, .mv-sitefooter, .mv-bottomnav { display: none !important; }
	body.mv-app { background: #fff; }
	.mv-card, .mv-answer { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
	.mv-main { padding: 0; }
	a[href]::after { content: ""; }
}

/* ============================================================
   20. טפסים ארוכים
   ------------------------------------------------------------
   הטופס עובד בלי JavaScript, ולכן גם השגיאות הן טקסט אמיתי
   בעמוד ולא חיווי צבע בלבד. כל שגיאה קשורה לשדה שלה ב-
   aria-describedby, וסיכום השגיאות למעלה מקשר לכל שדה.
   ============================================================ */
.mv-formwrap { margin-top: var(--mv-section); }
.mv-formwrap > h2 { margin-bottom: var(--mv-3); }

.mv-form { margin-top: var(--mv-6); max-width: 44rem; }
.mv-form .mv-field + .mv-field { margin-top: var(--mv-5); }

.mv-label { display: block; font-weight: 700; font-size: var(--mv-fs-sm); color: var(--mv-ink); margin-bottom: 6px; }
.mv-req { font-weight: 600; color: var(--mv-danger); font-size: var(--mv-fs-xs); }
.mv-opt { font-weight: 500; color: var(--mv-ink-3); font-size: var(--mv-fs-xs); }
.mv-hint { font-size: var(--mv-fs-xs); color: var(--mv-ink-3); margin: 0 0 6px; line-height: var(--mv-lh-snug); }

.mv-textarea { min-height: 9rem; resize: vertical; line-height: var(--mv-lh); padding: var(--mv-3) var(--mv-4); }

/* שגיאת שדה: גם טקסט, גם סמל, גם מסגרת - ולא צבע לבדו. */
.mv-fielderr {
	display: flex; align-items: flex-start; gap: 6px;
	margin: 6px 0 0; font-size: var(--mv-fs-xs); font-weight: 600; color: var(--mv-danger);
	line-height: var(--mv-lh-snug);
}
.mv-fielderr::before { content: "!"; flex: 0 0 auto; font-weight: 800; }
.mv-input[aria-invalid="true"], .mv-textarea[aria-invalid="true"] {
	border-color: var(--mv-danger); border-width: 2px;
}

.mv-formerr {
	background: var(--mv-danger-50); border: 1px solid var(--mv-danger);
	border-radius: var(--mv-r); padding: var(--mv-4) var(--mv-5); margin-top: var(--mv-5);
	color: var(--mv-ink);
}
.mv-formerr p { margin: 0 0 var(--mv-2); }
.mv-formerr ul { margin: 0; padding-inline-start: var(--mv-5); font-size: var(--mv-fs-sm); }
.mv-formerr li + li { margin-top: 4px; }
.mv-formerr a { color: var(--mv-danger); font-weight: 600; }

.mv-formok {
	background: var(--mv-ok-50); border: 1px solid var(--mv-ok);
	border-inline-start: 4px solid var(--mv-ok);
	border-radius: var(--mv-r); padding: var(--mv-5) var(--mv-6); margin-top: var(--mv-5);
}
.mv-formok p { margin: 0; }
.mv-formok p + p { margin-top: var(--mv-2); }

.mv-form__privacy { margin-top: var(--mv-5); }
.mv-form button[type="submit"] { margin-top: var(--mv-5); }

/* מלכודת בוטים. אסור display:none - חלק מהבוטים מדלגים על כאלה. */
.mv-hp {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	margin: -1px; padding: 0; border: 0;
}

@media (max-width: 560px) {
	.mv-formwrap > h2 { font-size: var(--mv-fs-lg); }
	.mv-textarea { min-height: 8rem; }
	.mv-form button[type="submit"] { width: 100%; }
}

/* רשימת תוכן בתוך כרטיס. `mv-scope ul` הגלובלי מאפס רשימות. */
.mv-list { margin: var(--mv-3) 0 var(--mv-4); padding-inline-start: var(--mv-5); list-style: disc; }
.mv-list li { margin-bottom: var(--mv-2); line-height: var(--mv-lh); color: var(--mv-ink-2); }
.mv-list li:last-child { margin-bottom: 0; }
.mv-list strong { color: var(--mv-ink); }
.mv-card h3 { margin-top: var(--mv-6); }
.mv-card h3:first-of-type { margin-top: var(--mv-4); }
kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
	background: var(--mv-surface-2); border: 1px solid var(--mv-line-2);
	border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--mv-ink);
}

/* ============================================================
   כפתור מלא: טקסט לבן בכל מצב
   ============================================================

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

   למה זה צריך כלל ולא רק הצהרה בכל רכיב: `color` הוא תכונה נורשת.
   כפתור שקיבל רקע כחול מ-`.mv-btn--primary` אבל לא קיבל `color`
   באותו מצב - יורש את צבע הטקסט של ההורה, וזה כמעט תמיד דיו כהה.
   על כחול לילה זה טקסט שכמעט לא נראה. בסריקה של כל גיליונות האתר
   מצאנו שני מקרים כאלה בפועל, ושניהם היו בקוד שאינו מוצג היום -
   כלומר הבעיה נמנעה בכל פעם במקרה. כאן היא נמנעת בכוונה.

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

   ספציפיות: (0,2,0) עם `.mv-scope`, ולכן הוא גובר על הצהרת רכיב
   בודדת אבל לא על מצב ספציפי יותר שנכתב במכוון. אין כאן !important.
*/
.mv-scope .mv-btn--primary,
.mv-scope .mv-btn--primary:link,
.mv-scope .mv-btn--primary:visited,
.mv-scope .mv-btn--primary:hover,
.mv-scope .mv-btn--primary:focus,
.mv-scope .mv-btn--primary:focus-visible,
.mv-scope .mv-btn--primary:active,
.mv-scope .mv-btn--accent,
.mv-scope .mv-btn--accent:link,
.mv-scope .mv-btn--accent:visited,
.mv-scope .mv-btn--accent:hover,
.mv-scope .mv-btn--accent:focus,
.mv-scope .mv-btn--accent:focus-visible,
.mv-scope .mv-btn--accent:active,
.mv-scope .mv-chip.is-on,
.mv-scope .mv-chip.is-on:hover,
.mv-scope .mv-chip.is-on:focus,
.mv-scope .mv-chip.is-on:focus-visible,
.mv-scope .mv-chip[aria-current="page"],
.mv-scope .mv-chip[aria-current="page"]:hover,
.mv-scope .mvz-btn--primary,
.mv-scope .mvz-btn--primary:link,
.mv-scope .mvz-btn--primary:visited,
.mv-scope .mvz-btn--primary:hover,
.mv-scope .mvz-btn--primary:focus,
.mv-scope .mvz-btn--primary:focus-visible,
.mv-scope .mvz-btn--primary:active,
.mv-scope .mvs-mode.is-on,
.mv-scope .mvs-mode[aria-pressed="true"],
.mv-scope .mvs-mode.is-on:hover,
.mv-scope .mvs-mode[aria-pressed="true"]:hover,
.mv-scope .mvs-mode.is-on:focus-visible,
.mv-scope .mvs-mode[aria-pressed="true"]:focus-visible,
.mv-scope .mvs-nusach__opt.is-on,
.mv-scope .mvs-nusach__opt.is-on:link,
.mv-scope .mvs-nusach__opt.is-on:visited,
.mv-scope .mvs-nusach__opt.is-on:hover,
.mv-scope .mvs-nusach__opt.is-on:focus-visible,
.mv-scope .mvs-theme__opt.is-on,
.mv-scope .mvs-theme__opt[aria-checked="true"],
.mv-scope .mvs-theme__opt.is-on:hover,
.mv-scope .mvs-theme__opt[aria-checked="true"]:hover,
.mv-scope .mvs-theme__opt[aria-checked="true"]:focus-visible {
	color: #fff;
}

/*
 * גם האייקון שבתוך הכפתור. הוא מצויר ב-currentColor, ולכן הוא
 * מתלבן יחד עם הטקסט - אבל רק אם לא נקבע לו צבע משלו.
 */
.mv-scope .mv-btn--primary svg,
.mv-scope .mv-btn--accent svg,
.mv-scope .mv-chip.is-on svg,
.mv-scope .mvz-btn--primary svg {
	color: inherit;
	stroke: currentColor;
}

/*
 * סימן המיקוד על כפתור כחול. סימן המיקוד הכללי של האתר כהה, ועל
 * כחול לילה הוא נבלע. כאן הוא לבן עם טבעת כהה מסביבו, כדי שיישאר
 * נראה גם על רקע בהיר שמאחורי הכפתור.
 */
.mv-scope .mv-btn--primary:focus-visible,
.mv-scope .mv-btn--accent:focus-visible,
.mv-scope .mv-chip.is-on:focus-visible,
.mv-scope .mvz-btn--primary:focus-visible,
.mv-scope .mvs-mode[aria-pressed="true"]:focus-visible,
.mv-scope .mvs-nusach__opt.is-on:focus-visible,
.mv-scope .mvs-theme__opt[aria-checked="true"]:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
	box-shadow: 0 0 0 3px var(--mv-primary-600);
}

/* ---- הסידור בעמוד הבית ---- */
.mv-home__siddur { display: grid; gap: var(--mv-4); grid-template-columns: 1fr; }
@media ( min-width: 760px ) { .mv-home__siddur { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } }
.mv-home__siddur-now { display: flex; flex-direction: column; gap: var(--mv-2); align-items: flex-start; }
.mv-home__siddur-now:hover { text-decoration: none; }
.mv-home__siddur-title { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.mv-home__siddur-links { display: grid; gap: var(--mv-2); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media ( min-width: 560px ) { .mv-home__siddur-links { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---- חיפוש חכם ---- */
.mv-search--big .mv-search__input { min-height: 56px; font-size: 1.05rem; }

.mvc-answer {
	margin-top: var(--mv-6);
	padding: var(--mv-6);
	border-radius: var(--mv-r, 16px);
	background: linear-gradient( 160deg, var(--mv-primary) 0%, var(--mv-primary-700) 100% );
	color: #fff;
}
.mvc-answer[hidden] { display: none; }
.mvc-answer__t { margin: 0 0 var(--mv-3); font-size: clamp( 1.3rem, 4vw, 1.8rem ); font-weight: 700; line-height: 1.2; }
.mvc-answer__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mvc-answer__rows li { display: flex; justify-content: space-between; gap: var(--mv-3); font-size: .95rem; }
.mvc-answer__rows span { color: rgba(255,255,255,.75); }
.mvc-answer__rows b { font-weight: 700; text-align: end; }
.mvc-answer .mv-btn { margin-top: var(--mv-5); background: #fff; border-color: #fff; color: var(--mv-primary); }
.mvc-answer .mv-btn:hover { background: rgba(255,255,255,.9); color: var(--mv-primary-700); }

.mvc-sres { display: grid; gap: var(--mv-2); margin-top: var(--mv-6); }
.mvc-sres__i {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--mv-3);
	padding: var(--mv-4) var(--mv-5);
	border: 1px solid var(--mv-line); border-radius: 12px;
	background: var(--mv-surface, #fff); color: var(--mv-ink);
}
.mvc-sres__i:hover { border-color: var(--mv-primary-300); text-decoration: none; }
.mvc-sres__i small { color: var(--mv-ink-3); font-size: .8rem; white-space: nowrap; }

/* ---- קוד בתיעוד ---- */
.mv-code {
	margin: var(--mv-3) 0;
	padding: var(--mv-4);
	background: var(--mv-surface-2, #fafbfd);
	border: 1px solid var(--mv-line);
	border-radius: 12px;
	overflow-x: auto;
	font: 400 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--mv-ink-2);
}
.mv-code code { background: none; padding: 0; font: inherit; }
.mv-scope code { background: var(--mv-bg-2); padding: 1px 5px; border-radius: 5px; font-size: .88em; }
