/*
 * Newsletter system's popup mode - dialog content only. Overlay, centering,
 * and the close button all come from the theme's shared .w2w-modal primitive
 * (sass/components/w2w/_ui.scss); this only styles what's inside
 * .w2w-newsletter-popup__dialog.
 *
 * 2026-08-28: restyled onto the new brand. It was a direct port of
 * MetabolicPackage.vue's scoped styles - #34b4f4 cyan, Roboto with a
 * font-variation-settings block, and a 12px/900 uppercase submit button - so
 * it opened over five new-brand pages looking like the site it replaced.
 * Every colour, face and control below now comes from the --w2w-nb-* tokens
 * in the theme's sass/abstracts/_tokens.scss, and the submit button is the
 * "Button - W2W" primary geometry (2088:5076): 40px pill, 18/34 padding,
 * 16px display type, electric blue with a white label.
 *
 * The two specificity workarounds below are unchanged and still load-bearing.
 */

/*
 * Doubled selector (.w2w-modal__dialog.w2w-newsletter-popup__dialog), not
 * just .w2w-newsletter-popup__dialog: this stylesheet is enqueued (and so
 * prints) before the theme's own style.css, which is where .w2w-modal__dialog
 * itself is defined (width: min(90vw, 1200px); max-height: 85vh). Equal
 * specificity + later source order means style.css's base rule was silently
 * winning over width/max-height here - the popup rendered at 1200px instead
 * of the intended 800px. The doubled class raises specificity so this wins
 * regardless of enqueue order.
 */

/*
 * The theme's shared .w2w-modal__close positions itself at top: -40px
 * relative to the dialog, on the assumption there's always clear space above
 * it - our dialog is capped at max-height: 90vh and can sit close to the
 * viewport's top edge, pushing that position off-screen. Pinned to the
 * viewport instead so it stays put regardless of dialog height or scroll.
 */
#w2w-newsletter-popup .w2w-modal__close {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1001;
	color: var(--w2w-nb-text);
	font-size: 28px;
}

/*
 * surface/raised rather than surface/base: this dialog opens over pages whose
 * own ground IS #08161c, so a base-coloured panel would have no edge at all.
 * The hairline is the same divider the cards on those pages carry.
 */
.w2w-modal__dialog.w2w-newsletter-popup__dialog {
	width: min(90vw, 800px);
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	background: var(--w2w-nb-surface-raised);
	border: 1px solid var(--w2w-nb-divider);
	border-radius: 14px;
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
	padding: 32px;
	color: var(--w2w-nb-text);
}

.w2w-newsletter-popup__title {
	color: var(--w2w-nb-text);
	font-family: var(--w2w-nb-font-display);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 10px 0;
}

.w2w-newsletter-popup__subtitle {
	color: var(--w2w-nb-text-secondary);
	font-family: var(--w2w-nb-font-body);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 28px 0;
}

.w2w-newsletter-popup__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * `display: flex` above outranks the user-agent's `[hidden] { display: none }`,
 * so setting `form.hidden = true` in the script did nothing at all: after a
 * successful submit the form stayed on screen, above the thank-you and still
 * submittable. The success panel got a `:not([hidden])` guard when it was
 * added; the form needed the matching one.
 */
.w2w-newsletter-popup__form[hidden] {
	display: none;
}

.w2w-newsletter-popup__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.w2w-newsletter-popup__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * The data face at label size - the same treatment the eyebrows and chips on
 * these pages use, in text/secondary rather than an accent. The old rule put
 * every label in bright cyan at weight 700, which made the labels louder than
 * the heading above them.
 */
.w2w-newsletter-popup__field label {
	color: var(--w2w-nb-text-secondary);
	font-family: var(--w2w-nb-font-data);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*
 * #w2w-newsletter-popup prefix, not just the plain descendant selector: the
 * theme's own style.css sets color: #666, border: 1px solid #ccc,
 * border-radius: 3px and padding: 3px on every input[type=text]/[type=email]
 * site-wide, unscoped to any class, at equal specificity to
 * .w2w-newsletter-popup__field input alone - and since style.css prints after
 * this stylesheet (same enqueue-order issue as the dialog width above), it was
 * winning on ALL of those properties, not just color. The #id prefix raises
 * specificity so every property here wins regardless of load order, without
 * needing !important on each one.
 */
#w2w-newsletter-popup .w2w-newsletter-popup__field input {
	box-sizing: border-box;
	background-color: var(--w2w-nb-surface-backdrop);
	border: 1px solid var(--w2w-nb-divider);
	border-radius: 8px;
	color: var(--w2w-nb-text);
	font-family: var(--w2w-nb-font-body);
	font-size: 15px;
	line-height: 1.5;
	padding: 13px 16px;
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
	width: 100%;
}

.w2w-newsletter-popup__field input::placeholder {
	color: var(--w2w-nb-text-tertiary);
}

/*
 * #w2w-newsletter-popup prefix again, and the colour repeated here even though
 * the base rule above already sets it: the theme's style.css also carries a
 * SEPARATE input[type=...]:focus { color: #111 } rule (equal specificity to a
 * plain descendant :focus selector, later in source order) - without this,
 * text would flip from light back to near-black the moment the field is
 * focused.
 */
#w2w-newsletter-popup .w2w-newsletter-popup__field input:focus {
	outline: none;
	border-color: var(--w2w-nb-brand);
	box-shadow: 0 0 0 3px rgba(46, 139, 255, 0.25);
	color: var(--w2w-nb-text);
}

/*
 * "Button - W2W", kind=Primary, size=Desktop. Its component description calls
 * it the site-wide button and says to use it for every CTA; geometry, hover
 * and pressed fills are read off the component rather than picked here.
 *
 * The old rule animated `gap` from 4px to 16px on hover, widening the button
 * under the cursor. Nothing else on the new brand does that.
 */
.w2w-newsletter-popup__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--w2w-nb-brand);
	color: #fff;
	border: none;
	border-radius: 40px;
	padding: 18px 34px;
	font-family: var(--w2w-nb-font-display);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.05em;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease-out;
	align-self: flex-start;
	margin-top: 4px;
	white-space: nowrap;
}

.w2w-newsletter-popup__submit:hover:not(:disabled) {
	background-color: var(--w2w-nb-brand-hover);
}

.w2w-newsletter-popup__submit:active:not(:disabled) {
	background-color: var(--w2w-nb-brand-pressed);
}

.w2w-newsletter-popup__submit:focus-visible {
	outline: 2px solid var(--w2w-nb-brand-hover);
	outline-offset: 2px;
}

.w2w-newsletter-popup__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.w2w-newsletter-popup__error {
	background-color: rgba(194, 69, 31, 0.12);
	border: 1px solid rgba(194, 69, 31, 0.4);
	border-radius: 8px;
	color: #f0917a;
	font-family: var(--w2w-nb-font-body);
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	display: none;
}

.w2w-newsletter-popup__error:not([hidden]) {
	display: block;
}

/*
 * The in-place confirmation, for a popup with no success page to send people
 * to. Mirrors the error panel's shape so the dialog does not change size or
 * rhythm when the form is swapped for it - the accent is the brand blue rather
 * than the rust, since this is the outcome the visitor wanted.
 *
 * `tabindex="-1"` in the markup makes it focusable so the script can move
 * focus here after the form disappears; the outline is removed because that
 * focus is programmatic, not something the visitor navigated to.
 */
.w2w-newsletter-popup__success {
	background-color: rgba(46, 139, 255, 0.1);
	border: 1px solid rgba(46, 139, 255, 0.3);
	border-radius: 8px;
	color: var(--w2w-nb-text);
	font-family: var(--w2w-nb-font-body);
	padding: 16px;
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	display: none;
}

.w2w-newsletter-popup__success:not([hidden]) {
	display: block;
}

.w2w-newsletter-popup__success:focus {
	outline: none;
}

@media (min-width: 1024px) {
	.w2w-modal__dialog.w2w-newsletter-popup__dialog {
		padding: 40px;
	}

	.w2w-newsletter-popup__title {
		font-size: 32px;
	}
}

@media (max-width: 768px) {
	.w2w-newsletter-popup__row {
		grid-template-columns: 1fr;
	}

	.w2w-modal__dialog.w2w-newsletter-popup__dialog {
		padding: 24px 20px;
	}

	.w2w-newsletter-popup__title {
		font-size: 24px;
	}

	/* Button - W2W, size=Mobile: 49px tall, pad 17/28, 15px label. */
	.w2w-newsletter-popup__submit {
		align-self: stretch;
		padding: 17px 28px;
		font-size: 15px;
	}
}