/**
 * Solar Ready Hub — legal document pages (template-privacy.php)
 *
 * Long-form reading first: a narrower measure, generous leading and clear
 * clause numbering, with the brand's green and yellow used only for structure
 * rather than decoration.
 */

.srh-legal-page {
	display: block;
}

/* ==========================================================================
   1. Document meta in the banner
   ========================================================================== */

.srh-legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--srh-space-3);
	margin: var(--srh-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.srh-legal-meta li {
	display: flex;
	align-items: center;
	gap: var(--srh-space-3);
	margin: 0;
	padding: 10px 18px;
	border-radius: var(--srh-radius-md);
	background: var(--srh-white);
	box-shadow: var(--srh-shadow-sm);
}

.srh-legal-meta svg {
	color: var(--srh-green);
}

.srh-legal-meta span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.srh-legal-meta small {
	color: var(--srh-grey-500);
	font-size: var(--srh-fs-xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.srh-legal-meta strong {
	color: var(--srh-ink);
	font-size: var(--srh-fs-sm);
	font-weight: var(--srh-fw-semibold);
}

/* ==========================================================================
   2. Document layout
   ========================================================================== */

.srh-legal {
	background: var(--srh-white);
}

.srh-legal__layout {
	display: grid;
	align-items: start;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
}

/* No table of contents — centre the document on a comfortable measure. */
.srh-legal__layout--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(75ch + var(--srh-gutter) * 2);
}

/* Table of contents */
.srh-toc {
	position: sticky;
	top: calc(var(--srh-header-height) + 1.5rem);
	max-height: calc(100vh - var(--srh-header-height) - 3rem);
	padding: var(--srh-space-6);
	overflow-y: auto;
	border-radius: var(--srh-radius-lg);
	background: var(--srh-green-10);
}

.srh-toc__title {
	margin: 0 0 var(--srh-space-4);
	color: var(--srh-grey-500);
	font-size: var(--srh-fs-sm);
	font-weight: var(--srh-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.srh-toc__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.srh-toc__list li {
	margin: 0;
}

.srh-toc__list a {
	display: flex;
	align-items: flex-start;
	gap: var(--srh-space-3);
	padding: 10px 12px;
	border-radius: var(--srh-radius-sm);
	color: var(--srh-grey-500);
	font-size: var(--srh-fs-sm);
	line-height: 1.4;
	text-decoration: none;
	transition: background-color var(--srh-transition), color var(--srh-transition);
}

.srh-toc__list a:hover,
.srh-toc__list a:focus-visible {
	background: var(--srh-white);
	color: var(--srh-green);
}

.srh-toc__list a.is-current {
	background: var(--srh-white);
	color: var(--srh-green);
	font-weight: var(--srh-fw-semibold);
}

.srh-toc__num {
	display: inline-flex;
	min-width: 22px;
	height: 22px;
	flex: 0 0 22px;
	align-items: center;
	justify-content: center;
	border-radius: var(--srh-radius-circle);
	background: var(--srh-white);
	color: var(--srh-grey-500);
	font-size: var(--srh-fs-xs);
	font-weight: var(--srh-fw-semibold);
}

.srh-toc__list a.is-current .srh-toc__num {
	background: var(--srh-green);
	color: var(--srh-white);
}

@media (max-width: 900px) {
	.srh-legal__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.srh-toc {
		position: static;
		max-height: none;
	}
}

/* ==========================================================================
   3. The document body
   ========================================================================== */

.srh-legal__body {
	max-width: 75ch;
}

.srh-legal__intro {
	margin-bottom: var(--srh-space-10);
	padding-bottom: var(--srh-space-8);
	border-bottom: var(--srh-border);
	color: var(--srh-ink);
	font-size: var(--srh-fs-lead);
	line-height: var(--srh-lh-body);
}

.srh-clause {
	/* Clear the sticky header when jumped to from the contents. */
	scroll-margin-top: calc(var(--srh-header-height) + 1.5rem);
}

.srh-clause + .srh-clause {
	margin-top: var(--srh-space-10);
}

.srh-clause__title {
	display: flex;
	align-items: flex-start;
	gap: var(--srh-space-3);
	margin: 0 0 var(--srh-space-4);
	color: var(--srh-ink);
	font-size: var(--srh-fs-h3);
	font-weight: var(--srh-fw-medium);
	line-height: 1.25;
	letter-spacing: var(--srh-ls-heading);
}

.srh-clause__num {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
	border-radius: var(--srh-radius-md);
	background: var(--srh-green);
	color: var(--srh-white);
	font-size: var(--srh-fs-body);
	font-weight: var(--srh-fw-semibold);
	letter-spacing: 0;
}

/* Long-form reading defaults inside the editor-authored clause bodies. */
.srh-clause__body {
	color: var(--srh-grey-500);
	line-height: var(--srh-lh-loose);
}

.srh-clause__body > * + * {
	margin-top: var(--srh-space-4);
}

.srh-clause__body h3 {
	margin-top: var(--srh-space-6);
	color: var(--srh-ink);
	font-size: var(--srh-fs-h5);
}

.srh-clause__body ul,
.srh-clause__body ol {
	padding-left: var(--srh-space-5);
}

.srh-clause__body li + li {
	margin-top: var(--srh-space-2);
}

.srh-clause__body a {
	color: var(--srh-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.srh-clause__body table {
	font-size: var(--srh-fs-sm);
}

.srh-clause__body th {
	color: var(--srh-ink);
	font-weight: var(--srh-fw-semibold);
}

.srh-legal__footnote {
	margin: var(--srh-space-10) 0 0;
	padding-top: var(--srh-space-6);
	border-top: var(--srh-border);
	color: var(--srh-grey-500);
	font-size: var(--srh-fs-sm);
	line-height: 1.6;
}

/* ==========================================================================
   4. Making a request
   ========================================================================== */

.srh-legal-contact {
	background: var(--srh-white);
}

.srh-legal-contact__panel {
	display: grid;
	align-items: center;
	gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	padding: clamp(2rem, 1rem + 4vw, 3.5rem);
	border-radius: var(--srh-radius-lg);
	background: var(--srh-green);
	color: var(--srh-white);
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.srh-legal-contact__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--srh-space-4);
}

.srh-legal-contact__panel .srh-heading {
	color: var(--srh-white);
}

.srh-legal-contact__panel .srh-heading__accent {
	color: var(--srh-yellow);
}

.srh-legal-contact__icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border-radius: var(--srh-radius-md);
	background: rgba(255, 255, 255, 0.12);
	color: var(--srh-yellow);
}

.srh-legal-contact__text {
	max-width: 46ch;
	margin: 0;
	color: var(--srh-on-dark-70);
	line-height: var(--srh-lh-body);
}

.srh-legal-contact__window {
	display: flex;
	align-items: center;
	gap: var(--srh-space-2);
	margin: 0;
	padding: 10px 16px;
	border-radius: var(--srh-radius-pill);
	background: rgba(255, 255, 255, 0.08);
	color: var(--srh-white);
	font-size: var(--srh-fs-sm);
}

.srh-legal-contact__window svg {
	color: var(--srh-yellow);
}

.srh-legal-contact__routes {
	display: flex;
	flex-direction: column;
	gap: var(--srh-space-3);
}

.srh-legal-contact__route {
	display: flex;
	align-items: flex-start;
	gap: var(--srh-space-3);
	margin: 0;
	padding: var(--srh-space-4) var(--srh-space-5);
	border: 1px solid var(--srh-on-dark-40);
	border-radius: var(--srh-radius-md);
	color: var(--srh-white);
	text-decoration: none;
	transition: border-color var(--srh-transition), background-color var(--srh-transition);
}

a.srh-legal-contact__route:hover,
a.srh-legal-contact__route:focus-visible {
	border-color: var(--srh-yellow);
	background: rgba(255, 255, 255, 0.08);
	color: var(--srh-white);
}

.srh-legal-contact__route--static {
	cursor: default;
}

.srh-legal-contact__route svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--srh-yellow);
}

.srh-legal-contact__route span {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.srh-legal-contact__route small {
	color: var(--srh-on-dark-70);
	font-size: var(--srh-fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.srh-legal-contact__route strong {
	font-size: var(--srh-fs-body);
	font-weight: var(--srh-fw-semibold);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.srh-legal-contact__routes .srh-btn {
	justify-content: center;
}

@media (max-width: 860px) {
	.srh-legal-contact__panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   5. Print
   ========================================================================== */

@media print {
	.srh-header,
	.srh-footer,
	.srh-cta,
	.srh-toc,
	.srh-legal-contact {
		display: none !important;
	}

	.srh-legal__layout {
		display: block;
	}

	.srh-legal__body {
		max-width: none;
	}

	.srh-clause__num {
		background: transparent;
		color: var(--srh-ink);
	}
}