/**
 * Resources block, signup cards.
 *
 * The block's "Newsletter Signups" style is a row of cards that each offer a free
 * resource for an email address. The cards used to embed Kit's own hosted form, which
 * arrived with its own look; now they use the theme's form, so the type, fields and
 * button are brought in line with the Newsletter and Book CTAs.
 *
 * Loaded only where a card names a signup list. Styles live here rather than as Tailwind
 * utilities so the cards can be adjusted without rebuilding theme.css; the white card
 * background and horizontal padding still come from theme.css.
 */

.resources.newsletter .resources__column {
	padding: 2.25rem 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}

.resources.newsletter .resources__column h3 {
	margin-bottom: 1rem;
	color: #003049; /* dark_blue */
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.resources.newsletter .resources__description {
	margin-bottom: 1.5rem;
	color: #003049;
	opacity: 0.85;
}

.resources.newsletter .resources__description p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.resources.newsletter .resources__description p:last-child {
	margin-bottom: 0;
}

/*
 * Where the resource is a series, the description names its parts as a list. The global
 * reset strips list markers and indent, so both are restored here.
 */
.resources.newsletter .resources__description ol,
.resources.newsletter .resources__description ul {
	margin: 0.65rem 0 0;
	padding-left: 1.35rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.resources.newsletter .resources__description ol {
	list-style: decimal;
}

.resources.newsletter .resources__description ul {
	list-style: disc;
}

.resources.newsletter .resources__description li + li {
	margin-top: 0.35rem;
}

/* ------------------------------------------------------------ form */

/*
 * Cards in a row carry copy of different lengths, so the forms are pushed to the foot of
 * each card to line up with one another.
 */
.resources__form {
	margin-top: auto;
}

.resources__fields {
	display: grid;
	gap: 1rem;
}

/* The grid display would otherwise beat the `hidden` attribute the script sets on success. */
.resources__fields[hidden] {
	display: none;
}

.resources__fields input[type='text'],
.resources__fields input[type='email'] {
	width: 100%;
	margin: 0;
}

.resources__submit {
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid #2176ff;
	border-radius: 0.312rem;
	background: #2176ff; /* accent_blue */
	color: #fff;
	font-size: 0.938rem;
	font-weight: 600;
	line-height: 1.406rem;
	cursor: pointer;
	transition: background-color 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.resources__submit:hover {
	border-color: #1a63dd;
	background: #1a63dd;
}

.resources__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.resources__footnote {
	margin: 0;
	color: #003049;
	font-size: 0.75rem;
	opacity: 0.55;
}

/* ------------------------------------------------------------ messages */

.resources__message {
	margin: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid #fecaca;
	border-radius: 0.375rem;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 0.875rem;
	line-height: 1.45;
}

.resources__message--success {
	border-color: #d4e6f0;
	background: #d4e6f0; /* light_blue */
	color: #003049;
}

.resources__message[hidden] {
	display: none;
}

.resources__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 767px) {
	.resources.newsletter .resources__column {
		padding: 1.75rem 1.5rem;
	}

	/* Stacked, the cards need space between them rather than one flush against the next. */
	.resources.newsletter .resources__column + .resources__column {
		margin-top: 1.25rem;
	}

	.resources.newsletter .resources__column h3 {
		font-size: 1.25rem;
	}
}