/**
 * Agency Theme base stylesheet.
 *
 * Everything shared by every page: the design tokens, a reset, typography,
 * the layout primitives modules compose with, and the two components that
 * appear in almost every module (button, heading group).
 *
 * Tokens are defined here rather than in theme.json because the theme dequeues
 * core's global-styles on builder pages; a token a module depends on must not
 * live in a stylesheet the theme removes.
 *
 * Layer order is declared once, at the top, so a module's stylesheet can never
 * accidentally outrank a base rule through specificity alone.
 */

@layer wpsa.reset, wpsa.tokens, wpsa.base, wpsa.layout, wpsa.components, wpsa.modules, wpsa.utilities;

@layer wpsa.tokens {
	:root {
		/* Brand — the values a site override normally touches. */
		--wpsa-color-accent: #4338ca;
		--wpsa-color-accent-contrast: #ffffff;
		--wpsa-color-accent-hover: #3730a3;
		/* A second hue, used only for gradients. Set it equal to the accent for
		   a flat brand; the gradients then quietly become solid. */
		--wpsa-color-accent-alt: #0ea5e9;

		/* Surfaces and text. A faint blue cast through the greyscale keeps
		   large flat areas from reading as unfinished default grey. */
		--wpsa-color-bg: #ffffff;
		--wpsa-color-surface: #f5f6fa;
		--wpsa-color-text: #14151a;
		--wpsa-color-text-muted: #595f70;
		--wpsa-color-border: #e4e6ee;
		--wpsa-color-inverse-bg: #101119;
		--wpsa-color-inverse-text: #f5f5fa;
		--wpsa-color-inverse-muted: #a5a9ba;

		/* Type. A system stack by default: zero network cost, and a site that
		   wants a webfont overrides one variable. */
		--wpsa-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--wpsa-font-heading: var(--wpsa-font-body);

		--wpsa-text-xs: 0.8125rem;
		--wpsa-text-sm: 0.9375rem;
		--wpsa-text-base: 1.0625rem;
		--wpsa-text-lg: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
		--wpsa-text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
		--wpsa-text-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
		--wpsa-text-3xl: clamp(2.25rem, 3.5vw + 1.2rem, 3.75rem);

		--wpsa-leading-tight: 1.15;
		--wpsa-leading-snug: 1.35;
		--wpsa-leading-normal: 1.65;

		/* Space scale. One ratio, used everywhere, so vertical rhythm holds
		   across modules written months apart. */
		--wpsa-space-3xs: 0.25rem;
		--wpsa-space-2xs: 0.5rem;
		--wpsa-space-xs: 0.75rem;
		--wpsa-space-sm: 1rem;
		--wpsa-space-md: 1.5rem;
		--wpsa-space-lg: 2.5rem;
		--wpsa-space-xl: 4rem;
		--wpsa-space-2xl: 6rem;
		--wpsa-space-3xl: 9rem;

		/* Section rhythm, one step down on small screens. */
		--wpsa-section-tight: clamp(1.5rem, 4vw, 2.5rem);
		--wpsa-section-default: clamp(3rem, 7vw, 5.5rem);
		--wpsa-section-loose: clamp(4.5rem, 10vw, 8rem);

		--wpsa-container: 76rem;
		--wpsa-container-narrow: 46rem;
		--wpsa-gutter: clamp(1.25rem, 4vw, 2.5rem);

		--wpsa-radius-sm: 0.375rem;
		--wpsa-radius-md: 0.75rem;
		--wpsa-radius-lg: 1.25rem;
		--wpsa-radius-full: 999px;

		/* Layered rather than single shadows: a tight contact shadow plus a
		   wide ambient one is what stops a card looking pasted on. */
		--wpsa-shadow-sm: 0 1px 2px rgb(16 18 24 / 5%), 0 1px 3px rgb(16 18 24 / 6%);
		--wpsa-shadow-md: 0 1px 2px rgb(16 18 24 / 5%), 0 8px 24px -6px rgb(16 18 24 / 12%);
		--wpsa-shadow-lg: 0 2px 4px rgb(16 18 24 / 5%), 0 24px 48px -12px rgb(16 18 24 / 18%);

		--wpsa-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
	}
}

@layer wpsa.reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body,
	h1, h2, h3, h4, h5, h6,
	p, figure, blockquote, dl, dd {
		margin: 0;
	}

	ul[class],
	ol[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

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

	img {
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	:where(a) {
		color: inherit;
	}

	:target {
		scroll-margin-block-start: var(--wpsa-space-xl);
	}

	@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;
		}
	}
}

@layer wpsa.base {
	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	body {
		background: var(--wpsa-color-bg);
		color: var(--wpsa-color-text);
		font-family: var(--wpsa-font-body);
		font-size: var(--wpsa-text-base);
		line-height: var(--wpsa-leading-normal);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--wpsa-font-heading);
		font-weight: 650;
		line-height: var(--wpsa-leading-tight);
		text-wrap: balance;
	}

	h1 { font-size: var(--wpsa-text-3xl); letter-spacing: -0.02em; }
	h2 { font-size: var(--wpsa-text-2xl); letter-spacing: -0.015em; }
	h3 { font-size: var(--wpsa-text-xl); }
	h4 { font-size: var(--wpsa-text-lg); }

	p {
		text-wrap: pretty;
	}

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

	:focus-visible {
		outline: 3px solid var(--wpsa-color-accent);
		outline-offset: 2px;
		border-radius: var(--wpsa-radius-sm);
	}

	.wpsa-skip-link {
		position: absolute;
		inset-inline-start: var(--wpsa-space-sm);
		inset-block-start: var(--wpsa-space-sm);
		z-index: 1000;
		padding: var(--wpsa-space-2xs) var(--wpsa-space-sm);
		background: var(--wpsa-color-text);
		color: var(--wpsa-color-bg);
		border-radius: var(--wpsa-radius-sm);
		transform: translateY(-200%);
	}

	.wpsa-skip-link:focus {
		transform: translateY(0);
	}

	.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;
	}
}

@layer wpsa.layout {
	/* The one horizontal container. A module never sets its own max-width. */
	.wpsa-container {
		width: 100%;
		max-width: var(--wpsa-container);
		margin-inline: auto;
		padding-inline: var(--wpsa-gutter);
	}

	.wpsa-container--narrow {
		max-width: var(--wpsa-container-narrow);
	}

	.wpsa-container--wide {
		max-width: none;
	}

	/* Section spacing comes from the builder's shared support field, so every
	   module answers to the same scale without implementing it. */
	.wpsa-module {
		position: relative;
		padding-block: var(--wpsa-section-default);
		background-size: cover;
		background-position: center;
	}

	.wpsa-module--space-none { padding-block: 0; }
	.wpsa-module--space-tight { padding-block: var(--wpsa-section-tight); }
	.wpsa-module--space-loose { padding-block: var(--wpsa-section-loose); }

	/* Colour schemes recolour a section by swapping tokens, so nested
	   components inherit correctly without knowing where they are. */
	.wpsa-scheme--light {
		--wpsa-color-bg: var(--wpsa-color-surface);
		background: var(--wpsa-color-bg);
	}

	.wpsa-scheme--dark {
		--wpsa-color-bg: var(--wpsa-color-inverse-bg);
		--wpsa-color-text: var(--wpsa-color-inverse-text);
		--wpsa-color-text-muted: var(--wpsa-color-inverse-muted);
		--wpsa-color-border: rgb(255 255 255 / 14%);
		background: var(--wpsa-color-bg);
		color: var(--wpsa-color-text);
	}

	/* Painted with a pseudo-element so it sits under content but over the
	   section background, and so it costs nothing on sections without it. */
	.wpsa-module--hero.wpsa-scheme--dark::before,
	.wpsa-module--cta.wpsa-scheme--dark::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(60% 90% at 12% 0%, color-mix(in oklab, var(--wpsa-color-accent) 55%, transparent), transparent 70%),
			radial-gradient(50% 80% at 92% 20%, color-mix(in oklab, var(--wpsa-color-accent-alt) 42%, transparent), transparent 72%);
		pointer-events: none;
	}

	.wpsa-module--hero.wpsa-scheme--dark > *,
	.wpsa-module--cta.wpsa-scheme--dark > * {
		position: relative;
		z-index: 1;
	}

	.wpsa-scheme--accent {
		--wpsa-color-bg: var(--wpsa-color-accent);
		--wpsa-color-text: var(--wpsa-color-accent-contrast);
		--wpsa-color-text-muted: rgb(255 255 255 / 78%);
		--wpsa-color-border: rgb(255 255 255 / 22%);
		background: var(--wpsa-color-bg);
		color: var(--wpsa-color-text);
	}

	.wpsa-stack > * + * {
		margin-block-start: var(--wpsa-stack-space, var(--wpsa-space-md));
	}

	.wpsa-grid {
		display: grid;
		gap: var(--wpsa-grid-gap, var(--wpsa-space-lg));
		grid-template-columns: repeat(var(--wpsa-grid-columns, 1), minmax(0, 1fr));
	}

	@media (width >= 48rem) {
		.wpsa-grid {
			grid-template-columns: repeat(var(--wpsa-grid-columns-md, var(--wpsa-grid-columns, 1)), minmax(0, 1fr));
		}
	}
}

@layer wpsa.components {
	.wpsa-heading-group {
		display: flex;
		flex-direction: column;
		gap: var(--wpsa-space-sm);
		max-width: 62ch;
	}

	.wpsa-heading-group--centred {
		margin-inline: auto;
		text-align: center;
	}

	/* A pill rather than bare uppercase text: it reads as a deliberate label
	   instead of a heading that lost its size. */
	.wpsa-eyebrow {
		display: inline-flex;
		align-items: center;
		align-self: start;
		padding: 0.4em 0.9em;
		border-radius: var(--wpsa-radius-full);
		background: color-mix(in oklab, var(--wpsa-color-accent) 10%, transparent);
		font-size: var(--wpsa-text-xs);
		font-weight: 620;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wpsa-color-accent);
	}

	.wpsa-scheme--dark .wpsa-eyebrow,
	.wpsa-scheme--accent .wpsa-eyebrow {
		background: rgb(255 255 255 / 12%);
	}

	.wpsa-scheme--accent .wpsa-eyebrow,
	.wpsa-scheme--dark .wpsa-eyebrow {
		color: currentColor;
		opacity: 0.72;
	}

	.wpsa-lede {
		font-size: var(--wpsa-text-lg);
		color: var(--wpsa-color-text-muted);
	}

	.wpsa-prose > * + * {
		margin-block-start: var(--wpsa-space-md);
	}

	.wpsa-prose :where(h2, h3, h4) {
		margin-block-start: var(--wpsa-space-lg);
	}

	.wpsa-prose :where(a) {
		color: var(--wpsa-color-accent);
		text-underline-offset: 0.2em;
	}

	.wpsa-prose :where(ul, ol) {
		padding-inline-start: 1.4em;
	}

	.wpsa-prose :where(li) + :where(li) {
		margin-block-start: var(--wpsa-space-2xs);
	}

	.wpsa-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wpsa-space-sm);
	}

	.wpsa-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--wpsa-space-2xs);
		padding: 0.85em 1.7em;
		box-shadow: var(--wpsa-shadow-sm);
		border: 1px solid transparent;
		border-radius: var(--wpsa-radius-full);
		background: var(--wpsa-color-accent);
		color: var(--wpsa-color-accent-contrast);
		font-size: var(--wpsa-text-sm);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		cursor: pointer;
		transition: background var(--wpsa-transition), transform var(--wpsa-transition);
	}

	.wpsa-button:hover {
		background: var(--wpsa-color-accent-hover);
		box-shadow: var(--wpsa-shadow-md);
	}

	.wpsa-button:active {
		transform: translateY(1px);
	}

	.wpsa-button--secondary {
		background: transparent;
		border-color: var(--wpsa-color-border);
		color: var(--wpsa-color-text);
	}

	.wpsa-button--secondary:hover {
		background: var(--wpsa-color-surface);
		border-color: var(--wpsa-color-text-muted);
	}

	.wpsa-scheme--dark .wpsa-button--secondary:hover,
	.wpsa-scheme--accent .wpsa-button--secondary:hover {
		background: rgb(255 255 255 / 10%);
	}
}

@layer wpsa.utilities {
	.wpsa-text-centre { text-align: center; }
	.wpsa-visually-hidden { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
}