/*
 * components/password-form.css — the form on a password-protected page.
 *
 * Markup comes from fcs_password_form() in functions.php, which replaces core's
 * get_the_password_form() output. On a protected page that form is ALL the
 * post content prints, so it carries its own hero band (styled like the flat
 * #edf5f8 interior hero, Figma 7953:2768) followed by a centred form card in
 * the site's form language (56px controls, 6px radius, primary button — see
 * components/forms.css).
 */

.fcs-password {
	--fcs-button-wipe: rgb( 255 255 255 / 18% );
}

/* Hero band ------------------------------------------------------------- */

.fcs-password__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px var( --fcs-gutter );

	/*
	 * Interior pages have the white breadcrumb bar between the header's own
	 * #edf5f8 "Your Journey Starts Here" band and the hero. There are no
	 * breadcrumbs here, so a hairline keeps the two bands from merging.
	 */
	border-top: 1px solid var( --wp--preset--color--stroke );
	background-color: var( --wp--preset--color--surface );
	text-align: center;
}

.fcs-password__eyebrow {
	color: var( --wp--preset--color--link );
}

.fcs-password__title {
	margin: 0;
	font-size: var( --wp--preset--font-size--display );
	line-height: 1;
	color: var( --wp--preset--color--foreground );
}

/* Form card ------------------------------------------------------------- */

.fcs-password__body {
	padding: 64px var( --fcs-gutter );
	background-color: var( --wp--preset--color--background );
}

.fcs-password__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 512px;
	margin-inline: auto;
	padding: 40px;
	border: 1px solid var( --wp--preset--color--stroke );
	border-radius: 12px;
	background-color: var( --wp--preset--color--background );
	box-shadow: var( --fcs-shadow-md );
}

.fcs-password__intro {
	margin: 0 0 16px;
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--muted );
}

.fcs-password__error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-inline-start: 4px solid #b42318;
	border-radius: 6px;
	background-color: #fef3f2;
	font-size: var( --wp--preset--font-size--small );
	color: #b42318;
}

.fcs-password__label {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	line-height: 1.4286;
	color: var( --wp--preset--color--foreground );
}

.fcs-password__row {
	display: flex;
	gap: 12px;
}

.fcs-password__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px;
	padding: 0 16px;
	border: 1px solid var( --wp--preset--color--stroke );
	border-radius: 6px;
	background-color: var( --wp--preset--color--background );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--foreground );
}

.fcs-password__input:focus {
	border-color: var( --wp--preset--color--link );
	outline: 2px solid var( --wp--preset--color--link );
	outline-offset: 1px;
}

.fcs-password__input[aria-invalid="true"] {
	border-color: #b42318;
}

.fcs-password__submit {
	flex: 0 0 auto;
	justify-content: center;
	height: 56px;
	border: 0;
	cursor: pointer;
}

/* Mobile ---------------------------------------------------------------- */

@media ( max-width: 767px ) {
	.fcs-password__hero,
	.fcs-password__body {
		padding-block: 40px;
	}

	.fcs-password__title {
		font-size: var( --wp--preset--font-size--h-2 );
		line-height: 1.111;
	}

	.fcs-password__form {
		padding: 24px;
	}

	.fcs-password__row {
		flex-direction: column;
	}
}