/*
 * WordPress-specific additions to the Production stylesheet (legacy.css):
 * - the few Tailwind utilities the Production components used (ImageWithSkeleton, NewsCard);
 * - animate.css fadeInUp used by the Production ScrollReveal;
 * - "fill" images (Next.js <Image fill>), WordPress admin bar offset, accessibility helpers.
 */

/*
 * Tailwind utilities used by Production markup. On Production they sit in @layer utilities,
 * which loses against the (unlayered) module CSS — keep the same cascade here.
 */
@layer theme, base, components, utilities;
@layer utilities {
	.relative { position: relative; }
	.absolute { position: absolute; }
	.isolate { isolation: isolate; }
	.inset-0 { inset: 0; }
	.w-full { width: 100%; }
	.h-full { height: 100%; }
	.overflow-hidden { overflow: hidden; }
	.object-cover { object-fit: cover; }
	.object-contain { object-fit: contain; }
	.bg-slate-100 { background-color: var(--color-slate-100, oklch(96.8% 0.007 247.896)); }
	.bg-transparent { background-color: transparent; }
	.sr-only {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
	}
	.aspect-video { aspect-ratio: var(--aspect-video, 16 / 9); }
	.aspect-square { aspect-ratio: 1 / 1; }
}
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Inactive tab panels / slides use the hidden attribute; module classes set display, so enforce it. */
[hidden] { display: none !important; }

/* next/image fill */
img.spg-fill { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; }

/* ScrollReveal: hidden until visible, then animate.css fadeInUp (0.65s default) */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].animate__animated { opacity: 1; animation-duration: var(--animate-duration, 0.65s); animation-fill-mode: both; }
.js [data-reveal].is-revealed { opacity: 1; }
.animate__fadeInUp { animation-name: spg-fadeInUp; }
@keyframes spg-fadeInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to { opacity: 1; transform: translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1; animation: none !important; }
}

/* Highlighted words in the home "about" text (legacy <highlight>) */
mark { background: none; color: inherit; }

/* WordPress admin bar */
.admin-bar .Header-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .Header-header { top: 46px; }
}

/* Inquiry form messages */
.spg-inquiry-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: 4px; }
.spg-inquiry-notice.is-success { background: #ecfdf3; color: #067647; }
.spg-inquiry-notice.is-error { background: #fef3f2; color: #b42318; }
.spg-hp { position: absolute !important; left: -9999px !important; }
/* E07: shown instead of the inquiry form while collection is closed on Production */
.ContactSection-inquiryClosed { margin: 0; padding: 16px 20px; border-left: 4px solid #0b4f8a; background: #f2f6fa; color: #1f2937; line-height: 1.6; }