/*
 * main.css — new theme-level rules only. See CSS-IMPLEMENTATION.md for the
 * full rationale. Nothing here duplicates styles.css (Tailwind build) or
 * custom.css (legacy hand-written component layer, ported verbatim) — this
 * file exists for rules those two files by definition cannot contain: things
 * that only exist because content is now dynamic/WordPress-driven, not
 * because we're improving on the Tailwind/legacy CSS.
 */

/* Skip-link: the source relies on Tailwind utility classes for this
   (see index.html), which are already present via styles.css. This
   fallback exists only in case a future content change strips those
   classes from header.php without anyone noticing. */
.skip-link {
	position: fixed;
	top: 7rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	background: #2563eb;
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	font-weight: 500;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}
.skip-link:focus {
	opacity: 1;
	pointer-events: auto;
}

/* WordPress-default gallery/caption/alignment classes that core outputs on
   the_content() and that neither the Tailwind build nor custom.css has any
   reason to already style, since the static export never went through
   wp_autop/core block markup. Minimal, unopinionated resets only. */
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem; }

/* Word-by-word heading reveal, matching the live production site's actual
 * runtime animation (confirmed by fetching deltawaterproducts.com directly:
 * each heading word is rendered inside its own overflow-hidden mask and
 * slides up from translateY(100%) on scroll-into-view). This technique is
 * generated by the live site's own JS bundle at runtime, so it was never
 * present in the static HTML this theme was originally scraped from — the
 * scrape only ever captured the plain, un-split heading text. See
 * assets/js/word-reveal.js for the split/observe logic; .dw-word-reveal is
 * the marker class applied to a heading's inner <span> in each template
 * that should get this treatment (headings only — body copy/buttons keep
 * the existing simple opacity fade already restored in Phase 5H). */
.dw-word-reveal-wrap { display: inline-block; overflow: hidden; }
.dw-word-reveal-word {
	display: inline-block;
	transform: translateY(100%);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.dw-word-reveal-word.dw-in-view { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.dw-word-reveal-word { transition: none; transform: none; }
}