.page-builder {
	margin-bottom: 60px;
	scroll-margin-top: 96px;
	scroll-padding-top: 0 !important;

	ul {
		list-style: disc;
		padding-left: 20px;
	}

	ol {
		list-style: decimal;
		padding-left: 20px;
	}

	p {
		margin-top: 0;
		margin-bottom: 1rem;
	}

	/* NOTE: the legacy "colour every non-.main-button link with the brand"
	   rule was REMOVED (Derek, 2026-07-03). Being unlayered it beat Tailwind's
	   text-* utilities, so token-built buttons/links inside .page-builder (e.g.
	   a bg-primary text-white CTA) rendered brand-on-brand and vanished. Links
	   now inherit their element's own colour (token utilities win). Legacy CMS
	   body links that relied on auto brand colour can be re-styled per block. */
	/*
	* {

		margin-top: calc(2rem * calc(1 - 0));
		margin-bottom: calc(2rem * 0);
	} */

	h1 { font-size: 2rem;    font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; }
	h2 { font-size: 1.5rem;  font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; }
	h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3; }
	h4 { font-size: 1.125rem;font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4; }
	h5 { font-size: 1rem;    font-weight: 600; margin-bottom: 0.5rem; }
	h6 { font-size: 0.875rem;font-weight: 600; margin-bottom: 0.5rem; }

	blockquote {
		border-left: 4px solid var(--primary-color);
		padding: 0.5rem 0 0.5rem 1rem;
		margin: 1rem 0;
		color: #555;
		font-style: italic;
	}

	.table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 1rem;
	}

	.table th,
	.table td {
		padding: 0.5rem 0.75rem;
		border: 1px solid #dee2e6;
		text-align: left;
		vertical-align: top;
	}

	.table thead th {
		background-color: #f8f9fa;
		font-weight: 600;
		border-bottom: 2px solid #dee2e6;
	}

	.table-striped tbody tr:nth-child(odd) {
		background-color: #f9f9f9;
	}

	.table-bordered {
		border: 1px solid #dee2e6;
	}

	/* Panel (Bootstrap 3) */
	.panel {
		margin-bottom: 1rem;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-shadow: 0 1px 1px rgba(0,0,0,.05);
		overflow: hidden;
	}

	.panel-heading {
		padding: 10px 15px;
		background-color: #f5f5f5;
		border-bottom: 1px solid #ddd;
	}

	.panel-primary > .panel-heading {
		background-color: var(--primary-color);
		color: #fff;
		border-color: var(--primary-color);
	}

	.panel-body {
		padding: 15px;
	}

	/* List group (Bootstrap 3/4/5) */
	.list-group {
		padding-left: 0;
		margin-bottom: 1.25rem;
		list-style: none;
	}

	.list-group-item {
		display: block;
		padding: 0.5rem 1rem;
		border: 1px solid #dee2e6;
		border-top: none;
	}

	.list-group-item:first-child {
		border-top: 1px solid #dee2e6;
		border-radius: 4px 4px 0 0;
	}

	.list-group-item:last-child {
		border-radius: 0 0 4px 4px;
	}

	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Bootstrap image utility */
	.img-responsive {
		max-width: 100%;
		height: auto;
		display: block;
	}

}

/* NOTE: the legacy dark-mode "light surface lock" (html.dark .page-builder →
   white bg / #4d4d4d text / color-scheme:light) was REMOVED (Derek, 2026-07-03)
   so templates support REAL dark mode: page-builder blocks now honour the site
   theme instead of being forced light. Tradeoff: legacy CMS content with
   hard-baked light-mode inline colors may need per-block review in dark mode. */

.default-sections {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.default-sections{
		max-width: 750px;
	}
}
@media (min-width: 992px) {
	.default-sections{
		max-width: 970px;
	}
}
@media (min-width: 1200px) {
	.default-sections{
		max-width: 1170px;
	}
}

/* ── Bootstrap grid shim — FLAT CSS (no nesting) ─────────────────────────────
   Written as explicit flat selectors so they work in all browsers regardless
   of CSS nesting support. Global — covers .page-builder AND .default-sections
   and any other context where Bootstrap grid classes appear in DB content. */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

[class*="col-"] {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

@media (min-width: 576px) {
	.col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-sm-3  { flex: 0 0 25%;      max-width: 25%;      }
	.col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-sm-6  { flex: 0 0 50%;      max-width: 50%;      }
	.col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-sm-9  { flex: 0 0 75%;      max-width: 75%;      }
	.col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-sm-12 { flex: 0 0 100%;     max-width: 100%;     }
}

@media (min-width: 768px) {
	.col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-md-3  { flex: 0 0 25%;      max-width: 25%;      }
	.col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-md-6  { flex: 0 0 50%;      max-width: 50%;      }
	.col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-md-9  { flex: 0 0 75%;      max-width: 75%;      }
	.col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-md-12 { flex: 0 0 100%;     max-width: 100%;     }
}

@media (min-width: 992px) {
	.col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-lg-3  { flex: 0 0 25%;      max-width: 25%;      }
	.col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-lg-6  { flex: 0 0 50%;      max-width: 50%;      }
	.col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-lg-9  { flex: 0 0 75%;      max-width: 75%;      }
	.col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-lg-12 { flex: 0 0 100%;     max-width: 100%;     }
}

/* Bootstrap heading-size utilities */
.h1 { font-size: 2rem;    font-weight: 700; line-height: 1.2; }
.h2 { font-size: 1.5rem;  font-weight: 700; line-height: 1.2; }
.h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.h4 { font-size: 1.125rem;font-weight: 600; line-height: 1.4; }
.h5 { font-size: 1rem;    font-weight: 600; line-height: 1.5; }
.h6 { font-size: 0.875rem;font-weight: 600; line-height: 1.5; }