/* wp-notice-signup — front-end styles.
 *
 * Contrast is computed rather than eyeballed, and every pair below is stated
 * with its ratio. The previous version of this file failed badly: #b6bdc8 on
 * #f6f7fb is 1.7:1, and the button was #99a1af on #dce2ee at 1.9:1. Both are
 * roughly "invisible unless you already know what it says".
 *
 * A plugin cannot see the host theme's colours, so it has to be self-contained:
 * every rule here sets both a foreground and a background rather than
 * inheriting one and hoping. */

.wpns-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 999;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid #d7dce5;
	background: #ffffff;
	color: #1f2734;          /* 14.4:1 on white */
	box-shadow: 0 12px 30px rgb(15 23 42 / 16%);
}

.wpns-banner__content {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.wpns-banner__image {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}

.wpns-banner__copy {
	flex: 1 1 16rem;
}

.wpns-banner__title {
	margin: 0 0 2px;
	font-weight: 700;
	font-size: 1rem;
	color: #1f2734;
}

.wpns-banner__copy p {
	margin: 0;
	color: #46505f;          /* 8.3:1 on white */
	font-size: 0.9375rem;
}

.wpns-banner__button,
.wpns-signup-form button {
	border: 0;
	border-radius: 999px;
	padding: 12px 18px;
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	background: #1f4b8f;
	color: #ffffff;          /* 8.6:1 */
}

.wpns-banner__button:hover,
.wpns-signup-form button:hover {
	background: #16375f;
}

/* --- Modal ---------------------------------------------------------------
 * Hidden with the `hidden` attribute from JS, so no off-screen positioning
 * trick is needed. The old version parked it at left:-9999px while leaving it
 * in the tab order — visually gone, still reachable by keyboard. */

.wpns-modal-shell[hidden] {
	display: none;
}

.wpns-modal-shell {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgb(15 23 42 / 68%);
}

.wpns-modal-shell__dialog {
	position: relative;
	width: min(100%, 32rem);
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px;
	border-radius: 14px;
	background: #ffffff;
	color: #1f2734;
	box-shadow: 0 24px 60px rgb(15 23 42 / 35%);
}

.wpns-modal-shell__title {
	margin: 0 0 8px;
	padding-right: 2.5rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.wpns-modal-shell__dialog > p {
	margin: 0 0 16px;
	color: #46505f;
}

.wpns-modal-shell__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d7dce5;
	border-radius: 999px;
	background: #ffffff;
	color: #1f2734;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.wpns-modal-shell__close:hover {
	background: #eef2f7;
}

/* --- Forms --------------------------------------------------------------- */

.wpns-signup-form p {
	margin: 0 0 12px;
}

.wpns-signup-form label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1f2734;
}

.wpns-signup-form input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #7b8698;   /* 3.4:1 against white — clears the 3:1
	                                non-text contrast minimum for a control
	                                boundary */
	border-radius: 8px;
	background: #ffffff;
	color: #1f2734;
	font: inherit;
	font-size: 0.9375rem;
}

.wpns-success-message {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: #1d5c3a;              /* 6.6:1 on white */
}

.wpns-inline-signup {
	padding: 24px;
	border: 1px solid #d7dce5;
	border-radius: 14px;
	background: #ffffff;
	color: #1f2734;
}

.wpns-inline-signup__title {
	margin: 0 0 4px;
	font-size: 1.125rem;
	font-weight: 700;
}

.wpns-inline-signup > p {
	margin: 0 0 16px;
	color: #46505f;
}

/* --- Focus ---------------------------------------------------------------
 * A visible focus ring on everything interactive. The plugin sets its own
 * rather than relying on the host theme, because it cannot know whether the
 * theme has removed outlines. */

.wpns-banner :focus-visible,
.wpns-modal-shell :focus-visible,
.wpns-inline-signup :focus-visible {
	outline: 3px solid #1f4b8f;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Visually hidden but available to assistive tech. WordPress ships
 * .screen-reader-text on the front end via its own stylesheet, but a plugin
 * should not depend on a theme enqueueing it. */
.wpns-banner .screen-reader-text,
.wpns-modal-shell .screen-reader-text,
.wpns-inline-signup .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wpns-banner,
	.wpns-modal-shell,
	.wpns-modal-shell__dialog {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   DEMO FAILURE STYLES
   Applied only when a flag in get_demo_issue_flags() is switched on. Nothing
   below is active in the default build — the baseline scans clean.
   These are the original failing values, kept verbatim so the demo shows a
   real mistake rather than an exaggerated one.
   ========================================================================== */

/* color_contrast: the values this plugin actually shipped. */
.wpns-banner.wpns-demo-low-contrast {
	background: #f6f7fb;
	color: #b6bdc8;          /* 1.7:1 — fails at any size */
}

.wpns-banner.wpns-demo-low-contrast .wpns-banner__title,
.wpns-banner.wpns-demo-low-contrast .wpns-banner__copy p {
	color: #b6bdc8;
}

.wpns-banner.wpns-demo-low-contrast .wpns-banner__button,
.wpns-signup-form.wpns-demo-low-contrast button {
	background: #dce2ee;
	color: #99a1af;          /* 1.9:1 */
}

/* aria_hidden_focus: parked off-screen instead of hidden, so the dialog stays
   in the tab order while invisible.
   `inset` is reset to auto first. Leaving `inset: 0` in place while overriding
   only `left` produced an element ~11900px wide that still overlapped the
   viewport, and axe reported the rule as "needs review" rather than a
   violation — a demo that shows an inconclusive result is not a demo. These
   are the geometry values the plugin originally shipped. */
.wpns-modal-shell.wpns-demo-offscreen[aria-hidden="true"] {
	inset: auto;
	top: 0;
	left: -9999px;
	width: 100%;
	height: 100%;
	background: transparent;
}

.wpns-modal-shell.wpns-demo-offscreen[aria-hidden="false"] {
	inset: 0;
	background: rgb(15 23 42 / 68%);
}

/* missing_labels: the caption that looks like a label and is not one. */
.wpns-field-caption {
	display: block;
	margin-bottom: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1f2734;
}