/*
 * db-newsletter.css v1.1.0
 * Background, heading and button come from the global .newsletter, .button and
 * .dark-red classes in styles.css (already tokenized). This file only adds what
 * the component itself needs. Site design tokens with fallbacks throughout.
 */

.db-newsletter__form {
	display: inline-block;
}

/* Email field - fonts and spacing follow the accessibility panel */
.db-newsletter .homepage-body-newsletter-email-input {
	font-family: var(--font-primary, 'Lato', sans-serif);
	letter-spacing: var(--letter-spacing-body, normal);
	word-spacing: var(--word-spacing-body, normal);
	box-sizing: border-box;
	min-height: 33px;
}

.db-newsletter .homepage-body-newsletter-email-input::placeholder {
	color: var(--text-subtle, #6b6b6b); /* 5.33:1 on white */
	opacity: 1;
}

/* Larger text, bolder text, readable spacing: field grows instead of clipping */
html:is([data-text-size], [data-spacing], [data-weight]) .db-newsletter .homepage-body-newsletter-email-input {
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	vertical-align: top;
}

/* type="email" no longer matches the site's small-phone input[type="text"] width rule - keep field and button on one line */
@media (max-width: 375px) {
	.db-newsletter .homepage-body-newsletter-email-input {
		width: 150px;
	}
}

/* Keyboard focus - white ring on the dark textured background */
.db-newsletter input:focus-visible {
	outline: 2px solid var(--color-white, #ffffff);
	outline-offset: 2px;
}

/* Success message.
   It stays in the page as a status region (screen readers only announce changes
   to regions that are rendered), visually hidden until it has text. */
.db-newsletter__message {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.db-newsletter__message.db-newsletter__message--visible {
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 8px auto 0;
	max-width: 600px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	padding: 8px 14px;
	font-family: var(--font-primary, 'Lato', sans-serif);
	font-size: var(--font-size-sm, 14px);
	font-weight: var(--font-weight-bold, 700);
	text-transform: none;
	letter-spacing: var(--letter-spacing-body, normal);
	word-spacing: var(--word-spacing-body, normal);
	color: var(--status-success-text, #3c763d);             /* 4.57:1 on the background */
	background-color: var(--status-success-bg, #dff0d8);
	border: 1px solid var(--status-success-border, #d6e9c6);
	border-radius: 4px;
}