/**
 * Section inner column.
 *
 * The section element carries the background and the vertical rhythm; this
 * carries the reading width. They are separate on purpose: a navy stat band
 * bleeds to both edges while the words inside it stay in a column you can
 * actually read. Putting both on the same element gave us a line of legal
 * consent text 1900px wide on a desktop monitor.
 */

.sigma-section__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--space-lg);
}

.sigma-section--width-content .sigma-section__inner {
	max-width: 1100px;
}

.sigma-section--width-narrow .sigma-section__inner {
	max-width: 760px;
}

@media (min-width: 768px) {
	.sigma-section__inner {
		padding-inline: var(--space-xl);
	}
}

/**
 * Text inside a navy band is white by default.
 *
 * Until now every block that could sit in a navy section added its own
 * `.sigma-section--bg-navy .thing { color: white }` rule, one element at a
 * time. That works only while somebody remembers, and three were missed:
 * `.cta-band__heading` on ten pages, `.cta-band__supporting-line` on two,
 * and `.grid__item-text` on two. All three rendered navy on navy at 1:1 --
 * not hard to read, invisible. Our QA tester reported the CTA band as
 * "a big blue section with just one or two buttons, what is the point of
 * it", which is exactly what a band looks like when its headline is there
 * in the markup and cannot be seen.
 *
 * The band is what creates the dark context, so the band owns the
 * consequence. Setting it here means a new block inherits the right colour
 * without anyone having to think about it, and the per-block rules above
 * still win where a block genuinely needs something else -- every one of
 * them is more specific than this.
 *
 * Anything with its own light background nested inside a navy band (a white
 * card, say) must keep setting its own text colour, because it is no longer
 * on navy. Those already do.
 */
.sigma-section--bg-navy {
	color: var(--color-white);
}

/**
 * Floating CTA tab -- the comp's "Get Your Confidential Valuation" box that
 * follows the page as the user scrolls. Per client requirement (2026-09-22):
 * one tab per page stays visible at the right edge until the original section
 * scrolls out of view above.
 *
 * Only the first section per page with cta_tab set renders the tab markup
 * (render.php logic with static per-request flag).
 *
 * Sizing: 240px wide x 40px tall, 12px uppercase font with existing
 * letter-spacing token. From 1024px up it is the edge tab; below that it
 * becomes a bottom bar (see the media query further down).
 *
 * Position: starts at top:2.5rem absolute inside its section (the natural
 * layout). view.js measures the tab's Y origin on load/resize/fonts.ready and
 * adds .sigma-section__cta-tab--following when scrollY passes the threshold,
 * toggling to position:fixed at top:1.5rem so it stays on screen. The toggle
 * is toggled by rAF-throttled scroll event (passive listener).
 */
.sigma-section {
	position: relative;
}

.sigma-section__cta-tab {
	box-sizing: border-box;
	position: absolute;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-width: 240px;
	height: 40px;
	padding-inline: 1.75rem;
	border: 1.5px solid var(--color-gold);
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	background-color: var(--color-white);
	color: var(--color-navy);
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	margin-inline-start: auto;
	margin-block: 0;
	top: 2.5rem;
}

/* Tab in following mode: fixed to viewport, stays on screen as page scrolls. */
.sigma-section__cta-tab--following {
	position: fixed;
	top: var(--space-md);
	right: 0;
}

.sigma-section__cta-tab-arrow {
	flex: none;
	color: var(--color-gold);
}

.sigma-section__cta-tab:hover,
.sigma-section__cta-tab:focus-visible {
	background-color: var(--color-gold);
	color: var(--color-white);
}

.sigma-section__cta-tab:hover .sigma-section__cta-tab-arrow,
.sigma-section__cta-tab:focus-visible .sigma-section__cta-tab-arrow {
	color: var(--color-white);
}

/*
 * Below 1024px the edge tab would sit over the text, so it becomes a slim bar
 * pinned to the bottom of the screen, shown only once the reader has scrolled
 * past its origin (the hero carries its own button). The page gets the same
 * bottom padding so the bar never covers the end of the footer. Scot, 22 Sep:
 * "keep the valuation available on phones ... as long as it doesn't get in the
 * way of someone reading the page."
 */
@media (max-width: 1023.98px) {
	.sigma-section__cta-tab {
		display: none;
	}

	.sigma-section__cta-tab.sigma-section__cta-tab--following {
		display: flex;
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 50;
		width: 100%;
		min-width: 0;
		height: var(--space-xl);
		justify-content: center;
		border-width: 1.5px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	body:has(.sigma-section__cta-tab--following) {
		padding-bottom: var(--space-xl);
	}
}

/**
 * Bottom rule -- the 0.75px navy line the comp draws from x=111 to x=1325
 * under the intro statement. 1214px is that measured span; it shrinks with
 * the viewport inside the same inline padding the inner column uses. The
 * gap above it is the comp's 49px (space-xl is 48). The section keeps its
 * own bottom padding: an earlier pass read the rule as the band's bottom
 * EDGE and cancelled padding-block-end, which is what made bands run into
 * each other. On the comp the rule is a divider WITHIN a band (Home's sits
 * at y=854 inside a band running 604-1445, next heading at 908), so the
 * space after it is ordinary section padding. White on a navy band, where
 * navy would vanish.
 */
.sigma-section__rule {
	box-sizing: border-box;
	width: min(1214px, 100% - 2 * var(--space-lg));
	height: 0;
	margin: var(--space-xl) auto 0;
	border: 0;
	border-top: 0.75px solid var(--color-navy);
}

.sigma-section--bg-navy .sigma-section__rule {
	border-top-color: var(--color-white);
}

/**
 * One gap rule for "a heading-text that ends in body copy, with another
 * block stacked under it inside the same box".
 *
 * heading-text zeroes its last paragraph's bottom margin -- correct when
 * it is alone in its box, wrong the moment anything follows it -- so
 * that pair measures a 0px gap and the block below sits on the prose.
 * This has now been fixed three times, once per block that happened to
 * be reported: blocks/grid/style.css, blocks/value-prop/style.css and
 * blocks/dealmap/style.css each carry their own copy of this selector.
 * Business Valuation was the fourth: its GoHighLevel form landed on the
 * paragraph above it, and the SMS-consent line overlapped the prose's
 * descenders on the page that carries the site's main conversion form.
 *
 * Written once here against any sibling rather than a fourth time
 * against .sigma-form-embed. The three block-level copies are left in
 * place -- they set the same 48px, so nothing doubles, and each carries
 * the comp reasoning for its own block; they are a tidy-up, not a bug.
 *
 * The :has() restriction is the whole point and must stay. A heading-text
 * that ends in a bare HEADING keeps its own 24px bottom margin and reads
 * correctly; a blanket rule would stack 48 on top of that and over-space
 * every pair that was never broken (Business Valuation's own box 3 is
 * exactly that case, at 24px, and is untouched here).
 */
.heading-text:has(> .heading-text__body:last-child) + * {
	margin-block-start: var(--space-xl);
}

/**
 * The mirror of the rule above: a self-contained component with another
 * block stacked under it.
 *
 * .grid, .value-prop and .office-card all end flush -- no bottom margin
 * of their own -- so whatever follows them inside one section sits at
 * 0px, the same way a heading-text's zeroed last paragraph does. QA
 * reported this shape four times on the five pages she was given; these
 * are the three instances on pages she had not reached, found by
 * measuring every stacked pair on all 27 published pages rather than
 * waiting for her to file them: Home's DealMap link row under the
 * "Sigma gets you paid" cards, /exit-readiness/score/ (value-prop over a
 * grid) and Contact Us (office-card over a link row).
 *
 * Same 48px. Deliberately NOT written as a blanket "any two siblings"
 * rule: a heading-text that ends in a bare heading carries its own 24px
 * and reads correctly (Business Valuation box 3), and a blanket rule
 * would stack 48 on top of it.
 */
.grid + *,
.value-prop + *,
.office-card + * {
	margin-block-start: var(--space-xl);
}

/**
 * Scroll margin for anchor jumps. When a user follows a #section-id link,
 * the browser scrolls the target element to the top of the viewport. Without
 * scroll-margin-top, the target would land at y=0. Since the site header is
 * in normal flow (not fixed/sticky), it does not block the view; the margin
 * here is for visual clarity: reserved space at the top helps readers orient
 * to jumped content. Using 1.5rem (24px) as a standard top margin.
 */
.sigma-section[id] {
	scroll-margin-top: var(--space-md);
}

/*
 * Keep the tab clear of the section's own headline. Measured at 1440 on
 * 22 September: the tab occupies x 1109-1440 and the 1312px-wide
 * "1000+ Businesses Sold Since 2003." heading ran from x=128 to x=1440.
 * The declared tab minimum is 296px (240px + 2 * 1.75rem), while its
 * approved no-wrap label renders a real 331px footprint (1440 - 1109).
 * Reserving that 331px plus the comp's 24px gap gives 355px; below
 * 1024px the tab is hidden and the reservation lifts.
 *
 * The selector is deliberately descendant, not a child chain: ACF wraps
 * a section's inner blocks in .acf-innerblocks-container, so the heading
 * sits two levels below .sigma-section__inner, and a `>` chain written
 * against the layout JSON misses it silently -- measured overlapping at
 * 1440 on 22 September with exactly that mistake in place.
 *
 * margin, not padding: these headings are centred, so padding shrinks
 * the text away from both edges and leaves the element's own right edge
 * exactly where it was -- measured still overlapping at x=1440 with
 * padding-inline-end in place. Margin moves the box.
 */
@media (min-width: 64rem) {
	.sigma-section--cta-tab-top h2.heading-text__heading {
		margin-inline-end: 355px;
	}
}

/**
 * Site-wide fallback CTA tab modifier -- .sigma-section__cta-tab--site
 *
 * The fallback tab has no .sigma-section parent; it is output near wp_footer
 * when no section block claimed the tab. It is hidden until following, then
 * uses the same following styles as section-local tabs.
 */
.sigma-section__cta-tab--site {
	display: none;
}

.sigma-section__cta-tab--site.sigma-section__cta-tab--following {
	display: inline-flex;
}

@media (max-width: 1023.98px) {
	.sigma-section__cta-tab--site.sigma-section__cta-tab--following {
		display: flex;
	}
}