/*
 * TJ Theme — editorial primitives
 *
 * Shared micro-typography + utility classes used by Premium Soft, Magazine
 * Editorial, and Trades patterns. Ported from
 *   design-databank/_inbox/alice-dietitian/project/src/tokens.css
 * and translated from --ad-* namespacing to TJ Theme's --wp--preset--* tokens.
 *
 * Loaded on every page via TJ_Theme_Assets. Stylesheet stays under 4 KB so
 * WP 6.9 auto-inlines it.
 */

/* ─────────────────────────────────────────────────────────────────
 * Eyebrow — small caps section opener with optional 32px hairline rule
 * ───────────────────────────────────────────────────────────────── */

.tj-eyebrow {
	font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui, sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.tj-eyebrow::after {
	content: '';
	flex: 0 0 32px;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
}

.tj-eyebrow--no-rule::after {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────
 * Ghost link — sans, no underline by default, growing underline on hover
 * ───────────────────────────────────────────────────────────────── */

.tj-ghost-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui, sans-serif);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.005em;
	padding: 10px 0;
	transition: color 0.15s ease;
}

.tj-ghost-link::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 1px;
	background: currentColor;
	margin-left: 6px;
	transition: width 0.15s ease;
}

.tj-ghost-link:hover,
.tj-ghost-link:focus-visible {
	color: var(--wp--preset--color--primary);
}

.tj-ghost-link:hover::after,
.tj-ghost-link:focus-visible::after {
	width: 22px;
}

/* ─────────────────────────────────────────────────────────────────
 * Card shadows — ink-tinted (warmer than neutral grey)
 * ───────────────────────────────────────────────────────────────── */

.tj-card {
	box-shadow:
		0 2px 6px rgba(21, 32, 28, 0.05),
		0 12px 32px rgba(21, 32, 28, 0.07);
	border-radius: 10px;
	background: var(--wp--preset--color--surface-2, var(--wp--preset--color--surface));
}

.tj-card-lift {
	box-shadow:
		0 20px 60px rgba(21, 32, 28, 0.10),
		0 4px 14px rgba(21, 32, 28, 0.06);
	border-radius: 14px;
}

/* ─────────────────────────────────────────────────────────────────
 * Hairline rule
 * ───────────────────────────────────────────────────────────────── */

.tj-rule {
	height: 1px;
	background: var(--wp--preset--color--rule);
	width: 100%;
	border: 0;
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
 * Text-wrap helpers + display tracking
 * ───────────────────────────────────────────────────────────────── */

.tj-text-balance { text-wrap: balance; }
.tj-text-pretty  { text-wrap: pretty; }

.tj-display {
	letter-spacing: -0.022em;
}

/* ─────────────────────────────────────────────────────────────────
 * Chips — pill-shaped labels for category, status, condition tags
 * ───────────────────────────────────────────────────────────────── */

.tj-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui, sans-serif);
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px 5px 9px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft, color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--surface)));
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.tj-chip--dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	flex: 0 0 6px;
}

.tj-chip--accent {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}

.tj-chip--ghost {
	background: transparent;
	border: 1px solid var(--wp--preset--color--rule);
}

/* ─────────────────────────────────────────────────────────────────
 * Block style variations — registered via TJ_Theme::register_block_styles()
 * Each rule hooks into a "TJ — *" style picker that appears in the
 * Block sidebar → Styles section of the Site Editor. Operators apply
 * these without writing CSS.
 * ───────────────────────────────────────────────────────────────── */

/* TJ — Card (lift shadow) — for core/group */
.wp-block-group.is-style-tj-card-lift {
	background: var(--wp--preset--color--surface-2, var(--wp--preset--color--surface));
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40, 1.5rem);
	box-shadow:
		0 20px 60px rgba(21, 32, 28, 0.10),
		0 4px 14px rgba(21, 32, 28, 0.06);
}

/* TJ — Editorial frame — hairline top + bottom + tighter inner spacing */
.wp-block-group.is-style-tj-editorial {
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: var(--wp--preset--spacing--50, 2rem) 0;
}

/* TJ — Monolith — square corners + hard ink shadow (Brutalist signature, available everywhere) */
.wp-block-group.is-style-tj-monolith,
.wp-block-cover.is-style-tj-monolith {
	border-radius: 0;
	box-shadow: 8px 8px 0 var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}

/* TJ — Portrait — 4:5 aspect on images, lift shadow */
.wp-block-image.is-style-tj-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	box-shadow:
		0 20px 60px rgba(21, 32, 28, 0.10),
		0 4px 14px rgba(21, 32, 28, 0.06);
}

/* TJ — Rule with dot — replaces a flat separator with two hairlines flanking a centred dot */
.wp-block-separator.is-style-tj-rule-dot {
	border: 0;
	height: auto;
	background: none;
	margin: var(--wp--preset--spacing--50, 2rem) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--wp--preset--color--rule);
	max-width: 100%;
}

.wp-block-separator.is-style-tj-rule-dot::before,
.wp-block-separator.is-style-tj-rule-dot::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
	max-width: 200px;
}

/* The centre dot — uses ink colour so it stands out from the rule */
.wp-block-separator.is-style-tj-rule-dot {
	position: relative;
}

.wp-block-separator.is-style-tj-rule-dot::marker {
	content: '';
}

.wp-block-separator.is-style-tj-rule-dot {
	background: radial-gradient(circle, var(--wp--preset--color--ink) 3px, transparent 3.5px) center / 6px 6px no-repeat;
	min-height: 6px;
}

/* ─────────────────────────────────────────────────────────────────
 * Card hover lift — only fires when the `motion` feature flag is on.
 * Gives .tj-card / .tj-card-lift a subtle responsive feel on hover.
 * Respects prefers-reduced-motion via the body.tj-no-feature-motion
 * default and the global @media reduce rule in theme.css.
 * ───────────────────────────────────────────────────────────────── */

body.tj-feature-motion .tj-card,
body.tj-feature-motion .tj-card-lift {
	transition: transform 180ms ease, box-shadow 180ms ease;
}

body.tj-feature-motion .tj-card:hover,
body.tj-feature-motion .tj-card-lift:hover {
	transform: translateY(-2px);
	box-shadow:
		0 6px 16px rgba(21, 32, 28, 0.08),
		0 24px 48px rgba(21, 32, 28, 0.10);
}

/* ─────────────────────────────────────────────────────────────────
 * Mobile button width — primary CTAs go full-width below 600px
 * (already handled in theme.css for ≤782px; this is the same intent
 * with a tighter breakpoint to avoid awkward half-width buttons on
 * mid-size phones).
 * ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.wp-block-buttons:not(.is-layout-flex) .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button .wp-block-button__link {
		display: block;
		text-align: center;
		min-height: 44px;
		line-height: 1.2;
	}
}

/* ─────────────────────────────────────────────────────────────────
 * Stat-row treatment — used by proof-band, hero-search, for-partners.
 * Bumps display weight + tracking so big numbers feel deliberate.
 * ───────────────────────────────────────────────────────────────── */

.tj-stat-number {
	font-family: var(--wp--preset--font-family--serif, Newsreader, Georgia, serif);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
}

/* ─────────────────────────────────────────────────────────────────
 * Icon helper — inline SVG via TJ_Theme_Icons::render()
 * ───────────────────────────────────────────────────────────────── */

.tj-icon {
	display: inline-block;
	vertical-align: -0.125em;
	flex: 0 0 auto;
}

/* Icon prefixing an eyebrow / label */
.tj-eyebrow .tj-icon {
	margin-right: 6px;
	vertical-align: -0.2em;
}

/* Icon inside a chip — slightly tighter to text */
.tj-chip .tj-icon {
	margin-right: 4px;
	vertical-align: -0.15em;
}

/* ─────────────────────────────────────────────────────────────────
 * ::selection — page-wide accent treatment
 * ───────────────────────────────────────────────────────────────── */

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--bg);
}