/* =============================================================================
 * base.css — elements, layout primitives, accessibility.
 *
 * Every colour, size and space here comes from a --wp--preset--* custom property that
 * WordPress generated from theme.json. No palette value is ever re-declared in a
 * stylesheet; if a value is needed that theme.json cannot express (a radius, the
 * measure, the container width) it is generated into _tokens.css instead.
 *
 * The one exception, stated so it is not mistaken for drift: the shadows and the hero
 * wash below use rgba() literals derived from --color-band. theme.json's shadow presets
 * cover the card shadows; these are gradient stops, which it has no syntax for.
 * ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--wp--preset--color--text);
}

h1 { font-size: var(--wp--preset--font-size--display); }
h2 { font-size: var(--wp--preset--font-size--xxxl); }
h3 { font-size: var(--wp--preset--font-size--xl); letter-spacing: -0.02em; }
h4 { font-size: var(--wp--preset--font-size--lg); letter-spacing: -0.015em; }

p,
ul,
ol,
dl,
figure,
blockquote,
table {
	margin: 0 0 var(--wp--preset--spacing--4);
}

p {
	max-width: var(--jsk-measure);
}

/* -------------------------------------------------------------------- links */

a {
	color: var(--wp--preset--color--brand);
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/*
 * Focus is visible on BOTH schemes and on both grounds.
 *
 * Direction C's dark bands are fixed, so a focus ring keyed to --color-focus would
 * disappear on them in light mode. Anything inside a band uses the band's own focus
 * colour, which is amber and never inverts.
 */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
	border-radius: 6px;
}

.jsk-band :focus-visible,
.jsk-hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--wp--preset--color--focus-on-band);
}

.skip-link {
	position: absolute;
	left: var(--wp--preset--spacing--4);
	top: -100px;
	z-index: 999;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border-radius: var(--jsk-radius-control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 800;
	text-decoration: none;
}

.skip-link:focus {
	top: var(--wp--preset--spacing--4);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip-path: none;
	white-space: normal;
}

/* ------------------------------------------------------------------- media */

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ layout */

.jsk-wrap {
	width: min(100% - 2.5rem, var(--jsk-container));
	margin-inline: auto;
}

/*
 * The `is-style-*` selectors are the same three treatments reached from the block
 * sidebar instead of by typing a class name. They are listed here rather than given
 * their own rules so that "what a section is" stays one definition.
 */
.jsk-section,
.wp-block-group.is-style-jsk-section,
.wp-block-group.is-style-jsk-soft,
.wp-block-group.is-style-jsk-band {
	padding-block: var(--wp--preset--spacing--9);
}

/*
 * The dark bands.
 *
 * These four properties come from tokens that are identical in light and dark. A band
 * that inverted with the colour scheme would turn the hero, the proof strip and the
 * footer inside out halfway down the page — in direction C the bands are the spine of
 * the design, not an accent.
 */
.jsk-band,
.wp-block-group.is-style-jsk-band {
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--on-band);
}

.jsk-band h1,
.jsk-band h2,
.jsk-band h3,
.jsk-band h4,
.is-style-jsk-band h1,
.is-style-jsk-band h2,
.is-style-jsk-band h3,
.is-style-jsk-band h4 {
	color: var(--wp--preset--color--on-band);
}

.jsk-band p,
.jsk-band li,
.is-style-jsk-band p,
.is-style-jsk-band li {
	color: var(--wp--preset--color--on-band-muted);
}

.jsk-band--alt {
	background: var(--wp--preset--color--band-2);
}

/* --------------------------------------------------------------- utilities */

.jsk-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.jsk-band .jsk-eyebrow {
	color: var(--wp--preset--color--accent);
}

.jsk-lede {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--muted);
}

.jsk-band .jsk-lede {
	color: var(--wp--preset--color--on-band-muted);
}

/*
 * Wide content must scroll inside its own box; the page body never scrolls sideways.
 *
 * Two things were missing from "overflow-x: auto" alone, and both were only visible on a
 * phone. The price table is 544px wide and the box holding it is 471px, so a third of
 * the timeline column is off-screen — with no edge, no shadow and no cut-off row, there
 * was nothing to suggest it moved. And a scrollable region that is not focusable cannot
 * be scrolled by keyboard at all (WCAG 2.1.1); the markup carries tabindex for that, and
 * this rule gives the resulting focus a visible ring.
 *
 * The shadows are painted with background-attachment, so they appear only while there is
 * something to scroll to and fade out at each end on their own. No JavaScript decides it.
 */
.jsk-scroll-x {
	overflow-x: auto;
	background:
		linear-gradient(to right, var(--wp--preset--color--canvas) 30%, transparent),
		linear-gradient(to left, var(--wp--preset--color--canvas) 30%, transparent) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent),
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) 100% 0;
	background-repeat: no-repeat;
	background-size: 3rem 100%, 3rem 100%, 0.85rem 100%, 0.85rem 100%;
	background-attachment: local, local, scroll, scroll;
}

.jsk-scroll-x:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 4px;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th,
td {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ----------------------------------------------------------------- print
 *
 * The site is three dark bands and a navy footer. Printed, that is most of a toner
 * cartridge spent on a background nobody asked for, and the parts a person actually
 * prints — a price band, a case study, the data-handling page — come out white on black
 * or not at all.
 *
 * So print gets ink on paper: chrome removed, bands flattened, and the destination of
 * every content link written out, because a printed page cannot be clicked.
 */
@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.jsk-ladder,
	.jsk-pagination,
	.jsk-todo {
		display: none !important;
	}

	html,
	body,
	.jsk-band,
	.jsk-hero,
	.jsk-page-hero,
	.jsk-section--soft {
		background: #fff !important;
		color: #000 !important;
	}

	.jsk-band h1, .jsk-band h2, .jsk-band h3, .jsk-band h4, .jsk-band p, .jsk-band li,
	.jsk-hero h1, .jsk-hero p,
	.jsk-page-hero h1, .jsk-page-hero p {
		color: #000 !important;
	}

	.jsk-entry a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	/* A table that scrolls on screen has to print whole. */
	.jsk-scroll-x {
		overflow: visible !important;
		background: none !important;
	}

	.jsk-card,
	.jsk-section {
		break-inside: avoid;
		box-shadow: none !important;
	}
}

/* ------------------------------------------------------- unbreakable strings
 *
 * A search page prints back whatever was typed, and a heading has no obligation to
 * contain a space. "zzzznothingmatchesthis" at 320px pushed the document to 483px wide —
 * and it did it invisibly to a per-element overflow check, because the heading's BOX
 * stayed inside the viewport while its text ran past the edge.
 *
 * The same applies to a pasted URL in body copy, a long client name in a case study, and
 * an email address in the footer. Breaking a word is ugly; a page that scrolls sideways
 * on a phone is worse, and only one of the two is a bug.
 */
h1, h2, h3, h4, h5, h6,
.jsk-entry p,
.jsk-entry li,
.jsk-card__title {
	overflow-wrap: anywhere;
	word-break: normal;
}