/**
 * Password form.
 *
 * Every value the Customizer can change is read from a custom property with a
 * literal fallback, so this file renders correctly on its own and the generated
 * palette simply overrides it. Nothing here redefines a property, which is what
 * lets the Customizer's live preview set them on :root and have the change
 * appear instantly.
 *
 * Written to sit inside somebody else's theme without a fight: no !important
 * anywhere, and everything scoped under .portcullis-gate.
 */

.portcullis-gate {
	max-width: var(--pc-width, 432px);
	margin: 2.5rem auto;
	font-family: var(--pc-font, inherit);
	font-size: 1rem;
	line-height: 1.5;
	text-align: var(--pc-align, center);
}

.portcullis-align-left .portcullis-gate {
	text-align: left;
}

.portcullis-standalone {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: 1.5rem;
	background: var(--pc-bg, #f6f6f4);
	color: var(--pc-text, #1c1c1e);
	font-family: var(--pc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.portcullis-standalone .portcullis-gate {
	width: 100%;
	margin: 0;
}

.portcullis-form {
	padding: var(--pc-padding, 28px);
	border: 1px solid var(--pc-border, #dcdcd8);
	border-radius: var(--pc-radius, 10px);
	background: var(--pc-card, #fff);
	box-shadow: var(--pc-shadow, 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.07));
	color: var(--pc-text, #1c1c1e);
}

.portcullis-logo {
	display: block;
	max-height: var(--pc-logo-height, 56px);
	width: auto;
	margin: 0 auto 1.25rem;
}

.portcullis-align-left .portcullis-logo {
	margin-left: 0;
}

.portcullis-title {
	margin: 0 0 0.4rem;
	font-family: inherit;
	font-size: var(--pc-title-size, 22px);
	line-height: 1.25;
	color: inherit;
}

.portcullis-message {
	margin: 0 0 1.25rem;
	color: var(--pc-muted, #5f6066);
}

.portcullis-error {
	margin: 0 0 1rem;
	padding: 0.6rem 0.75rem;
	border-radius: calc(var(--pc-radius, 10px) - 4px);
	background: var(--pc-error-wash, #f7e9e8);
	color: var(--pc-error, #b3261e);
	font-size: 0.925rem;
	text-align: left;
}

.portcullis-field {
	margin: 0 0 1rem;
	text-align: left;
}

.portcullis-label {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--pc-muted, #5f6066);
}

.portcullis-input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--pc-border, #dcdcd8);
	border-radius: calc(var(--pc-radius, 10px) - 3px);
	background: var(--pc-input-bg, #fff);
	color: var(--pc-text, #1c1c1e);
	font: inherit;
	line-height: 1.3;
}

.portcullis-input:focus {
	outline: 2px solid var(--pc-accent, #1c1c1e);
	outline-offset: 1px;
}

.portcullis-button {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: calc(var(--pc-radius, 10px) - 3px);
	background: var(--pc-accent, #1c1c1e);
	color: var(--pc-accent-text, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.portcullis-button:hover {
	opacity: 0.9;
}

.portcullis-button[disabled],
.portcullis-input[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/**
 * The in-theme gate page.
 *
 * This block sits between a theme's header and footer without knowing what
 * either of them opened, so it centres itself rather than relying on the theme
 * to place it. The top padding clears the fixed and transparent-overlay headers
 * that portfolio themes tend to use, where content is normally offset by a page
 * wrapper this markup is not inside.
 */
.portcullis-gate-page {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	/*
	 * Themes wrap content in a flex container more often than not, and this
	 * element is a child of whatever that turns out to be. Growing to fill the
	 * space and stretching across it is what puts the form in the middle of the
	 * content area rather than at the top of it.
	 */
	flex: 1 1 auto;
	align-self: stretch;

	/* A floor for themes that leave their content area to collapse. */
	min-height: var(--pc-page-min-height, 60vh);

	/*
	 * Centring handles the spacing on a tall page. This padding is what keeps
	 * the card clear of a fixed or transparent header on a short one, where
	 * there is no room to centre into. Slightly heavier at the top, both to
	 * clear that header and because a touch above centre reads as centred.
	 */
	padding: var(--pc-page-padding-top, clamp(5rem, 12vh, 8rem))
		clamp(1rem, 5vw, 2rem)
		var(--pc-page-padding-bottom, clamp(3rem, 8vh, 5rem));

	background: var(--pc-page-bg, transparent);
	clear: both;
}

.portcullis-gate-page .portcullis-gate-article {
	width: 100%;
	max-width: var(--pc-width, 432px);
}

.portcullis-gate-page .portcullis-gate {
	margin: 0;
}

.portcullis-gate-heading {
	margin: 0 0 1.1rem;
	font-family: var(--pc-font, inherit);
	font-size: calc(var(--pc-title-size, 22px) * 1.35);
	line-height: 1.15;
	text-align: var(--pc-align, center);
	color: var(--pc-text, inherit);
	text-wrap: balance;
}

.portcullis-align-left .portcullis-gate-heading {
	text-align: left;
}

.portcullis-teaser {
	color: var(--pc-muted, #5f6066);
	font-style: italic;
}

.portcullis-logout {
	font-size: 0.9rem;
}

.portcullis-context-shortcode {
	margin: 1.5rem 0;
}

.portcullis-preview-note {
	max-width: var(--pc-width, 432px);
	margin: 1rem auto 0;
	color: var(--pc-muted, #5f6066);
	font-size: 0.85rem;
	text-align: center;
}

/**
 * Fallback dark palette for the case where the generated stylesheet never made
 * it onto the page (a stray caching layer, or styles filtered off). Custom
 * properties set by the Customizer take precedence over these, because those
 * are printed later in the cascade at the same specificity.
 */
@media (prefers-color-scheme: dark) {
	.portcullis-standalone {
		background: var(--pc-bg, #131316);
		color: var(--pc-text, #f2f2f4);
	}

	.portcullis-form {
		border-color: var(--pc-border, #33333a);
		background: var(--pc-card, #1d1d21);
		color: var(--pc-text, #f2f2f4);
	}

	.portcullis-input {
		border-color: var(--pc-border, #33333a);
		background: var(--pc-input-bg, #161619);
		color: var(--pc-text, #f2f2f4);
	}

	.portcullis-button {
		background: var(--pc-accent, #f2f2f4);
		color: var(--pc-accent-text, #16161a);
	}

	.portcullis-message,
	.portcullis-label,
	.portcullis-teaser {
		color: var(--pc-muted, #a0a0a8);
	}
}