/* Newsletter signup card (cairn/newsletter-signup) */

.fc-newsletter-signup {
	background-color: var(--wp--preset--color--custom-windmill-wings);
	container-type: inline-size;
	border-radius: var(--wp--preset--border-radius--large, 20px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
}

.fc-newsletter-signup__header {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

/*
 * Nested selector for specificity only: blocks/content.css sets a top margin on
 * every h2 inside post content, and the editor adds a more specific variant of
 * the same rule, both of which would otherwise beat a single class here.
 */
.fc-newsletter-signup .fc-newsletter-signup__header .fc-newsletter-signup__heading {
	margin: 0;
  font-weight: 400;
}

/*
 * Flipped: the space the browser puts above a paragraph moves below it, so the
 * note sits tight under the heading with the gap ahead of the form instead.
 * 1em matches what the top margin computes to, whatever the note's font size.
 */
.fc-newsletter-signup__note {
	margin-block-start: 0;
	margin-block-end: 1em;
}

/* Both controls are progressive enhancement: hidden until view.js runs. */
.fc-newsletter-signup__toggle,
.fc-newsletter-signup__close {
	display: none;
}

.fc-newsletter-signup__toggle {
	align-self: flex-start;
	background: var(--wp--preset--gradient--custom-money-green);
	border: 0;
	border-radius: 50px;
	color: var(--wp--preset--color--custom-white);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.fc-newsletter-signup__toggle:hover {
	background: var(--wp--preset--gradient--custom-money-green-hover);
	color: var(--wp--preset--color--custom-white);
	outline: 1px solid var(--wp--preset--color--custom-white);
}

.fc-newsletter-signup__close {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--custom-dark-grey);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.5em;
	margin-left: auto;
	padding: var(--wp--preset--spacing--30) 0;
}

.fc-newsletter-signup__close:hover {
	text-decoration: underline;
}

.fc-newsletter-signup__close-icon {
	font-size: 1.1em;
	line-height: 1;
}

/*
 * view.js tags the paragraph holding Contact Form 7's submit button so the
 * close control can sit on the same row, flush with the right of the fields.
 */
.fc-newsletter-signup__actions {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
}

/*
 * First name / Last name stack full width. They were previously paired on one
 * row above 480px, but the card is now a narrow sidebar on desktop, where a
 * viewport-width media query has no idea how little room the card actually has.
 * The .fc-newsletter-signup__name-row wrapper in the Contact Form 7 template is
 * left in place; pairing them again would be a container query on the card.
 */

/*
 * Top of the page.
 *
 * The group wrapping the columns carries no top padding on the Newsletter page,
 * while /services gets two nested levels of spacing-50 above its content. Add
 * the equivalent here so the gap below the top bar matches. Targeted through
 * the card, since the wrapper itself is page content we cannot edit from here.
 */
.wp-block-group:has(> .wp-block-columns .fc-newsletter-signup) {
	padding-top: calc(var(--wp--preset--spacing--50) * 2);
}

/*
 * Consent checkbox.
 *
 * Contact Form 7 ships `.wpcf7 .wpcf7-list-item { margin: 0 0 0 1em; }`, which
 * indents the checkbox past the left edge of the fields above it. The selector
 * below matches that specificity plus one, so it wins regardless of stylesheet
 * order. The label is a flex row so wrapped text stays clear of the checkbox.
 */
.fc-newsletter-signup .wpcf7 .wpcf7-list-item {
	margin-left: 0;
}

.fc-newsletter-signup .wpcf7-acceptance .wpcf7-list-item label {
	align-items: flex-start;
	display: flex;
	gap: 0.5em;
}

.fc-newsletter-signup .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0.25em 0 0;
}

/*
 * Layout of the columns holding the card.
 *
 * Selected via :has() on the card rather than a class on the columns, so this
 * keeps working on pages where the pattern was inserted before the class
 * existed - pattern markup is copied into post content at insert time and does
 * not update afterwards.
 *
 * Core stacks Columns at 781px and forces flex-wrap with !important above it,
 * so both the gap and the stacking are restated here to move that change to
 * 1024px, matching the card's own collapse.
 */
.wp-block-columns:has(.fc-newsletter-signup),
.fc-newsletter-columns {
	column-gap: 40px;
	row-gap: 32px;
}

@media (max-width: 1024px) {
	.wp-block-columns:has(.fc-newsletter-signup),
	.fc-newsletter-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:has(.fc-newsletter-signup) > .wp-block-column,
	.fc-newsletter-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.fc-newsletter-signup.is-enhanced .fc-newsletter-signup__toggle,
	.fc-newsletter-signup.is-enhanced .fc-newsletter-signup__close {
		display: inline-flex;
	}

	.fc-newsletter-signup.is-enhanced[data-expanded="false"] .fc-newsletter-signup__form {
		display: none;
	}

	/*
	 * The note belongs with the form, per the signed-off mobile design: the
	 * collapsed card shows only the heading and the reveal button.
	 */
	.fc-newsletter-signup.is-enhanced[data-expanded="false"] .fc-newsletter-signup__note {
		display: none;
	}

	/* Open: the Close control takes over, so the toggle gets out of the way. */
	.fc-newsletter-signup.is-enhanced[data-expanded="true"] .fc-newsletter-signup__toggle {
		display: none;
	}

	/* Match the 32px row gap above the panel with the same space below it. */
	.wp-block-columns:has(.fc-newsletter-signup) {
		margin-bottom: 32px;
	}
}

@media (min-width: 1025px) {
	.wp-block-columns:has(.fc-newsletter-signup) {
		align-items: center;

    > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--wp--preset--spacing--50);

      h1 {
        margin-bottom: 0;
      }
    }
	}

	.fc-newsletter-signup {
		background-color: var(--wp--preset--color--custom-white);
		border: 1px solid var(--wp--preset--color--pale-custom-mid-grey);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}

	/*
	 * Heading on one line with the note beneath it.
	 *
	 * `cqi` is 1% of the card's own width, so the heading scales with the
	 * sidebar rather than the viewport - a media query cannot see how narrow
	 * the card actually is. Capped at the original 37px so it never grows.
	 */
	.fc-newsletter-signup .fc-newsletter-signup__header .fc-newsletter-signup__heading {
		font-size: min(2.3125rem, 7cqi);
	}
}

/*
 * Page-wide two-column layout (desktop only).
 *
 * The page content is a wrapper holding the columns block (intro | card) and,
 * after it, a group holding the newsletter list. Rather than restructure that
 * content - which would put the signup card below the whole archive on mobile -
 * the wrapper becomes a grid and the columns block is flattened into it with
 * `display: contents`. Its two columns then become grid items alongside the
 * list, letting the card span both rows in the right-hand track.
 *
 * Everything below 1025px is untouched: the wrapper stays in flow, the columns
 * stack in DOM order (intro, card, list) and the card keeps its reveal button.
 */
@media (min-width: 1025px) {
	.wp-block-group:has(> .wp-block-columns .fc-newsletter-signup) {
		column-gap: 40px;
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		row-gap: 32px;
	}

	/* Lift the two columns out of their flex row and into the page grid. */
	.wp-block-group:has(> .wp-block-columns .fc-newsletter-signup) > .wp-block-columns {
		display: contents;
	}

	/* Newsletter list: left track, below the intro. */
	.wp-block-group:has(> .wp-block-columns .fc-newsletter-signup) > .wp-block-group {
		grid-column: 1;
		grid-row: 2;
	}

	/*
	 * Card column: right track, spanning both rows. Left to stretch on purpose -
	 * the full-height column is what gives the sticky card room to travel.
	 */
	.wp-block-column:has(> .fc-newsletter-signup) {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/*
	 * The header is `position: sticky; top: 0` with no fixed height, so the
	 * offset cannot be hard-coded - it changes with viewport and with the admin
	 * bar. view.js measures it and publishes --fc-header-height; the fallback
	 * covers the moment before that runs, and the case where JS is off.
	 */
	.wp-block-column:has(> .fc-newsletter-signup) > .fc-newsletter-signup {
		position: sticky;
		top: calc(var(--fc-header-height, 5.5rem) + var(--wp--preset--spacing--40));
	}
}

/* Editor placeholder */
.fc-newsletter-signup.is-placeholder .fc-newsletter-signup__placeholder-note {
	color: var(--wp--preset--color--custom-mid-grey);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	margin: 0;
}