/*
 * contact.css — פס הפוטר וטופס הפנייה.
 *
 * צורך את הטוקנים של התבנית ולא מגדיר צבעים משלו. ערכי נפילה
 * בכל var() כדי שהרכיב לא יישבר אם הטוקנים לא נטענו (למשל בעמוד
 * שגיאה של וורדפרס).
 */

/* ══════════════════════════════════════════════════════════
   פס תחתון — כפתור הפנייה וקרדיט
   ══════════════════════════════════════════════════════════ */

/*
 * ⚠ הפס יושב אחרי </footer> ב-DOM (ראו Contact::render_footer).
 * הקו העליון והרקע הזהה הם מה שגורם לו להיקרא כשורה האחרונה של
 * הפוטר ולא כאלמנט נפרד שנשמט מתחתיו.
 */
.at-footer-bar {
	/*
	 * ⚠ position ו-z-index אינם קישוט — בלעדיהם הפס נעלם לגמרי.
	 *
	 * התבנית מציירת את האספלט בשלוש שכבות `position: fixed`
	 * (‎.at-road, .at-road-lum, .at-lane‎) שפרושות על כל החלון.
	 * הן `pointer-events: none`, ולכן הפס עדיין לחיץ ו-JS עדיין
	 * מוצא אותו — הוא פשוט מצויר **מתחת** לאספלט ולא נראה. באג
	 * שקשה לאתר: כל מדידה בקונסולה מחזירה ערכים תקינים.
	 *
	 * z-index: 4 הוא אותו ערך שהתבנית נותנת ל-main ול-.site-footer
	 * (ראו "התוכן מעל שכבות הכביש" ב-style.css). מספר גבוה יותר
	 * היה עובר גם מעל הכותרת הדביקה.
	 */
	position: relative;
	z-index: 4;
	border-top: 1px solid var(--hairline, rgba(255, 255, 255, .055));
	background: var(--bg-sunken, #101217);
}

.at-footer-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s, 1rem);
	max-width: var(--full-max, 78rem);
	margin-inline: auto;
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
}

/*
 * ── כפתור "צור קשר" ──
 *
 * ⚠ כל בורר של כפתור כאן מקדים מחלקת אב, וזה לא קישוט.
 *
 * reset.css של hello-elementor מגדיר:
 *     [type=button], [type=submit], button { border: 1px solid #c36; color: #c36 }
 *
 * בורר תכונה כמו [type=button] הוא ספציפיות 0,1,0 — **זהה** למחלקה
 * בודדת. במצב תיקו מנצח מי שנטען אחרון, ו-reset.css של תבנית האב
 * נטען אחרי גיליון התוסף. התוצאה הייתה כפתורים ורודים בלי רקע.
 *
 * מחלקת האב מעלה ל-0,2,0 ומסיימת את התחרות. !important היה פותר
 * גם הוא, אבל היה חוסם התאמות עתידיות מהתבנית.
 */
.at-footer-bar .at-contact-open {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs, .5rem);
	padding: .55rem 1.1rem;
	font-family: inherit;
	font-size: var(--step--1, .92rem);
	font-weight: 600;
	color: var(--accent, #f5cf45);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--accent, #f5cf45) 45%, transparent);
	border-radius: var(--radius-pill, 999px);
	cursor: pointer;
	transition:
		background-color var(--dur-fast, .15s) var(--ease-out, ease),
		border-color var(--dur-fast, .15s) var(--ease-out, ease);
}

.at-footer-bar .at-contact-open:hover {
	background: var(--accent-soft, rgba(245, 207, 69, .13));
	border-color: var(--accent, #f5cf45);
}

.at-footer-bar .at-contact-open:focus-visible {
	outline: 2px solid var(--accent, #f5cf45);
	outline-offset: 2px;
}

.at-footer-bar .at-contact-open svg {
	flex: none;
}

/* ── קרדיט ──
   באנגלית ולכן LTR מפורש: בהקשר עברי הדפדפן היה מסדר את
   "POWERED BY CUSTOMEDIA" מימין לשמאל ושובר את סדר המילים. */
.at-credit {
	margin: 0;
	direction: ltr;
	font-size: var(--step--2, .77rem);
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--text-faint, #808b9c);
	text-transform: uppercase;
}

.at-credit a {
	color: var(--text-muted, #a7b0bf);
	text-decoration: none;
	transition: color var(--dur-fast, .15s) var(--ease-out, ease);
}

.at-credit a:hover,
.at-credit a:focus-visible {
	color: var(--accent, #f5cf45);
}

/* ══════════════════════════════════════════════════════════
   התיבה
   ══════════════════════════════════════════════════════════ */

.at-contact {
	width: min(30rem, calc(100vw - 2rem));
	padding: 0;
	color: var(--text, #eef1f7);
	background: var(--bg-raised, #1b1f26);
	border: 1px solid var(--border, rgba(255, 255, 255, .09));
	border-radius: var(--radius-l, 14px);
	box-shadow: var(--shadow-md, 0 4px 20px -6px rgba(0, 0, 0, .6));
}

.at-contact::backdrop {
	background: rgba(8, 10, 13, .72);
	backdrop-filter: blur(2px);
}

.at-contact__form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 1rem);
	padding: var(--space-m, 1.5rem);
}

.at-contact .at-contact__close {
	position: absolute;
	inset-block-start: var(--space-xs, .75rem);
	inset-inline-end: var(--space-xs, .75rem);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	color: var(--text-faint, #808b9c);
	background: transparent;
	border: 0;
	border-radius: var(--radius-s, 4px);
	cursor: pointer;
}

.at-contact .at-contact__close:hover {
	color: var(--text, #eef1f7);
}

.at-contact .at-contact__close:focus-visible {
	outline: 2px solid var(--accent, #f5cf45);
	outline-offset: 1px;
}

.at-contact__title {
	margin: 0;
	font-size: var(--step-2, 1.77rem);
	font-weight: 700;
	line-height: var(--leading-tight, 1.15);
	letter-spacing: var(--tracking-tight, -.015em);
}

/* קו המדידה שמעל כותרות באתר — אותו מוטיב, כאן בזעיר */
.at-contact__title::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-bottom: var(--space-2xs, .5rem);
	background: var(--accent, #f5cf45);
	border-radius: 1px;
}

.at-contact__intro {
	max-width: none;
	margin: calc( var(--space-s, 1rem) * -0.5 ) 0 0;
	font-size: var(--step--1, .92rem);
	color: var(--text-muted, #a7b0bf);
}

/* ══════════════════════════════════════════════════════════
   שדות
   ══════════════════════════════════════════════════════════ */

.at-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs, .25rem);
}

.at-field__label {
	font-size: var(--step--1, .92rem);
	font-weight: 600;
	color: var(--text-muted, #a7b0bf);
}

.at-field input,
.at-field textarea {
	width: 100%;
	padding: .6rem .75rem;
	font-family: inherit;
	font-size: var(--step-0, 1.08rem);
	color: var(--text, #eef1f7);
	background: var(--bg-sunken, #101217);
	border: 1px solid var(--border, rgba(255, 255, 255, .09));
	border-radius: var(--radius-m, 8px);
	transition: border-color var(--dur-fast, .15s) var(--ease-out, ease);
}

.at-field textarea {
	resize: vertical;
	min-height: 5.5rem;
	line-height: var(--leading-snug, 1.35);
}

.at-field input:focus,
.at-field textarea:focus {
	outline: none;
	border-color: var(--accent, #f5cf45);
	box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 207, 69, .13));
}

.at-field.is-invalid input,
.at-field.is-invalid textarea {
	border-color: var(--sig-wear, #e8453c);
}

.at-field__error:empty {
	display: none;
}

.at-field__error {
	font-size: var(--step--2, .77rem);
	color: var(--sig-wear, #e8453c);
}

/*
 * ⚠ מלכודת הדבש מוסתרת ב-position ולא ב-display: none.
 *
 * בוטים מודרניים בודקים display ו-visibility ומדלגים על שדות
 * מוסתרים כך. הזזה אל מחוץ למסך משאירה את השדה "אמיתי" מבחינתם.
 * aria-hidden ו-tabindex="-1" בתגית מרחיקים אותו מקוראי מסך
 * וממקלדת.
 */
.at-contact__hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   שליחה ומצב
   ══════════════════════════════════════════════════════════ */

.at-contact .at-contact__submit {
	padding: .7rem 1.25rem;
	font-family: inherit;
	font-size: var(--step-0, 1.08rem);
	font-weight: 700;
	color: var(--bg-sunken, #101217);
	background: var(--accent, #f5cf45);
	border: 0;
	border-radius: var(--radius-m, 8px);
	cursor: pointer;
	transition: opacity var(--dur-fast, .15s) var(--ease-out, ease);
}

.at-contact .at-contact__submit:hover:not(:disabled) {
	opacity: .88;
}

.at-contact .at-contact__submit:disabled {
	opacity: .55;
	cursor: default;
}

.at-contact .at-contact__submit:focus-visible {
	outline: 2px solid var(--accent, #f5cf45);
	outline-offset: 2px;
}

.at-contact__status:empty {
	display: none;
}

.at-contact__status {
	margin: 0;
	max-width: none;
	font-size: var(--step--1, .92rem);
}

.at-contact__status.is-ok {
	color: var(--accent, #f5cf45);
}

.at-contact__status.is-error {
	color: var(--sig-wear, #e8453c);
}

/* ══════════════════════════════════════════════════════════
   מובייל
   ══════════════════════════════════════════════════════════ */

@media (max-width: 30rem) {
	.at-footer-bar__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.at-footer-bar .at-contact-open {
		justify-content: center;
	}
}

/* מכבדים העדפת תנועה מופחתת — אין אנימציית פתיחה מלכתחילה,
   אבל המעברים על ריחוף ופוקוס מיותרים כאן. */
@media (prefers-reduced-motion: reduce) {
	.at-footer-bar .at-contact-open,
	.at-credit a,
	.at-field input,
	.at-field textarea,
	.at-contact .at-contact__submit {
		transition: none;
	}
}