/**
 * Newsletter: the look for the Companion's sign-up spots and form.
 *
 * Loaded only when the Companion's LVBL_Newsletter class exists (lib/newsletter.php).
 * Colours, radius and type come from the theme tokens (--atm-*, --wp--preset--*),
 * all of which resolve light and dark through light-dark(), so a child gets its own
 * look by changing its tokens, not by copying this file. Everything is scoped to
 * .lvbl-newsletter-spot, .lvbl-newsletter-panel, .lvbl-newsletter-signup and
 * .lvbl-newsletter-header-button, so no other form is touched.
 *
 * Contents: 1 tokens, 2 end box, 3 slide-up, 4 header button and panel,
 *           5 the form inside them, 6 the confirmation.
 */

/* 1. Tokens. A child may reset any of these on :root. */
.lvbl-newsletter-spot,
.lvbl-newsletter-panel,
.lvbl-newsletter-signup {
	--lvbl-nl-radius: var(--atm-radius, 6px);
	--lvbl-nl-focus: var(--wp--preset--color--primary, #f4b617);
	--lvbl-nl-field-height: 56px;
	--lvbl-nl-gap: var(--wp--preset--spacing--small, 0.875rem);
}

.lvbl-newsletter-spot .lvbl-newsletter-spot__heading {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--large, 1.375rem);
	line-height: 1.25;
	color: var(--atm-on-surface, light-dark(#000, #fff));
}

.lvbl-newsletter-spot .lvbl-newsletter-spot__text {
	margin: 0 0 var(--wp--preset--spacing--medium, 1.25rem);
	color: var(--atm-on-surface-variant, light-dark(#50483b, #cdc1b0));
	font-size: var(--wp--preset--font-size--normal, 1rem);
	line-height: 1.5;
}

/* 2. End of essay: a quiet band after the content. */
.lvbl-newsletter-spot--end {
	max-width: 44rem;
	margin: var(--wp--preset--spacing--x-large, 2.5rem) auto 0;
	padding: var(--wp--preset--spacing--large, 1.75rem);
	/* Parent and child themes pad or zero every direct child of .entry-content with a more specific rule. */
	padding-inline: var(--wp--preset--spacing--large, 1.75rem) !important;
	background: var(--atm-surface-container-low, light-dark(#faefe2, #241f17));
	border: 1px solid var(--atm-border, light-dark(#ede1cf, #4d4639));
	border-radius: var(--lvbl-nl-radius);
}

/*
 * Fields stack in the order the form has them, and the button comes last.
 * Only a form with a single visible field (the email) puts the button beside it.
 * Honeypot, CAPTCHA and hidden fields do not count as visible.
 */
.lvbl-newsletter-spot--end .gform_wrapper .gform_footer,
.lvbl-newsletter-spot--end .gform_wrapper .gform-footer {
	margin-top: var(--lvbl-nl-gap);
}

@media (min-width: 40.0625rem) {

	.lvbl-newsletter-spot--end .gform_wrapper form:not(:has(.gfield:not(.gfield--type-email, .gfield--type-hidden, .gfield--type-honeypot, .gfield--type-captcha, .gform_validation_container))) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--lvbl-nl-gap);
		align-items: start;
	}

	.lvbl-newsletter-spot--end .gform_wrapper form:not(:has(.gfield:not(.gfield--type-email, .gfield--type-hidden, .gfield--type-honeypot, .gfield--type-captcha, .gform_validation_container))) .gform_footer {
		margin-top: 0;
	}
}

@media (max-width: 40rem) {

	.lvbl-newsletter-spot--end {
		padding: var(--wp--preset--spacing--medium, 1.25rem);
		padding-inline: var(--wp--preset--spacing--medium, 1.25rem) !important;
	}
}

/* 3. Slide-up: bottom left on desktop, full width on phones. */

/*
 * The back-to-top button sits bottom right (46px, z-index 10000). On desktop the
 * card goes bottom LEFT, so they never meet. On phones the card is full width, so
 * it sits under the button (z-index below 10000) and reserves room at its right
 * edge: the button floats over empty padding, not over a field.
 */
.lvbl-newsletter-spot--slideup {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 9990;
	padding: var(--wp--preset--spacing--medium, 1.25rem);
	padding-inline-end: calc(46px + 1.5rem);
	background: var(--atm-surface-container, light-dark(#ebe1d4, #353027));
	border-top: 1px solid var(--atm-border, light-dark(#ede1cf, #4d4639));
	box-shadow: 0 -4px 12px rgb(0 0 0 / 15%);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.lvbl-newsletter-spot--slideup.is-visible {
	transform: translateY(0);
}

/* The element loses [hidden] and gains .is-visible together; start from off-screen so it still slides. */
@starting-style {

	.lvbl-newsletter-spot--slideup.is-visible {
		transform: translateY(100%);
	}
}

@media (min-width: 40.0625rem) {

	.lvbl-newsletter-spot--slideup {
		inset-inline: 1rem auto;
		inset-block-end: 1rem;
		width: min(28rem, calc(100vw - 2rem));
		padding-inline-end: var(--wp--preset--spacing--medium, 1.25rem);
		border: 1px solid var(--atm-border, light-dark(#ede1cf, #4d4639));
		border-radius: var(--lvbl-nl-radius);
		transform: translateY(calc(100% + 1rem));
	}

	.lvbl-newsletter-spot--slideup.is-visible {
		transform: translateY(0);
	}

	@starting-style {

		.lvbl-newsletter-spot--slideup.is-visible {
			transform: translateY(calc(100% + 1rem));
		}
	}
}

/* Reduced motion: appear in place. The Companion sets data-motion on the card or an ancestor. */
.lvbl-newsletter-spot--slideup[data-motion="reduced"],
[data-motion="reduced"] .lvbl-newsletter-spot--slideup {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	.lvbl-newsletter-spot--slideup {
		transition: none;
	}
}

.lvbl-newsletter-spot--slideup .lvbl-newsletter-spot__heading {
	padding-inline-end: 2.5rem; /* Room for the close button. */
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
}

.lvbl-newsletter-spot--slideup {
	--lvbl-nl-field-height: 48px;
}

.lvbl-newsletter-spot--slideup .lvbl-newsletter-spot__text {
	margin-bottom: 0.625rem;
}

.lvbl-newsletter-spot__close {
	position: absolute;
	inset-block-start: 0.25rem;
	inset-inline-end: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--lvbl-nl-radius);
	color: var(--atm-on-surface, light-dark(#000, #fff));
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.lvbl-newsletter-spot__close:hover,
.lvbl-newsletter-spot__close:focus {
	color: var(--atm-on-surface, light-dark(#000, #fff));
	background: var(--atm-hover-bg, light-dark(rgb(0 0 0 / 3%), rgb(255 255 255 / 5%)));
}

.lvbl-newsletter-spot__close:focus-visible {
	outline: 3px solid var(--atm-outline, light-dark(#322b1f, #fbeedc));
	outline-offset: 2px;
}

@media (max-width: 40rem) {

	/* The close button is at the card's right edge; it clears the back-to-top button below it. */
	.lvbl-newsletter-spot--slideup {
		padding-block: 0.875rem 1rem;
	}
}

/* 4. Header button and its drop-down panel. */

/* Same look and height as the header's search and menu buttons (header.scss). */
.lvbl-newsletter-header-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	background: transparent;
	border: 1px solid var(--atm-outline-variant, light-dark(#50483b, #cdc1b0));
	border-radius: var(--lvbl-nl-radius, 4px);
	color: var(--atm-on-surface, light-dark(#000, #fff));
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.lvbl-newsletter-header-button:hover,
.lvbl-newsletter-header-button:focus {

	/* The theme's global button:hover turns buttons dark with gold text; the header buttons stay plain. */
	background: transparent;
	color: var(--atm-on-surface, light-dark(#000, #fff));
}

.lvbl-newsletter-header-button:hover {
	opacity: 0.7;
}

.lvbl-newsletter-header-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #ffb81c);
	outline-offset: 2px;
}

.lvbl-newsletter-header-button[aria-expanded="true"],
.lvbl-newsletter-header-button[aria-expanded="true"]:hover,
.lvbl-newsletter-header-button[aria-expanded="true"]:focus {
	background: var(--atm-surface-container, light-dark(#ebe1d4, #353027));
}

/*
 * The panel drops from the header (the nearest positioned ancestor) at the right
 * edge. Surface, radius and shadow are the "More" dropdown's (priority-nav.scss).
 */
.site-header .container {
	position: relative;
}

.lvbl-newsletter-panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-end: 1rem;
	z-index: 1000;
	width: min(22rem, 100vw - 2rem);
	padding: var(--wp--preset--spacing--medium, 1.25rem);
	background: var(--atm-surface-container, light-dark(#ebe1d4, #353027));
	border-radius: 8px;
	box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
	color: var(--atm-on-surface, light-dark(#000, #fff));
}

@media (max-width: 48rem) {

	/* Phones: a compact button so logo, button, search and menu fit one row. */
	.lvbl-newsletter-header-button {
		padding-inline: 0.65rem;
	}
}

/* 5. The form inside the spots, the panel and the page block. */
.lvbl-newsletter-spot .gform_wrapper,
.lvbl-newsletter-panel .gform_wrapper,
.lvbl-newsletter-signup .gform_wrapper {
	margin: 0;
}

.lvbl-newsletter-spot .gform_wrapper .gfield,
.lvbl-newsletter-panel .gform_wrapper .gfield,
.lvbl-newsletter-signup .gform_wrapper .gfield {
	margin-bottom: 0;
}

/* Gravity Forms spaces its fields with a grid gap; a sign-up form wants it tight. */
.lvbl-newsletter-spot .gform_wrapper .gform_fields,
.lvbl-newsletter-panel .gform_wrapper .gform_fields,
.lvbl-newsletter-signup .gform_wrapper .gform_fields {
	row-gap: var(--lvbl-nl-gap);
	margin-bottom: var(--lvbl-nl-gap);
}

.lvbl-newsletter-spot--end .gform_wrapper .gform_fields {
	margin-bottom: 0;
}

.lvbl-newsletter-spot .gform_wrapper .gform_footer,
.lvbl-newsletter-spot .gform_wrapper .gform-footer,
.lvbl-newsletter-panel .gform_wrapper .gform_footer,
.lvbl-newsletter-panel .gform_wrapper .gform-footer,
.lvbl-newsletter-signup .gform_wrapper .gform_footer,
.lvbl-newsletter-signup .gform_wrapper .gform-footer {
	margin: 0;
	padding: 0;
}

/*
 * Submit button. Gravity Forms colours its button from --gf-ctrl-btn-* variables
 * (its rule is too specific to beat with plain properties), so the brand pair is
 * set through those variables. Full width where the column is narrow.
 */
.lvbl-newsletter-spot .gform_wrapper,
.lvbl-newsletter-panel .gform_wrapper,
.lvbl-newsletter-signup .gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--brand, #f4b617);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--brand, #f4b617);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--on-brand, #1a1a1a);
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--on-brand, #1a1a1a);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-radius: var(--lvbl-nl-radius);
	--gf-radius: var(--lvbl-nl-radius);
}

.lvbl-newsletter-spot .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button,
.lvbl-newsletter-panel .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button,
.lvbl-newsletter-signup .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button {
	/* Gravity Forms sizes its inputs with inline-size and min-block-size and a very specific selector; the long selectors here outrank it. */
	min-block-size: var(--lvbl-nl-field-height);
	border-radius: var(--lvbl-nl-radius);
	font-weight: 600;
}

.lvbl-newsletter-spot .gform_wrapper .gform_button:focus-visible,
.lvbl-newsletter-panel .gform_wrapper .gform_button:focus-visible,
.lvbl-newsletter-signup .gform_wrapper .gform_button:focus-visible {
	outline: 3px solid var(--atm-outline, light-dark(#322b1f, #fbeedc));
	outline-offset: 3px;
}

.lvbl-newsletter-panel .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button,
.lvbl-newsletter-spot--slideup .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button,
.lvbl-newsletter-signup .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button {
	inline-size: 100%;
}

/* The slide-up is the compact spot: a 44px target is enough. */
.lvbl-newsletter-spot--slideup .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button {
	min-block-size: 44px;
}

/*
 * Labels: the theme floats each label inside its field and keeps it linked to the
 * input, so screen readers always hear it. Nothing here hides a label. The
 * "(Required)" note is kept for the same reason.
 */
.lvbl-newsletter-spot .gform_wrapper .gfield_label,
.lvbl-newsletter-panel .gform_wrapper .gfield_label,
.lvbl-newsletter-signup .gform_wrapper .gfield_label {
	color: var(--atm-on-surface-variant, light-dark(#50483b, #cdc1b0));
}

.lvbl-newsletter-signup {
	max-width: 32rem;
	margin-block: var(--wp--preset--spacing--large, 1.75rem);
}

/* Inside a spot or the panel the spot sets the spacing, not the page block's margin. */
.lvbl-newsletter-spot .lvbl-newsletter-signup,
.lvbl-newsletter-panel .lvbl-newsletter-signup {
	max-width: none;
	margin: 0;
}

/* 6. The confirmation: calm, in the same surface family, no shouting colour. */
.lvbl-newsletter-spot .gform_confirmation_message,
.lvbl-newsletter-panel .gform_confirmation_message,
.lvbl-newsletter-signup .gform_confirmation_message {
	padding: var(--wp--preset--spacing--small, 0.875rem) var(--wp--preset--spacing--medium, 1.25rem);
	background: var(--atm-surface-container-lowest, light-dark(#fff, #000));
	border: 1px solid var(--atm-border, light-dark(#ede1cf, #4d4639));
	border-inline-start: 4px solid var(--wp--preset--color--brand, #f4b617);
	border-radius: var(--lvbl-nl-radius);
	color: var(--atm-on-surface, light-dark(#000, #fff));
	font-size: var(--wp--preset--font-size--normal, 1rem);
	line-height: 1.5;
}

/* Compact spots (slide-up, panel): tighter consent row. */
.lvbl-newsletter-spot--slideup .gform_wrapper .gfield--type-checkbox .gfield_label,
.lvbl-newsletter-panel .gform_wrapper .gfield--type-checkbox .gfield_label {
	margin-bottom: 0;
	padding: 0;
}

.lvbl-newsletter-spot--slideup .gform_wrapper .gfield_checkbox,
.lvbl-newsletter-panel .gform_wrapper .gfield_checkbox {
	margin: 0;
}

/*
 * Compact slide-up: the required fields with the consent as small print, then the button.
 * The consent tick stays before the button: it is required, so placing it after the button
 * would send people into a validation error before they ever saw it.
 * Optional fields are hidden here (not removed), so the form still submits as built.
 * CAPTCHA, honeypot and hidden fields keep whatever Gravity Forms gives them.
 * A required consent stays visible and usable: smaller type and tighter spacing only.
 */
.lvbl-newsletter-spot--slideup .gform_wrapper .gfield:not(.gfield_contains_required, .gfield--type-captcha, .gfield--type-hidden, .gfield--type-honeypot, .gform_validation_container) {
	display: none;
}

.lvbl-newsletter-spot--slideup .gform_wrapper form {
	display: flex;
	flex-direction: column;
}

.lvbl-newsletter-spot--slideup .gform_wrapper .gform_body,
.lvbl-newsletter-spot--slideup .gform_wrapper .gform_fields {
	display: contents;
}

.lvbl-newsletter-spot--slideup .gform_wrapper .gfield {
	order: 1;
	margin-bottom: 0.5rem;
}

.lvbl-newsletter-spot--slideup .gform_wrapper .gform_footer,
.lvbl-newsletter-spot--slideup .gform_wrapper .gform-footer {
	order: 2;
}

.lvbl-newsletter-spot--slideup .gform_wrapper .gfield--type-consent,
.lvbl-newsletter-spot--slideup .gform_wrapper .gfield--type-checkbox {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	line-height: 1.3;
}

.lvbl-newsletter-spot--slideup .gform_wrapper .gfield--type-consent *,
.lvbl-newsletter-spot--slideup .gform_wrapper .gfield--type-checkbox * {
	font-size: inherit;
	line-height: inherit;
}

/* The group heading ("Consent (Required)") stays, as small print. */
.lvbl-newsletter-spot--slideup .gform_wrapper .gfield--type-checkbox .gfield_label {
	margin: 0 0 0.125rem;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

/* The pointer in the end box that sends a reader to the slide-up or panel: a quiet text link. */
.lvbl-newsletter-spot__away,
.lvbl-newsletter-spot__away-button {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--atm-on-surface-variant, light-dark(#50483b, #cdc1b0));
}

.lvbl-newsletter-spot__away-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.25rem;
	background: transparent;
	border: 0;
	border-radius: var(--lvbl-nl-radius);
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.lvbl-newsletter-spot__away-button:hover {
	background: transparent;
	color: var(--atm-on-surface, light-dark(#000, #fff));
}

.lvbl-newsletter-spot__away-button:focus-visible {
	background: transparent;
	color: var(--atm-on-surface, light-dark(#000, #fff));
	outline: 3px solid var(--atm-outline, light-dark(#322b1f, #fbeedc));
	outline-offset: 2px;
}