/*
 * FedSmith Email Signup — Frontend Form Styles
 *
 * Structural defaults only. Visual theming for the sidebar form is
 * handled by the theme's .fs-newsletter context. The standalone page
 * form uses the :root variables below for success/error/info states.
 *
 * Theme stylesheets load after this file so any rule can be overridden
 * without !important.
 */

:root {
	--fs-es-error:        #a9271c;
	--fs-es-success-bg:   #e8f5e9;
	--fs-es-success-color: #1b5e20;
	--fs-es-info-bg:      #e8f0fe;
	--fs-es-info-color:   #1a237e;
}

/* -----------------------------------------------------------------------
   Honeypot — visually hidden and unreachable by keyboard
   ----------------------------------------------------------------------- */

.fs-es-honeypot {
	position: absolute;
	left:     -9999px;
	width:    1px;
	height:   1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------
   Email field — stacked label + input layout
   ----------------------------------------------------------------------- */

.fs-es-field {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
	margin-bottom:  0.75rem;
}

.fs-es-field label {
	font-size:   0.875rem;
	font-weight: 600;
}

.fs-es-field input[type="email"] {
	padding:       0.5rem 0.625rem;
	font-size:     1rem;
	background:    var(--bg-page);
	color:         var(--text-heading);
	border:        1px solid var(--line);
	border-radius: 3px;
	width:         100%;
	box-sizing:    border-box;
}

.fs-es-field input[type="email"][aria-invalid="true"] {
	border-color: var(--fs-es-error);
}

.fs-es-field input[type="email"]:focus-visible {
	outline:        2px solid var(--brand-navy);
	outline-offset: 2px;
}

:root[data-theme="dark"] .fs-es-field input[type="email"] {
	background:   #2A2A2A;
	border-color: #3A3A3A;
	color:        #E8E8E8;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .fs-es-field input[type="email"] {
		background:   #2A2A2A;
		border-color: #3A3A3A;
		color:        #E8E8E8;
	}
}

/* -----------------------------------------------------------------------
   Interest checkboxes fieldset — reset border/padding; vertical stack
   ----------------------------------------------------------------------- */

.fs-es-groups {
	border:        none;
	padding:       0;
	margin:        0 0 0.75rem;
}

.fs-es-groups legend {
	font-size:     0.875rem;
	font-weight:   600;
	margin-bottom: 0.375rem;
	padding:       0;
}

.fs-es-groups label {
	display:     flex;
	align-items: flex-start;
	gap:         0.5rem;
	font-size:   0.875rem;
	cursor:      pointer;
	line-height: 1.4;
	margin-bottom: 0.375rem;
}

.fs-es-groups input[type="checkbox"] {
	margin-top:  0.1em;
	flex-shrink: 0;
	cursor:      pointer;
}

.fs-es-groups input[type="checkbox"]:focus-visible {
	outline:        2px solid var(--brand-navy);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Inline validation error messages
   ----------------------------------------------------------------------- */

.fs-es-error {
	display:    block;
	min-height: 1.1em;
	color:      var(--fs-es-error);
	font-size:  0.8125rem;
	margin-top: 0.25rem;
}

/* -----------------------------------------------------------------------
   Submit button
   ----------------------------------------------------------------------- */

.fs-es-submit {
	margin-top: 0.5rem;
}

.fs-es-btn {
	background:     var(--brand-navy);
	color:          #fff;
	border:         0;
	border-radius:  3px;
	font-family:    "DM Sans", sans-serif;
	font-size:      0.875rem;
	font-weight:    700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding:        12px 28px;
	cursor:         pointer;
	transition:     background 0.15s;
}

.fs-es-btn:hover {
	background: var(--brand-deep-navy);
}

.fs-es-btn:focus-visible {
	outline:        2px solid var(--brand-navy);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Response message block (success / info / error)
   ----------------------------------------------------------------------- */

.fs-es-response {
	display:       block;
	margin-top:    0.75rem;
	padding:       0.75rem 1rem;
	border-radius: 3px;
	font-size:     0.9375rem;
	line-height:   1.5;
}

.fs-es-response:empty {
	display: none;
}

.fs-es-response--subscribed {
	background-color: var(--fs-es-success-bg);
	color:            var(--fs-es-success-color);
}

.fs-es-response--already_subscribed {
	background-color: var(--fs-es-info-bg);
	color:            var(--fs-es-info-color);
}

.fs-es-response--error {
	background-color: var(--bg-alert-red);
	color:            var(--fs-es-error);
}

/* -----------------------------------------------------------------------
   Hide form fields after successful submission
   ----------------------------------------------------------------------- */

.fs-es-form--submitted .fs-es-field,
.fs-es-form--submitted .fs-es-groups,
.fs-es-form--submitted .fs-es-submit {
	display: none;
}

/* -----------------------------------------------------------------------
   Accessibility: suppress all transitions for users who prefer reduced motion
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:        0.01ms !important;
		animation-iteration-count: 1      !important;
		transition-duration:       0.01ms !important;
	}
}