/* page-builder.css — the SHARED, design-AGNOSTIC stylesheet for AUTHORED CMS content:
   the legacy-Bootstrap markup (tables / panels / list-groups / grid / headings) that
   tenants write in the section editor, rendered as <page-section> inside .detail-content
   (modern templates) or .page-builder (legacy).

   CANONICAL SOURCE: design-templates `templates/common/assets/css/page-builder.css`.
   Each stack VENDORS + serves its own copy (sync-page-builder.sh, pinned + drift-checked).
   NEVER hand-edit a stack copy — edit HERE and re-vendor (that is the whole point: one source).

   THEME-AWARE BY DESIGN (real dark mode — Owner ruling 2026-07-16): surfaces/borders/ink use
   the SEMANTIC tokens (var(--color-edge/-strong), var(--color-surface-muted),
   var(--color-ink-muted), the brand pair) so authored content flips light↔dark WITH the site
   theme — there is NO forced-light lock and NO `.pb-dark-aware` opt-out. Each token carries the
   original Bootstrap grey as a FALLBACK, so a context lacking the token defs still renders a
   neutral grey. Brand colour resolves across stacks via a fallback chain
   (var(--brand-primary, var(--primary-color))).

   Scope covers BOTH `.page-builder` (legacy) and `.detail-content` (modern section render).
   The container box-props apply ONCE — `.detail-content` is one wrapper/page, NOT the repeated
   `.default-sections` (which would stack margins). */
.page-builder,
.detail-content {
	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; }

	/* Authored PROSE links get a brand-colour + hover-underline affordance, but the selector
	   EXCLUDES .main-button and any link with a text- or bg- utility class, so token CTAs
	   (built with those utilities) always win and never render brand-on-brand. Keeps prose
	   links discoverable, without the old unlayered a-color-brand rule that broke token CTAs.
	   NOTE: no "star-slash" glyph pair anywhere in this comment — it would close the comment early. */
	a:not(.main-button):not([class*="text-"]):not([class*="bg-"]) {
		color: var(--brand-primary, var(--primary-color));
		&:hover { text-decoration: underline; }
	}

	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(--brand-primary, var(--primary-color));
		padding: 0.5rem 0 0.5rem 1rem;
		margin: 1rem 0;
		color: var(--color-ink-muted, #555);
		font-style: italic;
	}

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

	/* Cell rules target BARE `table` (not just `.table`): authored CMS content ships
	   data tables both with and without the Bootstrap `.table` class, and the
	   mobile-overflow rule below already treats EVERY CMS <table> as a data table
	   (display:block scroll box). So border/pad every CMS table's cells — scoped to
	   .page-builder/.detail-content, so site chrome is never touched. The .table-bordered
	   / .table-striped variants below still layer their extras on top. */
	table th,
	table td {
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--color-edge, #dee2e6);
		text-align: left;
		vertical-align: top;
	}

	table thead th {
		background-color: var(--color-surface-muted, #f8f9fa);
		font-weight: 600;
		border-bottom: 2px solid var(--color-edge-strong, #dee2e6);
	}

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

	.table-bordered {
		border: 1px solid var(--color-edge, #dee2e6);
	}

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

	.panel-heading {
		padding: 10px 15px;
		background-color: var(--color-surface-muted, #f5f5f5);
		border-bottom: 1px solid var(--color-edge, #ddd);
	}

	.panel-primary > .panel-heading {
		background-color: var(--brand-primary, var(--primary-color));
		color: #fff;
		border-color: var(--brand-primary, 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 var(--color-edge, #dee2e6);
		border-top: none;
	}

	.list-group-item:first-child {
		border-top: 1px solid var(--color-edge, #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;
	}

	/* ── CMS tables fill 100% width by default (Owner ruling 2026-07-16) ─────────
	   Editor / AI-generated content ships BARE data tables. They should fill their
	   container (normal table layout at 100%), not sit at content width leaving empty
	   space on wide viewports. `overflow-wrap:break-word` keeps long words/URLs from
	   forcing width, and media caps to the column — so normal tables stay in-bounds on
	   mobile with no page overflow. A genuinely ultra-wide table opts into horizontal
	   scroll by wrapping in `.table-responsive` (below). NOTE: this REPLACES the earlier
	   blanket `table{display:block;overflow-x:auto}` — that over-corrected, fixing the
	   rare wide-table case by breaking the common 100%-width case. */
	overflow-wrap: break-word;

	table {
		width: 100%;
		max-width: 100%;
	}

	img,
	iframe,
	video {
		max-width: 100%;
	}

	img {
		height: auto;
	}

	pre {
		overflow-x: auto;
		white-space: pre-wrap;
	}

}

/* NO `html.dark .page-builder` light-surface lock: authored CMS content honours the site
   theme in dark mode (REAL dark mode — Owner ruling 2026-07-16, extends la's cc447fad
   platform-wide). The colours above are semantic-token-driven (with neutral fallbacks), so
   tables / panels / borders flip light↔dark centrally — no forced-white hack, no opt-out class. */

.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; }