/*
 * ICONS base styles.
 *
 * Presentational defaults live in theme.json. This file carries only what
 * theme.json cannot express: reset behaviour, slot scaffolding, and motion
 * preferences. Everything here references the --icons-* contract rather than
 * literal values, so a rebrand never touches this file.
 */

:where(html) {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	:where(html) {
		scroll-behavior: auto;
	}

	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

:where(body) {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

:where(img, picture, video, canvas, svg) {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

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

/* Keep long words and URLs from forcing horizontal overflow on narrow screens. */
:where(p, h1, h2, h3, h4, h5, h6, li, dt, dd) {
	overflow-wrap: break-word;
}

/* A visible, token-coloured focus ring everywhere, replacing per-component rings. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--icons-color-primary);
	outline-offset: 2px;
	border-radius: var(--icons-radius-sm);
}

/* Slots are layout-neutral by default: they add no gap until they add content. */
.icons-slot {
	display: contents;
}

/* Opt-in flow wrapper for slots that need to behave as a block region. */
.icons-slot--block {
	display: block;
	inline-size: 100%;
}

.icons-visually-hidden:not(:focus):not(:active) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.icons-skip-link:focus {
	position: fixed;
	inset-block-start: var(--icons-space-2xs);
	inset-inline-start: var(--icons-space-2xs);
	z-index: 999999;
	padding: var(--icons-space-2xs) var(--icons-space-xs);
	background: var(--icons-color-base);
	color: var(--icons-color-contrast);
	border-radius: var(--icons-radius-sm);
	box-shadow: var(--icons-shadow-md);
}

/* Constrain prose to a readable measure without fighting block layout widths. */
.icons-measure {
	max-inline-size: var(--icons-measure-prose);
}

/* ------------------------------------------------------------------ Grid
 *
 * Per-breakpoint column counts, which is the one place vanilla Gutenberg is
 * genuinely weaker than a page builder. The block writes --icons-cols-* as
 * inline custom properties; these rules resolve them with a cascading
 * fallback, so a breakpoint left unset inherits the next one down rather than
 * collapsing to a default.
 *
 * The literal widths match settings.custom.breakpoint in theme.json. Media
 * queries cannot read custom properties, so they are the one place a token
 * value has to be repeated.
 */

.icons-grid {
	display: grid;
	grid-template-columns: repeat(var(--icons-grid-columns, 1), minmax(0, 1fr));
	gap: var(--icons-grid-gap, var(--icons-space-md));
	--icons-grid-columns: var(--icons-cols-xs, 1);
}

@media (min-width: 36rem) {
	.icons-grid {
		--icons-grid-columns: var(--icons-cols-sm, var(--icons-cols-xs, 1));
	}
}

@media (min-width: 48rem) {
	.icons-grid {
		--icons-grid-columns: var(--icons-cols-md, var(--icons-cols-sm, var(--icons-cols-xs, 1)));
	}
}

@media (min-width: 64rem) {
	.icons-grid {
		--icons-grid-columns: var(--icons-cols-lg, var(--icons-cols-md, var(--icons-cols-sm, var(--icons-cols-xs, 1))));
	}
}

/* Grid children stretch by default; a direct image child should not distort. */
.icons-grid > * {
	min-inline-size: 0;
}

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

.icons-hide-xs { display: none; }

@media (min-width: 36rem) {
	.icons-hide-xs { display: revert; }
	.icons-hide-sm { display: none; }
}

@media (min-width: 48rem) {
	.icons-hide-sm { display: revert; }
	.icons-hide-md { display: none; }
}

@media (min-width: 64rem) {
	.icons-hide-md { display: revert; }
	.icons-hide-lg { display: none; }
}

/* ---------------------------------------------------------------- Header */

.icons-header--sticky {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	transition: background-color var(--icons-transition-base), box-shadow var(--icons-transition-base);
}

.icons-header--sticky.is-pinned {
	background-color: var(--icons-color-base);
	box-shadow: var(--icons-shadow-sm);
}

/* Transparent headers overlay the first section until the page scrolls. */
.icons-header--transparent {
	background-color: transparent;
}

.icons-header--transparent:not(.is-pinned) {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
}

.icons-back-to-top {
	position: fixed;
	inset-block-end: var(--icons-space-sm);
	inset-inline-end: var(--icons-space-sm);
	z-index: 90;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--icons-color-border);
	border-radius: var(--icons-radius-pill);
	background: var(--icons-color-base);
	color: var(--icons-color-contrast);
	box-shadow: var(--icons-shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--icons-transition-base), visibility var(--icons-transition-base);
}

.icons-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}