/*
 * Huizhi Packaging visual background system — v1.0.0
 * Real Media Library photography + lightweight CSS gradients only.
 */

:root {
	--hz-bg-ink: #0b2033;
	--hz-bg-navy: #102c46;
	--hz-bg-blue: #174c62;
	--hz-bg-teal: #0b6076;
	--hz-bg-orange: #ef7d2f;
	--hz-bg-paper: #fbfdfe;
	--hz-bg-soft: #f3f7f9;
	--hz-bg-proof: #eaf2f5;
	--hz-bg-warm: #fff7f0;
	--hz-bg-line: #d7e2e8;
}

/* Site canvas: a quiet paper-and-ink surface behind every page family. */
body.wp-singular {
	background-color: #f6f9fb;
	background-image:
		radial-gradient(circle at 8% 5%, rgba(11, 96, 118, 0.09), transparent 24rem),
		radial-gradient(circle at 92% 18%, rgba(239, 125, 47, 0.055), transparent 22rem),
		linear-gradient(180deg, #f8fbfc 0%, #f0f5f7 100%);
}

body.wp-singular.page #content {
	background-color: #f6f9fb;
}

body.home #content {
	background-image:
		radial-gradient(circle at 88% 10%, rgba(11, 96, 118, 0.075), transparent 30rem),
		radial-gradient(circle at 8% 58%, rgba(239, 125, 47, 0.035), transparent 24rem),
		linear-gradient(180deg, #f7fafc 0%, #ffffff 42%, #f4f8fa 100%);
}

body:is(.page-id-22, .page-id-30, .page-id-32, .page-id-34) #content {
	background-image:
		radial-gradient(circle at 92% 18%, rgba(11, 96, 118, 0.055), transparent 28rem),
		linear-gradient(180deg, #f5f9fb 0%, #ffffff 34%, #f4f8fa 100%);
}

body:is(.page-id-27, .page-id-95, .page-id-97, .page-id-99, .page-id-101, .page-id-104, .page-id-106, .page-id-108, .page-id-110) #content {
	background-image:
		radial-gradient(circle at 8% 14%, rgba(11, 96, 118, 0.06), transparent 26rem),
		radial-gradient(circle at 92% 72%, rgba(239, 125, 47, 0.03), transparent 24rem),
		linear-gradient(180deg, #f6fafb 0%, #ffffff 36%, #f4f8fa 100%);
}

body:is(.page-id-118, .page-id-120, .page-id-122, .page-id-124, .page-id-126) #content {
	background-image:
		linear-gradient(rgba(11, 96, 118, 0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11, 96, 118, 0.018) 1px, transparent 1px),
		linear-gradient(180deg, #f6fafb, #ffffff 42%, #f3f8fa);
	background-size: 32px 32px, 32px 32px, auto;
}

body.page-id-115 #content {
	background-image:
		radial-gradient(circle at 90% 16%, rgba(239, 125, 47, 0.045), transparent 25rem),
		linear-gradient(180deg, #f8fafb, #ffffff 38%, #f5f8fa);
}

body.page-id-3 #content {
	background: #f6f8fa;
}

.site-content,
#primary,
#main,
.entry-content {
	background-color: transparent;
}

/* Header and footer now belong to the same visual system. */
.ast-primary-header-bar {
	background: rgba(255, 255, 255, 0.985) !important;
	border-bottom: 1px solid rgba(16, 44, 70, 0.1) !important;
	box-shadow: 0 8px 28px rgba(11, 32, 51, 0.07);
}

.site-below-footer-wrap {
	background:
		radial-gradient(circle at 12% 0%, rgba(11, 96, 118, 0.32), transparent 32rem),
		linear-gradient(135deg, #0b2033 0%, #102c46 72%, #174c62 100%) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #dbe8ee !important;
}

.site-footer,
.site-footer p,
.site-footer .ast-footer-copyright {
	color: #dbe8ee !important;
}

.site-footer a {
	color: #9ed5de !important;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #ffffff !important;
}

.site-footer a:focus-visible {
	outline: 3px solid #f7ab24;
	outline-offset: 3px;
}

/* Homepage: retain the strongest real product hero, then alternate paper surfaces. */
body.home .entry-content > section:first-of-type {
	background:
		linear-gradient(92deg, rgba(11, 32, 51, 0.99) 0%, rgba(16, 44, 70, 0.94) 48%, rgba(16, 44, 70, 0.34) 100%),
		url("/wp-content/uploads/2026/08/luxury-food-gift-box.webp") center right / cover no-repeat !important;
	border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0 24px 55px rgba(11, 32, 51, 0.18);
}

body.home .entry-content > section:has(.hz-product-grid),
body.home .entry-content > .hz-home-projects,
body.home .entry-content > section:has(.hz-home-capability) {
	background-color: var(--hz-bg-soft) !important;
	background-image:
		radial-gradient(circle, rgba(16, 44, 70, 0.065) 0 1px, transparent 1.35px),
		linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(237, 245, 248, 0.96)) !important;
	background-size: 20px 20px, auto !important;
	border: 1px solid rgba(16, 44, 70, 0.08);
	box-shadow: 0 16px 38px rgba(16, 44, 70, 0.06);
}

body.home .entry-content > .hz-home-projects {
	background:
		radial-gradient(circle at 88% 20%, rgba(11, 96, 118, 0.08), transparent 24rem),
		linear-gradient(180deg, #ffffff, #fbfdfe) !important;
	border-radius: 12px;
}

body.home .entry-content > section:last-of-type {
	background:
		radial-gradient(circle at 85% 20%, rgba(239, 125, 47, 0.2), transparent 18rem),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 12px),
		linear-gradient(135deg, #0b2033, #174c62) !important;
	box-shadow: 0 20px 46px rgba(11, 32, 51, 0.18);
}

/* Page-specific photographic hero backgrounds. */
body.page-id-22 .hz-about-hero {
	background:
		linear-gradient(90deg, rgba(11, 32, 51, 0.98) 0%, rgba(16, 44, 70, 0.92) 54%, rgba(16, 44, 70, 0.46) 100%),
		url("/wp-content/uploads/2026/08/huizhi-factory-panorama.webp") center / cover no-repeat !important;
}

body.page-id-27 .hz-intro {
	background:
		linear-gradient(90deg, rgba(11, 32, 51, 0.99) 0%, rgba(16, 44, 70, 0.94) 52%, rgba(16, 44, 70, 0.48) 100%),
		url("/wp-content/uploads/2026/08/luxury-food-gift-box.webp") center right / cover no-repeat !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	box-shadow: 0 24px 52px rgba(11, 32, 51, 0.16);
	color: #eaf3f6;
	padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 6vw, 5rem);
}

body.page-id-27 .hz-intro h1,
body.page-id-27 .hz-intro h2 {
	color: #ffffff;
}

body.page-id-27 .hz-intro .hz-eyebrow {
	color: #9ed5de;
}

body.page-id-30 .hz-custom-hero {
	background:
		linear-gradient(90deg, rgba(11, 32, 51, 0.99) 0%, rgba(16, 44, 70, 0.93) 55%, rgba(16, 44, 70, 0.42) 100%),
		url("/wp-content/uploads/2026/08/special-structure-gold.webp") center right / cover no-repeat !important;
}

body.page-id-32 .hz-mfg-intro {
	background:
		linear-gradient(90deg, rgba(11, 32, 51, 0.99) 0%, rgba(16, 44, 70, 0.94) 56%, rgba(16, 44, 70, 0.38) 100%),
		url("/wp-content/uploads/2026/08/kba-rapida-press.webp") center right / cover no-repeat !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	box-shadow: 0 24px 52px rgba(11, 32, 51, 0.18);
	color: #eaf3f6;
	padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 6vw, 5rem);
}

body.page-id-32 .hz-mfg-intro h1,
body.page-id-32 .hz-mfg-intro h2 {
	color: #ffffff;
}

body.page-id-32 .hz-mfg-intro .hz-eyebrow {
	color: #9ed5de;
}

body.page-id-34 .hz-contact-hero {
	background:
		linear-gradient(90deg, rgba(11, 32, 51, 0.99) 0%, rgba(16, 44, 70, 0.94) 56%, rgba(16, 44, 70, 0.46) 100%),
		url("/wp-content/uploads/2026/08/design-service-team.webp") center / cover no-repeat !important;
}

body.page-id-115 .hzcs-hero {
	background:
		linear-gradient(90deg, rgba(11, 32, 51, 0.99) 0%, rgba(16, 44, 70, 0.94) 55%, rgba(16, 44, 70, 0.42) 100%),
		url("/wp-content/uploads/2026/08/wine-rigid-box.webp") center right / cover no-repeat !important;
}

/* Product and guide families: blueprint dots reference dielines and print registration. */
.hzp-hero,
.hzg-hero {
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.075) 0 1px, transparent 1.4px) 0 0 / 18px 18px,
		radial-gradient(circle at 88% 18%, rgba(239, 125, 47, 0.18), transparent 20rem),
		linear-gradient(128deg, #0b2033 0%, #102c46 58%, #174c62 100%) !important;
}

.hzp-proofstrip,
.hz-about-proof,
.hz-mfg-proof {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 247, 0.98)),
		repeating-linear-gradient(90deg, transparent 0 47px, rgba(16, 44, 70, 0.05) 47px 48px) !important;
	border-top: 1px solid rgba(16, 44, 70, 0.08);
	border-bottom: 1px solid rgba(16, 44, 70, 0.08);
}

/* Light sections alternate between clean paper and a very subtle print-dot texture. */
.hzp-section:not(.hzp-section-soft),
.hzg-section:not(.hzg-section-soft),
.hzcs-section,
.hz-about-section:not(.hz-about-position):not(.hz-about-cert),
.hz-mfg-split,
.hz-mfg-route,
.hz-mfg-capacity,
.hz-custom-intro,
.hz-option-grid,
.hz-showcase,
.hz-process,
.hz-contact-main,
.hz-contact-steps {
	background:
		radial-gradient(circle at 92% 8%, rgba(11, 96, 118, 0.055), transparent 24rem),
		linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%) !important;
}

.hzp-section-soft,
.hzg-section-soft,
.hzcs-system,
.hz-about-position,
.hz-about-cert,
.hz-mfg-cert,
.hz-contact-note {
	background-color: var(--hz-bg-soft) !important;
	background-image:
		radial-gradient(circle, rgba(16, 44, 70, 0.06) 0 1px, transparent 1.35px),
		linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(232, 242, 246, 0.94)) !important;
	background-size: 20px 20px, auto !important;
}

/* Strong dark sections share a fine ink-line texture. */
.hzp-cta,
.hzg-cta,
.hzcs-cta,
.hz-about-cta,
.hz-mfg-cta,
.hz-custom-cta,
.hz-callout,
.hz-mfg-qc {
	background:
		radial-gradient(circle at 86% 16%, rgba(239, 125, 47, 0.2), transparent 20rem),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 12px),
		linear-gradient(135deg, #0b2033 0%, #102c46 62%, #174c62 100%) !important;
}

/* Products hub directory and project cards sit on a defined surface. */
body.page-id-27 .hz-directory,
body.page-id-27 .hz-cases,
body.page-id-115 .hzcs-section {
	border: 1px solid rgba(16, 44, 70, 0.08);
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(16, 44, 70, 0.055);
}

body.page-id-27 .hz-directory,
body.page-id-27 .hz-cases {
	padding: clamp(2.25rem, 5vw, 4.25rem) clamp(1.25rem, 4vw, 3rem);
}

/* Contact form and privacy policy use a calm document surface. */
body.page-id-34 #quote-form {
	box-sizing: border-box;
	background:
		radial-gradient(circle at 100% 0%, rgba(11, 96, 118, 0.07), transparent 18rem),
		linear-gradient(180deg, #ffffff, #f8fbfc) !important;
	border: 1px solid rgba(16, 44, 70, 0.1);
	border-radius: 20px;
	box-shadow: 0 20px 48px rgba(16, 44, 70, 0.08);
	padding: clamp(1.15rem, 3vw, 2.5rem);
}

body.page-id-3 article.page {
	box-sizing: border-box;
	background:
		radial-gradient(circle at 100% 0%, rgba(11, 96, 118, 0.065), transparent 24rem),
		linear-gradient(180deg, #ffffff, #f8fbfc) !important;
	border: 1px solid rgba(16, 44, 70, 0.09);
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(16, 44, 70, 0.07);
	padding: clamp(1.4rem, 4vw, 4rem);
}

/* Keep cards distinct from their newly textured surroundings. */
.hzp-card,
.hzg-card,
.hz-product-card,
.hz-case,
.hzcs-case,
.hz-about-card,
.hz-mfg-card,
.hz-option-card,
.hz-step {
	background-color: rgba(255, 255, 255, 0.97) !important;
	border-color: rgba(16, 44, 70, 0.1) !important;
}

/* Contrast corrections on newly light surfaces. */
.hz-about-section .hz-about-ey,
.hzcs-section .hzcs-ey {
	color: #0b6d87 !important;
}

.hzcs-btn {
	background: #f7ab24 !important;
	color: #102c46 !important;
}

.hzcs-btn:hover,
.hzcs-btn:focus-visible {
	background: #ffc14d !important;
	color: #071a2b !important;
}

/* The RFQ stays a crisp white work surface with clearly visible controls. */
body.page-id-34 #quote-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .forminator-input, .select2-selection, .forminator-multi-upload) {
	background-color: #ffffff !important;
	border-color: #64748b !important;
}

body.page-id-34 #quote-form :is(input, select, .forminator-input, .select2-selection, .forminator-button-submit) {
	min-height: 44px;
}

body.page-id-34 #quote-form :is(button[type="submit"], input[type="submit"], .forminator-button-submit) {
	min-height: 48px;
}

body.page-id-34 #quote-form :is(input, textarea, .forminator-input)::placeholder {
	color: #64748b !important;
	opacity: 1;
}

body.page-id-34 #quote-form :is(input, select, textarea, button, .forminator-input, .forminator-checkbox, .select2-selection, .forminator-multi-upload, .forminator-button-submit):focus-visible,
body.page-id-34 #quote-form .select2-container:focus-within .select2-selection {
	outline: 3px solid #0b6d87 !important;
	outline-offset: 3px;
}

body.page-id-34 #quote-form .forminator-checkbox {
	min-height: 44px;
	align-items: center;
}

/* Mobile backgrounds prioritize legibility and avoid expensive visual effects. */
@media (max-width: 767px) {
	html,
	body {
		overflow-x: clip;
	}

	body.wp-singular {
		background-image: linear-gradient(180deg, #f8fbfc 0%, #f0f5f7 100%);
	}

	.entry-content,
	.entry-content > section,
	.entry-content img,
	.entry-content form {
		box-sizing: border-box;
		max-width: 100%;
	}

	.entry-content img {
		height: auto;
	}

	.ast-primary-header-bar {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.page-id-27 .hz-intro,
	body.page-id-32 .hz-mfg-intro {
		padding: 3.25rem 1.25rem;
		border-radius: 14px;
	}

	body.page-id-22 .hz-about-hero,
	body.page-id-27 .hz-intro,
	body.page-id-30 .hz-custom-hero,
	body.page-id-32 .hz-mfg-intro,
	body.page-id-34 .hz-contact-hero,
	body.page-id-115 .hzcs-hero {
		background-position: 62% center !important;
		background-color: #071a2b !important;
		background-blend-mode: multiply;
	}

	body.home .entry-content > section:first-of-type {
		background-position: 62% center !important;
		background-color: #071a2b !important;
		background-blend-mode: multiply;
	}

	body.page-id-27 .hz-directory,
	body.page-id-27 .hz-cases,
	body.page-id-34 #quote-form,
	body.page-id-3 article.page {
		border-radius: 14px;
	}
}

@media (prefers-contrast: more) {
	body.page-id-22 .hz-about-hero,
	body.page-id-27 .hz-intro,
	body.page-id-30 .hz-custom-hero,
	body.page-id-32 .hz-mfg-intro,
	body.page-id-34 .hz-contact-hero,
	body.page-id-115 .hzcs-hero,
	body.home .entry-content > section:first-of-type {
		background-color: #0b2033 !important;
		background-blend-mode: multiply;
	}

	.hzp-card,
	.hzg-card,
	.hz-product-card,
	.hz-case,
	.hzcs-case,
	.hz-about-card,
	.hz-mfg-card,
	.hz-option-card,
	.hz-step,
	body.page-id-34 #quote-form,
	body.page-id-3 article.page {
		border-width: 2px !important;
		box-shadow: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.entry-content *,
	.site-footer * {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	body.wp-singular,
	body.wp-singular.page #content,
	.site-content,
	.entry-content,
	.entry-content > section,
	.entry-content article,
	.ast-primary-header-bar,
	.site-below-footer-wrap,
	.hzp-hero,
	.hzg-hero,
	.hz-about-hero,
	.hz-custom-hero,
	.hz-mfg-intro,
	.hz-contact-hero,
	.hzcs-hero {
		background: Canvas !important;
		background-image: none !important;
		box-shadow: none !important;
		color: CanvasText !important;
	}

	.entry-content h1,
	.entry-content h2,
	.entry-content h3,
	.entry-content p,
	.entry-content li,
	.entry-content a,
	.site-footer,
	.site-footer p,
	.site-footer a,
	.site-footer .ast-footer-copyright {
		color: CanvasText !important;
	}

	.hz-about-hero img {
		display: none !important;
	}

	.hzp-card,
	.hzg-card,
	.hz-product-card,
	.hz-case,
	.hzcs-case,
	.hz-about-card,
	.hz-mfg-card,
	.hz-option-card,
	.hz-step,
	body.page-id-34 #quote-form,
	body.page-id-3 article.page,
	body.page-id-34 #quote-form :is(input, select, textarea, button, .forminator-input, .select2-selection, .forminator-multi-upload, .forminator-button-submit) {
		border: 2px solid CanvasText !important;
		box-shadow: none !important;
	}
}

@media print {
	body.wp-singular,
	.site-content,
	.entry-content,
	.entry-content section,
	.entry-content article,
	.site-below-footer-wrap {
		background: #ffffff !important;
		box-shadow: none !important;
	}

	.site-footer,
	.site-footer p,
	.site-footer a,
	.site-footer .ast-footer-copyright {
		color: #000000 !important;
	}

	.hz-mobile-contact,
	#ast-scroll-top,
	.entry-content::before,
	.entry-content::after,
	.entry-content section::before,
	.entry-content section::after {
		display: none !important;
	}
}