/* KnackHook Gov Core: banners and form. Colors meet WCAG 2.2 AA contrast (checked in tests). */

.kh-demo-banner { background: #1b1b1b; color: #fff; font-size: 0.875rem; }
.kh-demo-banner p { margin: 0 auto; max-width: 1200px; padding: 0.4rem 1rem; }

.kh-alert { border-bottom: 4px solid; }
.kh-alert--emergency { background: #b50909; border-color: #6f0b0b; color: #fff; }
.kh-alert--info { background: #faf3d1; border-color: #ffbe2e; color: #1b1b1b; }
.kh-alert__inner { margin: 0 auto; max-width: 1200px; padding: 0.75rem 1rem; display: grid; gap: 0.25rem; }
.kh-alert__title, .kh-alert__body p { margin: 0; }
.kh-alert a { color: inherit; text-decoration: underline; }
.kh-alert__dismiss { justify-self: start; margin-top: 0.25rem; background: transparent; color: inherit; border: 2px solid currentColor; border-radius: 4px; padding: 0.25rem 0.75rem; font: inherit; cursor: pointer; }

.kh-form { max-width: 40rem; }
.kh-form__group { margin-bottom: 1.5rem; }
.kh-form__group--error { border-left: 4px solid #b50909; padding-left: 1rem; }
.kh-form label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.kh-form__req { font-weight: 400; color: #565c65; }
.kh-form__hint { color: #565c65; margin: 0 0 0.25rem; }
.kh-form__error { color: #b50909; font-weight: 700; margin: 0 0 0.25rem; }
.kh-form input[type="text"], .kh-form input[type="email"], .kh-form select, .kh-form textarea {
	width: 100%; box-sizing: border-box; padding: 0.5rem; font: inherit; color: #1b1b1b; background: #fff;
	border: 2px solid #565c65; border-radius: 0;
}
.kh-form [aria-invalid="true"] { border-color: #b50909; }
.kh-form__errors { border: 4px solid #b50909; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.kh-form__errors h2, .kh-form__success h2 { margin-top: 0; font-size: 1.25rem; }
.kh-form__errors a { color: #b50909; font-weight: 700; }
.kh-form__success { border: 4px solid #00a91c; padding: 1rem 1.25rem; }
.kh-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kh-button { background: #1a4480; color: #fff; border: 0; border-radius: 4px; padding: 0.75rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer; }
.kh-button:hover { background: #162e51; }
.kh-form :focus-visible, .kh-alert :focus-visible, .kh-form__errors:focus, .kh-form__success:focus { outline: 3px solid #ffbe2e; outline-offset: 2px; }