/* ---------------------------------------------------------------------------
   OT Framework — component layer.
   Every colour, size and space below references a theme.json token, so the
   Site Editor stays the single source of truth for brand values.
   --------------------------------------------------------------------------- */

/* Small caps label used above pattern headings. */
.ot-eyebrow {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

/* Demo marker: visible reminder that copy is placeholder. */
.ot-demo-tag {
	border: 1px dashed var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--ot--radius);
	color: var(--wp--preset--color--slate);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	padding: 0.15em 0.55em;
	text-transform: uppercase;
}

/* Hero trust row: three short proof points under the buttons. */
.ot-trust {
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
}

.ot-trust > p {
	color: var(--wp--preset--color--paper);
	flex: 1 1 12rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	margin: 0;
	opacity: 0.9;
}

/* Outline button style (registered in functions.php). */
.wp-block-button.is-style-ot-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-ot-outline .wp-block-button__link:hover,
.wp-block-button.is-style-ot-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Group block style used for cards/panels. */
.is-style-ot-panel {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--ot--radiusLg);
	box-shadow: var(--wp--custom--ot--shadow);
}

/* Local placeholder media: grey silhouette art that is safe to swap out. */
.ot-placeholder {
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--ot--radiusLg);
	display: block;
	width: 100%;
}

.ot-placeholder img {
	display: block;
	width: 100%;
}

/* Product query grid: three-up by default, stacks on narrow screens. */
.ot-product-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--50);
}

.ot-product-grid .wp-block-post {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--ot--radiusLg);
	overflow: hidden;
}

.ot-product-grid .wp-block-post-featured-image {
	margin: 0;
}

.ot-product-grid .wp-block-post-title,
.ot-product-grid .wp-block-post-excerpt,
.ot-product-grid .wp-block-read-more {
	margin-left: var(--wp--preset--spacing--40);
	margin-right: var(--wp--preset--spacing--40);
}

.ot-product-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	margin-top: var(--wp--preset--spacing--40);
}

.ot-product-grid .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--small);
}

.ot-product-grid .wp-block-read-more {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* FAQ pattern rhythm. */
.ot-faq .wp-block-details + .wp-block-details {
	margin-top: var(--wp--preset--spacing--30);
}

/* Footer pattern. */
.ot-footer-columns h2,
.ot-footer-columns h3 {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ot-footer-columns p,
.ot-footer-columns a {
	color: rgba(247, 245, 240, 0.78);
	font-size: var(--wp--preset--font-size--small);
}

.ot-footer-columns a:hover,
.ot-footer-columns a:focus {
	color: var(--wp--preset--color--sand);
}

.ot-footer-legal {
	border-top: 1px solid rgba(247, 245, 240, 0.18);
	font-size: var(--wp--preset--font-size--small);
	padding-top: var(--wp--preset--spacing--50);
}

/* Mobile: keep pattern padding comfortable without inline overrides. */
@media (max-width: 600px) {
	.ot-trust {
		gap: var(--wp--preset--spacing--30);
	}

	.ot-product-grid .wp-block-post-title,
	.ot-product-grid .wp-block-post-excerpt,
	.ot-product-grid .wp-block-read-more {
		margin-left: var(--wp--preset--spacing--30);
		margin-right: var(--wp--preset--spacing--30);
	}
}

/* Hero: guarantee paper heading on the dark cover. */
.ot-hero h1,
.ot-hero .wp-block-heading {
	color: var(--wp--preset--color--paper);
}