/* Shared by the hk section blocks. Tokens only: every colour, size and space comes from theme.json. */

.hk-section {
	padding-top: var(--wp--preset--spacing--xl);
	padding-right: var(--wp--style--root--padding-right, 16px);
	padding-bottom: var(--wp--preset--spacing--xl);
	padding-left: var(--wp--style--root--padding-left, 16px);
}

.hk-section.is-bg-surface-alt {
	background: var(--wp--preset--color--surface-alt);
}

/* More room between sections on wider screens. */
@media (min-width: 1025px) {
	.hk-section {
		padding-top: var(--wp--preset--spacing--xxl);
		padding-bottom: var(--wp--preset--spacing--xxl);
	}
}

.hk-section.is-bg-brand {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
}

.hk-section.is-bg-brand :where(h1, h2, h3, p, a:not(.wp-element-button)) {
	color: inherit;
}

/* Sections run full width; their content sits in the wide column. */
.hk-wrap {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

.hk-section-head {
	max-width: 720px;
	margin-bottom: var(--wp--preset--spacing--l);
}

.hk-section-head__title {
	margin: 0 0 var(--wp--preset--spacing--s);
	text-wrap: balance;
}

.hk-section-head__intro {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--lead);
}

.is-bg-brand .hk-section-head__intro {
	color: inherit;
}

.hk-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
	margin-top: var(--wp--preset--spacing--m);
}

.wp-element-button.hk-btn--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--brand-contrast);
}

/* Button variants carry the element class too: WordPress prints its own button style later at the same weight. */
.wp-element-button.hk-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--brand);
	box-shadow: inset 0 0 0 2px currentColor;
}

.wp-element-button.hk-btn--ghost:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
}

.is-bg-brand .wp-element-button.hk-btn--primary {
	background: var(--wp--preset--color--brand-contrast);
	color: var(--wp--preset--color--brand);
}

.is-bg-brand .wp-element-button.hk-btn--ghost {
	color: var(--wp--preset--color--brand-contrast);
}

.is-bg-brand .wp-element-button.hk-btn--ghost:hover {
	background: var(--wp--preset--color--brand-contrast);
	color: var(--wp--preset--color--brand);
}

/* A soft tint of the brand colour for backgrounds behind icons, badges and page tops. */
:root {
	--hk-tint: color-mix(in srgb, var(--wp--preset--color--brand) 9%, var(--wp--preset--color--surface));
	--hk-tint-strong: color-mix(in srgb, var(--wp--preset--color--brand) 16%, var(--wp--preset--color--surface));
}

.hk-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

.hk-editor-note {
	padding: 16px;
	border: 2px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.hk-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius, 6px);
}