/*
 * site.css: only what blocks and global styles can't do.
 * Every rule carries a one-line comment saying why it is here.
 */

/* The design allows no motion; this also stops transitions in GeneratePress and plugin CSS. Exceptions: the phone
   bar uses an animation as an on/off switch (below), never as visible movement; question lists slide open and
   jump links scroll smoothly (owner, 2026-10-31), both only when the visitor's device doesn't ask for less motion. */
*:not(.ap-mbar):not(.gb-accordion__content),
*::before,
*::after {
	transition: none !important;
	animation: none !important;
}

/* Smooth jump links and question lists (owner, 2026-10-31). GB Pro's "slide" setting animates the height. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* (the answer stays visible while it closes, then hides) */
	.gb-accordion__content {
		transition: max-height 0.3s ease-in-out, visibility 0s linear 0.3s;
	}

	.gb-accordion__item-open > .gb-accordion__content {
		transition: max-height 0.3s ease-in-out, visibility 0s;
	}
}

/* Visitors who ask for less motion get none. */
@media (prefers-reduced-motion: reduce) {
	.gb-accordion__content {
		transition: none;
	}
}

/* Phone action bar (≤900px). Its global style hides it; the design shows it with a script. Here: shown on phones,
   and where the browser supports scroll-driven CSS, only from the end of the hero to the closing section
   (owner, 2026-10-30: no script). Blocks can't declare @keyframes or timeline scope, so this lives here. */
@media (max-width: 900px) {
	/* "body" outweighs the bar's global style (display: none), which loads after this file. */
	body .ap-mbar {
		display: grid;
	}
}

@supports (animation-timeline: view()) {
	@media (max-width: 900px) {
		body {
			timeline-scope: --ap-hero, --ap-close;
		}

		.entry-content > :first-child {
			view-timeline-name: --ap-hero;
		}

		/* the closing section is always the page's last section (its style name varies by page family) */
		.entry-content > :last-child {
			view-timeline-name: --ap-close;
		}

		.ap-mbar {
			animation: ap-mbar-show linear both, ap-mbar-hide linear both;
			animation-timeline: --ap-hero, --ap-close;
			animation-range: exit 40% exit 41%, entry 0% entry 1%;
		}
	}
}

@keyframes ap-mbar-show {
	from { visibility: hidden; }
	to { visibility: visible; }
}

@keyframes ap-mbar-hide {
	from { translate: 0 0; }
	to { translate: 0 200%; }
}

/* Short pages keep the footer at the bottom of the window: the page body grows to fill the space. */
body:has(> #page) {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

#page {
	flex-grow: 1;
	width: 100%;
}

/* Text rendering the design sets on the whole page; GeneratePress has no setting for it. */
html {
	text-rendering: optimizeLegibility;
}

/* In-page links (#bring, #request) and the form's confirmation stop below the sticky header; only html can set this. */
html {
	scroll-padding-top: var(--anchor-offset);
}

/* With the sticky "On this page" bar, in-page links also stop below the bar (66px open row, 62px collapsed row);
   the design measured this with a script. */
html:has(.ap-otp) {
	scroll-padding-top: calc(var(--anchor-offset) + 66px);
}

@media (max-width: 1239.98px) {
	html:has(.ap-otp) {
		scroll-padding-top: calc(var(--anchor-offset) + 62px);
	}
}

/* Visible focus on every control (design-tokens.md section 7); blocks can't style :focus-visible globally. */
:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 3px;
}

/* Text selection colours from the design; ::selection can't be set on a block. */
::selection {
	background: var(--blue-100);
	color: var(--ink-900);
}

/* Link underline weight and offset at rest; GeneratePress can only turn underlines on or off. */
a {
	text-decoration-thickness: 1.5px;
	text-underline-offset: var(--space-1);
	text-decoration-color: currentColor;
}

/* Links darken on hover only; GeneratePress's hover setting would also recolour :focus and :active. */
a:hover {
	color: var(--text-link-hover);
}

/* Headings wrap evenly and paragraphs avoid orphans, as in the design; GeneratePress has no text-wrap setting. */
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* GeneratePress lets the browser split any word in the content area (word-wrap: break-word on .site-content); the
   design doesn't, so a step number in a narrow column ("01") broke into "0" over "1". Guide articles keep it for
   long links. */
.site-content {
	overflow-wrap: normal;
}

.dynamic-entry-content {
	overflow-wrap: break-word;
}

/* GeneratePress gives lists and figures outside margins; the design's base rule removes them (blocks then space them). */
ul,
ol,
figure,
dl {
	margin: 0;
}

/* The design's default icon size (20px) for icons a style doesn't size itself; :where() keeps it below every class rule. */
:where(svg) {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* GeneratePress indents <dd> and bolds <dt>; the design's definition lists are plain rows styled by their blocks. */
dt {
	font-weight: inherit;
}

dd {
	margin: 0;
}

/* GeneratePress's main.css paints every <button> grey (#55555e); buttons here take their look from their blocks. */
button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}