/* 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;
}

/* ---------------------------------------------------------------------------------------------
   DESCENDANT DEFAULTS — deliberately ZERO SPECIFICITY.
   =====================================================================================
   Everything below is wrapped in :where(), so each rule computes at (0,0,1) — the element
   selector alone. ANY authored class beats it.

   WHY, and it is the fourth instance of the same bug. These rules used to sit at (0,2,1) and
   defended themselves with :not(:where([class*="sec-"])). That exclusion assumed one prefix covers the
   section library. It does not: only the SHARED primitives are sec-prefixed (.sec-btn, .sec-table,
   .sec-inner). Every PER-BLOCK class is not — .ldoc-*, .ebr-*, .gpr-*, .stmt-*, .dmap, .hiw-*, .pg-*
   — so all 27 blocks stayed fully exposed and it was only ever a question of which element type
   collided next. pc_2066 found the fourth: .ldoc-clauses declares "padding: 0" and rendered at 20px
   because "ol:not(:where([class*=sec-]))" outspecified it.

   The alternatives were worse. Widening the prefix list is the opt-out problem again with ~27
   entries to maintain. Scoping by ancestor needs a hook that does not exist — ".sec" is on only 18
   of 28 block roots, measured.

   Zero specificity is what these rules always MEANT: defaults for unclassed prose typed into the
   editor, not overrides. A default that outranks authored CSS was the bug, not the symptom.

   The :not(:where([class*="sec-"])) exclusions are kept below. They are now redundant — a class beats
   (0,0,1) on its own — but they cost nothing and they document which elements had a known
   collision. Remove them only with a sweep that proves each one unnecessary.
   --------------------------------------------------------------------------------------------- */
:where(.page-builder, .detail-content) {
	ul:not(:where([class*="sec-"])) { list-style: disc; padding-left: 20px; }
	ol:not(:where([class*="sec-"])) { list-style: decimal; padding-left: 20px; }
	p:not(:where([class*="sec-"]))  { 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.

	   .sec-btn ADDED 2026-08-03. The section library's gallery wraps every block in
	   div.page-builder[data-slug] — the SAME class this stylesheet scopes to, chosen
	   independently and years apart. So every section-library link fell inside this rule.
	   .sec-btn-ghost declares color:#fff at specificity (0,1,0); this selector is (0,4,1) and
	   wins outright, repainting the label in --brand-primary. On a tenant whose brand IS the
	   card background the two resolve to the SAME hex: measured 1.0:1 on
	   thomson-reserve-launch.com, both sides #282619. Not low contrast — identical.

	   That is exactly the brand-on-brand collapse the exclusion list was written to prevent.
	   The list was simply never updated when .sec-btn arrived, and a class is load-bearing by
	   its ABSENCE here: nothing in the codebase references ".sec-btn" as an exclusion, so no
	   search for it would ever have found this.

	   ⚠ WIDENED TO [class*="sec-"] ON THE SAME DAY, after the identical collision recurred. The
	   named-class patch (.sec-btn) was written with a note that an opt-out list is the real
	   fragility — and within hours .sec-table hit it too: .page-builder table td (0,1,2) beat
	   .sec-table td (0,1,1) and repainted every cell of floor-plan-table and price-guide at
	   8px/12px with full borders, where the block's own CSS already declared the correct
	   18px/16px/18px/0 with a border-bottom only. 520 rows of a parity sweep, one cause.

	   Two instances of one structural fault is the signal to stop patching instance-by-instance.
	   The section library namespaces EVERYTHING as sec- (.sec-btn, .sec-table, .sec-inner,
	   .sec-kicker, .sec-icon-ink …), so one exclusion now covers the whole library and every
	   component it grows later — instead of a list that must be remembered on each addition.

	   ⚠ THE EXCLUSION MUST SIT ON THE ELEMENT THAT CARRIES THE CLASS. .sec-btn is on the anchor
	   itself, so a:not(:where([class*="sec-"])) works. .sec-table is on the TABLE, not the cell — so the
	   table rule below excludes on the ANCESTOR. Writing td:not(:where([class*="sec-"])) would have
	   exempted nothing at all while looking correct. */
	a:not(:where(.main-button)):not(:where([class*="sec-"])):not(:where([class*="text-"])):not(:where([class*="bg-"])) {
		color: var(--brand-primary, var(--primary-color));
		&:hover { text-decoration: underline; }
	}

	h1:not(:where([class*="sec-"])) { font-size: 2rem;     font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; }
	h2:not(:where([class*="sec-"])) { font-size: 1.5rem;   font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; }
	h3:not(:where([class*="sec-"])) { font-size: 1.25rem;  font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3; }
	h4:not(:where([class*="sec-"])) { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4; }
	h5:not(:where([class*="sec-"])) { font-size: 1rem;     font-weight: 600; margin-bottom: 0.5rem; }
	h6:not(:where([class*="sec-"])) { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; }

	/* ── The 60px above is for AUTHORED PROSE, and only for it. ──────────────────
	   This file styles legacy content-editor output — tables, panels, list-groups,
	   headings — and 60px correctly separates that prose block from whatever the
	   template renders after it.

	   Modern templates put <page-section> BANDS in this same wrapper. A band is
	   full-bleed and carries its own vertical rhythm (its own py-*), so the
	   wrapper's margin becomes a visible STRIPE between two bands — the page's
	   background showing through a 60px seam.

	   Reported by the Owner 2026-08-03 on a live pc_2066 tenant: a white strip
	   between the hero band and the section under it. Measured in the browser —
	   .detail-content margin-bottom 60px, next section margin-top 0, gap exactly
	   60px, and the wrapper held 15 <page-section> children and no prose at all.

	   CROSS-STACK: pc and la ship this file byte-identical, go ships it rescoped
	   (.detail-content only). All three carry the rule, so all three have the seam.

	   TWO RULES ARE REQUIRED AND NEITHER WORKS ALONE. This selector list gives the
	   bottom margin to BOTH names, and `.page-builder` also appears NESTED inside
	   each <page-section>. So there are two 60px bottom margins in play: the
	   wrapper's own, and the inner one escaping by MARGIN COLLAPSING (nothing
	   between them has bottom padding or a border to stop it).

	   Adjoining margins collapse to the MAXIMUM, not the sum — so both are 60px,
	   they collapse to 60px, and removing either one leaves the other still
	   producing exactly 60px. Measured on the live page:

	       outer rule only    gap 60px
	       nested rule only   gap 60px
	       both together      gap  0px   ✅

	   That is why this looked twice like a fix that did not work. It was two
	   correct fixes, each insufficient.

	   Scoped rather than deleted, because the margin is still right for the prose
	   case it was written for. :has() is the point — the wrapper cannot otherwise
	   know what it holds. Support is universal in current browsers, and an engine
	   without it simply keeps the old behaviour, which is the safe way to fail. */
	&:has(> page-section) { margin-bottom: 0; }

	/* The nested half. A .page-builder inside a section wrapper is authored-body
	   content within a band, never a page-level block, so it owns no page-level
	   spacing — its margin only ever escapes and becomes someone else's seam. */
	& .page-builder { margin-bottom: 0; }

	blockquote:not(:where([class*="sec-"])) {
		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. */
	/* ⚠ SECTION-LIBRARY BLOCKS ARE EXEMPT — see the sec- exclusion note at the top of this file.
	   .sec-table td already declares 18px/16px/18px/0 with a border-BOTTOM only, and matched the
	   reference exactly. This rule overrode it: .page-builder table td is (0,1,2) against
	   .sec-table td's (0,1,1), so 8px/12px bordered cells won on every cell of floor-plan-table
	   and price-guide — 520 rows of a parity sweep, one cause. */
	table:not(:where([class*="sec-"])) th,
	table:not(:where([class*="sec-"])) td {
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--color-edge, #dee2e6);
		text-align: left;
		vertical-align: top;
	}

	table:not(:where([class*="sec-"])) 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:not(:where([class*="sec-"])) {
		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; }