/*
 * Layer: components. Core's password form (`.post-password-form`, 59 protected items) as a glass
 * card on porcelain (kit .nd-island), with the Members dot. The input and button are base.css's
 * .nd-input and the primary button (core adds wp-element-button in block themes); only the
 * layout and the error state are here. Utils' members-only message (`.nd-access-denied`) and the
 * restricted-content pattern (`.nd-restricted`) share the card.
 */
@layer components {

	.post-password-form,
	.nd-access-denied,
	.wp-block-group.nd-restricted {
		position: relative;
		box-sizing: border-box;
		display: grid;
		gap: 20px;
		max-width: 640px;
		padding: 40px 36px 36px;
		border: 1px solid var(--wp--custom--glass--island-border);
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--custom--glass--island);
		box-shadow: var(--wp--preset--shadow--island);
		-webkit-backdrop-filter: var(--wp--custom--blur--card);
		backdrop-filter: var(--wp--custom--blur--card);
	}

	/* The Members dot (kit .nd-tag--lock), top right as on the islands. */
	:is(.post-password-form, .nd-access-denied, .wp-block-group.nd-restricted)::before {
		content: "";
		position: absolute;
		top: 28px;
		right: 28px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: var(--wp--preset--color--cinnabar);
	}

	:is(.post-password-form, .nd-access-denied, .wp-block-group.nd-restricted) > * {
		margin: 0;
	}

	/* wpautop's stray </p> inside the form becomes an empty paragraph. */
	.post-password-form > p:empty {
		display: none;
	}

	.post-password-form > p:not(:has(input)),
	.nd-access-denied > p:first-child,
	.nd-restricted .nd-restricted__text {
		max-width: 46ch;
		padding-inline-end: 24px;
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--medium);
		line-height: var(--wp--custom--line-height--body);
	}

	/* The label wraps the input; the button sits beside it, dropping below on narrow cards. */
	.post-password-form > p:has(input[type="password"]) {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		align-items: flex-end;
	}

	.post-password-form label {
		display: grid;
		flex: 1 1 240px;
		gap: 8px;
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 600;
		line-height: 1;
	}

	.post-password-form input[type="password"] {
		width: 100%;
	}

	.post-password-form .wp-block-button {
		display: flex;
		flex: 0 0 auto;
	}

	.post-password-form [type="submit"] {
		min-height: 56px;
	}

	/* Q20b: an à-la-carte item's product link (utils, from prepare-courses meta). */
	.post-password-form > .nd-purchase {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 14px;
		align-items: baseline;
		max-width: none;
		padding-top: 20px;
		padding-inline-end: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
	}

	.nd-purchase__label {
		font-weight: 600;
	}

	.nd-purchase__link {
		color: var(--wp--preset--color--brand-deep);
		font-weight: 600;
		text-decoration: none;
	}

	.nd-purchase__link:hover {
		color: var(--wp--preset--color--brand);
		text-decoration: underline;
		text-underline-offset: var(--wp--custom--link--underline-offset);
	}

	/* Sign in · Join or upgrade · Purchase a course. */
	.nd-access-denied > p + p {
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--medium);
	}

	.nd-access-denied a {
		color: var(--wp--preset--color--brand-deep);
		font-weight: 600;
		text-decoration: none;
	}

	.nd-access-denied a:hover {
		color: var(--wp--preset--color--brand);
		text-decoration: underline;
		text-underline-offset: var(--wp--custom--link--underline-offset);
	}

	.nd-restricted .nd-restricted__title {
		font-family: var(--wp--preset--font-family--display);
		font-size: min(36px, var(--wp--preset--font-size--display-s));
		font-weight: 500;
		line-height: var(--wp--custom--line-height--display-s);
	}

	.nd-restricted .nd-restricted__actions {
		gap: 12px;
	}

	/* Wrong password (core adds the class and an alert since WP 6.8). */
	.post-password-form-invalid-password p {
		margin: 0;
	}

	/* Q9: a key error is the solid error colour with paper text. */
	.post-password-form-invalid-password {
		padding: 10px 16px;
		border-radius: var(--wp--preset--border-radius--panel);
		background-color: var(--wp--preset--color--error);
		color: var(--wp--preset--color--paper);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	.post-password-form.password-form-error input[type="password"] {
		border-color: var(--wp--preset--color--error);
	}

	/* CF7 (contact 746): the legacy form lists its fields; inputs and the submit are base.css/components.css. */
	.wpcf7-form :is(ul, ol) {
		display: grid;
		gap: 20px;
		max-width: 640px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wpcf7-form li {
		margin: 0;
	}

	.wpcf7-form li > p {
		display: grid;
		gap: 8px;
		margin: 0;
	}

	.wpcf7-form label {
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 600;
		line-height: 1.3;
	}

	.wpcf7-form :is(input:not([type="submit"], [type="hidden"]), textarea) {
		width: 100%;
	}

	/* CF7 validation (Q9): field tips in the error colour, the form-level message on the error surface. */
	.wpcf7-form .wpcf7-not-valid {
		border-color: var(--wp--preset--color--error);
	}

	.wpcf7-form .wpcf7-not-valid-tip {
		margin-top: 6px;
		color: var(--wp--preset--color--error);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
		margin: 24px 0 0;
		padding: 16px 20px;
		border: 1px solid var(--wp--preset--color--error);
		border-radius: var(--wp--preset--border-radius--panel);
		background-color: var(--wp--preset--color--error-surface);
		color: var(--wp--preset--color--error-surface-ink);
		font-size: var(--wp--preset--font-size--small);
	}

	@media (max-width: 600px) {

		:is(.post-password-form, .nd-access-denied, .wp-block-group.nd-restricted) {
			padding: 32px 24px 24px;
		}

		.post-password-form .wp-block-button,
		.post-password-form [type="submit"] {
			width: 100%;
		}
	}
}