/* CRC Maesta — hero ko ek screen me fit karna + compact form.
   Ye file SABSE AAKHIR me load karein. maesta-hero-fixes.css ko replace kar
   deti hai — dono rakhne ki zarurat nahi. */


/* =========================================================================
 * Hero = ek viewport, andar koi scroll nahi
 *
 * --maesta-chrome = site header + sub-nav ki total height. Inspect karke
 * apne theme ki actual value daal dein; 150px ek reasonable starting point hai.
 * ====================================================================== */
 

.maesta-hero {
	--maesta-chrome: 150px;

	height: calc(100vh - var(--maesta-chrome));
	min-height: 540px;   /* chhote laptops pe form ko jagah milti rahe */
	max-height: 900px;   /* bade monitors pe hero bemaani lamba na ho */
	align-items: stretch;
	overflow: hidden;
}

/* WordPress admin bar sirf logged-in users ko dikhta hai — uski 32px bhi
   ghatani padegi, warna aapko hero chhota dikhega aur visitor ko sahi. */
body.admin-bar .maesta-hero {
	--maesta-chrome: 182px;
}

.maesta-hero__media {
	min-height: 0;
	height: 100%;
}

.maesta-hero__video {
	height: 100%;
}

.maesta-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
}


/* =========================================================================
 * Form panel — compact, bina internal scroll ke
 * ====================================================================== */

.maesta-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 48px 38px;
	overflow: visible;
}

.maesta-hero__form-head h2 {
	margin-bottom: 3px;
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1.2;
}

.maesta-hero__form-head p {
	margin-bottom: 16px;
	font-size: 12.5px;
}


/* =========================================================================
 * Labels hata diye — placeholders hi label ka kaam karte hain
 *
 * Labels markup me rehte hain par sirf screen readers ke liye (.sr-only).
 * Poori tarah delete karna accessibility todta hai: screen reader ko field
 * ka naam kahin se toh milna chahiye.
 * ====================================================================== */

.maesta-hero__field label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.maesta-hero__field {
	margin-bottom: 11px;
}

.maesta-hero__form .form-control,
.maesta-hero__form select.form-control {
	padding: 11px 14px;
	font-size: 14px;
}

.maesta-hero__form .form-control::placeholder {
	color: rgba(16, 35, 63, 0.45);
}

/* Select ka pehla option placeholder jaisa dikhe, chuni hui value se alag. */
.maesta-hero__form select.form-control:invalid,
.maesta-hero__form select.form-control option[value=""] {
	color: rgba(16, 35, 63, 0.45);
}

.maesta-hero__form select.form-control option {
	color: #10233f;
}

.maesta-hero__row {
	gap: 10px;
	margin-bottom: 0;
}

.maesta-hero__row .maesta-hero__field {
	margin-bottom: 11px;
}


/* ---- reCAPTCHA: chhota kiya, ye sabse zyada jagah kha raha tha ---- */

.maesta-hero__form .g-recaptcha {
	margin: 4px 0 0;
	transform: scale(0.78);
	transform-origin: 0 0;
	height: 60px;
}

.maesta-hero__submit {
	margin-top: 2px;
	padding: 13px 20px;
	font-size: 13.5px;
}

.maesta-hero__consent {
	margin-top: 9px;
	font-size: 10.5px;
	line-height: 1.45;
}


/* =========================================================================
 * Chhote laptops (768–900px height) — aur thoda kas dete hain
 * ====================================================================== */

@media (min-width: 1101px) and (max-height: 800px) {
	.maesta-hero__panel { padding: 32px 32px; }
	.maesta-hero__form-head h2 { font-size: 19px; }
	.maesta-hero__form-head p { margin-bottom: 12px; font-size: 12px; }
	.maesta-hero__field { margin-bottom: 8px; }
	.maesta-hero__form .form-control { padding: 9px 12px; font-size: 13.5px; }
	.maesta-hero__form .g-recaptcha { transform: scale(0.7); height: 54px; }
	.maesta-hero__submit { padding: 11px 18px; }
	.maesta-hero__consent { font-size: 10px; }

	.maesta-hero__title { font-size: clamp(40px, 4.4vw, 62px); }
	.maesta-hero__spec { margin-top: 20px; padding-top: 18px; }
}


/* =========================================================================
 * Mobile — yahan 100vh mat karna
 *
 * Video aur poora form ek phone screen me nahi aa sakte. Zabardasti karenge
 * toh dono unusable ho jayenge. Yahan natural stacking hi sahi hai.
 * ====================================================================== */

@media (max-width: 1100px) {
	.maesta-hero {
		height: auto;
		min-height: 0;
		max-height: none;
		flex-direction: column;
	}

	body.admin-bar .maesta-hero { height: auto; }

	.maesta-hero__media {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.maesta-hero__copy {
		justify-content: flex-end;
		padding: 26px 24px;
	}

	.maesta-hero__panel {
		height: auto;
		padding: 26px 22px 32px;
	}

	.maesta-hero__form .g-recaptcha {
		transform: scale(0.86);
		height: 66px;
	}
}

@media (max-width: 600px) {
	.maesta-hero__panel { padding: 22px 18px 28px; }
	.maesta-hero__form .form-control { font-size: 16px; } /* iOS zoom rokta hai */
	.maesta-hero__row { grid-template-columns: 1fr; }
}


/* ---- "Watch full walkthrough" button ---- */
.maesta-hero__play { display: none; }

/* Sub-nav hero ke upar float karta hai. Panel ka content center ho raha tha
   poori height pe, isliye upar ka hissa nav ke peeche chala gaya. Padding se
   center visible area me shift ho jaata hai. */
.maesta-hero {
	--maesta-nav-h: 52px;
}

.maesta-hero__panel {
	padding-top: calc(28px + var(--maesta-nav-h));
}

@media (min-width: 1101px) and (max-height: 800px) {
	.maesta-hero__panel {
		padding-top: calc(18px + var(--maesta-nav-h));
	}
}

@media (max-width: 1100px) {
	.maesta-hero {
		--maesta-nav-h: 0px;
	}
}