/* RF Privacy Policy widget — Reloadux Addons
 * Ported from sections/privacy-policy/ — every rule is scoped under
 * .rfpp-root so it cannot leak into the host theme.
 */

.rfpp-root {
	--rfpp-toc-width: 405px;
	--rfpp-column-gap: 16px;
	--rfpp-text-sm-size: 14px;
	--rfpp-text-sm-lh: 20px;
	--rfpp-text-md-size: 16px;
	--rfpp-text-md-lh: 22px;
	--rfpp-text-xl-size: 20px;
	--rfpp-text-xl-lh: 26px;
	--rfpp-display-xs-size: 24px;
	--rfpp-display-xs-lh: 30px;
	--rfpp-fw-regular: 400;
	--rfpp-fw-medium: 500;
	/* Compensates for system-font fallbacks being wider than TT Norms Pro;
	   matches the static demo until the licensed font is loaded by the theme. */
	--rfpp-letter-spacing: -0.015em;
}

.rfpp-root *,
.rfpp-root *::before,
.rfpp-root *::after {
	box-sizing: border-box;
}

.rfpp {
	width: 100%;
	color: #2f2f2f;
	font-family: inherit;
	letter-spacing: var(--rfpp-letter-spacing);
	overflow: hidden;
}

.rfpp__inner {
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--rfpp-toc-width) minmax(0, 1fr);
	gap: var(--rfpp-column-gap);
	align-items: stretch;
	min-height: 0;
}

/* --- Table of contents -------------------------------------------------- */

.rfpp__toc {
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-self: start;
	margin: 0;
}

.rfpp__toc-title {
	margin: 0;
	font-size: var(--rfpp-text-md-size);
	line-height: var(--rfpp-text-md-lh);
	font-weight: var(--rfpp-fw-medium);
	color: #000;
}

.rfpp__toc-nav {
	margin: 0;
}

.rfpp__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.rfpp__toc-item {
	margin: 0;
	padding: 0;
	/* Keeps items on a single line by default so the active-state indent
	   (12 px left padding) doesn't reflow longer items into the narrower
	   padded width. */
	white-space: nowrap;
}

.rfpp__toc-item--multiline {
	max-width: 206px;
	white-space: normal;
}

.rfpp__toc-link {
	display: block;
	font-size: var(--rfpp-text-md-size);
	line-height: var(--rfpp-text-md-lh);
	font-weight: var(--rfpp-fw-regular);
	color: #2f2f2f;
	text-decoration: none;
	transition: color 120ms ease;
}

.rfpp__toc-item.is-active {
	border-left: 1px solid #1070d7;
	padding-left: 12px;
}

.rfpp__toc-item.is-active .rfpp__toc-link {
	color: #1070d7;
	font-weight: var(--rfpp-fw-medium);
}

.rfpp__toc-link:hover,
.rfpp__toc-link:focus-visible {
	color: #1070d7;
}

/* --- Right content card ------------------------------------------------- */

.rfpp__content {
	background: #f7f7f7;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
	min-height: 0;
	overflow-y: auto;
	/* Reserve gutter so the card width doesn't jump when the scrollbar appears. */
	scrollbar-gutter: stable;
	overscroll-behavior: contain;

	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color 200ms ease;
}

.rfpp__content:hover,
.rfpp__content:focus-within,
.rfpp__content.is-scrolling {
	scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.rfpp__content::-webkit-scrollbar {
	width: 8px;
}
.rfpp__content::-webkit-scrollbar-track {
	background: transparent;
}
.rfpp__content::-webkit-scrollbar-thumb {
	background-color: transparent;
	border-radius: 4px;
	transition: background-color 200ms ease;
}
.rfpp__content:hover::-webkit-scrollbar-thumb,
.rfpp__content:focus-within::-webkit-scrollbar-thumb,
.rfpp__content.is-scrolling::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.28);
}

.rfpp__section {
	max-width: 737px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	scroll-margin-top: 8px;
	margin: 0;
}

.rfpp__heading {
	margin: 0;
	font-size: var(--rfpp-display-xs-size);
	line-height: var(--rfpp-display-xs-lh);
	font-weight: var(--rfpp-fw-medium);
	color: #000;
	letter-spacing: 0;
}

.rfpp__body {
	font-size: var(--rfpp-text-sm-size);
	line-height: var(--rfpp-text-sm-lh);
	font-weight: var(--rfpp-fw-regular);
	color: #2f2f2f;
}

.rfpp__body p,
.rfpp__body ul,
.rfpp__body ol {
	margin: 0;
	padding: 0;
}

.rfpp__body p {
	font-size: inherit;
	line-height: inherit;
}

/* Asymmetric rhythm — paragraph→paragraph reads like a blank line (20 px),
   paragraph→list is tight (14 px), list→paragraph carries the list's bottom
   margin plus the equivalent of a trailing blank line (34 px). */
.rfpp__body > p + p {
	margin-top: 20px;
}
.rfpp__body > p + ul,
.rfpp__body > p + ol {
	margin-top: 14px;
}
.rfpp__body > ul + p,
.rfpp__body > ol + p {
	margin-top: 34px;
}

/* Custom bullet — Chromium's ::marker doesn't reliably inherit text color or
   size, so we render a 3 px filled circle via ::before in currentColor. */
.rfpp__body ul,
.rfpp__body ol {
	list-style: none;
	padding-left: 0;
}

.rfpp__body ul li,
.rfpp__body ol li {
	position: relative;
	padding-left: 21px;
	font-size: var(--rfpp-text-sm-size);
	line-height: var(--rfpp-text-sm-lh);
}

.rfpp__body ul li::before,
.rfpp__body ol li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 9px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: currentColor;
}

.rfpp__body a {
	color: #1070d7;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rfpp__body a:hover {
	text-decoration-thickness: 2px;
}

.rfpp :focus-visible {
	outline: 2px solid #1070d7;
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Mobile / tablet (≤ 1199 px) ---------------------------------------- */

@media (max-width: 1199px) {
	.rfpp {
		height: auto !important;
		overflow: visible;
	}

	.rfpp__inner {
		display: block;
		max-width: none;
		height: auto;
	}

	.rfpp__toc {
		display: none;
	}

	.rfpp__content {
		height: auto;
		overflow: visible;
		padding: 16px;
		scrollbar-gutter: auto;
	}

	/* Mobile heading size is a design constraint, not a preference — pin it
	   past Elementor's `heading_typography` emission so editing the desktop
	   font-size doesn't accidentally drag mobile up with it. */
	.rfpp__heading {
		font-size: 20px !important;
		line-height: 26px !important;
	}

	.rfpp__section {
		max-width: none;
	}
}