/*
 * Base: typography rhythm, links, focus, shared utilities.
 * Colours, fonts and sizes come from theme.json (--wp--preset--*).
 * Breakpoints: phone < 640px, tablet 640–1023px, desktop ≥ 1024px.
 */

:root {
	--primus-radius-s: var(--wp--custom--radius--s);
	--primus-radius: var(--wp--custom--radius--m);
	--primus-radius-l: var(--wp--custom--radius--l);
	--primus-line: var(--wp--preset--color--line);
	--primus-muted: var(--wp--preset--color--muted);
	--primus-brand: var(--wp--preset--color--brand);
	--primus-plinth: var(--wp--preset--color--plinth);
	--primus-cover-shadow: var(--wp--preset--shadow--cover);
	--primus-mono: var(--wp--preset--font-family--mono);
	--primus-display: var(--wp--preset--font-family--display);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern";
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--primus-brand);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--wp--preset--color--brand-tint);
}

img {
	height: auto;
}

/* Outline button variation shared by core and WooCommerce buttons. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-element-button {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--primus-line);
	color: var(--wp--preset--color--ink);
	padding: 0.8rem 1.25rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* Small uppercase label above headings. */
.primus-eyebrow {
	font-family: var(--primus-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primus-brand);
	margin-block: 0 0.5rem;
}

.primus-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.primus-eyebrow.is-on-dark {
	color: #E9C98D;
}

.primus-icon {
	flex: none;
	vertical-align: -0.2em;
}

/* Plain list (footer, facts). */
.is-style-plain {
	list-style: none;
	padding-left: 0;
}

/* Section heading with a "more" link on the right. */
.primus-section-head {
	margin-bottom: var(--wp--preset--spacing--30);
	align-items: flex-end;
}

.primus-section-head h2 {
	margin: 0;
}

.primus-more-link {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

.primus-more-link a {
	text-decoration: none;
	white-space: nowrap;
}

/* Page titles for regular pages, cart, account. */
.primus-page-title {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Empty states (404, no results). */
.primus-empty {
	text-align: center;
	padding-block: var(--wp--preset--spacing--50);
	gap: 0.75rem;
	max-width: 36rem;
	margin-inline: auto;
}

.primus-empty > * {
	margin: 0;
}

.primus-editor-placeholder {
	padding: 1rem;
	border: 1px dashed var(--primus-line);
	color: var(--primus-muted);
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important; /* stylelint-disable-line declaration-no-important -- user preference must win */
		animation-duration: 0.01ms !important; /* stylelint-disable-line declaration-no-important */
		scroll-behavior: auto !important; /* stylelint-disable-line declaration-no-important */
	}
}