/*
 * 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);
}

/* -------------------------------------------------------- Page container
 *
 * Two different widths get confused with each other constantly. content-size
 * is a measure for prose — how long a line of text may get before it becomes
 * hard to read. The page container is how wide the site itself is, and a
 * header, a footer or a section's inner has no measure: it should span the
 * page. Everything that spans the page resolves its width from this one token.
 *
 * layout.container is emitted as a body class, so a per-page override is
 * simply a different class on the same element and needs no extra plumbing.
 */

:where(body) {
	--icons-container: var(--wp--style--global--wide-size, 1216px);
}

body.icons-is-container-narrow { --icons-container: var(--wp--style--global--content-size, 704px); }
body.icons-is-container-normal { --icons-container: var(--wp--style--global--wide-size, 1216px); }
body.icons-is-container-wide   { --icons-container: 1440px; }
body.icons-is-container-full   { --icons-container: none; }

/* Wide alignment is how a block says "I am not prose" — a card grid, a loop, a
 * media band. Pointing it at the same token is what makes the page width
 * setting mean one thing across the whole page rather than only in the chrome.
 * The element qualifier keeps this above core's `> .alignwide` rule. */
body .wp-site-blocks .alignwide {
	max-inline-size: var(--icons-container);
}

/* ------------------------------------------------------ Typographic rhythm
 *
 * Block gap puts the same space between every pair of siblings, which is why
 * an unstyled block theme reads as one undifferentiated column: a heading sits
 * as far from the paragraph it introduces as from the one it follows. These
 * two rules restore the asymmetry that makes a page scannable — a heading is
 * pushed away from what precedes it and pulled towards what follows.
 *
 * Scoped to post content rather than to the page, because a heading inside a
 * card or a list row belongs to a component that already spaces itself: a
 * blanket rule puts a 3rem margin above every card title, on top of the gap
 * the card sets. Rhythm is a property of prose, so it is applied to prose.
 *
 * Specificity stays above the (0,1,0) of the layout rules these override, so
 * the result does not depend on the order stylesheets happen to be printed in.
 */

.wp-block-post-content :is(h2, h3, h4):not(:first-child) {
	margin-block-start: var(--icons-space-lg);
}

.wp-block-post-content :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--icons-space-2xs);
}

/* A title that happens to link to its own post is still a title: it should not
 * arrive in link blue with an underline. The underline appears on hover, where
 * it is doing the work of telling you the thing is clickable. */
.wp-site-blocks :is(h1, h2, h3, h4, h5, h6) a:not(.wp-element-button) {
	color: inherit;
	text-decoration: none;
	transition: color var(--icons-transition-fast);
}

.wp-site-blocks :is(h1, h2, h3, h4, h5, h6) a:not(.wp-element-button):hover {
	color: var(--icons-color-primary);
}

/* Underlines sit too close to the baseline at body sizes by default, and clip
 * descenders. */
:where(.wp-site-blocks) a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.16em;
	text-decoration-thickness: from-font;
}

/* Separators are a rule between things, not a design element in their own
 * right. Core draws a 2px bottom border in the text colour, which reads as a
 * heavy black bar; a hairline in the border colour is enough.
 *
 * Not `:where()`: that would zero the specificity and lose to the core rule
 * this exists to override. The dots style draws with generated content rather
 * than a border, so it is left alone. */
.wp-block-separator:not(.is-style-dots) {
	border: 0;
	border-block-start: 1px solid var(--icons-color-border);
	opacity: 1;
}

/* -------------------------------------------------------------- Section
 *
 * The row model: a full-bleed outer that carries background, padding and
 * borders, and a constrained inner that carries the content. Bakery gets its
 * speed from this being one thing you select, rather than two nested groups
 * where you can never tell which one is active.
 *
 * Padding resolves through the same cascading fallback the grid uses, so a
 * tier left unset in the editor inherits the next smallest.
 */

.icons-section {
	--icons-section-pad: var(--icons-section-pad-mobile, var(--icons-section-padding, var(--icons-space-xl)));

	padding-block: var(--icons-section-pad);
	padding-inline: var(--icons-space-sm);
	display: flow-root;
}

@media (min-width: 48rem) {
	.icons-section {
		--icons-section-pad: var(--icons-section-pad-tablet, var(--icons-section-pad-mobile, var(--icons-section-padding, var(--icons-space-xl))));
	}
}

@media (min-width: 64rem) {
	.icons-section {
		--icons-section-pad: var(--icons-section-pad-desktop, var(--icons-section-pad-tablet, var(--icons-section-pad-mobile, var(--icons-section-padding, var(--icons-space-xl)))));
	}
}

.icons-section__inner {
	margin-inline: auto;
	inline-size: 100%;
	max-inline-size: var(--icons-section-width, var(--icons-container));
}

.icons-section.is-width-narrow  { --icons-section-width: var(--wp--style--global--content-size, 704px); }
.icons-section.is-width-normal  { --icons-section-width: var(--icons-container); }
.icons-section.is-width-wide    { --icons-section-width: 1472px; }
.icons-section.is-width-full    { --icons-section-width: none; }

.icons-section.is-width-full {
	padding-inline: 0;
}

/* A section with a minimum height centres its content vertically, which is
 * what a hero almost always wants. */
.icons-section[style*="min-height"] {
	display: flex;
	align-items: center;
}

.icons-section[style*="min-height"] > .icons-section__inner {
	inline-size: 100%;
}

/* ---------------------------------------------- Section, editor only ---
 *
 * A labelled frame, so a long page reads as a stack of named sections instead
 * of an undifferentiated column of blocks. This is the single biggest thing
 * the block editor is missing next to a row-based builder.
 */

.editor-styles-wrapper .icons-section {
	position: relative;
	outline: 1px dashed rgba(56, 88, 233, 0.35);
	outline-offset: -1px;
	transition: outline-color 120ms ease;
	min-block-size: 4rem;
}

.editor-styles-wrapper .icons-section::before {
	content: attr(data-label);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	transform: translateY(-100%);
	background: #3858e9;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 4px 4px 0 0;
	opacity: 0;
	transition: opacity 120ms ease;
	pointer-events: none;
	z-index: 2;
}

.editor-styles-wrapper .icons-section:hover,
.editor-styles-wrapper .icons-section:focus-within {
	outline-color: rgba(56, 88, 233, 0.9);
}

.editor-styles-wrapper .icons-section:hover::before,
.editor-styles-wrapper .icons-section:focus-within::before {
	opacity: 1;
}

/* ------------------------------------------------------------------ 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);
}

/* A header needs an edge, or the page opens with content floating in space.
 * Excluded on the transparent variant, whose entire purpose is not to have
 * one until it pins. */
header.wp-block-template-part:not(.icons-header--transparent) {
	background-color: var(--icons-header-background, var(--icons-color-base));
	border-block-end: 1px solid var(--icons-color-border);
}

/* Once pinned the shadow does the separating, so the border would read as a
 * second, doubled edge. */
.icons-header--sticky.is-pinned {
	background-color: var(--icons-header-background, var(--icons-color-base));
	box-shadow: var(--icons-shadow-sm);
	border-block-end-color: transparent;
}

/* 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;
}

/*
 * Out from under the admin bar.
 *
 * For a signed-in user the admin bar is fixed to the top of the viewport, and
 * a sticky or transparent header pins to the top of the viewport too — so the
 * header spent its first 32px behind it and the logo came out cropped. Only
 * ever visible to whoever is signed in, which is exactly why it survived a
 * public page that measured correct.
 *
 * `--wp-admin--admin-bar--height` is core's, and it already changes with the
 * bar's own breakpoint. The sticky case is held to wide screens because below
 * 783px core stops fixing the bar and lets it scroll away, so an offset there
 * would leave a permanent gap.
 */
.admin-bar .icons-header--transparent:not(.is-pinned) {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (min-width: 783px) {
	.admin-bar .icons-header--sticky.is-pinned,
	.admin-bar .icons-header--sticky:not(.icons-header--transparent) {
		inset-block-start: var(--wp-admin--admin-bar--height, 32px);
	}
}

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

/* Panel-driven header padding, with the theme.json value as the fallback.
 * Template parts render with the tagName the template gives them, so the
 * header and footer are addressable without extra classes. */
header.wp-block-template-part > .wp-block-group {
	padding-block: var(--icons-header-padding, var(--icons-space-sm));
}

/* Every header and footer variant is an outer constrained group, and a
 * constrained layout caps its children at content-size. That is correct for
 * prose and wrong for site chrome: it squeezed the header into the text
 * measure and left the rest of the viewport empty. Both parts sit on the page
 * container instead.
 *
 * Three classes outweigh the single class Global Styles emits for the
 * constrained layout, so this does not depend on stylesheet load order.
 * .alignfull is excluded because a full-bleed child opts out by definition. */
header.wp-block-template-part > .wp-block-group > :not(.alignfull),
footer.wp-block-template-part > .wp-block-group > :not(.alignfull) {
	max-inline-size: var(--icons-container);
}

/* Full-width sections take the panel's section rhythm. Set per breakpoint,
 * so a tier left unset in the panel simply inherits the next smallest. */
.wp-block-group.alignfull:not(.icons-topbar) {
	padding-block: var(--icons-section-padding, var(--icons-space-xl));
}

/* ----------------------------------------------------------------- Blog
 *
 * Column counts come from the panel as --icons-blog-columns. The value only
 * applies from the tablet breakpoint up: below that a multi-column card grid
 * is unreadable regardless of what the setting says.
 */

.icons-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--icons-space-lg);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 36rem) {
	.icons-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.icons-blog-grid {
		grid-template-columns: repeat(var(--icons-blog-columns, 3), minmax(0, 1fr));
	}
}

/* A card is a surface, not just a stack. The image bleeds to the card edge —
 * padding around a photograph inside a bordered box is the detail that makes a
 * layout look unfinished — and the whole card lifts on hover, so the target
 * reads as one object rather than a title that happens to be a link. */
.icons-card {
	display: flex;
	flex-direction: column;
	gap: var(--icons-space-2xs);
	padding: var(--icons-space-sm);
	background: var(--icons-color-base);
	border: 1px solid var(--icons-color-border);
	border-radius: var(--icons-radius-lg);
	transition:
		border-color var(--icons-transition-base),
		box-shadow var(--icons-transition-base),
		transform var(--icons-transition-base);
}

.icons-card:hover,
.icons-card:focus-within {
	border-color: transparent;
	box-shadow: var(--icons-shadow-lg);
	transform: translateY(-2px);
}

/* Pull the media out to the card's edges, cancelling the padding on three
 * sides and matching the outer radius on the two corners it now occupies. */
.icons-card__media {
	margin:
		calc(var(--icons-space-sm) * -1)
		calc(var(--icons-space-sm) * -1)
		var(--icons-space-2xs);
	overflow: hidden;
	border-start-start-radius: calc(var(--icons-radius-lg) - 1px);
	border-start-end-radius: calc(var(--icons-radius-lg) - 1px);
}

.icons-card__media img {
	border-radius: 0;
	inline-size: 100%;
	object-fit: cover;
	transition: transform var(--icons-transition-base);
}

.icons-card:hover .icons-card__media img {
	transform: scale(1.03);
}

.icons-feature__media img,
.icons-row__media img {
	border-radius: var(--icons-radius-md);
}

.icons-card :where(h2, h3) {
	margin: 0;
}

.icons-card :where(.wp-block-post-excerpt) {
	color: var(--icons-color-muted);
}

/* List layout: media beside the copy, stacking on narrow screens. */
.icons-blog-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--icons-space-lg);
}

/* The list layout gets a rule between entries rather than card chrome: two
 * competing containment cues in one list reads as clutter. The last entry has
 * nothing after it to separate from. */
.icons-blog-list > :not(:last-child) .icons-row {
	padding-block-end: var(--icons-space-lg);
	border-block-end: 1px solid var(--icons-color-border);
}

.icons-row {
	gap: var(--icons-space-md);
	align-items: flex-start;
}

.icons-row__media {
	overflow: hidden;
	border-radius: var(--icons-radius-md);
}

.icons-row__media img {
	transition: transform var(--icons-transition-base);
}

.icons-row:hover .icons-row__media img {
	transform: scale(1.03);
}

.icons-row :where(.wp-block-post-excerpt) {
	color: var(--icons-color-muted);
}

.icons-row__body {
	flex: 1 1 16rem;
	min-inline-size: 0;
}

.icons-row__body :where(h2) {
	margin-block-start: 0;
}

.icons-blog-feature {
	list-style: none;
	padding: 0;
	margin: 0;
}

.icons-feature {
	display: flex;
	flex-direction: column;
	gap: var(--icons-space-2xs);
}

/* ----------------------------------------------------------- Pagination */

/* Specificity throughout this block is kept above the (0,1,0) of the link
 * element style, which would otherwise underline every control here. */
.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--icons-space-3xs);
	align-items: center;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.25rem;
	block-size: 2.25rem;
	padding-inline: 0.5rem;
	border-radius: var(--icons-radius-sm);
	color: var(--icons-color-contrast);
	font-size: var(--icons-text-sm);
	text-decoration: none;
	transition:
		background-color var(--icons-transition-fast),
		color var(--icons-transition-fast);
}

.wp-block-query-pagination-numbers .page-numbers:hover {
	background: var(--icons-color-surface);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--icons-color-contrast);
	color: var(--icons-color-base);
}

/* Previous and next are the two targets people actually aim at, so they get
 * the size of a control rather than the size of a word. */
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 1.1em;
	border: 1px solid var(--icons-color-border);
	border-radius: var(--icons-radius-md);
	font-size: var(--icons-text-sm);
	color: var(--icons-color-contrast);
	transition:
		border-color var(--icons-transition-fast),
		color var(--icons-transition-fast);
}

.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	border-color: var(--icons-color-contrast);
	color: var(--icons-color-contrast);
}

/* ------------------------------------------------------------ Post meta */

.icons-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	color: var(--icons-color-muted);
}

.icons-post-meta__sep {
	opacity: 0.55;
}

/* --------------------------------------------------------------- Logo */

.wp-block-site-logo img {
	width: var(--icons-logo-width, 160px);
	height: auto;
}

@media (max-width: 47.999rem) {
	.wp-block-site-logo img {
		width: var(--icons-logo-width-mobile, 120px);
	}
}

/* The header carries both a logo and a title so either can be used. When a
 * logo is set the title becomes the accessible name only. */
.icons-has-logo .icons-header__title {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.icons-header__end {
	gap: var(--icons-space-sm);
}

/* Navigation is not prose. The underline that helps a link inside a paragraph
 * only adds noise in a menu, where everything is a link and position already
 * says so; colour carries the hover and the current page instead. */
header.wp-block-template-part :where(.wp-block-navigation) a:not(.wp-element-button) {
	font-size: var(--icons-text-sm);
	font-weight: 500;
	color: var(--icons-color-contrast);
	text-decoration: none;
	transition: color var(--icons-transition-fast);
}

header.wp-block-template-part :where(.wp-block-navigation) a:not(.wp-element-button):hover,
header.wp-block-template-part :where(.wp-block-navigation) .current-menu-item > a,
header.wp-block-template-part :where(.wp-block-navigation) .current_page_item > a {
	color: var(--icons-color-primary);
}

/* Navigation and the CTA share a row; the CTA must never wrap onto its own. */
.icons-header__end .icons-header-cta {
	flex: none;
}

/* --------------------------------------------------------------- Topbar */

.icons-topbar {
	background: var(--icons-topbar-background, var(--icons-color-secondary));
	color: var(--icons-color-base);
	font-size: var(--icons-text-sm);
}

.icons-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--icons-space-2xs) var(--icons-space-sm);
	align-items: center;
	justify-content: space-between;
	max-inline-size: var(--icons-container);
	margin-inline: auto;
	padding: var(--icons-space-2xs) var(--icons-space-sm);
}

.icons-topbar p {
	margin: 0;
}

.icons-topbar__contact {
	display: flex;
	gap: var(--icons-space-sm);
}

.icons-topbar a {
	color: inherit;
	text-decoration: none;
}

.icons-topbar a:hover {
	text-decoration: underline;
}

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

.icons-header-cta {
	display: inline-flex;
	align-items: center;
	background: var(--icons-color-primary);
	color: var(--icons-color-base);
	padding: 0.55em 1.2em;
	border-radius: var(--icons-radius-md);
	text-decoration: none;
	font-size: var(--icons-text-sm);
	white-space: nowrap;
	transition: filter var(--icons-transition-base);
}

.icons-header-cta:hover {
	filter: brightness(1.1);
	text-decoration: none;
}

/* --------------------------------------------------------------- Footer */

/* Column headings are labels for a directory, not headings in a document, so
 * they take the small-and-tracked treatment rather than the heading scale.
 *
 * The colour is inherited, not set. It used to be pinned to `contrast`, which
 * is near-black — and the footer ships dark, so every column heading on a
 * default install was near-black on near-black. What a heading in a footer
 * wants is the colour the footer is already using for its text. */
footer.wp-block-template-part :where(h2, h3, h4, h5, h6) {
	font-size: var(--icons-text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
	margin-block-end: var(--icons-space-2xs);
}

/* Footer links are a directory too: quiet until aimed at. */
/* Derived from the footer's own text colour, not pinned to a palette slot.
 * `muted` and `contrast` are both light-theme values, and the footer ships
 * dark — so a link was grey-brown on near-black and its hover state was
 * near-black on near-black, invisible on every default install. Opacity works
 * whichever way round the footer is. */
footer.wp-block-template-part a:not(.wp-element-button):not(.icons-social__link) {
	color: inherit;
	opacity: 0.72;
	text-decoration: none;
	transition: opacity var(--icons-transition-fast), color var(--icons-transition-fast);
}

footer.wp-block-template-part a:not(.wp-element-button):not(.icons-social__link):hover {
	opacity: 1;
}

.icons-footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--icons-space-sm);
	align-items: center;
	justify-content: space-between;
	margin-block-start: var(--icons-space-md);
}

.icons-footer-meta__copyright {
	margin: 0;
	font-size: var(--icons-text-sm);
	color: var(--icons-color-muted);
}

.icons-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--icons-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.icons-social__link {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 1px solid var(--icons-color-border);
	border-radius: var(--icons-radius-pill);
	color: var(--icons-color-contrast);
	text-decoration: none;
	font-size: var(--icons-text-sm);
	font-weight: 600;
	transition: background-color var(--icons-transition-base), color var(--icons-transition-base);
}

.icons-social__link:hover {
	background: var(--icons-color-primary);
	border-color: var(--icons-color-primary);
	color: var(--icons-color-base);
	text-decoration: none;
}

/* Footer background is panel-driven; the footer part carries no colour. */
footer.wp-block-template-part {
	background: var(--icons-footer-background, transparent);
}