/* Content rules are shared by the frontend and the native block editor. */
:where(h1, h2, h3, h4, h5, h6) {
	color: var(--rd-color-text);
	font-family: var(--rd-font-sans);
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.18; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.22; letter-spacing: -0.02em; }
h3 { font-size: 1.375rem; line-height: 1.35; }
h4 { font-size: 1.125rem; }
h5, h6 { font-size: 1rem; }

:where(p, li, a) { overflow-wrap: anywhere; }
a { color: var(--rd-color-primary); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--rd-color-primary-hover); text-decoration-thickness: 2px; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--rd-color-primary);
	outline-offset: 3px;
}

:where(p, ul, ol, blockquote, figure, pre, table) { margin-block: 0 1.5rem; }
:where(h1, h2, h3, h4, h5, h6) { margin-block: 0 1rem; }
img { max-width: 100%; height: auto; }
figure { max-width: 100%; }
figcaption { color: var(--rd-color-muted); font-size: 0.875rem; margin-block-start: 0.75rem; }
blockquote { margin-inline: 0; border-inline-start: 3px solid var(--rd-color-accent); padding-inline-start: 1.5rem; }
blockquote cite { color: var(--rd-color-muted); font-style: normal; font-size: 0.875rem; }
pre { max-width: 100%; overflow-x: auto; padding: 1rem; border: 1px solid var(--rd-color-divider); background: var(--rd-color-surface); }
code, pre { font-family: var(--rd-font-mono); font-size: 0.9em; }
.wp-block-table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; border-block-end: 1px solid var(--rd-color-divider); padding: 0.75rem; vertical-align: top; }
hr { border: 0; border-block-start: 1px solid var(--rd-color-divider); margin-block: 2rem; }

.rd-eyebrow,
.is-style-rd-eyebrow {
	font-family: var(--rd-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--rd-color-accent);
	letter-spacing: 0.06em;
	margin-block-end: 1rem;
}

.rd-lead { font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem); line-height: 1.65; max-width: 60ch; color: var(--rd-color-muted); }
.rd-meta { font-size: 0.875rem; color: var(--rd-color-muted); }
.rd-section { padding-block: clamp(3rem, 1.5rem + 4vw, 6rem); }
.rd-section + .rd-section { border-block-start: 1px solid var(--rd-color-divider); }
.rd-section-heading { max-width: var(--rd-reading); margin-block-end: var(--rd-space-8); }
.rd-grid { display: grid; gap: var(--rd-space-6); }
.rd-grid > * { min-width: 0; }
.rd-card { border-block-start: 1px solid var(--rd-color-divider); padding-block: var(--rd-space-6); }
.rd-card h2, .rd-card h3 { font-size: 1.375rem; }
.rd-card p { color: var(--rd-color-muted); }
.rd-card > :last-child { margin-block-end: 0; }
.is-style-rd-panel, .is-style-rd-accent { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--rd-radius-lg); }
.is-style-rd-panel { background: var(--rd-color-surface); border: 1px solid var(--rd-color-divider); }
.is-style-rd-accent { background: var(--rd-color-accent-surface); }

.rd-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 3rem;
	max-width: 100%;
	padding: 0.7rem 1.375rem;
	border: 1px solid transparent;
	border-radius: var(--rd-radius-md);
	background: var(--rd-color-primary);
	color: var(--rd-color-on-primary);
	font-family: var(--rd-font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rd-duration), color var(--rd-duration), border-color var(--rd-duration);
}

.rd-button:hover, .wp-block-button__link:hover { background: var(--rd-color-primary-hover); color: var(--rd-color-on-primary); }
.rd-button--secondary,
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--rd-color-border);
	background: transparent;
	color: var(--rd-color-text);
}
.rd-button--secondary:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--rd-color-surface); border-color: var(--rd-color-primary); color: var(--rd-color-primary); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--rd-space-3); }
.wp-block-button { max-width: 100%; }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.875rem;
	border: 1px solid var(--rd-color-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-color-surface);
	color: var(--rd-color-text);
	font: inherit;
	font-size: 1rem;
}
textarea { resize: vertical; }
label { display: block; font-weight: 600; margin-block-end: 0.5rem; }
[aria-invalid="true"] { border-color: var(--rd-color-error); }
.rd-field { margin-block-end: var(--rd-space-6); }
.rd-field-error { color: var(--rd-color-error); font-size: 0.875rem; margin-block-start: 0.5rem; }
.rd-field-help { color: var(--rd-color-muted); font-size: 0.875rem; margin-block-start: 0.5rem; }
summary { min-height: 3rem; padding-block: 0.75rem; cursor: pointer; font-weight: 600; }
details { border-block-end: 1px solid var(--rd-color-divider); }
details[open] { padding-block-end: 1rem; }
details > :not(summary) { margin-block-start: 0.75rem; }

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

@media (min-width: 64rem) {
	.rd-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
	.rd-button, .wp-block-button__link { border-color: ButtonText; }
}