/*!
 * OnTrack Web Solutions - Batch 1N legal-page treatment
 * Scope: body.otw-legal-page only (page IDs 3 and 20).
 * Loaded by wp-content/mu-plugins/otw-legal-pages.php.
 * Does not touch Batch 1J / Batch 1K assets, the header, or the footer.
 *
 * The legal text lives in WordPress post_content and is the single source of
 * truth. This file styles that rendered output; it never supplies content.
 */

/* ------------------------------------------------------------------
   1. Local tokens - mirror the Elementor global kit (kit 6)
   ------------------------------------------------------------------ */
body.otw-legal-page {
	--otw-gold: #DCA433;
	--otw-gold-dark: #B98220;
	--otw-link: #916312;
	--otw-ink: #1A1A1A;
	--otw-body: #3A3F45;
	--otw-rule: #E2E5EA;
	--otw-bg-soft: #F7F8FA;
	--otw-measure: 748px;
	--otw-font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--otw-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------
   2. Reading column
   ------------------------------------------------------------------ */
body.otw-legal-page .ot-main {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: #FFFFFF;
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: clamp(64px, 7.5vw, 104px);
	padding-left: clamp(20px, 5vw, 40px);
	padding-right: clamp(20px, 5vw, 40px);
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Every top-level block shares one centred measure. */
body.otw-legal-page .ot-main > * {
	box-sizing: border-box;
	max-width: var(--otw-measure);
	margin-left: auto;
	margin-right: auto;
	float: none;
}

/* Defensive: nothing inside the column may exceed it. */
body.otw-legal-page .ot-main img,
body.otw-legal-page .ot-main table,
body.otw-legal-page .ot-main pre,
body.otw-legal-page .ot-main iframe {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------
   3. Body typography
   ------------------------------------------------------------------ */
body.otw-legal-page .ot-main p,
body.otw-legal-page .ot-main li,
body.otw-legal-page .ot-main dd,
body.otw-legal-page .ot-main dt {
	font-family: var(--otw-font-body);
	font-size: 17.5px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--otw-body);
	letter-spacing: 0;
}

body.otw-legal-page .ot-main p {
	margin-top: 0;
	margin-bottom: 1.25em;
}

body.otw-legal-page .ot-main strong,
body.otw-legal-page .ot-main b {
	font-weight: 600;
	color: var(--otw-ink);
}

body.otw-legal-page .ot-main em,
body.otw-legal-page .ot-main i {
	font-style: italic;
}

/* Lead paragraph - the sentence that follows the H1. */
body.otw-legal-page .ot-main > h1 + p {
	font-size: 19px;
	line-height: 1.66;
	margin-bottom: 1.6em;
}

/* ------------------------------------------------------------------
   4. Headings - the semantic outline in post_content is preserved.
      No heading is added, removed, or re-levelled by this stylesheet.
   ------------------------------------------------------------------ */
body.otw-legal-page .ot-main h1,
body.otw-legal-page .ot-main h2,
body.otw-legal-page .ot-main h3,
body.otw-legal-page .ot-main h4 {
	font-family: var(--otw-font-head);
	color: var(--otw-ink);
	scroll-margin-top: 96px;
	break-after: avoid;
	page-break-after: avoid;
	text-wrap: pretty;
}

body.otw-legal-page .ot-main h1 {
	font-size: clamp(30px, 4.6vw, 40px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.3px;
	margin-top: 0;
	margin-bottom: 34px;
	text-wrap: balance;
}

/* Restrained brand marker under the page title. */
body.otw-legal-page .ot-main h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 22px;
	background: var(--otw-gold);
	border-radius: 2px;
}

body.otw-legal-page .ot-main h2 {
	position: relative;
	font-size: clamp(22px, 2.4vw, 25px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.2px;
	margin-top: 2.5em;
	margin-bottom: 0.7em;
	padding-top: 26px;
	border-top: 1px solid var(--otw-rule);
}

/* Gold waypoint on each section divider - the same accent language as the H1. */
body.otw-legal-page .ot-main h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 36px;
	height: 3px;
	background: var(--otw-gold);
}

body.otw-legal-page .ot-main h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	margin-top: 2em;
	margin-bottom: 0.6em;
}

body.otw-legal-page .ot-main h4 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

/* Keep a heading with the paragraph it introduces where the engine allows it. */
body.otw-legal-page .ot-main h2 + p,
body.otw-legal-page .ot-main h3 + p,
body.otw-legal-page .ot-main h2 + ul,
body.otw-legal-page .ot-main h2 + ol {
	break-before: avoid;
	page-break-before: avoid;
}

/* ------------------------------------------------------------------
   5. Lists
   ------------------------------------------------------------------ */
body.otw-legal-page .ot-main ul,
body.otw-legal-page .ot-main ol {
	margin-top: 0;
	margin-bottom: 1.5em;
	padding-left: 1.45em;
}

body.otw-legal-page .ot-main ul {
	list-style: disc outside;
}

body.otw-legal-page .ot-main ol {
	list-style: decimal outside;
}

body.otw-legal-page .ot-main li {
	margin-bottom: 0.55em;
	padding-left: 0.2em;
}

body.otw-legal-page .ot-main li:last-child {
	margin-bottom: 0;
}

body.otw-legal-page .ot-main li::marker {
	color: var(--otw-gold-dark);
	font-weight: 600;
}

body.otw-legal-page .ot-main ul ul,
body.otw-legal-page .ot-main ol ol,
body.otw-legal-page .ot-main ul ol,
body.otw-legal-page .ot-main ol ul {
	margin-top: 0.55em;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   6. Links and focus
   ------------------------------------------------------------------ */
body.otw-legal-page .ot-main a {
	color: var(--otw-link);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
	border-radius: 2px;
	transition: color 160ms ease, text-decoration-color 160ms ease, background-color 160ms ease;
}

body.otw-legal-page .ot-main a:hover {
	color: var(--otw-ink);
	text-decoration-color: var(--otw-gold-dark);
	text-decoration-thickness: 2px;
}

/*
 * Native outlines are never removed. The site-wide focus ring is defined in the
 * Elementor global kit (a:focus-visible, 3px solid #B98220, offset 2px, marked
 * !important) and continues to win the cascade here, so legal pages keep the
 * same focus treatment as the rest of the site. The outline below restates that
 * ring as a fallback in case the kit stylesheet fails to load; the background
 * tint and darkened text are additive and make the focused link more obvious.
 */
body.otw-legal-page .ot-main a:focus-visible {
	color: var(--otw-ink);
	text-decoration-color: var(--otw-ink);
	background-color: rgba(220, 164, 51, 0.20);
	outline: 3px solid var(--otw-gold-dark);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   7. Effective-date block - the closing paragraph of both pages
   ------------------------------------------------------------------ */
body.otw-legal-page .ot-main > p:last-of-type {
	margin-top: 0.4em;
	margin-bottom: 0;
	padding: 20px 24px;
	background: var(--otw-bg-soft);
	border-left: 3px solid var(--otw-gold);
	border-radius: 2px;
	font-size: 16.5px;
	line-height: 1.65;
}

/* ------------------------------------------------------------------
   8. Misc
   ------------------------------------------------------------------ */
body.otw-legal-page .ot-main hr {
	border: 0;
	border-top: 1px solid var(--otw-rule);
	margin: 2.4em auto;
}

body.otw-legal-page .ot-main blockquote {
	margin: 0 auto 1.5em;
	padding-left: 20px;
	border-left: 3px solid var(--otw-rule);
}

body.otw-legal-page ::selection {
	background: rgba(220, 164, 51, 0.28);
	color: var(--otw-ink);
}

/* ------------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	body.otw-legal-page .ot-main p,
	body.otw-legal-page .ot-main li,
	body.otw-legal-page .ot-main dd,
	body.otw-legal-page .ot-main dt {
		font-size: 17px;
	}

	body.otw-legal-page .ot-main > h1 + p {
		font-size: 18.5px;
	}

	body.otw-legal-page .ot-main h1,
	body.otw-legal-page .ot-main h2,
	body.otw-legal-page .ot-main h3,
	body.otw-legal-page .ot-main h4 {
		scroll-margin-top: 84px;
	}
}

@media (max-width: 767px) {
	body.otw-legal-page .ot-main p,
	body.otw-legal-page .ot-main li,
	body.otw-legal-page .ot-main dd,
	body.otw-legal-page .ot-main dt {
		font-size: 16.5px;
		line-height: 1.68;
	}

	body.otw-legal-page .ot-main > h1 + p {
		font-size: 17.5px;
	}

	body.otw-legal-page .ot-main h1 {
		margin-bottom: 28px;
	}

	body.otw-legal-page .ot-main h2 {
		margin-top: 2.2em;
		padding-top: 22px;
	}

	body.otw-legal-page .ot-main > p:last-of-type {
		padding: 18px 20px;
		font-size: 16px;
	}
}

@media (max-width: 360px) {
	body.otw-legal-page .ot-main ul,
	body.otw-legal-page .ot-main ol {
		padding-left: 1.25em;
	}
}

/* ------------------------------------------------------------------
   10. Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	body.otw-legal-page .ot-main a {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   11. Print
   ------------------------------------------------------------------ */
@media print {
	body.otw-legal-page .ot-main {
		padding: 0;
	}

	body.otw-legal-page .ot-main p,
	body.otw-legal-page .ot-main li {
		orphans: 3;
		widows: 3;
		color: #000000;
	}

	body.otw-legal-page .ot-main a {
		color: #000000;
	}
}