/*
 * uBind section rhythm - the vertical spacing of every full-bleed band, in one place.
 *
 * The site is a stack of bands: a hero, a run of `<section class="block">` content
 * sections, a testimonial, the lead form, a closing CTA. Every page stylesheet was
 * migrated from its own hand-written copy, and every one of them restated that padding
 * independently. Before this file, `section.block` was 120px on ten pages, 130px on
 * About Us and Report a Security Issue, `clamp(76px, 9vw, 120px)` on twelve documents,
 * and 50px !important on Home - which is why the Home testimonial and FAQ sit tight
 * against their neighbours while the same sections elsewhere breathe.
 *
 * Every one of those declarations has been removed from the page, shared and component
 * stylesheets. This file is the only thing that sets band padding now. Change a value
 * here and the whole site moves together.
 *
 * The gate is `node tools/wordpress/audit-section-padding.ts --check`: it measures every
 * band on every route at four widths and fails if one is off the scale, which is what a
 * reintroduced page-level override would look like.
 */

:root {
	/*
	 * One fluid step per band type rather than a desktop value plus a breakpoint
	 * override. The old stylesheets held 120px all the way down to a 768px breakpoint
	 * and then dropped to 80px, so a 900px-wide tablet got the full desktop padding and
	 * a 770px one still did. These track the viewport through that range instead.
	 *
	 *                 390px   768px   900px  1200px  1440px+
	 *   band            76      76      81     108     120
	 *   strip           44      44      45      60      60
	 *   hero, top      120     120     120     138     160
	 *   hero, bottom    60      60      63      84     100
	 */

	/* Full-width content section: the default, and what most bands should use. */
	--ub-band-py: clamp(76px, 9vw, 120px);

	/* Logo and partner strips - a single row of marks, deliberately tighter than a
	   content section so it reads as a divider between two of them. */
	--ub-strip-py: clamp(44px, 5vw, 60px);

	/* The opening band. Its top clears the fixed header, so it is not symmetrical. */
	--ub-hero-pt: clamp(120px, 11.5vw, 160px);
	--ub-hero-pb: clamp(60px, 7vw, 100px);

	/*
	 * Seams. Correct padding still reads as wrong where the band above and the band below
	 * are the same colour: 120px of one band's bottom meets 120px of the next band's top
	 * and the reader sees 240px of one ground with no boundary in it, which looks like a
	 * single section with too much air rather than like two sections. No spacing value
	 * fixes that - it needs a line.
	 *
	 * These are the three grounds two bands actually meet on, and the weight the site had
	 * already settled on for each: light was on Investors' supporters band and Features'
	 * payments strip, dark on eight hero-into-marquee joins. The tint had no precedent, so
	 * it takes the next step down the same ramp the band it divides already travels, which
	 * lands it at the same 20-per-channel distance from its ground as the light rule.
	 *
	 * WHICH joins are seams cannot be expressed here - CSS has no "same colour as the band
	 * above" - so each one is declared beside the background that causes it, in the page or
	 * shared stylesheet that owns that section. What is declared here is only what a seam
	 * looks like, so all of them stay one decision.
	 *
	 * `node tools/wordpress/audit-section-seams.ts --check` is the gate. It reads the
	 * computed background of every band on every published page, works out the colour a
	 * reader meets on each side of every boundary, and fails on one that matches with
	 * nothing marking it - which is what a new section, or a re-ordered page, looks like.
	 */
	--ub-seam-light: 1px solid var(--ink-100);
	--ub-seam-dark: 1px solid rgba(255, 255, 255, .05);
	--ub-seam-tint: 1px solid var(--emerald-100);
}

/* ---- Heroes --------------------------------------------------------------------
 * .hero            every solution, persona, product and utility page
 * .hs-hero         Home's showcase hero
 * .legal-hero      the six legal / cookie-policy documents
 * .ubind-lp__hero  the three campaign landing pages
 * The variants (.about-hero, .contact, .plugin) are modifiers on .hero and are matched
 * by it; none of them needs its own value.
 */
section.hero,
section.hs-hero,
section.legal-hero,
section.ubind-lp__hero {
	padding-top: var(--ub-hero-pt);
	padding-bottom: var(--ub-hero-pb);
}

/* ---- Content bands -------------------------------------------------------------
 * .block            the primitive; carries every page's content sections, and the FAQ
 *                   component and legal body render into it
 * .testimonial-q    the pull-quote band
 * .final-cta        the closing call to action authored into a page
 * .lead             the multi-step contact form band (template 199, and Investors' own)
 * .ubind-cta        the shared closing-CTA component
 * .ubind-newsletter the shared subscribe component
 * .ubind-lp__band   the campaign landing-page band
 */
section.block,
section.testimonial-q,
section.final-cta,
section.lead,
section.ubind-cta,
section.ubind-newsletter,
section.ubind-lp__band {
	padding-top: var(--ub-band-py);
	padding-bottom: var(--ub-band-py);
}

/* ---- Strips --------------------------------------------------------------------
 * .ubind-logo-marquee  the scrolling customer strip, on ten routes
 * .supporters          Investors' supporter marks
 * .payments            Features' payment-provider marks
 * All three are a bordered row of logos between two content sections. The marquee's
 * 60px/44px was already the shared value; the other two were 76px and 80px.
 */
section.ubind-logo-marquee,
section.supporters,
section.payments {
	padding-top: var(--ub-strip-py);
	padding-bottom: var(--ub-strip-py);
}