/* ==========================================================
   CARO BODY TABLE OF CONTENTS
========================================================== */


/* SHARED SIDEBAR */

.caro-reading-sidebar {
	position: sticky;
	top: 118px;
	align-self: start;
}

.caro-body-toc {
	padding: 21px 18px;

	border: 1px solid #e3e2dd;
	border-radius: 12px;

	background: #faf9f6;
}

.caro-body-toc__title {
	margin: 0 0 14px !important;
	padding: 0 0 12px !important;

	border-bottom: 1px solid #e3e2dd;

	color: #777 !important;

	font-size: .68rem !important;
	font-weight: 750 !important;
	line-height: 1.2 !important;

	letter-spacing: .13em !important;
	text-transform: uppercase;
}

.caro-body-toc__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.caro-body-toc__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.caro-body-toc__item a {
	display: block;

	margin: 2px 0;
	padding: 7px 8px;

	border-radius: 6px;

	color: #444 !important;

	font-size: .82rem;
	line-height: 1.42;

	text-decoration: none !important;

	transition:
		background .15s ease,
		color .15s ease;
}

.caro-body-toc__item a:hover,
.caro-body-toc__item a:focus {
	background: #ecebe6;
	color: #111 !important;
}


/* H3 is visibly subordinate to H2 */

.caro-body-toc__item--h3 a {
	padding-left: 20px;
	color: #6a6a6e !important;
	font-size: .78rem;
}


/* Heading jump position below site navigation */

.caro-policy-prose h2[id],
.caro-policy-prose h3[id],
.caro-post-reading-body h2[id],
.caro-post-reading-body h3[id] {
	scroll-margin-top: 145px;
}


/* ==========================================================
   POLICY
   LEFT TOC + BODY
========================================================== */

.caro-policy-page .caro-policy-content .caro-policy-shell {
	width: min(100%, 1180px) !important;
	max-width: 1180px !important;
}

.caro-policy-reading-grid {
	display: grid;

	grid-template-columns:
		220px
		minmax(0, 820px);

	gap: clamp(42px, 5vw, 72px);

	align-items: start;
	justify-content: center;
}

.caro-policy-reading-grid .caro-policy-prose {
	width: 100% !important;
	max-width: 820px !important;
}


/* ==========================================================
   BLOG ARTICLE
   BODY + RIGHT TOC
========================================================== */

body.single-post article.post {
	width: min(calc(100% - 48px), 1180px) !important;
	max-width: 1180px !important;
}

.caro-post-reading-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 820px)
		230px;

	gap: clamp(44px, 5vw, 72px);

	align-items: start;
}

.caro-post-reading-body {
	min-width: 0;
}

.caro-post-reading-body > :first-child {
	margin-top: 0;
}

.caro-reading-sidebar--right {
	width: 230px;
}


/* ==========================================================
   TABLET / MOBILE
========================================================== */

@media (max-width: 960px) {

	.caro-policy-reading-grid,
	.caro-post-reading-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.caro-reading-sidebar {
		position: static;
		top: auto;

		width: 100% !important;
	}

	/*
	 * TOC comes before body on smaller screens for quick access.
	 */
	.caro-policy-reading-grid .caro-reading-sidebar,
	.caro-post-reading-grid .caro-reading-sidebar {
		order: -1;
	}

	.caro-body-toc {
		padding: 17px;
	}

	.caro-body-toc__list {
		display: grid;
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 2px 12px;
	}
}

@media (max-width: 560px) {

	.caro-body-toc__list {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================
   POLICY SEMANTIC STRUCTURE — FINAL
========================================================== */

.caro-policy-prose h3 {
	margin: 28px 0 11px !important;

	color: #27272a !important;

	font-size: 1.08rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;

	letter-spacing: -.01em !important;
}

.caro-policy-address {
	display: block;

	margin: 22px 0 30px;
	padding: 18px 20px;

	border-left: 3px solid #171717;

	background: #f7f6f3;
	color: #404044;

	font-size: .95rem;
	font-style: normal;
	line-height: 1.7;
}

