/**
 * א.ב בנדל״ן - רכיבי ממשק.
 *
 * קובץ שלישי, ולא הרחבה של main או pages: חומת האש של השרת חותכת
 * קבצים שחוצים 32KB, ושני הקבצים האחרים כבר קרובים לגבול.
 * נטען אחריהם ולכן מנצח בקסקייד.
 */

/* ---- רצועת הקישורים החיצוניים ---- */
/*
 * קנבס הגלים בפוטר ממוקם absolute, ולכן הוא נצבע מעל התוכן ולא
 * מתחתיו. בלי המחלקה הזאת הפסים חוצים את רצועת הקישורים ואת שורת
 * התחתית ובולעים אותן.
 */
.ft .wrap { position: relative; z-index: 1; }

.ft-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 34px;
	/* מורמת מאזור הגלים: קרובה לתפריטים, רחוקה משורת התחתית */
	margin-top: clamp(20px, 2.4vw, 30px);
	margin-bottom: clamp(46px, 5.5vw, 76px);
	padding: 20px clamp(16px, 2.2vw, 26px);
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(159, 176, 204, .2);
	/* זווית הגג, כמו שאר הרכיבים */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.xlbl {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(159, 176, 204, .62);
}
.xchips, .xicons { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }

/* מדל״ן, יד2 וגוב נדל״ן: שם ולא סמל, כי אין להם סמל מוכר */
.xchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--on-navy-dim);
	border: 1px solid rgba(159, 176, 204, .26);
	/* זווית הגג, המוטיב החוזר של האתר */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 11px 100%, 0 calc(100% - 11px));
	transition: color .22s, border-color .22s, background .22s;
}
.xchip svg { width: 13px; height: 13px; opacity: .5; transition: opacity .22s; }
.xchip:hover { color: #fff; border-color: var(--window); background: rgba(34, 168, 216, .1); }
.xchip:hover svg { opacity: 1; }

/* הרשתות: סמל בלבד, עם שם נגיש */
.xico {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--on-navy-dim);
	border: 1px solid rgba(159, 176, 204, .26);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
	transition: color .22s, border-color .22s, background .22s, transform .22s var(--ease);
}
.xico svg { width: 20px; height: 20px; }
.xico:hover {
	color: #fff;
	background: var(--roof);
	border-color: var(--roof);
	transform: translateY(-2px);
}
.xico:focus-visible { color: #fff; background: var(--roof); border-color: var(--roof); }

/* כלבו חיפה: לוגו מותג ולא סמל מצויר. מונוכרום כדי לא לשבור את
   השורה, וחוזר לצבע המלא במעבר עכבר. */
.xico-colbo img {
	/* קטן משאר הסמלים, כי הוא ריבוע מלא ולא קו והוא נראה כבד יותר */
	width: 24px;
	height: 24px;
	object-fit: contain;
	/* הלוגו הוא ריבוע ירוק מלא עם טקסט לבן. הבהרה שורפת אותו ללבן
	   על לבן, ולכן רק הסרת רוויה, שמשאירה את הטקסט קריא. */
	filter: grayscale(1);
	opacity: .85;
	transition: filter .22s, opacity .22s;
}
.xico-colbo:hover,
.xico-colbo:focus-visible { background: #fff; border-color: #fff; }
.xico-colbo:hover img,
.xico-colbo:focus-visible img { filter: none; opacity: 1; }

@media (max-width: 700px) {
	.ft-strip { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 40px; }
	.xchips, .xicons { width: 100%; }
	.xlbl { width: 100%; }
}

/* ממלא מקום לסוכן שקובץ התמונה שלו חסר, במקום ריבוע שבור */
.agent-ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.agent-ph b {
	font-family: var(--f-d);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .82);
}
/* בכרטיס הנכס הוא לובש את מידות התמונה שהוא מחליף */
.prop-agent .agent-ph { width: 56px; height: 56px; flex: none; }
.prop-agent .agent-ph b { font-size: 18px; }

/*
 * פקדי הזום של Leaflet מגיעים ב-30px, קטן מדי למגע. הבורר של
 * Leaflet הוא .leaflet-touch .leaflet-bar a והוא נטען אחרי הקובץ
 * הזה, ולכן סגוליות זהה מפסידה. מוסיפים מחלקה שלישית.
 */
.leaflet-touch .leaflet-bar a.leaflet-control-zoom-in,
.leaflet-touch .leaflet-bar a.leaflet-control-zoom-out,
.leaflet-bar a.leaflet-control-zoom-in,
.leaflet-bar a.leaflet-control-zoom-out { width: 38px; height: 38px; line-height: 36px; font-size: 20px; }

/*
 * כפתור שליחה שמוסתר לקורא מסך בלבד צריך לחזור להיראות כשמגיעים
 * אליו במקלדת, אחרת המשתמש מאבד את המיקוד על ריבוע של פיקסל אחד.
 */
.sr-only:focus,
.sr-only:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	clip: auto;
	overflow: visible;
	background: var(--navy);
	color: #fff;
	font-weight: 600;
}