/**
 * "בואו נדבר" contact section (`.av-contact`): the home page's section 9, also used at the end of the
 * service pages (client request, 2026-10-07). Moved here unchanged from home.css so both share one copy;
 * loaded with home.css on the front page and with service.css on service pages.
 *
 * Same scale system as home.css: the section is a size container and every Figma px value is
 * calc(N * var(--s)), with --s = min(1px, 100cqw / 1325) on desktop and min(1.25px, 100cqw / 402) at ≤1023.
 */

/* ==========================================================================
   Section 9 — contact (Figma "9" 70:1844 / mobile "iPhone 17 - 11" 70:1218)
   Native Elementor Pro Form arranged with CSS grid; a gold 6px frame that breaks where the
   submit button crosses its right edge; social links (icon list).
   Positions are measured from the section centre (--cx), like section 2.
   ========================================================================== */
.av-contact.e-con {
	--s: min(1px, calc(100cqw / 1325));
	--cx: 662.5;
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	overflow: hidden;
	--e-global-typography-primary-font-size: calc(120 * var(--s));
	--e-global-typography-primary-line-height: calc(80 * var(--s));
	--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
	--e-global-typography-accent-font-size: calc(30 * var(--s));
	--e-global-typography-accent-line-height: calc(20 * var(--s));
	--e-global-typography-accent-letter-spacing: calc(-1.6 * var(--s));
}

.av-contact.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-contact.e-con > .elementor-element {
	max-width: none;
}

.av-contact.e-con > .av-at,
.av-contact .av-contact__decor span {
	left: calc(50% + (var(--x) - var(--cx)) * var(--s));
	top: calc(var(--y) * var(--s));
	width: calc(var(--w) * var(--s));
}

.av-contact__title { --x: 634; --y: 57; --w: 533.5; text-align: center; }
.av-contact__intro { --x: 201; --y: 72; --w: 452; text-align: right; }
.av-contact__intro p { margin: 0; }

/* Gold frame: 6px lines from the Figma line coordinates, joined as a clean rectangle. Figma's lines
   are centred strokes that overshoot each other by up to 3px at the corners (invisible in Figma,
   jagged in the browser), so every line runs edge to edge of the same outer box instead. The right
   side breaks where the submit button crosses it. */
.av-contact.e-con > .av-contact__decor {
	inset: 0;
	pointer-events: none;
}

.av-contact__decor span {
	position: absolute;
	height: calc(var(--h) * var(--s));
	background: var(--e-global-color-primary);
}

.av-contact__line--top { --x: 226; --y: 181; --w: 874; --h: 6; }
.av-contact__line--left { --x: 226; --y: 181; --w: 6; --h: 337; }
.av-contact__line--bottom { --x: 226; --y: 512; --w: 874; --h: 6; }
.av-contact__line--right { --x: 1094; --y: 181; --w: 6; --h: 263; }
.av-contact__line--right2 { --x: 1094; --y: 490; --w: 6; --h: 28; }

/* Form: inputs column (right) + message (left, spans the 3 inputs), consent, submit. */
.av-contact__form { --x: 243; --y: 196; --w: 840; z-index: 1; }

.av-contact__form .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: calc(376 * var(--s)) calc(412 * var(--s));
	column-gap: calc(52 * var(--s));
	margin: 0;
}

.av-contact__form .elementor-field-group {
	width: auto;
	margin: 0;
	padding: 0;
}

.av-contact__form .elementor-field-group-name { grid-column: 1; grid-row: 1; }
.av-contact__form .elementor-field-group-email { grid-column: 1; grid-row: 2; margin-top: calc(22 * var(--s)); }
.av-contact__form .elementor-field-group-phone { grid-column: 1; grid-row: 3; margin-top: calc(22 * var(--s)); }
.av-contact__form .elementor-field-group-message { grid-column: 2; grid-row: 1 / span 3; }
.av-contact__form .elementor-field-group-consent { grid-column: 1 / -1; grid-row: 4; margin-top: calc(12 * var(--s)); }
.av-contact__form .elementor-field-type-submit { grid-column: 1 / -1; grid-row: 5; margin-top: calc(18 * var(--s)); }

.av-contact__form .elementor-field-textual {
	height: calc(55 * var(--s));
	min-height: 0;
	padding: calc(15 * var(--s)) calc(2 * var(--s));
	border-width: 0 0 1px;
	border-radius: 0;
	background: transparent;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), Arial, sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	line-height: var(--e-global-typography-text-line-height);
}

.av-contact__form textarea.elementor-field-textual {
	height: 100%;
	padding-top: calc(15.8 * var(--s));
	resize: none;
}

.av-contact__form .elementor-field-textual::placeholder {
	color: #757575;
	opacity: 1;
}

/* Consent: 20px gold circle, text to its left (RTL). */
.av-contact__form .elementor-field-group-consent .elementor-field-subgroup {
	display: flex;
	justify-content: flex-start;
	padding-right: calc(3 * var(--s));
}

.av-contact__form .elementor-field-group-consent .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: calc(5 * var(--s));
	margin: 0;
}

.av-contact__form .elementor-field-group-consent .elementor-field-option input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: calc(20 * var(--s));
	height: calc(20 * var(--s));
	margin: 0;
	padding: 0;
	border: 1px solid var(--e-global-color-primary);
	border-width: 1px;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.av-contact__form .elementor-field-group-consent .elementor-field-option input[type="checkbox"]:checked {
	background: radial-gradient(circle, var(--e-global-color-primary) 0 42%, transparent 46%);
}

.av-contact__form .elementor-field-group-consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

.av-contact__form .elementor-field-group-consent .elementor-field-option label {
	width: calc(475 * var(--s));
	margin: 0;
	padding: 0;
	color: rgba(43, 44, 43, 0.46);
	font-family: var(--e-global-typography-text-font-family), Arial, sans-serif;
	font-size: calc(18 * var(--s));
	line-height: calc(20 * var(--s));
	text-align: right;
	cursor: pointer;
}

/* Submit: right-aligned, crossing the frame by 32px (Figma). */
.av-contact__form .elementor-field-type-submit {
	justify-self: start;
	margin-right: calc(-32 * var(--s));
}

.av-contact__form .elementor-field-type-submit .elementor-button {
	width: auto;
	min-height: 0;
	padding: calc(6.4 * var(--s)) calc(8 * var(--s));
	font-size: calc(16 * var(--s));
	line-height: calc(16 * var(--s));
}

.av-contact__form .elementor-message {
	margin-top: calc(10 * var(--s));
	font-size: calc(16 * var(--s));
}

/* Social links: one row on desktop, icon on the right of each label. */
.av-contact.e-con > .av-contact__social {
	top: calc(541 * var(--s));
	right: calc(50% - 322.5 * var(--s));
}

/* Figma frames 55–58, exactly: each item = text, gap, icon (icon on the right), the icon a few px
   below the text top. Per item (LinkedIn, Instagram, Facebook, mail): width 99/133/107/75, gap to
   the next item 61/68/69, icon–text gap 14/16/11/10, icon drop 2/3/3/4. Elementor's own icon margin
   and text padding are removed so these numbers are the only spacing. */
.elementor-widget.av-contact__social .elementor-icon-list-items {
	display: flex;
	gap: 0;
	margin: 0; /* Elementor's inline lists pull the list sideways by half the item spacing */
}

.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item {
	--w: 99;
	--after: 61;
	--gap: 14;
	--drop: 2;
	--icon: 19;
	flex: 0 0 auto;
	width: calc(var(--w) * var(--s));
	margin: 0 0 0 calc(var(--after) * var(--s));
	padding: 0;
}

.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item:nth-child(2) { --w: 133; --after: 68; --gap: 16; --drop: 3; --icon: 21; }
.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item:nth-child(3) { --w: 107; --after: 69; --gap: 11; --drop: 3; }
.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item:nth-child(4) { --w: 75; --after: 0; --gap: 10; --drop: 4; }

.av-contact__social .elementor-icon-list-item > a,
.av-contact__social .elementor-icon-list-item {
	align-items: flex-start;
	gap: calc(var(--gap) * var(--s));
	color: var(--e-global-color-primary);
}

.av-contact__social .elementor-icon-list-icon {
	margin: calc(var(--drop) * var(--s)) 0 0;
	padding: 0;
}

.elementor-widget.av-contact__social .elementor-icon-list-icon svg {
	display: block;
	width: calc(var(--icon) * var(--s));
	height: calc(var(--icon) * var(--s));
	margin: 0;
	fill: var(--e-global-color-primary);
}

.elementor-widget.av-contact__social .elementor-icon-list-icon + .elementor-icon-list-text {
	align-self: flex-start;
	padding: 0;
}

@media (max-width: 1023px) {
	.av-contact.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		--cx: 201;
		aspect-ratio: 402 / 842; /* ends 66px below the social links (Figma frame 874; tighter, user request) */
		max-height: calc(842 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
		--e-global-typography-primary-font-size: calc(52 * var(--s));
		--e-global-typography-primary-line-height: calc(44 * var(--s));
	}

	.av-contact__title { --x: 214; --y: 19; --w: 163; text-align: right; }
	.av-contact__intro { --x: 75; --y: 79; --w: 302; }

	.av-contact__line--top { --x: 37; --y: 188; --w: 340; --h: 6; }
	.av-contact__line--left { --x: 37; --y: 188; --w: 6; --h: 505; }
	.av-contact__line--bottom { --x: 37; --y: 687; --w: 340; --h: 6; }
	.av-contact__line--right { --x: 371; --y: 188; --w: 6; --h: 431; }
	.av-contact__line--right2 { --x: 371; --y: 667; --w: 6; --h: 26; }

	.av-contact__form { --x: 50; --y: 209.5; --w: 307; }

	.av-contact__form .elementor-form-fields-wrapper {
		grid-template-columns: 100%;
	}

	.av-contact__form .elementor-field-group-message {
		grid-column: 1;
		grid-row: 4;
		height: calc(150 * var(--s));
	}

	.av-contact__form .elementor-field-group-consent {
		grid-row: 5;
		margin-top: calc(4.5 * var(--s));
	}

	.av-contact__form .elementor-field-group-consent .elementor-field-subgroup {
		padding-right: 0;
	}

	.av-contact__form .elementor-field-group-consent .elementor-field-option {
		gap: calc(8 * var(--s));
	}

	.av-contact__form .elementor-field-group-consent .elementor-field-option input[type="checkbox"] {
		margin-top: calc(4.5 * var(--s));
	}

	.av-contact__form .elementor-field-group-consent .elementor-field-option label {
		width: calc(274 * var(--s));
	}

	.av-contact__form .elementor-field-type-submit {
		grid-row: 6;
		margin-top: calc(15 * var(--s));
		margin-right: calc(-17 * var(--s));
	}

	/* 2 × 2 grid: אינסטרגם | לינקדין over דואר | פייסבוק. */
	.av-contact.e-con > .av-contact__social {
		top: calc(717 * var(--s));
		right: calc(50% - 168 * var(--s));
	}

	/* Figma mobile: columns end at 369 / 175 (194 apart); row 2 starts 30 below (mail) and 33 below
	   (Facebook); icon–text gaps 10 / 11. */
	.elementor-widget.av-contact__social .elementor-icon-list-items {
		display: grid;
		grid-template-columns: calc(194 * var(--s)) calc(194 * var(--s));
		grid-template-rows: calc(30 * var(--s)) auto;
		gap: 0;
	}

	.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item {
		width: auto;
		margin: 0;
	}

	.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item:nth-child(1) { --gap: 11; }
	.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item:nth-child(2) { --gap: 10; }
	.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item:nth-child(3) { --gap: 11; margin-top: calc(3 * var(--s)); }
	.elementor-widget.av-contact__social .elementor-icon-list-items .elementor-icon-list-item:nth-child(4) { --gap: 10; }

	.av-contact__social .elementor-icon-list-item:nth-child(1) { order: 2; }
	.av-contact__social .elementor-icon-list-item:nth-child(2) { order: 1; }
	.av-contact__social .elementor-icon-list-item:nth-child(3) { order: 4; }
	.av-contact__social .elementor-icon-list-item:nth-child(4) { order: 3; }
}

/* TABLET (768–1023px): the section flows at full width (6% gutters, text at a fixed 1.15 scale of the
   mobile sizes), like the other home sections (see the tablet block at the end of home.css). */
@media (min-width: 768px) and (max-width: 1023px) {
	.av-contact.e-con {
		--s: 1.15px;
		--G: max(32px, 6vw);
		aspect-ratio: auto;
		max-height: none;
		min-height: 0;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 72px var(--G) 80px;
	}

	.elementor.elementor .av-contact.e-con > .elementor-element {
		position: relative;
		inset: auto;
		width: auto;
		max-width: 100%;
		margin: 0;
		transform: none;
	}

	.av-contact__intro {
		max-width: 560px;
		margin-top: 14px !important;
	}

	/* ---- Contact: the form in two columns (as on desktop) inside a real 6px gold frame; the submit
	   button crosses its right edge, which breaks behind it (as in Figma). ---- */
	.av-contact.e-con > .av-contact__decor {
		display: none;
	}

	.elementor.elementor .av-contact.e-con > .av-contact__form {
		margin-top: 40px;
		padding: 26px 30px 30px;
		border: 6px solid var(--e-global-color-primary);
	}

	.av-contact__form .elementor-form-fields-wrapper {
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
	}

	.av-contact__form .elementor-field-group-message {
		grid-column: 2;
		grid-row: 1 / span 3;
		height: auto;
	}

	.av-contact__form .elementor-field-group-consent {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	.av-contact__form .elementor-field-group-consent .elementor-field-option label {
		width: auto;
	}

	.av-contact__form .elementor-field-type-submit {
		position: relative;
		grid-column: 1 / -1;
		grid-row: 5;
		margin-right: -46px; /* padding 30 + frame 6 + 10 beyond */
	}

	.av-contact__form .elementor-field-type-submit::before {
		content: "";
		position: absolute;
		top: -10px;
		bottom: -10px;
		right: 10px;
		width: 6px;
		background: #FFFFFF;
	}

	.elementor.elementor .av-contact.e-con > .av-contact__social {
		align-self: flex-start;
		margin-top: 36px;
	}
}