/* =====================================================================
   Top Grade Movers — pages/terms.css
   Terms & Conditions page (pages/template-terms.php) styles only.
   The shared inner-page hero (.page-hero) lives in components/sections.css
   and is rendered via template-parts/global/page-banner.php.
   ===================================================================== */

/* =========================================================
   1. TERMS DOCUMENT (white, single ACF WYSIWYG block)
   ========================================================= */
.terms-section {
	background: var(--background-color);
	padding-block: clamp(3.5rem, 6vw, 6.25rem);
}

.terms-doc {
	width: 100%;
	max-width: 68.75rem; /* ~1100px, narrower column for legal-copy readability */
	margin-inline: auto;
	padding-inline: var(--container-spacing);
}

.terms-doc__title {
	font-size: 2.125rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.02em;
	color: var(--heading-color);
	margin-bottom: 1.5rem;
}

/* The WYSIWYG block itself: intro paragraphs + numbered h3 sections */
.terms-content { color: var(--text-color); }

.terms-content > p {
	font-size: .96875rem;
	line-height: 1.8;
	color: var(--text-color);
	margin-bottom: 1.1rem;
}

.terms-content h3 {
	position: relative;
	font-size: 1.3125rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.01em;
	color: var(--heading-color);
	padding: 2rem 0 0 1.375rem;
	margin: 2.5rem 0 1.375rem;
	border-top: 1px solid var(--border-color);
}
.terms-content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2rem;
	bottom: 0;
	width: 5px;
	border-radius: var(--radius-3);
	background: var(--primary-color);
}

.terms-content h4 {
	font-size: 1.0625rem;
	font-weight: var(--font-weight-bold);
	color: var(--heading-color);
	margin: 1.5rem 0 .85rem;
}

.terms-content p {
	font-size: var(--body-size-sm);
	line-height: 1.7;
	color: var(--text-color);
	margin-bottom: 1rem;
}
.terms-content p:last-child { margin-bottom: 0; }

.terms-content strong { font-weight: var(--font-weight-bold); color: var(--heading-color); }

.terms-content ul {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}
.terms-content ul li {
	position: relative;
	padding-left: 1.5rem;
	font-size: var(--body-size-sm);
	line-height: 1.7;
	color: var(--text-color);
}
.terms-content ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 8px;
	height: 8px;
	background: var(--primary-color);
	transform: rotate(45deg);
}

/* =========================================================
   2. RESPONSIVE
   (shared header/footer/hero breakpoints live in media.css /
   components/sections.css; these are specific to .terms-doc)
   ========================================================= */
@media (max-width: 991.98px) {
	.terms-doc__title { font-size: 1.75rem; }
}

@media (max-width: 767.98px) {
	.terms-doc__title { font-size: var(--h4-size); }
	.terms-content h3 { font-size: 1.15rem; }
}

@media (max-width: 575.98px) {
	.terms-doc { padding-inline: 20px; }
	.terms-content h3 { padding-left: 1rem; }
	.terms-content ul li { padding-left: 1.25rem; }
}