/**
 * Reason Newsletters field — front-end styles.
 *
 * Values match the Figma "Newsletters Page" design. The beige content region is
 * full-bleed (full viewport width, flush to the site header/footer); card content
 * is centered at the design width. Text uses FranklinGothic URW (the theme's
 * paragraph default is a serif, so the family is set explicitly).
 *
 * @since 1.1.0
 */

/* ---- Design tokens + full-bleed beige region ---- */
.gform_wrapper:has(.ginput_container_reason_newsletters),
.gform_wrapper:has(.rchimp-nl-confirmation) {
	--nl-orange: #e64c0e;
	--nl-page: #f3f2ef;
	--nl-card: #fefefe;
	--nl-ink: #000000;
	--nl-muted: #757575;
	--nl-line: #bababa;
	--nl-radius: 8px;
	--nl-font: "franklin-gothic-urw", Arial, "Helvetica Neue", sans-serif;

	background: var(--nl-page);
	color: var(--nl-ink);
	font-family: var(--nl-font);

	/* Full viewport width, flush to header/footer. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
}

/* Remove the theme's vertical padding + margin so the full-bleed region meets
   the nav and footer flush. The theme puts padding on .page-container (beaten by
   body:not(.single-video) .page-container:not(.video-page)) AND a 20px
   margin-bottom that otherwise shows the body background as a grey strip between
   the confirmation bar and the footer. */
body.rchimp-newsletters-page .page-container.container:not(.video-page) {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Force the design sans on text (theme sets a serif on <p>, condensed on <h3>). */
.gform_wrapper:has(.ginput_container_reason_newsletters) :is(h1, h2, h3, p, a, button, input, span),
.gform_wrapper:has(.rchimp-nl-confirmation) :is(h1, h2, h3, p, a, button, input, span) {
	font-family: var(--nl-font);
}

/* Center the cards content at the design width. */
.ginput_container_reason_newsletters .rchimp-nl {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 20px 0;
	font-size: 16px;
}

/* The design shows the cards directly — hide the GF field label (kept for a11y). */
.gfield--type-reason_newsletters > .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Masthead: H1 + Select All / count ---- */
.rchimp-nl__masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 24px;
}

.rchimp-nl__headline {
	font-size: 64px;
	font-weight: 500;
	line-height: 1.05;
	margin: 0;
	color: var(--nl-ink);
	text-transform: none;
}

.rchimp-nl__headline em {
	font-style: italic;
}

.rchimp-nl__selectctl {
	flex: 0 0 auto;
	font-size: 14px;
	white-space: nowrap;
}

.rchimp-nl__selectall {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--nl-ink);
	cursor: pointer;
}

.rchimp-nl__selectall::before {
	content: "+";
	display: inline-block;
	margin-right: 6px;
	font-weight: 700;
}

.rchimp-nl__count {
	font-size: 14px;
	font-weight: 600;
}

.rchimp-nl__count::before {
	content: "\00b7"; /* middot */
	margin: 0 8px;
	color: var(--nl-muted);
}

/* ---- Sections (divider line between them) ---- */
.rchimp-nl__section {
	padding: 40px 0;
}

.rchimp-nl__section:first-of-type {
	padding-top: 0;
}

.rchimp-nl__section + .rchimp-nl__section {
	border-top: 1px solid var(--nl-line);
}

.rchimp-nl__section-title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: none;
	margin: 0 0 24px;
}

.rchimp-nl__section-blurb {
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 24px;
	max-width: 700px;
	color: var(--nl-ink);
}

/* ---- Card grid ---- */
.rchimp-nl__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 24px;
}

.rchimp-nl__grid[hidden] {
	display: none;
}

/* ---- Card ---- */
.rchimp-nl__card {
	border: 1px solid var(--nl-line);
	border-radius: var(--nl-radius);
	padding: 32px;
}

.rchimp-nl__card-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	margin: 0 0 16px;
}

.rchimp-nl__card-desc {
	font-size: 16px;
	line-height: 1.375;
	margin: 0 0 16px;
	color: var(--nl-ink);
}

.rchimp-nl__preview {
	display: inline-block;
	font-size: 20px;
	line-height: 1.5;
	color: var(--nl-ink);
	text-decoration: underline;
}

/* Featured cards (The Latest): page-tone bg, stacked, full-width button. */
.rchimp-nl__card--featured {
	background: var(--nl-page);
	display: flex;
	flex-direction: column;
	gap: 39px;
}

.rchimp-nl__card--featured .rchimp-nl__card-body {
	flex: 1 1 auto;
}

.rchimp-nl__card--featured .rchimp-nl__card-desc:last-child,
.rchimp-nl__card--featured .rchimp-nl__preview {
	margin-bottom: 0;
}

/* Standard cards (A Closer Look / Policy Desk): card bg, checkbox left. */
.rchimp-nl__card:not(.rchimp-nl__card--featured) {
	background: var(--nl-card);
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.rchimp-nl__card:not(.rchimp-nl__card--featured) .rchimp-nl__card-action {
	order: -1;
	flex: 0 0 auto;
}

.rchimp-nl__card:not(.rchimp-nl__card--featured) .rchimp-nl__card-body {
	flex: 1 1 auto;
}

.rchimp-nl__card:not(.rchimp-nl__card--featured) .rchimp-nl__card-desc {
	margin-bottom: 24px;
}

/* ---- Toggles ---- */
.rchimp-nl__toggle--button {
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 40px;
	border: 2px solid var(--nl-orange);
	border-radius: var(--nl-radius);
	background: transparent;
	color: var(--nl-orange);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.rchimp-nl__toggle--button:hover {
	background: rgba(230, 76, 14, 0.08);
}

.rchimp-nl__toggle--button[aria-pressed="true"] {
	background: var(--nl-orange);
	color: #fff;
}

.rchimp-nl__toggle-label-selected {
	display: none;
}

.rchimp-nl__toggle--button[aria-pressed="true"] .rchimp-nl__toggle-label-select {
	display: none;
}

.rchimp-nl__toggle--button[aria-pressed="true"] .rchimp-nl__toggle-label-selected {
	display: inline;
}

.rchimp-nl__checkbox {
	display: inline-flex;
	cursor: pointer;
}

.rchimp-nl__toggle--checkbox {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #1a1a1a; /* near-black checked box (Greyscale/10), per design */
	cursor: pointer;
}

/* ---- Policy Desk reveal ---- */
.rchimp-nl__reveal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--nl-ink);
	cursor: pointer;
}

.rchimp-nl__reveal::after {
	content: "\25be"; /* down caret */
	font-size: 0.8em;
}

.rchimp-nl__reveal[aria-expanded="true"]::after {
	content: "\25b4"; /* up caret */
}

.rchimp-nl__section--collapsible .rchimp-nl__grid {
	margin-top: 24px;
}

/* ---- Sticky subscribe bar (full-width white, content centered) ---- */
.rchimp-nl-sticky {
	/* Pinned to the bottom of the window (fixed, not sticky): as the last element
	   in the form, `sticky` only settled at the end of the page. `fixed` keeps the
	   bar visible over the content at all times; JS reserves matching space below
	   the cards via --nl-bar-h so the last row is never covered. */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 40px;
	margin: 0;
	padding: 40px 20px;
	background: #ffffff;
	box-shadow: 0 -6px 25px 9px rgba(0, 0, 0, 0.07);
}

.rchimp-nl-sticky__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 380px;
	max-width: 500px;
}

.rchimp-nl-sticky__info strong {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
}

.rchimp-nl-sticky__intro {
	color: var(--nl-ink);
	font-size: 20px;
	line-height: 1.2;
}

.rchimp-nl-sticky__fields {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 440px;
	max-width: 500px;
}

/* The GF email field + footer are relocated into the bar. Collapse the field
   wrapper to just the input (GF reserves label/validation space that otherwise
   makes it taller than the button and breaks the inline row). */
.rchimp-nl-sticky .gfield--type-email {
	flex: 1 1 auto;
	margin: 0;
	display: flex;
}

.rchimp-nl-sticky .gfield--type-email > *:not(.ginput_container_email) {
	display: none;
}

.rchimp-nl-sticky .ginput_container_email {
	flex: 1 1 auto;
	margin: 0;
	display: flex;
}

.rchimp-nl-sticky input[type="email"] {
	width: 100%;
	height: 56px;
	padding: 0 17px;
	border: 0 !important; /* theme adds a green left border on inputs */
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
	background: #f0eeee;
	color: var(--nl-ink);
}

.rchimp-nl-sticky input[type="email"]::placeholder {
	color: #757575;
}

.rchimp-nl-sticky .gform_footer {
	margin: 0 !important; /* GF/theme adds a top margin that breaks the inline row */
	padding: 0;
	flex: 0 0 auto;
}

.rchimp-nl-sticky .gform_button {
	height: 56px;
	padding: 0 40px;
	border: 0;
	border-radius: 8px;
	background: var(--nl-orange);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

.rchimp-nl-sticky .gform_button:hover {
	background: #cf4409;
}

/* ---- Confirmation ("You've subscribed") ---- */
.rchimp-nl-confirmation {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	padding: 64px 20px;
}

.rchimp-nl-confirmation h2 {
	font-size: 32px;
	font-weight: 700;
	text-transform: none;
	margin: 0 0 12px;
}

.rchimp-nl-confirmation p {
	color: var(--nl-ink);
	font-size: 20px;
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.4;
}

/* Bar-only confirmation: read-only cards remain, message becomes the bar. */
.rchimp-nl--done {
	pointer-events: none;
	opacity: 0.85;
}

.rchimp-nl-confirmation--bar {
	/* Same window-pinned bar as .rchimp-nl-sticky, swapped in on confirmation. */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 100;
	max-width: none;
	margin: 0;
	padding: 40px 20px;
	background: #ffffff;
	box-shadow: 0 -6px 25px 9px rgba(0, 0, 0, 0.07);
	text-align: center;
}

.rchimp-nl-confirmation--bar h2 {
	margin: 0 0 8px;
	font-size: 28px;
}

.rchimp-nl-confirmation--bar p {
	font-size: 18px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.rchimp-nl__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.rchimp-nl__headline {
		font-size: 44px;
	}

	.rchimp-nl__section-title {
		font-size: 28px;
	}
}

@media (max-width: 600px) {
	.ginput_container_reason_newsletters .rchimp-nl {
		padding: 40px 20px 0;
	}

	.rchimp-nl__masthead {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.rchimp-nl__headline {
		font-size: 36px;
	}

	.rchimp-nl__grid {
		grid-template-columns: 1fr;
	}

	.rchimp-nl__card-title {
		font-size: 20px;
	}

	.rchimp-nl__preview {
		font-size: 16px;
	}

	.rchimp-nl-sticky {
		gap: 16px;
		padding: 24px 20px;
	}

	.rchimp-nl-sticky__info strong {
		font-size: 24px;
	}

	.rchimp-nl-sticky__intro {
		font-size: 16px;
	}

	.rchimp-nl-sticky__fields {
		flex-wrap: wrap;
		flex: 1 1 100%;
	}

	.rchimp-nl-sticky .gfield--type-email,
	.rchimp-nl-sticky .gform_footer {
		flex: 1 1 100%;
	}

	.rchimp-nl-sticky input[type="email"] {
		padding: 0 16px;
	}

	.rchimp-nl-sticky .gform_button {
		width: 100%;
	}
}

/* Reserve space below the cards for the window-pinned bar so its fixed position
   never covers the last row. JS sets --nl-bar-h to the live bar height (updated
   on resize/wrap); the fallback covers first paint before JS runs. Declared
   after the responsive block so this padding-bottom wins over the `padding`
   shorthands on .rchimp-nl above (desktop + mobile). Applies to the read-only
   confirmation cards (.rchimp-nl--done) too. */
.ginput_container_reason_newsletters .rchimp-nl {
	padding-bottom: calc( var( --nl-bar-h, 168px ) + 40px );
}

/* More from Reason: the form's own newsletters, shown selected and not toggleable. */
.rchimp-nl__card.is-locked .rchimp-nl__toggle {
	cursor: default;
	opacity: 0.6;
}

.rchimp-more__status {
	margin: 0 auto 1rem;
	max-width: 60rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid currentColor;
}

.rchimp-more__intro {
	margin: 0 auto 1rem;
	max-width: 60rem;
}