/*
 * Blocks: styles for the core blocks allowed in content (see inc/editor.php).
 */

/* Content width: children of post/page content are constrained to contentSize,
 * .alignwide to wideSize, .alignfull spans the viewport. */
.entry-content > * {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.entry-content > .alignfull {
	max-width: none;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* core/heading */
.entry-content :where(h2, h3, h4, h5, h6) {
	margin-block-start: 1.5em;
}

/* core/image, core/gallery */
.wp-block-image,
.wp-block-gallery {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.wp-element-caption,
.wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-block-start: 0.5em;
}

/* core/quote */
.wp-block-quote {
	border-inline-start: 4px solid var(--wp--preset--color--primary);
	padding-inline-start: var(--wp--preset--spacing--30);
	margin-inline: 0;

	cite {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--muted);
		font-style: normal;
	}
}

/* core/table */
.wp-block-table {
	overflow-x: auto;

	table {
		border-collapse: collapse;
		width: 100%;
	}

	:where(th, td) {
		border: 1px solid var(--wp--preset--color--line);
		padding: 0.5em 0.75em;
		text-align: start;
	}

	thead {
		border-block-end: 2px solid var(--wp--preset--color--ink);
	}
}

/* core/buttons, core/button. Every state sets its own text colour, so link colours
 * (theme.json elements.link, base.css a:hover) never apply to buttons. Keep each state at
 * 4.5:1 contrast or more; no filter-based hovers (their contrast is not controlled). */
.wp-block-button__link.wp-block-button__link {
	display: inline-block;
	padding: 0.75em 1.5em;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		border-color: var(--wp--preset--color--primary-dark);
		background: var(--wp--preset--color--primary-dark);
		color: var(--wp--preset--color--white);
	}
}

.is-style-outline > .wp-block-button__link.wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);

	&:hover,
	&:focus-visible {
		border-color: var(--wp--preset--color--primary);
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
	}
}

/* core/separator */
.wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	margin-block: var(--wp--preset--spacing--50);
}

/* core/file */
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);

	.wp-block-file__button {
		padding: 0.5em 1em;
		background: var(--wp--preset--color--primary-dark);
		color: var(--wp--preset--color--white);
		border-radius: 4px;
		text-decoration: none;
	}
}

/* core/embed */
.wp-block-embed {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* core/group */
.wp-block-group.has-background {
	padding: var(--wp--preset--spacing--40);
}