/**
 * Brand tokens and the shell, shared by every Churchfront tool.
 *
 * A feature plugin's own stylesheet loads after this one and should use these
 * custom properties rather than colour literals. When the brand moves, it moves
 * here and everything follows.
 *
 * THE PALETTE IS CLOSED
 * Midnight, Grey, Refresh. The only permitted pairings are Refresh or Grey on
 * Midnight, and Midnight on Grey or Refresh. No other colour is introduced, which
 * is why there is no accent, no success green and no error red below: a warning
 * reads as Midnight on Refresh with weight doing the work.
 */

:root {
	--cf-midnight: #090E14;
	--cf-grey: #E6E7E8;
	--cf-refresh: #CAE7F9;

	--cf-font: "Figtree", "Inter", Arial, sans-serif;

	--cf-radius: 10px;
	--cf-gap: 1rem;
	--cf-measure: 68ch;
}

/* ---------------------------------------------------------------
 * The shell
 * ------------------------------------------------------------ */

.cf-app {
	font-family: var(--cf-font);
	color: var(--cf-midnight);
	line-height: 1.55;
}

.cf-app *,
.cf-app *::before,
.cf-app *::after {
	box-sizing: border-box;
}

/**
 * THE BUG THIS PREVENTS, WHICH HAS ALREADY HAPPENED ONCE
 * The community plugin set .cfc-btn { display: inline-flex }, which beat the
 * browser's own [hidden] { display: none }: both are specificity 0,1,0 and the
 * author sheet wins. A "Load more" button stayed visible with nothing more to
 * load. Any author rule that sets display does this, so it is settled once, here,
 * for every tool.
 */
.cf-app [hidden] {
	display: none !important;
}

.cf-app__boot,
.cf-app__noscript {
	padding: 2rem 0;
	color: var(--cf-midnight);
	opacity: .6;
}

/* ---------------------------------------------------------------
 * The three boot states
 * ------------------------------------------------------------ */

.cf-app__state {
	max-width: var(--cf-measure);
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	text-align: center;
	background: var(--cf-midnight);
	color: var(--cf-grey);
	border-radius: var(--cf-radius);
}

.cf-app__state h2 {
	margin: 0 0 .5rem;
	font-weight: 700;
	color: var(--cf-refresh);
}

.cf-app__state p {
	margin: 0 0 1.25rem;
	color: var(--cf-grey);
}

/* ---------------------------------------------------------------
 * Controls
 * ------------------------------------------------------------ */

.cf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .65rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--cf-radius);
	background: var(--cf-refresh);
	color: var(--cf-midnight);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.cf-btn:hover,
.cf-btn:focus-visible {
	background: var(--cf-grey);
	color: var(--cf-midnight);
}

.cf-btn--quiet {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.cf-app :focus-visible {
	outline: 2px solid var(--cf-refresh);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Fields
 * ------------------------------------------------------------ */

.cf-field {
	display: block;
	margin-bottom: var(--cf-gap);
}

.cf-field__label {
	display: block;
	margin-bottom: .3rem;
	font-weight: 600;
	font-size: .9rem;
}

.cf-input,
.cf-select,
.cf-textarea {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid rgba(9, 14, 20, .25);
	border-radius: var(--cf-radius);
	background: #fff;
	color: var(--cf-midnight);
	font-family: inherit;
	font-size: 1rem;
}

.cf-textarea {
	min-height: 7rem;
	resize: vertical;
}

/* ---------------------------------------------------------------
 * Motion
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.cf-app *,
	.cf-app *::before,
	.cf-app *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}