/*
 * Protected page screen.
 *
 * Loaded only on password-protected requests (inc/protected-page/form.php),
 * and deliberately standalone rather than part of the Tailwind build: it must
 * ship on a screen the rest of the design system does not style, and only
 * there.
 *
 * Figma: desktop 1440 (7999:15373), tablet 834 (7999:15393), mobile 375
 * (7999:15416). Colours are the design tokens; the three configurable ones are
 * re-declared as custom properties by the inline block in form.php.
 */

/*
 * The document is a flex column so the screen can take exactly the height left
 * under the header — the tablet frame's own arrangement. `#main` is the
 * theme's `<main class="min-h-screen">`; its 100vh has to be undone, or with a
 * header above it the page runs a whole viewport past the fold.
 */
body.tg-protected-page {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
	flex-direction: column;
}

body.tg-protected-page #main {
	display: flex;
	min-height: 0;
	flex: 1 1 auto;
	flex-direction: column;
}

.tg-pp {
	--tg-pp-button: #ca2f2e; /* Brand/400 */
	--tg-pp-button-hover: #a82524;
	--tg-pp-card: #ffffff; /* Background/bg-primary */

	--tg-pp-page: #f7f7f7; /* BG */
	--tg-pp-icon: #0a0d12; /* Background/bg-primary-solid */
	--tg-pp-title: #181d27; /* Text/text-primary (900) */
	--tg-pp-label: #414651; /* Text/text-secondary (700) */
	--tg-pp-placeholder: #717680; /* Text/text-quaternary (500) */
	--tg-pp-border: #d5d7da; /* Border/border-primary */
	--tg-pp-error: #ca2f2e;

	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	/*
	 * The flex growth above is exact while the header is in flow. A header
	 * taken out of flow (a fixed Elementor header) cannot be seen by it, so
	 * this floor stands in — override --tg-pp-header when a header is taller.
	 */
	min-height: calc(100vh - var(--tg-pp-header, 96px));
	min-height: calc(100dvh - var(--tg-pp-header, 96px));
	margin: 0;
	background-color: var(--tg-pp-page);
	color: var(--tg-pp-label);
	font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.tg-pp *,
.tg-pp *::before,
.tg-pp *::after {
	box-sizing: border-box;
}

/* Left-hand photograph. 708 of the frame's 1440, so 49.2%. */
.tg-pp__media {
	flex: 0 0 49.2%;
	min-width: 0;
	background-color: var(--tg-pp-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Right-hand panel. */
.tg-pp__panel {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: center;
	padding: 40px 28px;
}

/* The card. Insets: mobile 20, tablet 56, desktop 40. */
.tg-pp__card {
	width: 100%;
	max-width: 524px;
	margin-inline: auto;
	padding: 40px 20px;
	background-color: var(--tg-pp-card);
	text-align: center;
}

.tg-pp__icon {
	display: grid;
	width: 40px;
	height: 40px;
	margin: 0 auto 12px;
	place-items: center;
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--tg-pp-icon);
	color: #ffffff;
}

.tg-pp__lock {
	display: block;
	width: 12px;
	height: 15px;
}

/* Heading 6 / Regular. */
.tg-pp__title {
	margin: 0;
	color: var(--tg-pp-title);
	font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}

.tg-pp__error {
	margin: 8px 0 0;
	color: var(--tg-pp-error);
	font-size: 14px;
	line-height: 20px;
}

/* 344 of the card's 524, centred. */
.tg-pp__form {
	display: flex;
	max-width: 344px;
	margin: 40px auto 0;
	flex-direction: column;
	text-align: left;
}

.tg-pp__label {
	margin-bottom: 12px;
	color: var(--tg-pp-label);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.tg-pp__input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--tg-pp-border);
	border-radius: 4px;
	background-color: #ffffff;
	color: var(--tg-pp-title);
	font: inherit;
	font-size: 16px;
	line-height: 24px;
}

.tg-pp__input::placeholder {
	color: var(--tg-pp-placeholder);
	opacity: 1;
}

.tg-pp__input:focus-visible {
	outline: 2px solid var(--tg-pp-button);
	outline-offset: 2px;
}

/* Body sm / Regular All Caps. */
.tg-pp__button {
	display: block;
	width: 100%;
	max-width: 260px;
	height: 40px;
	margin: 32px auto 0;
	padding: 0 24px;
	border: 0;
	border-radius: 4px;
	background-color: var(--tg-pp-button);
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.tg-pp__button:hover {
	background-color: var(--tg-pp-button-hover);
}

.tg-pp__button:focus-visible {
	outline: 2px solid var(--tg-pp-title);
	outline-offset: 2px;
}

/* Tablet 834: card 456 wide in 56px insets, Heading 4 32/40, Body md 16/24. */
@media (min-width: 768px) {
	.tg-pp__card {
		max-width: 456px;
		padding: 40px 56px;
	}

	.tg-pp__icon {
		width: 60px;
		height: 60px;
	}

	.tg-pp__lock {
		width: 18px;
		height: 23px;
	}

	.tg-pp__title {
		font-size: 32px;
		line-height: 40px;
	}

	.tg-pp__label {
		font-size: 16px;
		line-height: 24px;
	}

	.tg-pp__button {
		height: 56px;
		font-size: 16px;
		line-height: 24px;
	}
}

/* Desktop: card 524 wide in 40px insets. */
@media (min-width: 1024px) {
	.tg-pp__card {
		max-width: 524px;
		padding: 40px;
	}

	.tg-pp__button {
		height: 60px;
	}
}

/*
 * Tablet (834) and mobile (375) carry no photograph: the card sits centred on
 * the same grey field (frames 7999:15393 and 7999:15416). The image belongs to
 * the split alone, so it only exists once the split does — at 1024 and up.
 */
@media (max-width: 1023px) {
	.tg-pp__media {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tg-pp__button {
		transition: none;
	}
}