/* Atlas Sun Systems — legal pages (Privacy Policy, Terms & Conditions).
   Only the parts Elementor cannot express: the contents rail is printed by
   atlas-legal.php rather than built out of widgets, so all of its styling is
   here, plus the two prose details atomic style controls have no property for
   (inline links inside a paragraph, and balanced heading wrap).
   Values read the design tokens Elementor publishes on :root. */
/* Every anchor rule below is prefixed `body .elementor`. Elementor's kit styles
   links as `.elementor-kit-405 a` — specificity (0,2,0) — and load after this
   file, so a bare `.atlas-…-toc a` selector loses the tie silently: the rule is
   in the stylesheet, and none of it applies. */


/* --- Contents rail ------------------------------------------------------- */

.atlas-legal-toc {
	margin-block-start: 1rem;
}

/* Long policies overflow the rail rather than the viewport, so the "last
   updated" line under it stays visible while scrolling the list. */
@media (min-width: 1024px) {
	.atlas-legal-toc {
		max-height: calc(100dvh - 20rem);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in oklab, currentColor 22%, transparent) transparent;
	}

	.atlas-legal-toc::-webkit-scrollbar {
		width: 6px;
	}

	.atlas-legal-toc::-webkit-scrollbar-track {
		background: transparent;
	}

	.atlas-legal-toc::-webkit-scrollbar-thumb {
		border-radius: var(--RadiusPill);
		background-color: color-mix(in oklab, currentColor 22%, transparent);
	}

	.atlas-legal-toc::-webkit-scrollbar-thumb:hover {
		background-color: color-mix(in oklab, currentColor 38%, transparent);
	}
}

body .elementor .atlas-legal-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body .elementor .atlas-legal-toc a {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border-radius: var(--RadiusBase);
	padding: 0.5rem 0.75rem;
	font-size: var(--TextSm);
	line-height: 1.25rem;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

body .elementor .atlas-legal-toc a:hover {
	background-color: var(--Sand);
}

/* data-active is written by atlas-legal.js as the page scrolls. */
body .elementor .atlas-legal-toc a[data-active="true"],
body .elementor .atlas-legal-toc a[data-active="true"]:hover {
	background-color: var(--NavyDeep);
}

.atlas-legal-toc-num {
	width: 1.25rem;
	flex: 0 0 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--TextXs);
	font-weight: 600;
	line-height: 1.25rem;
	/* Clause numbers form a column; proportional digits make it ragged. */
	font-variant-numeric: tabular-nums;
	color: var(--MutedForeground);
	transition: color 0.15s ease;
}

.atlas-legal-toc-label {
	line-height: 1.25rem;
	/* Deliberately darker than the static source's foreground/75: at 14px in a
	   narrow rail that tint reads as disabled rather than quiet. */
	color: var(--Ink);
	transition: color 0.15s ease;
}

body .elementor .atlas-legal-toc a[data-active="true"] .atlas-legal-toc-num {
	color: var(--OnDarkStrong);
}

body .elementor .atlas-legal-toc a[data-active="true"] .atlas-legal-toc-label {
	color: var(--NavyForeground);
}

/* The "last updated" date inside the rail's footnote — a <strong> so it still
   reads as emphasis with no stylesheet, but the source weight is 600. */
body .elementor .atlas-legal-updated strong {
	font-weight: 600;
	color: var(--Ink);
}

/* --- Prose --------------------------------------------------------------- */

/* Links live inside a paragraph's text, so no widget owns them and no style
   control reaches them. */
body .elementor .atlas-legal-prose a {
	font-weight: 600;
	color: var(--NavyDeep);
	text-decoration: underline;
	text-decoration-color: var(--NavyFaint);
	text-underline-offset: 4px;
	transition: text-decoration-color 0.15s ease;
}

body .elementor .atlas-legal-prose a:hover {
	text-decoration-color: var(--NavyDeep);
}

/* The icon inside a button is a child span, which no atomic style control
   reaches. The source draws it at 16px against 14px text. */
body .elementor .atlas-legal-btn .atlas-i {
	font-size: 1rem;
}

/* text-wrap has no atomic style control. Clause titles are short and would
   otherwise drop a single word onto a second line. */
.atlas-legal-balance {
	text-wrap: balance;
}

/* A clause is a scroll target; focus is moved to it on a rail click so keyboard
   and screen-reader users land in the section, and the ring would be noise. */
.atlas-legal-clause:focus {
	outline: none;
}