/* Signature topographic contour-line motif, applied to dark bands only
   (header/footer/hero — see .snh-contour-band usages in parts/ and patterns/).
   This is a functional placeholder: a lightweight inline SVG data-URI so the
   motif exists without an external image request. The design pass (step 19)
   replaces this with the refined artwork; do not treat this line-weight/
   spacing as final. Build Spec v2 §1, §G. */

:root {
	--snh-contour-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M-10 140 Q 40 100 90 140 T 190 140 T 250 140'/%3E%3Cpath d='M-10 110 Q 40 70 90 110 T 190 110 T 250 110'/%3E%3Cpath d='M-10 80 Q 40 40 90 80 T 190 80 T 250 80'/%3E%3Cpath d='M-10 50 Q 40 10 90 50 T 190 50 T 250 50'/%3E%3C/g%3E%3C/svg%3E");
}

.snh-contour-band {
	background-image: var(--snh-contour-motif);
	background-repeat: repeat;
	background-size: 220px auto;
}

/* Mobile-first base: ensure interactive controls hit the ~44px tap target
   floor everywhere, per Build Spec v2 §0 hard requirement. */
button,
.wp-block-button__link,
input[type="submit"],
select,
a.wp-block-button__link {
	min-height: 44px;
}

/* Respect reduced-motion preference site-wide. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Visible keyboard focus everywhere (accessibility hard requirement). */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-teal);
	outline-offset: 2px;
}

/* =========================================================================
   Design system — step 19 (design pass), applied from the handed-over trek
   page mockup. Colours/type already matched theme.json's locked §1 tokens
   exactly, so this is layout/component treatment only, expressed as CSS
   against the theme.json custom-property names (never hardcoded hex) so a
   future retheme only needs new preset values, not new markup.
   ========================================================================= */

.snh-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep-teal);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.snh-eyebrow::before {
	content: "";
	width: 20px;
	height: 1.5px;
	background: var(--wp--preset--color--brand-teal);
	opacity: 0.6;
}

/* Header */
.snh-site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(247, 250, 250, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--lines-soft);
}
.snh-primary-nav a {
	font-weight: 600;
	font-size: 0.9rem;
	opacity: 0.82;
}
.snh-primary-nav a:hover {
	opacity: 1;
	color: var(--wp--preset--color--deep-teal);
}
.snh-partner-login a {
	opacity: 0.7;
}
.snh-header-cta .wp-block-button__link {
	box-shadow: 0 6px 18px rgba(0, 152, 176, 0.3);
}

/* Footer */
.snh-site-footer {
	padding: 60px 0 30px;
	background: var(--wp--preset--color--night) !important;
}
.snh-site-footer h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7c8686;
	margin: 0 0 14px;
}
.snh-site-footer a {
	opacity: 0.85;
}
.snh-site-footer a:hover {
	opacity: 1;
	color: var(--wp--preset--color--brand-teal);
}
.snh-footer-legal-nav a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
}

/* Buttons — core Woo/WP buttons already themed via theme.json; these add the
   two extra variants the mockup uses (outline "ghost" and WhatsApp-green). */
.snh-btn-ghost {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--lines) !important;
}
.snh-btn-ghost:hover {
	border-color: var(--wp--preset--color--brand-teal) !important;
	color: var(--wp--preset--color--deep-teal) !important;
}
.snh-btn-wa {
	background: var(--wp--preset--color--night) !important;
	color: #fff !important;
}
.snh-btn-wa:hover {
	background: var(--wp--preset--color--brand-ink) !important;
}

/* Breadcrumbs */
.snh-breadcrumbs-part,
.snh-breadcrumbs-fallback {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-soft);
}
.snh-breadcrumbs-fallback a:hover {
	color: var(--wp--preset--color--deep-teal);
}

/* Full-width content bands used site-wide (trust strip, reviews, FAQ,
   credibility, cross-sell, final CTA — see templates/single-product.html). */
.snh-band {
	padding: 70px 0;
	border-top: 1px solid var(--wp--preset--color--lines-soft);
}
.snh-band.is-dark {
	background: var(--wp--preset--color--night);
	color: #eaf3f3;
	border: 0;
}
.snh-band.is-dark :is(h1, h2, h3, h4) {
	color: #fff;
}
.snh-band-heading {
	margin-bottom: 30px;
}
.snh-band-heading h2 {
	font-size: 1.9rem;
	margin-top: 14px;
}