/**
 * Barndoor v12 dark band: forest gradient + grid texture, light text.
 * Use: add the Bricks global class v12-band--dark to a full-width section (+ v12-band--tall for very tall sections).
 * The classes live in Bricks (global classes v12-band--dark / --tall / --repaint / --cta); this file keeps the band
 * tokens they read, the plugin-rendered heroes (integration index + singles) and the page layout rules below.
 */

:root {
	--band-night: color-mix(in srgb, var(--color-ink) 60%, black);
	--band-deep: color-mix(in srgb, var(--color-forest-3) 85%, black);
	--band-moss: var(--color-forest);
	--band-text: var(--color-mint);
	--band-text-2: color-mix(in srgb, var(--color-mint) 75%, var(--color-forest-2));
	/* band surface tokens, read by the v12-band--dark / v12-band--tall global classes and the mapped sections here and in v12-marker.css */
	--band-image:
		radial-gradient(90% 70% at 78% 18%, color-mix(in srgb, var(--color-sage) 22%, transparent) 0%, transparent 58%),
		radial-gradient(80% 70% at 12% 88%, color-mix(in srgb, var(--color-sage-2) 34%, transparent) 0%, transparent 60%),
		linear-gradient(168deg, var(--band-night) 0%, var(--band-deep) 38%, var(--band-moss) 68%, var(--band-night) 100%);
	--band-image-tall:
		radial-gradient(90% 50% at 78% 0%, color-mix(in srgb, var(--color-sage) 22%, transparent) 0%, transparent 60%),
		radial-gradient(80% 40% at 10% 40%, color-mix(in srgb, var(--color-sage-2) 26%, transparent) 0%, transparent 60%),
		linear-gradient(var(--band-night) 0%, var(--band-deep) 40%, var(--band-night) 100%);
	--band-grid:
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-sage) 12%, transparent) 0 1px, transparent 1px 120px),
		repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-sage) 12%, transparent) 0 1px, transparent 1px 120px),
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-sage) 5%, transparent) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-sage) 5%, transparent) 0 1px, transparent 1px 24px);
	--band-grid-mask: linear-gradient(#000 0%, #000 50%, rgb(0 0 0 / .3) 80%, transparent 100%);
}

/* ---- the band on plugin-rendered heroes (integrations index + singles; not Bricks elements, so no global class) ----
   Every Bricks section uses the global classes instead: v12-band--dark (surface) + v12-band--repaint (sub-page text and
   buttons) or v12-band--cta (pre-footer CTA bands). Native migration phase 3, 2026-10-16. */
#brx-content .bd-archive-hero,                         /* integrations index (template 7041, plugin-built) */
#brx-content .bd-single-hero { /* integration singles (templates 7042-7044, plugin-built) */
	--focus-color: var(--color-sage);
	/* dark-surface state variables read by v12-states.css (focus ring, outline-button hover, link hover) */
	--v12-ring: var(--color-sage);
	--v12-outline-text: var(--band-text);
	--v12-outline-border-hover: var(--color-sage);
	--v12-outline-tint: color-mix(in srgb, var(--color-sage) 12%, transparent);
	--link-color-hover: var(--color-paper);
	position: relative;
	isolation: isolate;
	color: var(--band-text);
	background-color: var(--band-night);
	background-image: var(--band-image);
}
#brx-content .bd-archive-hero::before,
#brx-content .bd-single-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--band-grid);
	-webkit-mask-image: var(--band-grid-mask);
	mask-image: var(--band-grid-mask);
}
#brx-content :is(.bd-archive-hero, .bd-single-hero) :is(h1, h2, h3, h4) { color: var(--color-paper); }
#brx-content :is(.bd-archive-hero, .bd-single-hero) :is(p, li, .brxe-text, .brxe-text-basic) { color: var(--band-text-2); }
#brx-content :is(.bd-archive-hero, .bd-single-hero) :is(strong, b, a:not(.brxe-button):not(.bricks-button)) { color: var(--band-text); }
#brx-content .bd-archive-hero .bd-hero-eyebrow { color: var(--color-sage); }

/* ---- per-hero layout ---- */
/* pricing headline bleed (4508 rgfoea / zxuldf) and the customers featured card (7192): Bricks element styles (native phase 7) */
/* integrations index: drop the light hero's bottom rule */
#brx-content .bd-archive-hero { border-bottom: 0; padding-block: 72px 64px; }
/* the plugin's sage focus glow is invisible on the band: give the search box a visible keyboard focus ring */
#brx-content .bd-archive-hero .bd-hero-search input:focus-visible { outline: 2px solid var(--color-sage); outline-offset: 2px; }
/* integration singles: bleed the hero (body.single-integration already clips x-overflow); brand icons sit on a white tile */
#brx-content .bd-single-hero {
	width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); border-bottom: 0;
	padding: 40px max(20px, calc(50vw - 460px)) 48px;
}
#brx-content .bd-single-hero .bd-single-icon img { background: var(--color-paper); padding: 6px; }
#brx-content .bd-single-hero .bd-chip { background: transparent; color: var(--band-text); border: 1px solid color-mix(in srgb, var(--color-sage) 50%, transparent); }

/* ---- brand review Batch 1 (2026-10-16) ---- */
/* ACSS .bg--dark panels (gated LP forms, join-waitlist, footer): ACSS paints headings with --heading-color (forest),
   which is invisible on dark. Light headings, except inside a light card nested in the dark panel. */
.bg--dark :is(h1, h2, h3, h4, h5, h6) { color: var(--color-paper); }
.bg--dark :is(.bg--white, [class*="bg--"][class*="-light"]) :is(h1, h2, h3, h4, h5, h6) { color: var(--heading-color); }
/* Buttons on dark: v12 sage solid / sage-hairline ghost (ACSS gives forest-on-dark, and forest text for outline). The v12-band--dark global class sets the same. */
.bg--dark [class*="btn--"]:not(.btn--outline) {
	--btn-background: var(--color-sage); --btn-background-hover: var(--color-mint);
	--btn-border-color: var(--color-sage); --btn-border-color-hover: var(--color-mint);
	--btn-text-color: var(--color-forest-3); --btn-text-color-hover: var(--color-forest-3); --focus-color: var(--color-sage);
}
.bg--dark [class*="btn--"].btn--outline {
	--btn-text-color: var(--band-text); --btn-text-color-hover: var(--band-text);
	--btn-border-color: color-mix(in srgb, var(--color-sage) 40%, transparent); --btn-border-color-hover: var(--color-sage);
	--btn-background-hover: color-mix(in srgb, var(--color-sage) 12%, transparent); --focus-color: var(--color-sage);
}
.bg--dark .text--uppercase.text--xs.rounded--xl { color: var(--color-sage); }

/* FAQ sections are paper (Marker.io BW1-97): a background control on each FAQ section (5897 dgjrnh, 6012 clafvy, 3326 fhpbir,
   component nakbnn on 3282; homepage hv-faq was already white). Native phase 7: give a new FAQ section the paper background. */