/*
 * Blocks an editor writes, wearing the published site's own clothes.
 *
 * The site owner asked to be able to make a button — the "Google" link in a publication's body
 * was the example — with a colour of their choosing, rather than only the two the design ships.
 *
 * WordPress already has a Button block with a colour picker, so nothing here invents a block.
 * What it does is give that block the shape the design uses, measured on iacepa-katalis.org
 * rather than chosen:
 *
 *   padding      12px 24px
 *   radius       8px
 *   height       44px, which is 12 + 19.6 + 12
 *   label        Inter 14px / 500, line-height 19.6px, white
 *   primary      #cc0100 — the red of "Submit your idea"
 *   secondary    #086ad5 — the blue of "Learn more"
 *
 * Loaded on the export shell's pages and by the theme, from this one file, because a button in an
 * article body has to look the same whichever layer served the page.
 */

/* The row of buttons, and the gap the design puts between two of them. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.wp-block-button {
	margin: 0;
}

/*
 * The button itself.
 *
 * `!important` on nothing: the block's own `has-*-background-color` classes have to win, because
 * the colour is the editor's choice and this rule only supplies the shape and the default.
 */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background-color: #cc0100;
	color: #fff;
	font-family: Inter, "Inter Placeholder", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 19.6px;
	text-decoration: none;
	cursor: pointer;
}

/* Framer's own link preset would otherwise underline it and paint it blue. */
.wp-block-button__link.framer-text,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	text-decoration: none;
}

.wp-block-button__link:focus-visible {
	outline: 2px solid #086ad5;
	outline-offset: 2px;
}

/*
 * The outline style, which the block offers next to the filled one. The design has no outline
 * button, so this is the filled one's shape with its own colour as the border — the least
 * invention that still answers what the block offers.
 */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border: 2px solid currentColor;
	color: #cc0100;
	padding: 10px 22px;
}