/* Referral page: focused form embed container with generous vertical rhythm.
   Reuses .kr-audience-intro and .kr-cta-band from audience.css. */

.kr-referral-intro {
	max-width: var(--k-container-narrow);
	margin-inline: auto;
	margin-bottom: var(--k-space-xl);
}

.kr-referral-form-section {
	padding-block: var(--k-space-2xl);
	background-color: var(--k-gray);
}

.kr-form-embed {
	max-width: var(--k-container);
	margin-inline: auto;
}

.kr-referral-after-form {
	padding-block: var(--k-space-xl) var(--k-space-2xl);
}

/* CognitoForms seamless script mounts the form as real DOM (not an iframe).
   Override the .cog-form__container white background so our section color shows through.
   This is the only CognitoForms class with an opaque background; everything else is already transparent. */
.kr-form-embed .cog-form__container {
	/* biome-ignore lint/complexity/noImportantStyles: CognitoForms ships inline styled CSS that we must override */
	background-color: transparent !important;
}

/* Hide CognitoForms' built-in form header (gradient banner + Krossroads logo + form title).
   We already render our own page title; the logo is duplicated from our nav. Hiding .cog-header
   also resolves the awkward h1 -> h2 -> h1 outline the form would otherwise inject. */
.kr-form-embed .cog-header {
	/* biome-ignore lint/complexity/noImportantStyles: CognitoForms ships inline styled CSS that we must override */
	display: none !important;
}

/* Force the site body font (fdsl) onto every CognitoForms text element.
   CognitoForms ships two defaults -- Arial for body/inputs and Open Sans Condensed for
   labels/buttons -- both set inline by their styled CSS, so we need !important to win.
   Selectors are enumerated rather than using *, per the project's CSS rules. */
.kr-form-embed .cog-form,
.kr-form-embed .cog-form__container,
.kr-form-embed .cog-section,
.kr-form-embed .cog-section__title,
.kr-form-embed .cog-section__description,
.kr-form-embed .cog-label,
.kr-form-embed .cog-input,
.kr-form-embed .cog-choice__label,
.kr-form-embed .cog-button,
.kr-form-embed .cog-confirmation,
.kr-form-embed .el-input__inner,
.kr-form-embed .el-textarea__inner,
.kr-form-embed .el-button,
.kr-form-embed .el-select,
.kr-form-embed .el-radio,
.kr-form-embed .el-checkbox {
	/* biome-ignore lint/complexity/noImportantStyles: CognitoForms ships inline styled CSS that we must override */
	font-family: var(--k-font-body) !important;
}