/* ==========================================================================
   P0 MOBILE UX FIX — heyuanpet.com
   Loaded AFTER main.min.css (enqueued last) → wins cascade.
   Scope: nav visibility, hero text overlap, page cropping, responsive
   layout (320/375/390/430), button tap targets.
   Does NOT change colors, animations, or page structure.
   ========================================================================== */

/* ----------------------------------------------------------------------
   P0-1 · MOBILE HAMBURGER NAVIGATION
   Root cause: .menu-toggle spans had no width/height/display → invisible.
   Fix: style spans as visible bars; hide button on desktop, show on mobile.
   ---------------------------------------------------------------------- */
.menu-toggle {
	display: none !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	width: 44px !important;
	height: 44px !important;
	padding: 10px !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 5px !important;
	-webkit-tap-highlight-color: transparent;
}
.menu-toggle span {
	display: block !important;
	width: 24px !important;
	height: 2.5px !important;
	background: #fff !important;
	border-radius: 2px !important;
}

/* Desktop (>768px): hamburger hidden, horizontal nav shown (handled by main.css) */
/* Mobile (<=768px): show hamburger */
@media (max-width: 768px) {
	.menu-toggle { display: flex !important; }
	.site-header .header-inner .nav { display: none !important; }
}

/* Drawer must sit above everything — force fixed positioning + visible panel.
   Root cause: main.css drawer rules were being overridden/not applied, leaving
   the drawer container transparent + static, so the green links were invisible
   on the green header background. We force a proper fixed overlay + white panel. */
.mobile-drawer {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	z-index: 100000 !important;
}
/* Dark backdrop overlay (click to close) */
.mobile-drawer-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0,0,0,0.5) !important;
}
/* White slide-in panel on the right */
.mobile-drawer-panel {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 100% !important;
	width: 85vw !important;
	max-width: 340px !important;
	background: #fff !important;
	box-shadow: -8px 0 32px rgba(0,0,0,0.18) !important;
	padding: 76px 0 32px !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}
/* Drawer links: dark text (readable on white), full-width, finger-friendly tap targets (>=48px) */
.mobile-drawer-link {
	color: #333 !important;
	min-height: 52px !important;
	display: flex !important;
	align-items: center !important;
	padding: 16px 24px !important;
	font-size: 1.02rem !important;
	font-weight: 500 !important;
	border-bottom: 1px solid #eee !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
.mobile-drawer-link:hover,
.mobile-drawer-link.current {
	color: #2F6B45 !important;
	background: #f5faf6 !important;
}
/* Close button: visible dark × on white panel */
.mobile-drawer-close {
	position: absolute !important;
	width: 48px !important;
	height: 48px !important;
	top: 16px !important;
	right: 16px !important;
	background: transparent !important;
	border: none !important;
	color: #666 !important;
	font-size: 1.8rem !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	-webkit-tap-highlight-color: transparent;
}

/* Header: prevent logo + toggle from wrapping / overflowing on narrow screens */
.header-inner { flex-wrap: nowrap !important; gap: 8px !important; }
.brand img { max-width: 150px !important; height: auto !important; }
@media (max-width: 430px) { .brand img { max-width: 130px !important; } }
@media (max-width: 360px) { .brand img { max-width: 110px !important; } }

/* Language switcher: keep compact on mobile, don't push toggle off-screen */
@media (max-width: 768px) {
	.header-actions { display: flex !important; align-items: center !important; gap: 6px !important; }
	.lang-switcher .lang-btn { padding: 6px 8px !important; font-size: 0.75rem !important; }
}

/* ----------------------------------------------------------------------
   P0-6 · MOBILE HEADER HEIGHT (GitHub Fix Task 1)
   Root cause: .header-inner height: 72px is the same on ALL breakpoints
   in main.css — no mobile reduction exists. The 72px header eats into
   the Hero carousel viewport, causing the top of Hero images to be
   cropped/hidden behind the fixed header on mobile.
   Fix: reduce to 56px on mobile, 52px on tiny screens. Logo stays
   recognizable (max-width 150px → 130px → 110px already set above).
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.header-inner { height: 56px !important; min-height: 56px !important; }
	.site-header { min-height: 56px !important; }
	/* Page hero top padding must match header height so title isn't hidden */
	.page-hero { padding-top: calc(56px + 24px) !important; }
}
@media (max-width: 430px) {
	.header-inner { height: 54px !important; min-height: 54px !important; }
	.page-hero { padding-top: calc(54px + 20px) !important; }
}
@media (max-width: 380px) {
	.header-inner { height: 52px !important; min-height: 52px !important; }
	.page-hero { padding-top: calc(52px + 20px) !important; }
}

/* ----------------------------------------------------------------------
   P0-7 · MOBILE DRAWER is-open STATE (GitHub Fix Task 3)
   Root cause: header.php inline script toggles style.display while
   main.js toggles classList.is-open — but NO CSS rule existed for
   .is-open, so main.js's toggle had no visual effect. Link-click
   close handlers removed a class that did nothing, leaving the
   drawer stuck open. This rule bridges both mechanisms: when main.js
   adds .is-open, the drawer becomes visible regardless of inline style.
   ---------------------------------------------------------------------- */
.mobile-drawer.is-open { display: block !important; }
.mobile-drawer:not(.is-open) { display: none !important; }

/* ----------------------------------------------------------------------
   P0-2 · HERO TEXT OVERLAP (mobile)
   Root cause: hero-content spanned 90%+ of viewport, and the background
   image subject (dog/worker) sits on the right side. Text + buttons
   covered the subject's face/chest.
   Fix: constrain content to LEFT 60%, add a vertical text plate for
   legibility, and bias the gradient scrim toward the left.
   ---------------------------------------------------------------------- */

/* Constrain hero content width so it stays in the LEFT half (away from subject) */
@media (max-width: 640px) {
	.hero-content {
		max-width: 64% !important;
		min-width: unset !important;
		padding: 12px 14px !important;
		left: 0 !important;
		right: auto !important;
		text-align: left !important;
	}
}
@media (max-width: 380px) {
	.hero-content {
		max-width: 72% !important;
		padding: 10px 12px !important;
	}
}

/* V5.0 — Remove ALL text plates (white & dark).
   Image is the main subject. Overlay legibility handled by .hero-overlay
   in header.php inline CSS (dark left-biased gradient, 42% opacity). */
@media (max-width: 640px) {
	.hero-slide-light .hero-content,
	.hero-slide:not(.hero-slide-light) .hero-content {
		background: transparent !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
}

/* Background: push subject further right so it doesn't sit under the text plate */
@media (max-width: 640px) {
	.hero-slide-bg { background-position: 82% center !important; }
	.hero-slide[data-slide-index="0"] .hero-slide-bg { background-position: 82% center !important; }
	.hero-slide[data-slide-index="1"] .hero-slide-bg { background-position: 82% center !important; }
	.hero-slide[data-slide-index="2"] .hero-slide-bg { background-position: 75% center !important; }
	.hero-slide[data-slide-index="3"] .hero-slide-bg { background-position: 75% center !important; }
	.hero-slide[data-slide-index="4"] .hero-slide-bg { background-position: 75% center !important; }
}

/* Hero text sizing — wraps cleanly on small screens */
@media (max-width: 640px) {
	.hero-title,
	.hero-title-line2 {
		font-size: clamp(1.5rem, 6.5vw, 2.1rem) !important;
		line-height: 1.18 !important;
		letter-spacing: -0.01em !important;
	}
	.hero-desc {
		font-size: 0.92rem !important;
		line-height: 1.55 !important;
		max-width: 100% !important;
	}
	.hero-serving { font-size: 0.82rem !important; max-width: 100% !important; }
}

/* Hero buttons: full-width stack on narrow screens, large tap area */
@media (max-width: 640px) {
	.hero-btns {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		width: 100% !important;
	}
	.hero-btns .btn,
	.hero-btns .btn-lg {
		width: 100% !important;
		min-height: 48px !important;
		padding: 14px 20px !important;
		font-size: 0.95rem !important;
		text-align: center !important;
	}
}

/* Hero text spacing — compress so title + desc + button fit in first screen
   alongside the background subject, without overlapping or cropping. */
@media (max-width: 640px) {
	.hero-tag { margin-bottom: 6px !important; }
	.hero-title { margin-bottom: 8px !important; }
	.hero-title-line2 { display: block !important; margin-top: 2px !important; }
	.hero-desc { margin-bottom: 12px !important; }
	.hero-btns { margin-bottom: 0 !important; }
}

/* Hero carousel height: not too tall on small screens (avoids huge empty space) */
@media (max-width: 640px) {
	.hero-carousel { height: 78vh !important; min-height: 460px !important; max-height: 620px !important; }
}
@media (max-width: 380px) {
	.hero-carousel { height: 82vh !important; min-height: 440px !important; }
}

/* Background image: keep subject (person/pet) visible, not hidden behind text */
@media (max-width: 640px) {
	.hero-slide-bg { background-position: 70% center !important; }
	.hero-slide[data-slide-index="0"] .hero-slide-bg { background-position: 78% center !important; }
}

/* Hero dots: keep within safe area, tappable */
@media (max-width: 640px) {
	.hero-dots { bottom: 18px !important; gap: 10px !important; }
	.hero-dot { width: 10px !important; height: 10px !important; }
	.hero-dot.is-active { width: 28px !important; }
}

/* ----------------------------------------------------------------------
   P0-3 · PAGE CROPPING — nothing cut in half
   Ensure images/sections/cards never overflow or clip on mobile.
   ---------------------------------------------------------------------- */

/* Global overflow guard */
html, body { max-width: 100vw !important; overflow-x: hidden !important; }
*, *::before, *::after { max-width: 100%; }

/* Images: never overflow container, preserve aspect */
img { max-width: 100% !important; height: auto !important; }
.hero-video { max-width: none; } /* video may exceed to cover */

/* Containers: safe horizontal padding on all screens */
.container { padding: 0 16px !important; }
@media (max-width: 380px) { .container { padding: 0 12px !important; } }

/* Section padding: not too tall on mobile */
@media (max-width: 640px) {
	section { padding: 40px 0 !important; }
	.about-section, .why-choose-section, .cta-section,
	.star-products-section, .categories-section, .oem-section,
	.global-export-section, .global-markets-section, .product-section { padding: 36px 0 !important; }
}

/* Fixed-height images: use min-height not fixed crop on mobile */
@media (max-width: 640px) {
	.category-visual { height: 180px !important; }
	.featured-product-image { height: 200px !important; }
	.news-image { height: 160px !important; }
	.about-visual img { height: 280px !important; }
	.about-story-visual img { height: 260px !important; }
	.mfg-image img { height: 280px !important; }
	.product-image-frame { aspect-ratio: 1 !important; }
}

/* Mega-menu: never show on mobile (desktop hover only) */
@media (max-width: 768px) {
	.mega-menu-panel { display: none !important; }
}

/* ----------------------------------------------------------------------
   P0-4 · RESPONSIVE LAYOUT — 320 / 375 / 390 / 430
   No horizontal scroll, no element overflow.
   ---------------------------------------------------------------------- */

/* Product/category/news grids: collapse cleanly */
@media (max-width: 640px) {
	.product-grid, .featured-products-grid, .star-products-grid,
	.product-categories, .categories-grid, .categories-overview-grid,
	.news-grid, .category-covers-grid,
	.why-choose-grid, .data-modules, .quality-grid,
	.values-grid, .facts-grid, .service-grid,
	.quality-cert-grid, .related-products-grid,
	.export-features, .global-markets-grid, .global-markets-features,
	.trusted-stats-grid, .factory-showcase-grid,
	.jc-taster-grid, .export-route {
		grid-template-columns: 1fr !important;
	}
	.star-products-grid, .product-grid, .news-grid,
	.category-covers-grid, .quality-cert-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}
@media (max-width: 380px) {
	.star-products-grid, .product-grid, .news-grid,
	.category-covers-grid, .quality-cert-grid,
	.cert-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Cert grid: 2 cols on phone, 1 on tiny */
@media (max-width: 640px) { .cert-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 380px) { .cert-grid { grid-template-columns: 1fr !important; } }

/* Footer: stack columns */
@media (max-width: 640px) {
	.footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
	.footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
}

/* Contact form: single column */
@media (max-width: 640px) {
	.contact-grid { grid-template-columns: 1fr !important; }
	.form-row { grid-template-columns: 1fr !important; }
	.contact-info-item { margin-bottom: 12px !important; }
}

/* OEM / quality process flows: stack vertically */
@media (max-width: 640px) {
	.oem-flow, .quality-process-flow { flex-direction: column !important; align-items: center !important; }
	.oem-flow-step, .quality-process-step { flex: 1 1 100% !important; max-width: 100% !important; }
	.oem-flow-arrow, .quality-process-arrow { display: none !important; }
	.process-flow { flex-direction: column !important; }
	.process-arrow { display: none !important; }
}

/* CTA sections: stack */
@media (max-width: 640px) {
	.cta-inner { flex-direction: column !important; text-align: center !important; }
	.cta-btns { flex-direction: column !important; width: 100% !important; }
	.cta-btns .btn { width: 100% !important; }
	.cta-contact-grid { grid-template-columns: 1fr !important; }
	.cta-buttons { flex-direction: column !important; width: 100% !important; }
	.cta-buttons .btn { width: 100% !important; }
}

/* Global stats: stack */
@media (max-width: 640px) {
	.global-stats { flex-direction: column !important; gap: 16px !important; }
	.trusted-stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Product hero (single product page): single column on mobile */
@media (max-width: 640px) {
	.product-hero-grid, .product-section-grid, .story-grid,
	.about-story-grid, .about-grid, .mfg-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.product-title { font-size: 1.6rem !important; }
	.product-hero-meta { grid-template-columns: 1fr !important; }
	.highlights-grid { grid-template-columns: 1fr !important; }
	.spec-table { display: block !important; overflow-x: auto !important; }
	.spec-table th, .spec-table td { font-size: 0.85rem !important; padding: 10px 12px !important; }
}

@media (max-width: 640px) {
	.page-hero { padding-top: calc(56px + 28px) !important; padding-bottom: 28px !important; }
	.page-hero h1 { font-size: 1.6rem !important; }
	.page-hero p { font-size: 0.95rem !important; }
}

/* Trusted bar / trust grid: stack on small */
@media (max-width: 640px) {
	.trust-grid { grid-template-columns: 1fr !important; }
	.features-grid, .challenge-grid { grid-template-columns: 1fr !important; }
}

/* Prevent any flex row from overflowing */
@media (max-width: 640px) {
	.hero-checklist { flex-direction: column !important; gap: 6px !important; }
	.about-features { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
	.footer-social { justify-content: flex-start !important; }
}

/* ----------------------------------------------------------------------
   P0-5 · BUTTON & TAP TARGETS — all clickable >= 44px
   ---------------------------------------------------------------------- */

/* All buttons: minimum 44px height for finger tap */
@media (max-width: 768px) {
	.btn, .btn-lg {
		min-height: 44px !important;
		padding: 12px 20px !important;
		font-size: 0.92rem !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.btn-lg { min-height: 48px !important; padding: 14px 24px !important; font-size: 1rem !important; }
}

/* Footer social icons: enlarge tap area */
@media (max-width: 768px) {
	.footer-social a {
		width: 44px !important;
		height: 44px !important;
	}
}

/* Contact icons / info links: tappable */
@media (max-width: 768px) {
	.contact-info-item { min-height: 44px !important; }
	.contact-info-item a, .contact-info-item p { font-size: 0.95rem !important; word-break: break-word !important; }
}

/* WhatsApp / Email / Get Quote links: ensure inline links are tappable */
@media (max-width: 768px) {
	a[href^="https://wa.me"],
	a[href^="https://api.whatsapp"],
	a[href^="mailto:"],
	a[href*="contact"] {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
	/* Specific CTA buttons in contact/product inquiry */
	.cta-buttons .btn, .product-hero-cta .btn, .product-inquiry-cta .btn {
		min-height: 48px !important;
	}
}

/* Floating WhatsApp: show on mobile too (smaller, bottom-right, tappable) */
@media (max-width: 768px) {
	.whatsapp-float-desktop {
		display: flex !important;
		width: 52px !important;
		height: 52px !important;
		bottom: 16px !important;
		right: 16px !important;
	}
	.whatsapp-float-desktop svg { width: 26px !important; height: 26px !important; }
}

/* Product tabs: scroll horizontally if needed, don't shrink buttons */
@media (max-width: 640px) {
	.product-tabs {
		overflow-x: auto !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}
	.product-tab { white-space: nowrap !important; flex-shrink: 0 !important; min-height: 40px !important; }
}

/* FAQ: tappable questions */
@media (max-width: 768px) {
	.faq-question { min-height: 48px !important; padding: 14px 16px !important; font-size: 0.95rem !important; }
	.faq-answer { padding: 0 16px 14px !important; font-size: 0.9rem !important; }
}

/* Category cover cards: tappable, no tiny text */
@media (max-width: 640px) {
	.category-cover-overlay h3 { font-size: 0.9rem !important; }
	.category-cover-overlay { padding: 20px 12px 12px !important; }
}

/* Scroll progress bar: keep on top, don't block */
.scroll-progress { z-index: 100001 !important; }

/* ----------------------------------------------------------------------
   SAFETY · prevent layout breakage from long words / URLs
   ---------------------------------------------------------------------- */
p, h1, h2, h3, h4, h5, h6, li, a, span, td, th {
	overflow-wrap: break-word !important;
	word-break: break-word !important;
}
table { word-break: break-word !important; }

/* Ensure no element creates horizontal scrollbar */
body > * { max-width: 100vw !important; }

/* ----------------------------------------------------------------------
   P0 SUPPLEMENT · Single-product subtitle / sticky CTA overlap fix
   Issue: .product-name-cn had only 8px gap to tagline, and the fixed
   .mobile-product-cta bar covered the Chinese subtitle on initial load.
   Fix: 1) margin-bottom 8px → 16px, 2) compact sticky CTA while keeping
   buttons ≥44px, 3) body padding covers full sticky bar height, 4) JS in
   functions.php hides the sticky CTA on load and reveals it after scroll
   so product image, EN title and CN subtitle are all visible on load.
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* 1. Chinese subtitle gap: 8px → 16px (overrides inline style) */
	.product-name-cn { margin-bottom: 16px !important; }

	/* 2. Compact sticky CTA but keep tap targets ≥44px */
	.mobile-product-cta {
		padding: 6px 12px !important;
		padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
		gap: 8px !important;
	}
	.mobile-product-cta-btn {
		padding: 8px 6px !important;
		min-height: 44px !important;
		font-size: 0.78rem !important;
	}
	.mobile-product-cta-btn svg {
		width: 16px !important;
		height: 16px !important;
	}

	/* JS in functions.php adds this class on load; higher specificity beats single-class display:flex !important */
	.mobile-product-cta.mobile-product-cta-hidden { display: none !important; }

	/* 3. Body bottom padding must exceed sticky CTA height so last content is never hidden */
	body { padding-bottom: 72px !important; }
}

@media (max-width: 360px) {
	/* Prevent CTA text wrapping on the smallest screens */
	.mobile-product-cta-btn span { white-space: nowrap !important; }
}

/* End of P0 Mobile Fix */