@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=optional');

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  /* צבעים ראשיים */
  --color-navy:       #001f3f;
  --color-royal:      #00508c;
  --color-royal-grad: linear-gradient(135deg, #001f3f 0%, #00508c 100%);

  /* זהב */
  --color-gold-light: #e3c98d;
  --color-gold-dark:  #8a6d3b;
  --color-gold-metal: linear-gradient(135deg, #cbb57b 0%, #e8d7a8 25%, #cbb57b 50%, #a68a52 75%, #e8d7a8 100%);

  /* רקע */
  --color-bg-white:   #ffffff;
  --color-bg-offwhite:#f8fafc;

  /* טקסט */
  --color-text-dark:  #111827;
  --color-text-light: #ffffff;
  --color-text-muted: #6b7280;

  /* אפקטים */
  --shadow-card:  0 2px 20px rgba(0, 31, 63, 0.08);
  --shadow-hover: 0 8px 32px rgba(0, 31, 63, 0.16);
  --shadow-glow:  0 0 24px rgba(227, 201, 141, 0.35);

  /* ריווח */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

/* ─── בסיס לרכיבים שלנו בלבד ─────────────────────────────
   לא נוגעים ב-body או ב-* גלובלית: האתר מלא בעמודי אלמנטור
   קיימים, ורסט גלובלי ישבור אותם. כל כלל כאן מתחיל ב-.yafutzu- */

.yafutzu-site-header,
.yafutzu-site-footer,
.yafutzu-form {
	font-family: 'Rubik', sans-serif;
	direction: rtl;
	line-height: 1.7;
}

.yafutzu-site-header :focus-visible,
.yafutzu-site-footer :focus-visible,
.yafutzu-form :focus-visible {
	outline: 3px solid var(--color-gold-light);
	outline-offset: 2px;
}

/* ─── טופס פניות ───────────────────────────────────────── */
.yafutzu-form {
	max-width: 34rem;
	margin-inline: auto;
	background: var(--color-bg-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
}

.yafutzu-form__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: 1rem;
}

.yafutzu-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.yafutzu-form__row label {
	font-weight: 500;
	color: var(--color-navy);
}

.yafutzu-form__row input,
.yafutzu-form__row textarea {
	font: inherit;
	padding: 0.7rem 0.9rem;
	border: 1px solid #cbd5e1;
	border-radius: var(--radius-sm);
	background: var(--color-bg-white);
	color: var(--color-text-dark);
	width: 100%;
}

.yafutzu-form__row input[aria-invalid="true"],
.yafutzu-form__row textarea[aria-invalid="true"] {
	border-color: #b42318;
	border-width: 2px;
}

.yafutzu-form__required {
	color: #b42318;
}

.yafutzu-form__error {
	color: #b42318;
	font-size: 0.9rem;
	font-weight: 500;
}

.yafutzu-form__errors {
	background: #fef3f2;
	border-right: 4px solid #b42318;
	border-radius: var(--radius-sm);
	padding: 1rem 1.1rem;
	margin-bottom: 1.25rem;
}

.yafutzu-form__errors-title {
	font-weight: 700;
	color: #b42318;
	margin-bottom: 0.4rem;
}

.yafutzu-form__errors ul {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.yafutzu-form__errors a {
	color: #912018;
}

.yafutzu-form__success {
	background: #ecfdf3;
	border-right: 4px solid #027a48;
	border-radius: var(--radius-sm);
	padding: 1rem 1.1rem;
	margin-bottom: 1.25rem;
	color: #05603a;
	font-weight: 500;
}

.yafutzu-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.yafutzu-form__consent input {
	margin-top: 0.35rem;
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
}

.yafutzu-form__consent label {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	font-weight: 400;
}

.yafutzu-form__privacy {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: 1.25rem;
}

/* מלכודת הדבש: מוסתרת ויזואלית בלי display:none,
   כי חלק מהבוטים מדלגים על שדות עם display:none */
.yafutzu-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.yafutzu-form__submit {
	font: inherit;
	font-weight: 700;
	color: var(--color-text-light);
	background: var(--color-royal-grad);
	border: 0;
	border-radius: var(--radius-sm);
	padding: 0.85rem 2rem;
	cursor: pointer;
	width: 100%;
	min-height: 48px;
}

.yafutzu-form__submit:hover {
	box-shadow: var(--shadow-hover);
}

/* ─── קישור דילוג ──────────────────────────────────────── */
/* מוסתר מעל גבול המסך ולא מהצד. הסתרה בצד (right: -9999px)
   נראית תמימה אבל יוצרת באתר RTL רוחב גלילה של כעשרת אלפים
   פיקסל בכל עמוד, כלומר פס גלילה אופקי בכל האתר. גלישה מעל
   הגבול העליון לעומת זאת אינה ניתנת לגלילה בשום דפדפן, ולכן
   היא הדרך הבטוחה להסתיר בלי לשבור את העמוד. */
.yafutzu-skip-link {
	position: absolute;
	inset-inline-start: 1rem;
	top: -6rem;
	z-index: 1000;
	background: var(--color-navy);
	color: var(--color-text-light);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.yafutzu-skip-link:focus {
	top: 0;
}

/* ─── כותרת עליונה ─────────────────────────────────────── */
.yafutzu-site-header {
	background: var(--color-bg-white);
	box-shadow: var(--shadow-card);
	position: relative;
	z-index: 100;
}

.yafutzu-site-header__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0.85rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.yafutzu-site-header__brand {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.yafutzu-site-header__name {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-navy);
}

.yafutzu-site-header img {
	max-height: 48px;
	width: auto;
}

.yafutzu-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.yafutzu-nav__list a {
	text-decoration: none;
	color: var(--color-navy);
	font-weight: 500;
	padding: 0.5rem 0;
	display: inline-block;
}

.yafutzu-nav__list a:hover,
.yafutzu-nav__list a[aria-current="page"] {
	border-bottom: 2px solid var(--color-gold-dark);
}

/* ─── תפריט נפתח ───────────────────────────────────────────
   אותה פילוסופיה כמו התפריט לנייד: בלי JS הרשימה פשוט פתוחה
   וכל הקישורים זמינים. הקיפול מתחיל רק אחרי ש-nav.js סימן
   שהוא נטען, כדי שתקלת JS לא תסתיר חצי מהאתר. */
.yafutzu-nav__item--has-children {
	position: relative;
}

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

/* הכפתור נראה בדיוק כמו קישור בתפריט, כי מבחינת המשתמש
   זה אותו דבר. ההבדל הוא רק במה שקורא מסך מכריז. */
.yafutzu-nav__sub-toggle {
	font: inherit;
	font-weight: 500;
	color: var(--color-navy);
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0.5rem 0;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
}

/* reset.css של Hello Elementor צובע כל button בוורוד (#c36) ברגע
   שמרחפים עליו או ממקדים אותו. הכלל שלו הוא button:hover, שגובר על
   מחלקה בודדת, ולכן חייבים להצהיר כאן במפורש ולא רק במצב הרגיל.
   בלי זה פריט התפריט קופץ לוורוד מלא בכל מעבר עכבר. */
.yafutzu-nav__sub-toggle:hover,
.yafutzu-nav__sub-toggle:focus,
.yafutzu-nav__item--current-parent > .yafutzu-nav__sub-toggle {
	background: transparent;
	color: var(--color-navy);
	border-bottom-color: var(--color-gold-dark);
}

.yafutzu-nav__chevron {
	width: 0;
	height: 0;
	border-inline: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.yafutzu-nav__chevron {
		transition: none;
	}
}

.yafutzu-nav__sub-toggle[aria-expanded="true"] .yafutzu-nav__chevron {
	transform: rotate(180deg);
}

.yafutzu-js .yafutzu-nav__sub {
	display: none;
}

.yafutzu-js .yafutzu-nav__item--has-children.is-open > .yafutzu-nav__sub {
	display: block;
}

.yafutzu-nav-toggle {
	display: none;
}

/* מרחף מעל התוכן במסך רחב בלבד. בנייד הוא נפתח בתוך הזרימה,
   כי פאנל צף על מסך צר מסתיר את מה שמתחתיו. */
@media (min-width: 783px) {
	.yafutzu-js .yafutzu-nav__item--has-children.is-open > .yafutzu-nav__sub {
		position: absolute;
		inset-inline-start: 0;
		top: 100%;
		z-index: 200;
		min-width: 14rem;
		background: var(--color-bg-white);
		box-shadow: var(--shadow-hover);
		border-radius: var(--radius-sm);
		padding: 0.5rem 0;
	}

	.yafutzu-nav__sub a {
		display: block;
		padding: 0.6rem 1rem;
		white-space: nowrap;
	}

	.yafutzu-nav__sub a:hover,
	.yafutzu-nav__sub a[aria-current="page"] {
		border-bottom: 0;
		background: var(--color-bg-offwhite);
		color: var(--color-royal);
	}
}

/* התפריט מתקפל לנייד רק כשה-JS נטען. בלי JS הוא נשאר פתוח וזמין,
   ולא נעלם עם כפתור שאי אפשר ללחוץ עליו. */
@media (max-width: 782px) {
	.yafutzu-js .yafutzu-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font: inherit;
		font-weight: 500;
		color: var(--color-navy);
		background: transparent;
		border: 1px solid #cbd5e1;
		border-radius: var(--radius-sm);
		padding: 0.6rem 1rem;
		min-height: 44px;
		cursor: pointer;
	}

	.yafutzu-nav-toggle__bars,
	.yafutzu-nav-toggle__bars::before,
	.yafutzu-nav-toggle__bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: var(--color-navy);
		content: '';
	}

	.yafutzu-nav-toggle__bars::before {
		transform: translateY(-6px);
	}

	.yafutzu-nav-toggle__bars::after {
		transform: translateY(4px);
	}

	.yafutzu-js .yafutzu-nav {
		display: none;
		width: 100%;
	}

	.yafutzu-js .yafutzu-nav.is-open {
		display: block;
	}

	.yafutzu-nav__list {
		flex-direction: column;
		gap: 0.25rem;
		padding-top: 0.75rem;
	}

	.yafutzu-nav__list a {
		padding: 0.75rem 0;
		min-height: 44px;
	}

	/* בנייד הכפתור תופס שורה מלאה והחץ נדחף לקצה,
	   כדי ששטח הלחיצה יהיה כל השורה ולא רק המילה. */
	.yafutzu-nav__sub-toggle {
		width: 100%;
		justify-content: space-between;
		padding: 0.75rem 0;
		min-height: 44px;
	}

	.yafutzu-nav__sub {
		padding-inline-start: 1rem;
		border-inline-start: 2px solid #e2e8f0;
		margin-block-end: 0.25rem;
	}
}

/* ─── פוטר ─────────────────────────────────────────────── */
.yafutzu-site-footer {
	background: var(--color-navy);
	color: var(--color-text-light);
	margin-top: 3rem;
}

.yafutzu-site-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 2.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	text-align: center;
}

.yafutzu-site-footer__brand {
	font-size: 1.15rem;
	font-weight: 700;
}

.yafutzu-site-footer__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	flex-wrap: wrap;
}

.yafutzu-site-footer a {
	/* לבן מלא על הכחול העמוק: יחס ניגודיות מעל 12:1 */
	color: var(--color-text-light);
	text-decoration: underline;
}

.yafutzu-site-footer__note,
.yafutzu-site-footer__copy {
	font-size: 0.9rem;
	/* לא משתמשים ב-color-text-muted כאן: אפור על כחול כהה
	   יורד מתחת ל-4.5:1 ונופל בבדיקת נגישות. */
	opacity: 0.9;
}

/* ─── כותרת ראשית מושלמת ───────────────────────────────── */
.yafutzu-page-title {
	font-family: 'Rubik', sans-serif;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-navy);
	margin: 0 0 1.25rem;
}

/* מוסתרת מהעין אך נשארת לקוראי מסך ולמנועי חיפוש.
   שימוש רק בעמודים שהעיצוב שלהם כבר כולל כותרת ויזואלית
   שאינה H1: הטקסט זהה למה שרואים, ולכן זו לא הסתרה מטעה. */
.yafutzu-page-title--visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}