/**
 * The handful of rules more than one block needs.
 *
 * Buttons and the yes/no marks appear in the hero, the pricing table, the CTA
 * band and the showcase. Copying them into four stylesheets would mean four
 * places to change the button radius, and three of them would eventually be
 * missed. So: one file, registered by the theme, declared as a dependency of
 * every block stylesheet that needs it — see owldraftdotcom_block_style_deps().
 *
 * It is never loaded on its own. A page with none of those blocks on it does
 * not download this.
 *
 * Every colour is one of Stoat's own tokens, so these follow the Customizer
 * instead of arguing with it: change the accent and they change with the rest
 * of the site.
 *
 * @package owldraftdotcom
 */

.owldraft-btn {
	display: inline-block;
	padding: 0.7em 1.5em;
	border: 1px solid var(--accent);
	border-radius: var(--button-radius);
	background: var(--accent);
	color: #fff;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.owldraft-btn:hover,
.owldraft-btn:focus {
	opacity: 0.85;
	color: #fff;
	text-decoration: none;
}

.owldraft-btn.is-outline {
	background: transparent;
	color: var(--accent);
}

.owldraft-btn.is-outline:hover,
.owldraft-btn.is-outline:focus {
	color: var(--accent);
}

/* The tick and the cross. Same shapes and same colours as the comparison
   table's, because they mean the same thing. */
.owldraft-mark {
	flex: 0 0 auto;
	font-size: 1.05em;
	line-height: 1.35;
}

.owldraft-mark.is-yes { color: var(--accent); }
.owldraft-mark.is-no  { color: var(--meta); }

/* A section heading + intro, above a grid. Three blocks open this way. */
.owldraft-section__heading {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.15;
	text-wrap: balance;
}

.owldraft-section__intro {
	max-width: 38em;
	margin: 0.6em 0 0;
	color: var(--dark-gray);
	text-wrap: pretty;
}

.owldraft-section__head {
	margin-bottom: 2em;
}

.owldraft-section__head.is-center {
	text-align: center;
}

.owldraft-section__head.is-center .owldraft-section__intro {
	margin-inline: auto;
}