/* =====================================================
   mobile.css , mobile usability fixes
   Loaded site-wide; rules are scoped to @media queries.

   NOTE: Some rules here are transitional safety-nets for
   Elementor element font sizes that were authored without
   mobile breakpoints. Once those are set in Elementor's
   responsive controls (Site Settings or per-widget), the
   corresponding rule below becomes redundant and should
   be removed.
   ===================================================== */

/* =====================================================
   1. Hero font cap (Home page) , transitional safety net
   Source: .elementor-10 .elementor-element-795bd93 in
   wp-content/uploads/elementor/css/post-10.css declares
   font-size: 92px with NO tablet or mobile override. That
   makes the hero huge on anything narrower than ~1200px.
   Fix permanently in Elementor: edit hero H2 widget →
     Style → Typography → set Tablet AND Mobile sizes.
   Or set globally via Elementor → Site Settings → Theme
   Style → Typography → H2 (responsive controls).
   Until then, these rules match Elementor's specificity
   so they override without !important.
   ===================================================== */

/* Tablet + narrow desktop windows (up to ~1024px) */
@media (max-width: 1024px) {
	.elementor-10 .elementor-element.elementor-element-795bd93 .elementor-heading-title {
		font-size: clamp(2.5rem, 6vw, 4rem);
		line-height: 1.1;
	}
}

/* Phones: tighter cap */
@media (max-width: 767px) {
	.elementor-10 .elementor-element.elementor-element-795bd93 .elementor-heading-title {
		font-size: clamp(2rem, 9vw, 3rem);
		line-height: 1.1;
	}
}

/* =====================================================
   2. Empty/decorative H2 element on home , hide on mobile
   Element b21e325 renders an empty H2 (~250px tall) on
   the home page that adds dead vertical space at narrow
   viewports. Hidden here until Sid can review the source
   widget in Elementor and either populate it or set the
   section to hide on mobile properly.
   ===================================================== */
@media (max-width: 767px) {
	.elementor-10 .elementor-element.elementor-element-b21e325 {
		display: none;
	}
}

/* =====================================================
   3. Astra mobile header , keep logo proportional
   The mobile header logo can balloon at narrow viewports.
   Constrain it so the wordmark fits the available width.
   ===================================================== */
@media (max-width: 921px) {
	#ast-mobile-header .site-logo-img img,
	#ast-mobile-header .custom-logo-link img,
	.ast-mobile-header-wrap .site-logo-img img,
	.ast-mobile-header-wrap .custom-logo-link img {
		max-height: 56px;
		width: auto;
	}

	/* Site title wordmark fallback when no image logo set */
	#ast-mobile-header .site-title,
	.ast-mobile-header-wrap .site-title {
		font-size: clamp(1rem, 4vw, 1.5rem);
		line-height: 1.2;
	}
}

/* =====================================================
   4. Mobile header action row , keep nav items honest
   Items in the right side of the header ("Farm Share
   opens in" pill, "Get Farm Share" CTA, cart icon) can
   crash into each other at narrow viewports. Add a
   reasonable gap and let them wrap to a second row when
   they truly don't fit, rather than overlapping.
   ===================================================== */
@media (max-width: 767px) {
	#ast-mobile-header .ast-builder-grid-row,
	.ast-mobile-header-wrap .ast-builder-grid-row {
		gap: 0.5rem;
	}
}