/* =========================================================================
   6. Components
   ========================================================================= */

/* --- Buttons ------------------------------------------------------------ */

.button,
.tg-button {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--ink);
	border: 1px solid var(--ink);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.button:hover,
.tg-button:hover {
	color: var(--ink);
	background: var(--paper);
	text-decoration: none;
}

.tg-button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Soft variant: accent colour, for a secondary action next to a main button */
.button--soft {
	color: var(--paper);
	background: var(--accent);
	border-color: var(--accent);
}

.button--soft:hover {
	color: var(--paper);
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

/* Klein variant: International Klein Blue, for the main call to action
   (inquiry); darkens on hover */
.button--klein {
	color: var(--paper);
	background: var(--klein);
	border-color: var(--klein);
}

.button--klein:hover {
	color: var(--paper);
	background: var(--klein-dark);
	border-color: var(--klein-dark);
}

/* Ghost variant: outlined, fills on hover */
.button--ghost {
	color: var(--ink);
	background: transparent;
}

.button--ghost:hover {
	color: var(--paper);
	background: var(--ink);
}

/* --- Text link (small, always underlined) ------------------------------- */

.text-link {
	font-size: var(--size-s);
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- Prose (content written in the editor) ------------------------------ */

.prose > * + * {
	margin-top: var(--space-2);
}

.prose h2,
.prose h3 {
	margin-top: var(--space-4);
}

.prose img {
	margin: var(--space-3) 0;
}

.prose .wp-block-image figcaption {
	font-size: var(--size-s);
	color: var(--mute);
	text-align: center;
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* "Lead" paragraph style, offered in the editor sidebar */
.is-style-lead {
	font-family: var(--font-serif);
	font-size: var(--size-l);
	line-height: 1.3;
}