:root {
	--tj-color-bg: var(--wp--preset--color--bg, #f4f1ed);
	--tj-color-surface: var(--wp--preset--color--surface, #faf7f2);
	--tj-color-surface-2: var(--wp--preset--color--surface-2, #ffffff);
	--tj-color-ink: var(--wp--preset--color--ink, #18221f);
	--tj-color-ink-2: var(--wp--preset--color--ink-2, #2b3433);
	--tj-color-muted: var(--wp--preset--color--mute, #5f6766);
	--tj-color-rule: var(--wp--preset--color--rule, #ddd7cb);
	--tj-color-primary: var(--wp--preset--color--primary, #2f5f65);
	--tj-color-primary-soft: var(--wp--preset--color--primary-soft, #dce8e8);
	--tj-color-accent: var(--wp--preset--color--accent, #b27b53);
	--tj-radius-card: 8px;
	--tj-radius-button: 999px;
	--tj-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tj-color-primary) 35%, transparent);
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--tj-color-bg);
	color: var(--tj-color-ink);
}

body.admin-bar .tj-skip-link {
	top: 32px;
}

.tj-skip-link {
	position: absolute;
	left: var(--wp--preset--spacing--30, 1rem);
	top: var(--wp--preset--spacing--30, 1rem);
	z-index: 100000;
	transform: translateY(-150%);
	border: 1px solid var(--tj-color-rule);
	border-radius: var(--tj-radius-button);
	background: var(--tj-color-surface-2);
	color: var(--tj-color-ink);
	padding: 0.75rem 1rem;
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--md, 0 12px 32px rgba(21, 32, 28, 0.08));
}

.tj-skip-link:focus {
	transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--tj-color-primary);
	outline-offset: 3px;
	box-shadow: var(--tj-focus-ring);
}

:where(.wp-block-button__link) {
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.tj-no-feature-motion :where(.wp-block-button__link) {
	transition: none;
}

body.tj-feature-motion :where(.wp-block-button__link):hover {
	transform: translateY(-1px);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-cover) {
	box-sizing: border-box;
}

:where(.wp-block-cover) {
	overflow: hidden;
}

:where(.wp-block-image img) {
	display: block;
	height: auto;
	max-width: 100%;
}

:where(.wp-block-navigation__responsive-container.is-menu-open) {
	padding: var(--wp--preset--spacing--40, 1.5rem);
}

:where(.wp-block-details summary) {
	cursor: pointer;
	font-weight: 600;
}

/* Primary nav (rendered from patterns/header-content.php as a flex nav) */
.tj-primary-nav {
	display: flex;
	gap: var(--wp--preset--spacing--30, 1rem);
	align-items: center;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.tj-primary-nav a {
	color: var(--tj-color-ink);
	text-decoration: none;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}

.tj-primary-nav a:hover,
.tj-primary-nav a:focus-visible {
	color: var(--tj-color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Hamburger toggle — hidden on desktop; headers that opt in carry
   `.tj-has-nav-toggle` on their outer group plus a `.tj-nav-toggle` button.
   assets/js/nav.js flips `.tj-menu-open` on the opted-in group. Headers
   without the toggle keep the legacy hide-nav-on-mobile behaviour. */
.tj-nav-toggle {
	display: none;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
}

.tj-nav-toggle span {
	position: absolute;
	left: 5px;
	right: 5px;
	height: 2px;
	background: var(--tj-color-ink);
	border-radius: 2px;
	transition: transform 350ms cubic-bezier(.22, 1, .36, 1), opacity 250ms ease;
}

.tj-nav-toggle span:nth-child(1) { top: 10px; }
.tj-nav-toggle span:nth-child(2) { top: 15px; }
.tj-nav-toggle span:nth-child(3) { top: 20px; }

.tj-menu-open .tj-nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.tj-menu-open .tj-nav-toggle span:nth-child(2) { opacity: 0; }
.tj-menu-open .tj-nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

:where(.wp-block-details > :last-child) {
	margin-bottom: 0;
}

body.tj-no-feature-pattern-ornaments .is-style-monolith-meta,
body.tj-no-feature-pattern-ornaments .eyebrow {
	letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
 * Sticky mobile CTA bar — fixed-bottom, mobile only, feature-gated
 * Auto-rendered via TJ_Theme::render_sticky_mobile_cta() when the
 * sticky_mobile_cta feature flag is on. Hidden by default; the
 * @media + body class combo makes it visible only on phones.
 * ───────────────────────────────────────────────────────────────── */

.tj-sticky-cta {
	display: none;
}

@media (max-width: 782px) {
	body.tj-feature-sticky-mobile-cta .tj-sticky-cta {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 90;
		align-items: center;
		gap: 12px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--surface-2, var(--wp--preset--color--surface));
		border-top: 1px solid var(--wp--preset--color--rule);
		box-shadow: 0 -4px 14px rgba(21, 32, 28, 0.08);
	}

	body.tj-feature-sticky-mobile-cta.admin-bar .tj-sticky-cta {
		bottom: 0;
	}

	.tj-sticky-cta__eyebrow {
		flex: 0 0 auto;
		font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui, sans-serif);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wp--preset--color--mute);
		display: none;
	}

	@media (min-width: 481px) {
		.tj-sticky-cta__eyebrow { display: inline; }
	}

	.tj-sticky-cta__primary {
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--bg);
		padding: 12px 18px;
		border-radius: 999px;
		font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui, sans-serif);
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.01em;
		text-decoration: none;
		white-space: nowrap;
		transition: background 0.15s ease;
	}

	.tj-sticky-cta__primary:hover,
	.tj-sticky-cta__primary:focus-visible {
		background: var(--wp--preset--color--ink);
	}

	.tj-sticky-cta__secondary {
		flex: 0 0 auto;
		font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui, sans-serif);
		font-size: 14px;
		font-weight: 500;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		padding: 8px 4px;
	}

	.tj-sticky-cta__secondary:hover,
	.tj-sticky-cta__secondary:focus-visible {
		color: var(--wp--preset--color--primary);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* Ensure page content doesn't sit under the sticky bar */
	body.tj-feature-sticky-mobile-cta {
		padding-bottom: 70px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .tj-skip-link {
		top: 46px;
	}

	:where(header.wp-block-template-part > .wp-block-group, header .wp-block-group:first-child) {
		padding-inline: var(--wp--preset--spacing--30, 1rem) !important;
	}

	:where(header .wp-block-group) {
		gap: var(--wp--preset--spacing--20, 0.75rem);
	}

	:where(.wp-block-buttons) {
		width: 100%;
	}

	:where(.wp-block-button, .wp-block-button__link) {
		width: 100%;
	}

	:where(.wp-block-button__link) {
		text-align: center;
	}

	/* Headers WITHOUT a hamburger keep the legacy behaviour: nav hides,
	   mobile users have the CTA button in the header + footer nav. */
	.tj-primary-nav {
		display: none;
	}

	/* Headers WITH `.tj-has-nav-toggle` get the full-screen overlay menu.
	   Structure only — the active vibe skins colours/typography. */
	.tj-has-nav-toggle .tj-nav-toggle {
		display: block;
		position: relative;
		z-index: 1600;
	}

	.tj-has-nav-toggle .tj-primary-nav {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 1500;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		background: color-mix(in srgb, var(--wp--preset--color--bg, #fff) 98%, transparent);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 500ms;
	}

	.tj-has-nav-toggle.tj-menu-open .tj-primary-nav {
		transform: none;
		opacity: 1;
		visibility: visible;
		transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1);
	}

	.tj-has-nav-toggle .tj-primary-nav a {
		display: inline-block;
		font-size: 21px;
		letter-spacing: 0.02em;
		padding: 16px 24px;
	}
}