/*
 * Newsletter signup — the seachickens-specific bits that aren't expressible as
 * a token.
 *
 * Everything else about the component (structure, layout, states, the slide-in)
 * comes from Pronghorn; the colors come from the --pr-newsletter-* re-points in
 * custom-properties.css. What's left here is brand typography and the one gold
 * hover, which are genuinely seachickens' and not something the parent should
 * assume — spookt's CTA is not a display face.
 *
 * Unlayered on purpose: unlayered beats @layer pronghorn regardless of
 * specificity, so none of this needs !important. If a rule here ever seems to
 * need one, the answer is a token in the parent, not a specificity hack.
 */

/* CTA — Bebas Neue at weight 400. The face has one weight and no useful
   lowercase, so uppercase + letter-spacing is how it's meant to be set; never
   synthesise bold. */
.pronghorn-newsletter-signup .wp-block-mailerpress-form-button {
	font-family: var(--pr-heading-font-display);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: box-shadow 160ms, transform 160ms;
}

.pronghorn-newsletter-signup .wp-block-mailerpress-form-button:hover {
	box-shadow: var(--sc-green-glow-hover);
	transform: translateY(-1px);
	/* Pronghorn's default hover brightens the fill; the glow does the work here
	   and brightening green on green muddies it. */
	filter: none;
}

/* Eyebrow — Barlow Condensed, the site's label face. */
.pronghorn-newsletter-signup__eyebrow {
	font-family: var(--sc-condensed-font);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.22em;
}

/* Slide-in: green top border that goes gold on hover. The only gold anywhere in
   the component — the design system treats gold as a hover-only color, never
   painted at rest. Echoes the hero story card's left border. */
.pronghorn-newsletter-signup--slidein .pronghorn-newsletter-signup__card {
	border-top: 3px solid var(--wp--preset--color--primary);
	transition: border-top-color 180ms;
}

.pronghorn-newsletter-signup--slidein .pronghorn-newsletter-signup__card:hover {
	border-top-color: var(--sc-gold);
}

/* The dismissed slide-in's re-open pill sits on the raised surface, like the
   merch and issue cards. */
.pronghorn-newsletter-signup__pill {
	font-family: var(--sc-condensed-font);
	letter-spacing: 0.04em;
}

.pronghorn-newsletter-signup__pill-mark {
	color: var(--wp--preset--color--primary);
}

/* --- Social-proof section (patterns/newsletter-signup-social-proof.php) ---
   Carries the component's base class but no variant modifier, so it needs its
   own section chrome. Centered column, so the form stacks and the fine print
   sits under it. */
.newsletter-signup-social-proof {
	border-top: 1px solid var(--pr-newsletter-line);
	border-bottom: 1px solid var(--pr-newsletter-line-soft);
}

.newsletter-signup-social-proof .pronghorn-newsletter-signup__body {
	margin-bottom: 0;
}

.newsletter-signup-social-proof__mark {
	color: var(--wp--preset--color--primary);
	margin-right: 0.35rem;
}

.newsletter-signup-social-proof .mailerpress-optin-form,
.newsletter-signup-social-proof .pronghorn-newsletter-signup__message {
	max-width: 420px;
	margin-inline: auto;
}