/*
 * Styling for arbitrary WordPress editor content — the_content() output on
 * page.php and any WooCommerce/plugin markup that isn't hand-authored with
 * the ported Tailwind utility classes in site.css. The source React site
 * never had this problem (every page is JSX with explicit classes); this
 * file exists only because WordPress pages can contain free-form HTML from
 * the block editor that site.css was never built to style.
 *
 * Reuses the same custom properties site.css defines (--color-navy, --fs-*,
 * etc.) rather than new values, so this never drifts from the ported brand.
 */

.prose-content h2,
.prose-content h3,
.prose-content h4 {
	color: var(--color-navy);
	font-weight: 800;
	text-wrap: balance;
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.prose-content h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.prose-content h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.prose-content p {
	margin-bottom: 1.2em;
}

.prose-content a {
	color: var(--color-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose-content a:hover {
	color: var(--color-red);
}

.prose-content ul,
.prose-content ol {
	margin: 0 0 1.2em 1.4em;
}

.prose-content ul {
	list-style: disc;
}

.prose-content ol {
	list-style: decimal;
}

.prose-content li {
	margin-bottom: 0.4em;
}

.prose-content blockquote {
	border-left: 4px solid var(--color-red);
	padding-left: 1.2em;
	margin: 1.6em 0;
	color: var(--color-ink-soft);
	font-style: italic;
}

.prose-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.6em;
}

.prose-content th,
.prose-content td {
	border: 1px solid var(--color-line);
	padding: 0.6em 0.8em;
	text-align: left;
}

.prose-content th {
	background: var(--color-off-white);
	color: var(--color-navy);
	font-weight: 700;
}

.prose-content img {
	border-radius: var(--radius-brand);
	max-width: 100%;
	height: auto;
}

.prose-content hr {
	border: none;
	border-top: 1px solid var(--color-line);
	margin: 2em 0;
}

/*
 * WooCommerce — minimal brand pass only (button color, price color, link
 * color) so store.glblpartners.com doesn't look like an unstyled plugin
 * bolted onto the site on day one. WooCommerce's own default CSS still
 * handles layout/grid/spacing; a real product-grid and single-product
 * visual pass is deferred until there's a live catalog to design against
 * (see theme README "Deferred").
 */
.woocommerce-wrap .button,
.woocommerce-wrap button.button,
.woocommerce-wrap a.button,
.woocommerce-wrap .woocommerce-message a.button,
.woocommerce-wrap input.button {
	background: var(--color-red);
	color: #fff;
	border-radius: 6px;
	font-weight: 700;
	border: none;
	padding: 12px 24px;
}

.woocommerce-wrap .button:hover,
.woocommerce-wrap button.button:hover,
.woocommerce-wrap a.button:hover {
	background: var(--color-red-dark);
}

.woocommerce-wrap .price {
	color: var(--color-navy);
	font-weight: 800;
}

.woocommerce-wrap a:not(.button) {
	color: var(--color-navy);
}

.woocommerce-wrap a:not(.button):hover {
	color: var(--color-red);
}

/*
 * Scroll-reveal — the CSS half of assets/js/site.js's IntersectionObserver.
 * Matches src/components/ui/Reveal.jsx's own values (22px travel, 0.55s,
 * ease [0.22, 1, 0.36, 1] approximated with cubic-bezier below, since
 * framer-motion isn't available outside React).
 */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}