/**
 * Contact Us page — "יצירת קשר" (slug: contact-us).
 *
 * Layout (desktop, from Figma node 750:24891):
 *   ┌────────────────────────────────────────────────────────────┐
 *   │ [form column]            │   │   • יצירת קשר ──────────────│
 *   │   שם מלא                 │   │                              │
 *   │   טלפון                  │   │   נתקלתם בתקלות בגלישה?…    │
 *   │   מייל                   │   │                              │
 *   │   הודעה (textarea)       │   │                              │
 *   │   [✓] תנאי שימוש        │   │   טלפון                      │
 *   │   [    שליחה    ]       │   │   072-393-8016        [📞]   │
 *   │                          │   │   מייל למשלוח חומרים          │
 *   │                          │   │   news@hm-news.co.il  [✉]   │
 *   └────────────────────────────────────────────────────────────┘
 *
 *   1326px container (left form column flex:1, right info column 594px), gap 40px.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Page container
   ========================================================================== */

.hm-contact {
	background-color: var(--hm-color-bg);
	padding-block-start: 80px;
	padding-block-end: 150px;
}

.hm-contact__inner {
	padding-inline: var(--hm-container-padding);
}

/* ==========================================================================
   Two-column layout
   In RTL: DOM order = info first (right), form second (left).
   ========================================================================== */

.hm-contact__layout {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Info column — fixed 594px right side */
.hm-contact__info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-shrink: 0;
	width: 594px;
	min-height: 611px;
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
}

/* Intro wrapper (header + lede) — kept tight, methods cling to the bottom */
.hm-contact__intro {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
}

/* Form column — fills remaining left side */
.hm-contact__form {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ==========================================================================
   Heading row — title + decorative red dot + divider line
   ========================================================================== */

.hm-contact__header {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	width: 100%;
}

.hm-contact__title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-weight: 900;
	font-size: 55px;
	line-height: 51px;
	text-align: start;
	white-space: nowrap;
}

.hm-contact__title-text {
	display: inline-block;
}

.hm-contact__title-dot {
	display: inline-flex;
	align-items: flex-end;
}

.hm-contact__title-dot svg {
	display: block;
	width: 19.354px;
	height: 19.354px;
}

.hm-contact__title-line {
	flex: 1;
	display: block;
	height: 0;
	margin-block-end: 9px; /* matches Figma's 9px py wrapper */
	border-block-start: 0.6px solid rgba(33, 33, 33, 0.25);
}

/* ==========================================================================
   Lede paragraph
   ========================================================================== */

.hm-contact__lede {
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22.115px;
	text-align: start;
	margin-left: 50px;
}

.hm-contact__lede p {
	margin: 0;
}

.hm-contact__lede p + p {
	margin-top: 0; /* paragraphs flow naturally; first paragraph is one line */
}

.hm-contact__lede-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hm-contact__lede-link:hover {
	color: var(--hm-color-link);
}

/* ==========================================================================
   Contact methods (bottom of info column) — text + icon buttons
   ========================================================================== */

.hm-contact__methods {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.hm-contact__method-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL flex-start = right — text right-aligned */
	gap: 0;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 32px;
	line-height: 1;
	color: var(--hm-color-primary);
}

.hm-contact__method {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: align right */
	gap: 0;
}

.hm-contact__method + .hm-contact__method {
	margin-block-start: 32px;
}

.hm-contact__method-label {
	margin: 0;
	font-weight: 300;
	font-size: 32px;
	line-height: 1;
	text-align: start;
}

.hm-contact__method-value {
	margin: 0;
}

.hm-contact__method-link {
	display: inline-block;
	color: inherit;
	font-weight: 300;
	font-size: 32px;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
	unicode-bidi: isolate;
}

.hm-contact__method-link:hover {
	color: var(--hm-color-link);
}

/* Icon buttons column */
.hm-contact__icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-shrink: 0;
	width: 46px;
	min-height: 142px;
	margin-block-start: 13.36px; /* vertical offset to align with the underlined values */
}

.hm-contact__icon-item {
	display: block;
}

.hm-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46.18px;
	height: 46.18px;
	background-color: var(--hm-color-primary);
	border-radius: 50%;
	color: #ffffff;
	transition: opacity var(--hm-transition-fast), transform var(--hm-transition-fast);
}

.hm-contact__icon:hover,
.hm-contact__icon:focus-visible {
	opacity: 0.9;
	color: #ffffff;
}

.hm-contact__icon:active {
	transform: scale(0.96);
}

.hm-contact__icon-svg {
	display: block;
	flex-shrink: 0;
}

/* ==========================================================================
   Form inputs
   ========================================================================== */

.hm-contact__honeypot {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.hm-contact__field {
	display: block;
	width: 100%;
}

.hm-contact__field--message {
	flex: 1;
	min-height: 0;
	display: flex;
}

.hm-contact__input,
.hm-contact__textarea {
	width: 100%;
	background-color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 21px 24px;
	direction: rtl;
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-size: 22px;
	font-weight: 300;
	line-height: 22px;
	text-align: start; /* RTL: logical start = right edge */
	outline: none;
	transition: box-shadow var(--hm-transition-fast), background-color var(--hm-transition-fast);
}

.hm-contact__input {
	height: 64px;
	min-height: 64px;
}

.hm-contact__textarea {
	flex: 1;
	min-height: 244px;
	resize: vertical;
}

.hm-contact__input::placeholder,
.hm-contact__textarea::placeholder {
	color: rgba(33, 33, 33, 0.5);
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 22px;
}

.hm-contact__input:focus,
.hm-contact__textarea:focus {
	box-shadow: 0 0 0 2px rgba(255, 23, 62, 0.25);
}

.hm-contact__input:user-invalid,
.hm-contact__textarea:user-invalid {
	box-shadow: 0 0 0 2px rgba(255, 23, 62, 0.45);
}

/* ==========================================================================
   Terms row — same look + text as the footer checkbox
   ========================================================================== */

.hm-contact__terms {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-block-start: 4px;
	cursor: pointer;
}

/* Checkbox visual — intentionally matches the footer contact form
   (round white pill that becomes a red pill with a white check when ticked) so
   editors don't see two divergent terms-acceptance UIs on the same site. */
.hm-contact__checkbox-wrap {
	flex-shrink: 0;
	padding-block-start: 3px;
}

.hm-contact__checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.hm-contact__checkbox-visual {
	display: block;
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	border: 1px solid rgba(33, 33, 33, 0.25);
	border-radius: 50%;
	transition: background-color var(--hm-transition-fast), box-shadow var(--hm-transition-fast), border-color var(--hm-transition-fast);
}

.hm-contact__checkbox:checked + .hm-contact__checkbox-visual {
	background-color: var(--hm-color-accent);
	border-color: var(--hm-color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10L9 13L14 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.hm-contact__checkbox:focus-visible + .hm-contact__checkbox-visual {
	box-shadow: 0 0 0 3px rgba(255, 23, 62, 0.4);
}

.hm-contact__terms-text {
	flex: 1;
	min-width: 0;
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 25px;
	text-align: start;
	unicode-bidi: isolate;
}

.hm-contact__terms-link {
	color: var(--hm-color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hm-contact__terms-link:hover {
	color: var(--hm-color-primary);
}

/* ==========================================================================
   Submit button
   ========================================================================== */

.hm-contact__submit {
	position: relative;
	width: 100%;
	height: 64px;
	background-color: var(--hm-color-accent);
	border: none;
	border-radius: 10px;
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 22px;
	cursor: pointer;
	transition: opacity var(--hm-transition-fast);
}

.hm-contact__submit:hover {
	opacity: 0.92;
}

.hm-contact__submit:active {
	opacity: 0.82;
}

.hm-contact__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.hm-contact__submit-loading {
	display: none;
}

.hm-contact__submit--loading .hm-contact__submit-text {
	visibility: hidden;
}

.hm-contact__submit--loading .hm-contact__submit-loading {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	border: 3px solid rgba(33, 33, 33, 0.25);
	border-top-color: var(--hm-color-primary);
	border-radius: 50%;
	animation: hm-contact-spin 0.6s linear infinite;
}

@keyframes hm-contact-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==========================================================================
   Response message
   ========================================================================== */

.hm-contact__form-message {
	margin: 0;
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	text-align: start;
	border-radius: 8px;
	padding: 0;
	transition: padding var(--hm-transition-fast);
}

.hm-contact__form-message:empty {
	display: none;
}

.hm-contact__form-message--success {
	color: #166534;
	background-color: rgba(34, 197, 94, 0.12);
	padding: 12px 16px;
}

.hm-contact__form-message--error {
	color: #b91c1c;
	background-color: rgba(239, 68, 68, 0.10);
	padding: 12px 16px;
}

/* ==========================================================================
   Responsive — small desktop / tablet
   ========================================================================== */

@media (max-width: 1199px) {
	.hm-contact__info {
		width: 480px;
		min-height: auto;
	}

	.hm-contact__title {
		font-size: 44px;
		line-height: 42px;
	}

	.hm-contact__method-list,
	.hm-contact__method-label,
	.hm-contact__method-link {
		font-size: 26px;
	}
}

@media (max-width: 1023px) {
	.hm-contact {
		padding-block-start: 56px;
		padding-block-end: 96px;
	}

	.hm-contact__layout {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.hm-contact__info {
		width: 100%;
		min-height: 0;
	}

	.hm-contact__header {
		gap: 12px;
	}

	.hm-contact__title {
		font-size: 40px;
		line-height: 38px;
	}

	.hm-contact__lede {
		max-width: 100%;
	}

	.hm-contact__methods {
		gap: 20px;
	}

	.hm-contact__icons {
		min-height: 130px;
	}

	.hm-contact__textarea {
		min-height: 180px;
	}
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */

@media (max-width: 767px) {
	.hm-contact {
		padding-block-start: 32px;
		padding-block-end: 64px;
	}

	.hm-contact__layout {
		gap: 32px;
	}

	.hm-contact__header {
		gap: 10px;
	}

	.hm-contact__title {
		font-size: 32px;
		line-height: 30px;
	}

	.hm-contact__title-dot svg {
		width: 14px;
		height: 14px;
	}

	.hm-contact__title-line {
		margin-block-end: 6px;
	}

	.hm-contact__lede {
		font-size: 15px;
		line-height: 21px;
	}

	.hm-contact__methods {
		gap: 16px;
		padding-top: 20px;
	}

	.hm-contact__method-list,
	.hm-contact__method-label,
	.hm-contact__method-link {
		font-size: 22px;
	}

	.hm-contact__method + .hm-contact__method {
		margin-block-start: 24px;
	}

	.hm-contact__icons {
		width: 40px;
		min-height: 110px;
	}

	.hm-contact__icon {
		width: 40px;
		height: 40px;
	}

	.hm-contact__icon-svg {
		width: 16px;
		height: 16px;
	}

	.hm-contact__input,
	.hm-contact__textarea {
		font-size: 16px;
		padding: 18px 20px;
		line-height: 22px;
	}

	.hm-contact__input::placeholder,
	.hm-contact__textarea::placeholder {
		font-size: 16px;
	}

	.hm-contact__input {
		height: 56px;
		min-height: 56px;
	}

	.hm-contact__textarea {
		min-height: 192px;
	}

	.hm-contact__submit {
		height: 56px;
		font-size: 18px;
	}
}