/* ==========================================================================
   Heritage — global responsive overrides
   Applied across all page templates via wp_enqueue_style().
   Loads LAST so it overrides any inline styles using !important.
   ========================================================================== */

/* ---------- Universal image fluidity ---------- */
img, video, svg {
	max-width: 100% !important;
}

/* ----------------------------------------------------------------------------
   Image-box pattern used across the site:

       <div style="aspect-ratio:4/5">       (or .img-zoom)
         <div class="parallax-img">         (optional, may or may not exist)
           <img class="w-full h-full object-cover" />
         </div>
       </div>

   The `h-full` on the image only works if every parent has an explicit height.
   Tailwind CDN + inline styles can't guarantee that — so we force all images
   inside aspect-ratio/parallax/img-zoom boxes to be absolutely positioned and
   fill their ancestor box edge-to-edge.
   ------------------------------------------------------------------------- */

.img-zoom,
[style*="aspect-ratio"] {
	display: block !important;
	width: 100% !important;
	position: relative !important;
}

/* Parallax wrapper (when present) — establish a full-size positioning layer */
.parallax-img {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
}

/* The actual image — absolutely positioned so it doesn't rely on its parent
   having a resolved explicit height. Any nesting depth. */
.img-zoom img,
[style*="aspect-ratio"] img,
.parallax-img img {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
}

/* Keep Clover payment iframe exactly sized (not the blanket img/iframe rule) */
.payment-field iframe {
	height: 48px !important;
	width: 100% !important;
}

/* Map embeds — always full width */
iframe[src*="google.com/maps"],
iframe[src*="maps.google"] {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 280px;
}

/* ==========================================================================
   TABLET — up to 1024px
   ========================================================================== */
@media (max-width: 1024px) {
	/* Sidebar CTA (the "Order Online" rail) — move down so it doesn't block content */
	[class*="sidebar"],
	[style*="position:fixed"][style*="right:"][style*="top:50%"] {
		transform: translateY(-50%) scale(0.9);
	}

	/* Any hardcoded wide widths → fluid */
	[style*="width:1200"],
	[style*="width: 1200"],
	[style*="width:1400"],
	[style*="width: 1400"] {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   MOBILE — up to 768px
   Most of the real work happens here.
   ========================================================================== */
@media (max-width: 768px) {

	html { font-size: 15px; }
	body { overflow-x: hidden; }

	/* ----- Typography ----- */
	h1 { font-size: clamp(1.9rem, 7vw, 2.4rem) !important; line-height: 1.15 !important; }
	h2 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; line-height: 1.2 !important; }
	h3 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }
	p  { font-size: 15px !important; line-height: 1.55 !important; }

	/* The Heritage pages use many inline font-sizes via style="" — clamp anything huge */
	[style*="font-size:72"],
	[style*="font-size: 72"],
	[style*="font-size:64"],
	[style*="font-size: 64"],
	[style*="font-size:60"],
	[style*="font-size: 60"],
	[style*="font-size:56"],
	[style*="font-size: 56"],
	[style*="font-size:48"],
	[style*="font-size: 48"] { font-size: clamp(1.75rem, 7vw, 2.25rem) !important; }

	[style*="font-size:42"],
	[style*="font-size: 42"],
	[style*="font-size:40"],
	[style*="font-size: 40"],
	[style*="font-size:36"],
	[style*="font-size: 36"],
	[style*="font-size:32"],
	[style*="font-size: 32"] { font-size: clamp(1.4rem, 5vw, 1.75rem) !important; }

	[style*="font-size:28"],
	[style*="font-size: 28"],
	[style*="font-size:24"],
	[style*="font-size: 24"] { font-size: clamp(1.1rem, 4vw, 1.35rem) !important; }

	/* ----- Spacing ----- */
	section { padding-left: 20px !important; padding-right: 20px !important; }
	[style*="padding:80"],
	[style*="padding: 80"],
	[style*="padding:96"],
	[style*="padding: 96"],
	[style*="padding:120"],
	[style*="padding: 120"] { padding: 48px 20px !important; }

	[style*="padding-top:80"],
	[style*="padding-top: 80"],
	[style*="padding-top:120"],
	[style*="padding-top: 120"] { padding-top: 56px !important; }

	[style*="padding-bottom:80"],
	[style*="padding-bottom: 80"],
	[style*="padding-bottom:120"],
	[style*="padding-bottom: 120"] { padding-bottom: 56px !important; }

	/* ----- Nav / header ----- */
	.nav-logo-img,
	img[alt="Heritage Indian Cuisine"] {
		max-height: 58px !important;
		width: auto !important;
	}

	/* ----- Buttons ----- */
	.hero-primary-btn,
	.hero-outline-btn,
	.cta-btn,
	button[class*="btn"],
	a[class*="btn"] {
		font-size: 12px !important;
		padding: 14px 24px !important;
	}

	/* Stack hero CTA buttons vertically, full width */
	.hero-primary-btn,
	.hero-outline-btn {
		display: block !important;
		width: 100% !important;
		max-width: 320px !important;
		margin: 8px auto !important;
	}

	/* ----- Grids and flex rows — collapse to 1 column ----- */
	.grid-cols-2,
	.grid-cols-3,
	.grid-cols-4,
	.md\:grid-cols-2,
	.md\:grid-cols-3,
	.md\:grid-cols-4,
	.lg\:grid-cols-2,
	.lg\:grid-cols-3,
	.lg\:grid-cols-4 {
		grid-template-columns: 1fr !important;
	}

	[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}

	/* Raw flex rows with fixed child widths — let them wrap */
	[style*="display:flex"][style*="gap"],
	[style*="display: flex"][style*="gap"] {
		flex-wrap: wrap !important;
	}

	/* ----- Hero sections (home <section.hero-sticky>, location <header>) ----- */
	.hero-sticky,
	#hero,
	section[id*="hero"],
	header[style*="height:100vh"],
	header[style*="height: 100vh"],
	[style*="height:100vh"],
	[style*="height: 100vh"] {
		height: 100vh !important;
		min-height: 560px !important;
		width: 100% !important;
		position: relative;
		overflow: hidden !important;
	}

	/* The image-wrapper div inside the hero (position:absolute; inset:0) */
	.hero-sticky > div[style*="position:absolute"],
	#hero > div[style*="position:absolute"],
	header[style*="100vh"] > div[style*="position:absolute"],
	[style*="height:100vh"] > div[style*="position:absolute"],
	[style*="height: 100vh"] > div[style*="position: absolute"] {
		position: absolute !important;
		inset: 0 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Hero background image — ANY img inside the hero, at any nesting depth */
	.hero-sticky img,
	#hero img,
	section[id*="hero"] img,
	header[style*="100vh"] img,
	[style*="height:100vh"] img,
	[style*="height: 100vh"] img,
	img[alt$="spread"],
	img[alt*="Cuisine spread"],
	img[alt*="food spread"],
	img[alt*="Indian feast"],
	img[alt*="feast spread"] {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		min-height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
	}

	/* Dial down the hero gradient overlays on mobile — they were tuned for a
	   wider desktop hero and leave the bottom half looking nearly solid black. */
	.hero-sticky > div > div[style*="linear-gradient(to top"],
	#hero > div > div[style*="linear-gradient(to top"],
	header[style*="100vh"] > div > div[style*="linear-gradient(to top"] {
		background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%) !important;
	}
	.hero-sticky > div > div[style*="linear-gradient(to bottom"],
	#hero > div > div[style*="linear-gradient(to bottom"],
	header[style*="100vh"] > div > div[style*="linear-gradient(to bottom"] {
		background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 50%) !important;
	}

	/* Fixed pixel widths → fluid */
	[style*="width:1200"],
	[style*="width: 1200"],
	[style*="width:1000"],
	[style*="width: 1000"],
	[style*="width:800"],
	[style*="width: 800"],
	[style*="max-width:1200"],
	[style*="max-width: 1200"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ----- Marquee bar smaller on mobile ----- */
	[class*="marquee"] {
		font-size: 11px !important;
	}

	/* ----- Cards / stacking sections ----- */
	.stacking-card,
	[class*="about-card"],
	[class*="feature-card"],
	[class*="card"] {
		padding: 24px 20px !important;
		border-radius: 16px !important;
	}

	/* ----- Menu highlight / food cards — make sure images fill full card width ----- */
	.menu-grid,
	[class*="menu-grid"] {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
		width: 100% !important;
	}

	.menu-grid > *,
	[class*="menu-grid"] > * {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Image boxes full mobile width — but preserve their inline aspect-ratio */
	.img-zoom,
	[style*="aspect-ratio"] {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		min-height: 220px;
	}

	.img-zoom img,
	[style*="aspect-ratio"] img,
	.parallax-img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
		max-width: none !important;
		max-height: none !important;
	}

	/* When flex row collapses to column, the image column should NOT have
	   a Tailwind md:w-1/2 making it skinny — already handled by layout,
	   but ensure any min-width doesn't shrink below full mobile width */
	[class*="md:w-1/2"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Parallax / reveal image sections */
	.reveal img {
		max-width: 100% !important;
	}

	/* ----- Cart panel (ordering page) — full width ----- */
	#cart-panel,
	.cart-panel {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ----- Category nav on ordering page — horizontal scroll ----- */
	#category-nav-wrapper,
	.category-nav-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ----- Footer — single column ----- */
	footer [style*="grid-template-columns"],
	footer .grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
		text-align: center;
	}

	/* ----- Location modal / popups ----- */
	#locationModal > div,
	.location-modal-inner {
		width: 92% !important;
		max-width: 360px !important;
		padding: 32px 24px !important;
	}

	/* ----- Party hall page table ----- */
	.feature-grid,
	.event-types-grid,
	.whats-included-list {
		grid-template-columns: 1fr !important;
	}

	/* ----- Maps ----- */
	iframe[src*="maps"] {
		min-height: 240px !important;
	}
}

/* ==========================================================================
   SMALL MOBILE — up to 480px
   ========================================================================== */
@media (max-width: 480px) {
	html { font-size: 14px; }

	h1 { font-size: 1.7rem !important; }
	h2 { font-size: 1.25rem !important; }

	section { padding-left: 16px !important; padding-right: 16px !important; }

	.nav-logo-img,
	img[alt*="Heritage Indian" i] {
		max-height: 48px !important;
	}

	.hero-primary-btn,
	.hero-outline-btn,
	.cta-btn {
		font-size: 11px !important;
		padding: 12px 18px !important;
		letter-spacing: 0.1em !important;
	}

	/* Payment modal tighter */
	.payment-modal {
		padding: 22px 18px !important;
		width: 94% !important;
	}

	.payment-modal h2 { font-size: 17px !important; }
	.payment-order-total span:last-child { font-size: 19px !important; }

	/* Cart item line — tighter */
	.cart-item {
		padding: 12px 14px !important;
	}

	/* Menu items on ordering page */
	.menu-item {
		padding: 16px !important;
	}
}

/* ==========================================================================
   Prefers-reduced-motion — kill the infinite zoom / marquee for accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}