/* ================================================
   AMOTZ V4 — NEWSLETTER  "ידיעה מדעית אחת בשבוע"  (Figma 538:3478 §8)
   ================================================
   band    1440x479 · #0C0C0C · column · gap 50 · centred · padding 100/60
   glow    950x198 #F2B351 ellipse behind the copy
   head    title 54/65 centred #FFFFFF · sub 16/24 centred #ECC55A
   form    616x50 row, gap 16 · input (right) + gold button (left)
   consent 12/500 #ECC55A with a checkbox
   ================================================

   THE FORM IS STATIC MARKUP, BY INSTRUCTION. It is a real <form> with a real <input> and a
   real <label> so it looks and behaves correctly to a keyboard and a screen reader, but it
   posts nowhere. Wiring it to a mailing list is a separate decision — the destination
   (Mailchimp, ActiveCampaign, Elementor Pro Forms) has not been chosen.

   It is deliberately NOT a fake: no JS pretending to succeed, no disabled input. `action` is
   empty, so the honest state is "this control exists and does nothing yet" rather than a
   subscribe box that silently swallows addresses. */

.azh-news {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 50px;
	min-height: 479px;
	padding: 100px var(--az-edge);
	background-color: #0C0C0C;
	isolation: isolate;
	overflow: hidden;
}

/* The 950x198 #F2B351 ellipse. Blurred and behind everything — it is what stops the band
   being flat black. `pointer-events: none` or it would swallow clicks on the input. */
.azh-news__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 950px;
	max-width: 90%;
	height: 198px;
	/* The file: #F2B351 at 0.4 alpha under a LAYER_BLUR of 200. Both were guessed on the first
	   pass (0.55 / 110) and the band came out hotter and tighter than the design. */
	background-color: rgba(242, 179, 81, 0.4);
	border-radius: 50%;
	filter: blur(200px);
	pointer-events: none;
}

.azh-news__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 100%;
	max-width: 616px;
}

.azh-news__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	text-align: center;
}

.azh-news__title {
	margin: 0;
	font-size: 54px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: -1.144px;
	color: #FFFFFF;
}

.azh-news__sub {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #ECC55A;
}

/* ------------------------------------------------
   FORM
   ------------------------------------------------
   616x50, gap 16. The INPUT comes first in source so it lands on the right under RTL — the
   file puts the placeholder at x928 against the button label at x440. */
.azh-news__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 16px;
	width: 100%;
}

.azh-news__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.az-section .azh-news__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	/* 14/28 from the file, not an invented 0/24. */
	padding: 14px 28px;
	/* #FCFCF7, the cream — not pure white. It is a warm field on a black band and the
	   difference is visible. */
	background-color: #FCFCF7;
	border: 1px solid #FCFCF7;
	border-radius: 1000px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: right;
	color: #0C0C0C;
}

.az-section .azh-news__input::placeholder {
	color: #0C0C0C;
	opacity: 0.7;
}

.az-section .azh-news__input:focus-visible {
	outline: 2px solid #ECC55A;
	outline-offset: 2px;
}

.az-section .azh-news__submit {
	flex: none;
	height: 50px;
	padding: 0 28px;
	background-image: var(--az-gradient-gold);
	border: 0;
	border-radius: 1000px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	color: var(--az-on-gold);
	cursor: pointer;
	/* Kills the native button chrome that put a stray ring on a button earlier in this project. */
	appearance: none;
	-webkit-appearance: none;
}

/* ------------------------------------------------
   CONSENT
   ------------------------------------------------
   A real <label> wrapping a real checkbox, so the sentence is a click target and the control
   is announced properly.

   THE BOX IS ON THE RIGHT, not the left. The file puts the checkbox at x1012 against the text
   at x748 — so under RTL it is the FIRST child. The first build had this backwards.

   Its styling is the file's too: 16x16, r2.46, filled #3D5B34 with a white tick, drawn in the
   CHECKED state. `accent-color` gets the fill and the tick in one property. */
.azh-news__consent {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
	text-align: right;
	color: #ECC55A;
	cursor: pointer;
}

.az-section .azh-news__check {
	flex: none;
	width: 13px;
	height: 13px;
	width: 16px;
	height: 16px;
	accent-color: #3D5B34;
	border-radius: 2.46px;
	cursor: pointer;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 700px) {
	.azh-news {
		gap: 32px;
		min-height: 0;
		padding: 56px 20px;
	}

	.azh-news__inner { gap: 32px; }

	.azh-news__title {
		font-size: 32px;
		line-height: 1.15;
	}

	/* A 616px row holding an input and a button has no room to shrink further — stacked, the
	   button goes full width so it stays an obvious target. */
	.azh-news__row {
		flex-direction: column;
		align-items: stretch;
	}

	.az-section .azh-news__submit {
		width: 100%;
	}

	.azh-news__glow { display: none; }
}

/* ================================================
   ELEMENTOR FORM INTEGRATION
   ================================================
   The section can host an Elementor Pro Form instead of the built-in static markup, so that
   submissions, validation, and the Actions After Submit (Mailchimp, ActiveCampaign, email,
   webhook) are handled by Elementor rather than reinvented here.

   Elementor's own form styling is generic — square fields, its own button colours, a stacked
   layout. Everything below drags it onto the design: a 50px pill field, the gold pill button
   beside it rather than under it, and the consent checkbox on the left of its label.

   WHY SO MUCH !important. Elementor Pro's form stylesheet loads AFTER the plugin's and its
   selectors tie on specificity, so on a tie the later sheet wins and every layout rule below was
   silently discarded — the field and the button stacked, full width, exactly as Elementor draws
   them. The same tie was hit with the Pro nav menu. Only the layout properties carry it; colours
   and type do not need it.

   Scoped under .azh-news so it can never leak onto any other Elementor form on the site.
   The selectors are Elementor's public markup classes, which are stable across 3.x. */

.azh-news .elementor-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 16px;
	width: 100%;
}

/* Elementor lays field groups out in its own grid. Flatten it to the design's single row. */
.azh-news .elementor-form-fields-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 616px; /* the design's row */
	margin: 0 !important;
	padding: 0 !important;
}

.azh-news .elementor-field-group {
	padding: 0 !important;
	margin: 0 !important;
	/* Elementor gives every group the class elementor-col-100, which is a 100% width — that is
	   what stacked the button under the field. */
	width: auto !important;
	flex: 1 1 auto !important;
	min-width: 0;
}

/* The consent checkbox and the submit are not part of the input row — the checkbox drops to
   its own line under it, the button sits beside the field. */
.azh-news .elementor-field-group.elementor-field-type-acceptance,
.azh-news .elementor-field-group-consent {
	flex: 1 1 100% !important;
	order: 3;
	margin-top: 4px !important;
}

.azh-news .elementor-field-group.elementor-field-type-submit {
	flex: 0 0 auto !important;
	width: auto !important;
	order: 2;
}

.azh-news .elementor-field-type-email,
.azh-news .elementor-field-type-text {
	order: 1;
	flex: 1 1 240px !important;
}

/* Field: the design's 50px white pill. */
.azh-news .elementor-field-textual {
	width: 100% !important;
	height: 50px !important;
	padding: 0 24px;
	background-color: #FCFCF7;
	border: 1px solid #FCFCF7;
	border-radius: 1000px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: right;
	color: #0C0C0C;
}

.azh-news .elementor-field-textual::placeholder {
	color: #0C0C0C;
	opacity: 0.7;
}

.azh-news .elementor-field-textual:focus {
	outline: 2px solid #ECC55A;
	outline-offset: 2px;
	box-shadow: none;
}

/* Submit: the gold pill. `!important` only here — Elementor prints its button colours as
   inline-weight kit rules that a class alone cannot outrank. */
.azh-news .elementor-button[type='submit'],
.azh-news button.elementor-button {
	height: 50px;
	padding: 0 28px;
	background-color: transparent !important;
	background-image: var(--az-gradient-gold) !important;
	border: 0;
	border-radius: 1000px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	color: var(--az-on-gold) !important;
	appearance: none;
	-webkit-appearance: none;
}

/* Consent line: 12/500 accent, checkbox on the LEFT of the text as the file draws it. */
.azh-news .elementor-field-type-acceptance .elementor-field-subgroup,
.azh-news .elementor-acceptance-field + label,
.azh-news .elementor-field-option {
	display: flex;
	/* Checkbox on the RIGHT (file: x1012 vs text x748), so normal order under RTL. */
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

/* Elementor's kit prints a label colour that ties with this selector and loads later, so the
   consent line came out grey on the black band instead of the design's accent. Same tie as the
   layout rules above. */
.azh-news .elementor-field-option label,
.azh-news .elementor-field-type-acceptance label {
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 14px;
	text-align: right;
	color: #ECC55A !important;
	cursor: pointer;
}

.azh-news .elementor-field-option input[type='checkbox'] {
	flex: none;
	width: 16px;
	height: 16px;
	accent-color: #3D5B34;
}

/* Messages sit under the form, in the accent so they read on the dark band. */
.azh-news .elementor-message {
	width: 100%;
	font-size: 13px;
	text-align: right;
	color: #ECC55A;
}

.azh-news .elementor-message.elementor-message-danger {
	color: #F2B351;
}

@media (max-width: 700px) {
	.azh-news .elementor-form-fields-wrapper {
		flex-direction: column !important;
		align-items: stretch;
	}

	/* The submit group is pinned to its content width above so the button can sit BESIDE the
	   field. Once stacked that is wrong — it left a short button floating against the right
	   edge under a full-width field — so the group is released here. */
	.azh-news .elementor-field-group.elementor-field-type-submit {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	.azh-news .elementor-button[type='submit'],
	.azh-news button.elementor-button {
		width: 100% !important;
	}
}

/* THE SHORTCODE'S OWN WRAPPERS.
   [elementor-template] prints its saved section inside our row: div.elementor > .e-con >
   .elementor-widget-form. As flex items those shrink to their content rather than filling the
   line, which on a phone left a 247px field in a 350px band. Nothing above catches them because
   they are Elementor's containers, not the form's markup. */
.azh-news__form--elementor > .elementor,
.azh-news__form--elementor .e-con,
.azh-news__form--elementor .e-con-inner,
.azh-news__form--elementor .elementor-widget-form,
.azh-news__form--elementor .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}