/**
 * Terms & Conditions — built from the client's Figma.
 *
 * Scoped under .sc-legal. When the Privacy Policy page is built from the same
 * design, move this file to assets/css/legal.css and load it for both slugs —
 * nothing in here is specific to the Terms document.
 *
 * Layout: a cream hero band, then ONE bordered box holding the whole document
 * with a hairline rule between sections. Sizes were measured off the supplied
 * design crops against a 1440 frame.
 */

/* The BuddyBoss page wrappers constrain and pad their content; this layout is
   full-bleed, so those constraints are lifted. Class comes from inc/legal.php. */
.sc-legal-page #main-wrap,
.sc-legal-page #inner-wrap,
.sc-legal-page #page,
.sc-legal-page #main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.sc-legal {
	background: var(--sc-surface);
}

/* ------------------------------------------------------------------- hero */
.sc-legal__hero {
	padding-block: 144px;
	background: var(--sc-surface-cream);
	text-align: center;
}

.sc-legal .sc-legal__eyebrow {
	margin: 0 0 14px;
	color: var(--sc-orange);
	font-size: var(--sc-fs-eyebrow);
	font-weight: var(--sc-fw-semibold);
	letter-spacing: var(--sc-track-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

.sc-legal .sc-legal__title {
	margin: 0;
	font-family: var(--sc-font-heading);
	font-size: 48px;
	font-weight: var(--sc-fw-bold);
	line-height: var(--sc-lh-tight);
	/* Black rather than the design's navy — client's call, 2026-07-28. */
	color: var(--sc-text);
}

/* Sized to match .sc-legal__lede on the Privacy page — both sit directly under
   the hero title, so they scale together. */
.sc-legal .sc-legal__updated {
	margin: 14px 0 0;
	font-size: 20px;
	color: var(--sc-text);
}

/* -------------------------------------------------------------- document */
.sc-legal__body {
	padding-block: 80px 88px;
}

.sc-legal .sc-legal__doc {
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	background: var(--sc-surface);
}

.sc-legal .sc-legal__section {
	padding: 32px 28px;
}

/* The rule runs the full width of the box, outside the section padding. */
.sc-legal .sc-legal__section + .sc-legal__section {
	border-top: 1px solid var(--sc-border);
}

.sc-legal .sc-legal__heading {
	margin: 0 0 14px;
	font-family: var(--sc-font-heading);
	font-size: 25px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.35;
	color: var(--sc-navy-deep);
}

.sc-legal .sc-legal__section p {
	margin: 0 0 12px;
	font-size: var(--sc-fs-lg);
	line-height: 1.7;
	color: var(--sc-text-body);
}

.sc-legal .sc-legal__section p:last-child {
	margin-bottom: 0;
}

/*
 * The document wraps its capitalised disclaimer blocks in <strong>, but the
 * design sets them at body weight — the capitals already carry the emphasis.
 * The element is kept for meaning; only the rendered weight is normalised.
 */
.sc-legal .sc-legal__section strong {
	font-weight: var(--sc-fw-regular);
}

.sc-legal .sc-legal__section a {
	color: var(--sc-navy);
	text-decoration: underline;
}

.sc-legal .sc-legal__section a:hover,
.sc-legal .sc-legal__section a:focus-visible {
	color: var(--sc-orange-dark);
}

/* ======================================================== breakpoints ==== */
@media (max-width: 1024px) {
	.sc-legal__hero {
		padding-block: 104px;
	}

	.sc-legal .sc-legal__title {
		font-size: 40px;
	}

	.sc-legal .sc-legal__updated {
		font-size: 18px;
	}

	.sc-legal__body {
		padding-block: 56px 64px;
	}
}

@media (max-width: 768px) {
	.sc-legal__hero {
		padding-block: 72px;
	}

	.sc-legal .sc-legal__title {
		font-size: 32px;
	}

	.sc-legal .sc-legal__updated {
		font-size: 17px;
	}

	.sc-legal__body {
		padding-block: 40px 48px;
	}

	.sc-legal .sc-legal__section {
		padding: 26px 20px;
	}

	.sc-legal .sc-legal__heading {
		font-size: 22px;
	}

	.sc-legal .sc-legal__section p {
		font-size: var(--sc-fs-base);
	}
}

@media (max-width: 575px) {
	.sc-legal__hero {
		padding-block: 56px;
	}

	.sc-legal .sc-legal__title {
		font-size: 26px;
	}

	.sc-legal .sc-legal__updated {
		font-size: 16px;
	}

	.sc-legal .sc-legal__section {
		padding: 22px 16px;
	}

	.sc-legal .sc-legal__section p {
		font-size: var(--sc-fs-sm);
	}
}