/* Global rules shared by every section. Values come from the Figma text styles and tokens. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Figma pairs each type size with a line height; font-size presets carry it here. */
.has-caption-font-size { line-height: calc(16 / 11); }
.has-xs-font-size { line-height: calc(16 / 12); }
.has-paragraph-sm-font-size { line-height: calc(20 / 13); }
.has-sm-font-size { line-height: calc(20 / 14); }
.has-paragraph-font-size { line-height: 1.5; }
.has-body-font-size { line-height: calc(26 / 18); }
.has-heading-6-font-size { line-height: 1.4; }
.has-heading-5-font-size { line-height: calc(34 / 24); }
.has-heading-4-font-size { line-height: calc(38 / 28); }
.has-heading-3-font-size { line-height: calc(46 / 36); }
.has-heading-2-font-size { line-height: calc(58 / 48); }
.has-heading-1-font-size { line-height: calc(66 / 56); }

/* Figma H1–H6 are Stack Sans Headline (H1–H4 SemiBold, H5–H6 Medium): any block using a heading size gets the full style. */
:is(.has-heading-1-font-size, .has-heading-2-font-size, .has-heading-3-font-size, .has-heading-4-font-size, .has-heading-5-font-size, .has-heading-6-font-size) {
	font-family: var(--wp--preset--font-family--stack-sans-headline);
	font-weight: 600;
	letter-spacing: 0;
}

:is(.has-heading-5-font-size, .has-heading-6-font-size) {
	font-weight: 500;
}

/* Stack Sans Headline carries no letter-spacing; Inter body text uses Figma's -0.5%. */
.has-stack-sans-headline-font-family { letter-spacing: 0; }

/* Section heading block: eyebrow + title, centred (Figma: gap 14, 8px top, 48px bottom). */
.rs-section-head > * {
	margin: 0;
}

/* Eyebrow label: purple bar + uppercase caption ("How it works", "All in one", …). */
.rs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.rs-eyebrow::before {
	content: "";
	flex: none;
	width: 24px;
	height: 4px;
	border-radius: 99px;
	background: var(--wp--preset--color--purple-accent);
}

.rs-eyebrow.is-brand::before {
	background: var(--wp--preset--color--purple-100);
}

.rs-eyebrow.is-yellow::before {
	background: var(--wp--preset--color--yellow);
}

.rs-eyebrow.is-teal::before {
	background: var(--wp--preset--color--teal);
}

.rs-eyebrow.is-cyan::before {
	background: var(--wp--preset--color--cyan-90);
}

/* Pill variant (Collect & Showcase): 20×8 lilac pill, 20px gap, Medium black label, 2% tracking. */
.rs-eyebrow.is-pill {
	gap: 20px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--black);
}

.rs-eyebrow.is-pill::before {
	width: 20px;
	height: 8px;
	border-radius: var(--wp--preset--border-radius--30);
	background: var(--wp--preset--color--lilac);
}

/*
 * Figma "Section Divider" component (1280×24): bar + SemiBold label + a #999 dashed rule 24px after the
 * label that fills the row. Add `has-rule` to an eyebrow paragraph. The Figma rule is a 1px SVG of
 * ~9.92px dashes every 19.83px, starting with a half dash. Figma stretches that SVG to each rule's
 * length, so a section can set --rs-rule-period / --rs-rule-offset to match its own rule.
 */
.rs-eyebrow.has-rule {
	display: flex;
	align-self: stretch;
	font-weight: 600;
	white-space: nowrap;
}

.rs-eyebrow.has-rule::after {
	content: "";
	flex: 1 1 0;
	min-width: 0;
	height: 1px;
	margin-left: calc(8px - 0.04em); /* CSS adds the label's letter-spacing after its last letter; Figma doesn't */
	background: linear-gradient(90deg, var(--wp--preset--color--text-muted) 50%, transparent 50%) var(--rs-rule-offset, -4.96px) 0 / var(--rs-rule-period, 19.833px) 1px repeat-x;
}

/* Section Divider label without the bar (a few Figma sections use the label + rule only). */
.rs-eyebrow.is-plain::before {
	display: none;
}

/* Screen-reader-only text for icon-only links. */
.rs-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*
 * WordPress gives vertical flex groups flex-wrap: wrap. In a wrapping column, items are sized to their
 * content instead of the container, so long text or fixed-size mockups overflow narrow screens. Vertical
 * stacks never need to wrap.
 */
.is-layout-flex.is-vertical {
	flex-wrap: nowrap;
}

/* Page chrome: sections carry their own Figma spacing, so no gaps between top-level blocks. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.rs-sections > * {
	margin-block: 0;
}

/* Templates without a hero start below the floating header (24 + 56 + 24). */
.rs-main--offset {
	padding-top: 136px;
	padding-bottom: 80px;
}

/* So does a plain page an editor writes on the default template (no full-width hero section first). The site's
   own pages all open with a full-width hero, which carries its own space for the header. */
.rs-main > .rs-sections:not(:has(> .alignfull:first-child)) {
	padding-top: 136px;
	padding-bottom: 80px;
}