/*
 * Foundations: box model, prose measures, and the few elements with no block of their own.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* --------------------------------------------------------------- foundations */

/*
 * Padding and borders count inside a width, not on top of it.
 *
 * Without this a padded block is wider than the measure it was given, so the
 * constrained layout centres it and its edges miss everything around it. The
 * note on the pricing page was 1267px inside a 1216px column for exactly that
 * reason, and sat 25px to the left of every heading near it.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Prose alignment is not done here, and cannot be.
 *
 * The constrained layout centres every child narrower than the measure with
 * margin-left: auto !important, so no rule in this file can left align one. The
 * answer is structural: prose goes inside an alignwide group with flow layout,
 * where no auto margins are applied at all. See ghizo_doc_text().
 */

/* --------------------------------------------------------------- foundations */

/*
 * One transition duration and one easing for the whole site, so nothing feels
 * like it belongs to a different page. ease-out for anything entering, which is
 * everything here: hovers, lifts, and colour changes.
 */
:root {
	/* One step darker than the CTA blue, for hover. Written out rather than mixed
	   so there is one value to look at when somebody asks what colour that is. */
	--ghizo-cta-hover: #1d4ed8;
	--ghizo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ghizo-fast: 160ms;
	--ghizo-slow: 260ms;
}

/*
 * A visible focus ring everywhere, in the brand blue, offset so it reads as a
 * ring rather than a border. Removing this is the single most common way a
 * polished looking site becomes unusable with a keyboard.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.has-navy-background-color :focus-visible,
.has-navy-field-gradient-background :focus-visible {
	outline-color: var(--wp--preset--color--blue-soft);
}

/* Anchored headings should not land under the sticky header. */
:where(h1, h2, h3, [id]) {
	scroll-margin-top: 6rem;
}

/*
 * Motion is decoration here, never information: every animation below is a
 * hover or a lift, so turning them all off costs the reader nothing.
 */
@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;
	}
}

/* ------------------------------------------------------------- prose measures */

/*
 * A wide section wants its grid full width and its sentences narrow. The block
 * editor's answer is to nest another constrained layout, but a constrained layout
 * inside a constrained layout clamps everything to the content width and then
 * nothing can escape it, alignwide included. So sections use a flow layout and
 * these cap the prose instead.
 *
 * Characters rather than rems: the limit that matters is how far the eye travels
 * back to the next line, and that is a function of the text, not the viewport.
 */
.ghizo-measure {
	max-width: 62ch;
}

.ghizo-measure-tight {
	max-width: 46ch;
}

/* Display type sets much larger, so it needs its own, shorter measure. */
.ghizo-measure-display {
	max-width: 24ch;
}

.has-text-align-center.ghizo-measure,
.has-text-align-center.ghizo-measure-tight,
.has-text-align-center.ghizo-measure-display {
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------- skip to main */

/*
 * Visible only when focused. WordPress prints the link; without this it is either
 * always visible or never reachable.
 */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy-deep);
	border-radius: 6px;
	box-shadow: var(--wp--preset--shadow--lifted);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	height: auto;
	left: var(--wp--preset--spacing--20);
	line-height: normal;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	top: var(--wp--preset--spacing--20);
	width: auto;
	z-index: 100000;
}

/* --------------------------------------------------------------------- code */

/*
 * Eight space tabs turn a two level indent into a wrapped line inside a code
 * block at reading width, which is what the hook examples were doing.
 */
.wp-block-code {
	tab-size: 2;
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	overflow-x: auto;
	padding: var(--wp--preset--spacing--30);
}

.wp-block-code code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ------------------------------------------------------------------- icons */

.ghizo-icon {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

/* ------------------------------------------------------------------- the grid */

.ghizo-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}