/* Shared frontend/editor primitives. Use rem so text respects browser settings. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ft-canvas);
	color: var(--ft-ink);
	font-family: var(--ft-font);
	font-size: var(--ft-text-base);
	line-height: var(--ft-leading-body);
	overflow-wrap: break-word;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 3px solid var(--ft-focus);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--ft-space-4);
	font-weight: 700;
	line-height: var(--ft-leading-heading);
	overflow-wrap: anywhere;
}

h1 { font-size: var(--ft-text-xx-large); }
h2 { font-size: var(--ft-text-x-large); }
h3 { font-size: var(--ft-text-large); }
h4 { font-size: var(--ft-text-medium); }
h5,
h6 { font-size: var(--ft-text-base); }

p,
ul,
ol,
blockquote,
figure {
	margin-block: 0 var(--ft-space-6);
}

figure { margin-inline: 0; }

a {
	color: var(--ft-primary);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	overflow-wrap: anywhere;
}

a:hover { color: var(--ft-primary-hover); }

img,
video {
	max-inline-size: 100%;
	block-size: auto;
}

iframe { max-inline-size: 100%; }

button,
input,
select,
textarea {
	font: inherit;
}

button,
input,
select,
textarea,
a {
	-webkit-tap-highlight-color: transparent;
}

blockquote {
	margin-inline: 0;
	padding: var(--ft-space-4) var(--ft-space-6);
	border-inline-start: 3px solid var(--ft-primary);
	background: var(--ft-pink);
}

blockquote > :last-child { margin-block-end: 0; }

pre {
	max-inline-size: 100%;
	overflow-x: auto;
	padding: var(--ft-space-4);
	border-radius: var(--ft-radius-small);
	background: var(--ft-lilac);
}

table {
	border-collapse: collapse;
	inline-size: 100%;
}

th,
td {
	padding: var(--ft-space-3);
	border: 1px solid var(--ft-border);
	text-align: start;
}

figcaption {
	color: var(--ft-muted);
	font-size: var(--ft-text-small);
}

hr {
	margin-block: var(--ft-space-8);
	border: 0;
	border-block-start: 1px solid var(--ft-border);
}

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: var(--ft-space-4);
	inset-inline-start: var(--ft-space-4);
	z-index: 100000;
	padding: var(--ft-space-3) var(--ft-space-4);
	background: var(--ft-surface);
	border-radius: var(--ft-radius-small);
}

/* No animations are required by FOUNDATION. Respect the user's motion setting
 * when native controls or editorial blocks apply smooth scrolling/transitions. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ft-button,
	.wp-element-button {
		transition: none;
	}
}