/**
 * JT Page (Generic) — long-form prose styling.
 *
 * Loads on pages using the jt-page.php template (Privacy Policy, Thank You,
 * Thought Leadership). Adds typographic rhythm + brand-aligned styling for
 * heading levels, lists, links, and the lede block inside .jt-page-content.
 *
 * Plays inside the max-w-3xl text-lg leading-relaxed wrapper that the
 * template ships with — this file just adds the prose-specific polish on top.
 */

:root {
	--jtp-red: #d71920;
	--jtp-ink: #111111;
	--jtp-muted: rgba(17, 17, 17, 0.55);
	--jtp-line: rgba(17, 17, 17, 0.08);
	--jtp-soft: rgba(17, 17, 17, 0.04);
	--jtp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────────────────
   H1 hero — the template uses Tailwind arbitrary values
   (text-[clamp(2.5rem,7vw,5.4rem)] etc.) but those aren't compiled into
   the legacy global main.css build, so we re-declare the same scale here.
   Matches DESIGN-SYSTEM.md §2.2 "Page H1 (hero)" token. ──────────────── */

.jt-page-2026 main > section:first-of-type h1 {
	font-size: clamp(2.5rem, 7vw, 5.4rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--jtp-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   Lede / "Effective: ..." line — first paragraph of the body, bumped to a
   styled meta block with a divider rule below it. ────────────────────── */

.jt-page-content > p:first-child {
	font-size: 0.92em;
	color: var(--jtp-muted);
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--jtp-line);
	letter-spacing: 0.005em;
}

.jt-page-content > p:first-child strong {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jtp-red);
}

/* ─────────────────────────────────────────────────────────────────────────
   Section H2 — bigger, bolder, with breathing room and a hairline rule
   above each section so the eye picks up the new topic. ──────────────── */

.jt-page-content h2 {
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--jtp-ink);
	margin: 3.5rem 0 1.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--jtp-line);
}

/* The first H2 (right after the lede divider) doesn't need a second rule. */
.jt-page-content > p:first-child + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   H3 — used for sub-sections inside an H2 group (rare in privacy policy
   but ready for future content). ─────────────────────────────────────── */

.jt-page-content h3 {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--jtp-ink);
	margin: 2.5rem 0 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Body paragraphs — comfortable line-length and rhythm. ──────────────── */

.jt-page-content p {
	margin-bottom: 1.25rem;
}

.jt-page-content p:last-child {
	margin-bottom: 0;
}

/* The intro section under the H1 hero feels lighter-weight. */
.jt-page-content > p:nth-child(2),
.jt-page-content > p:nth-child(3) {
	color: rgba(17, 17, 17, 0.78);
}

/* ─────────────────────────────────────────────────────────────────────────
   Lists — custom red dash bullets, tighter rhythm, indented content. ── */

.jt-page-content ul {
	list-style: none;
	margin: 1.25rem 0 1.75rem;
	padding: 0;
}

.jt-page-content ul li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.85rem;
	line-height: 1.65;
}

.jt-page-content ul li:last-child {
	margin-bottom: 0;
}

.jt-page-content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.78em;
	width: 0.65rem;
	height: 2px;
	background: var(--jtp-red);
	border-radius: 2px;
}

/* Strong text inside bullets — matches the "Submit our contact form." style
   pattern. Tighten spacing after the bold label so the explanation reads
   like a continuation. */
.jt-page-content ul li strong {
	color: var(--jtp-ink);
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
   Inline emphasis. ──────────────────────────────────────────────────── */

.jt-page-content strong {
	color: var(--jtp-ink);
	font-weight: 700;
}

.jt-page-content em {
	font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   Inline code (cookie names, file paths, technical bits). ────────────── */

.jt-page-content code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--jtp-soft);
	color: var(--jtp-ink);
	padding: 0.15em 0.45em;
	border-radius: 4px;
	border: 1px solid var(--jtp-line);
}

/* ─────────────────────────────────────────────────────────────────────────
   Links — brand red with subtle underline; on hover the underline darkens
   to ink. Never browser-default blue. ──────────────────────────────── */

.jt-page-content a {
	color: var(--jtp-red);
	text-decoration: underline;
	text-decoration-color: rgba(215, 25, 32, 0.35);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition:
		color 200ms var(--jtp-ease),
		text-decoration-color 200ms var(--jtp-ease);
}

.jt-page-content a:hover,
.jt-page-content a:focus-visible {
	color: var(--jtp-ink);
	text-decoration-color: var(--jtp-ink);
}

.jt-page-content a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.18);
	border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Final "Contact Us" block — the last paragraph after the last H2 gets a
   subtle card treatment so the address/phone/email read as a callout
   instead of more body copy. ──────────────────────────────────────── */

.jt-page-content h2:last-of-type + p {
	background: var(--jtp-soft);
	border: 1px solid var(--jtp-line);
	border-left: 3px solid var(--jtp-red);
	border-radius: 14px;
	padding: 1.5rem 1.75rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	line-height: 1.85;
}

.jt-page-content h2:last-of-type + p strong {
	display: block;
	font-size: 1.1em;
	font-weight: 800;
	letter-spacing: -0.005em;
	color: var(--jtp-ink);
	margin-bottom: 0.35rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile tightening. ───────────────────────────────────────────────── */

@media (max-width: 640px) {
	.jt-page-content h2 {
		margin-top: 2.75rem;
		padding-top: 1.75rem;
	}

	.jt-page-content ul li {
		padding-left: 1.5rem;
	}

	.jt-page-content h2:last-of-type ~ p:nth-of-type(1) {
		padding: 1.25rem 1.25rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   Hero — the H1 lives in the template, but bumping its bottom padding
   here tightens the connection to the body content so the page reads
   as one composition instead of two stacked blocks. ─────────────────── */

.jt-page-2026 main > section:first-child {
	padding-bottom: 1.5rem;
}

/* Re-apply the JT body wrapper's max-w-3xl on small screens (already there
   via the template) but ensure consistent left/right gutters with the
   navbar at desktop sizes. The template already uses px-6 md:px-12 + the
   max-w-7xl mx-auto pattern, so this is a no-op safety net. */
.jt-page-2026 .jt-page-content {
	font-feature-settings: "liga", "kern";
	hyphens: auto;
}