/**
 * Oxbow Page Password — the front-end form.
 *
 * Everything is scoped under .oxpp-gate so the plugin cannot leak styles into
 * the theme. The palette is the warm neutrals and club green shared with the
 * booking and events calendars, so the form does not look like it arrived
 * from somewhere else.
 */

.oxpp-gate {
	--oxpp-green: #4a6b3a;
	--oxpp-green-dark: #3a552d;
	--oxpp-border: #d8d2c8;
	--oxpp-panel: #fff;
	--oxpp-shade: #f6f4f0;
	--oxpp-text: #2c2c2c;
	--oxpp-muted: #8a8378;
	--oxpp-error: #b32d2e;

	/* The gate fills the window and holds the form in the middle of it, so the
	   password screen reads as a screen rather than as a small box adrift in
	   an empty page. The theme's header stays above it; the footer ends up
	   just below the fold. */
	box-sizing: border-box;
	min-height: 100vh;
	/* dvh follows the mobile browser's chrome as it slides away; the vh above
	   is the fallback for anything that does not know the unit. */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
	color: var(--oxpp-text);
}

/* Inside all that room, both stay a comfortable reading width. */
.oxpp-page-title,
.oxpp-form {
	box-sizing: border-box;
	width: 100%;
	max-width: 26rem;
}

/* The page's own title, above the panel rather than inside it, so it reads as
   the page you are on rather than as part of the form. */
.oxpp-page-title {
	margin: 0 0 1rem;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.25;
	color: var(--oxpp-text);
}

.oxpp-form {
	padding: 1.75rem;
	background: var(--oxpp-panel);
	border: 1px solid var(--oxpp-border);
	border-radius: 6px;
	/* Just enough lift to read as a panel sitting on the page. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.oxpp-heading {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--oxpp-green-dark);
}

.oxpp-message {
	margin: 0 0 1.25rem;
	color: var(--oxpp-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.oxpp-error {
	margin: 0 0 1rem;
	padding: 0.6rem 0.75rem;
	border-left: 3px solid var(--oxpp-error);
	background: #fdf2f2;
	color: var(--oxpp-error);
	font-size: 0.9rem;
}

.oxpp-label {
	display: block;
	margin: 0 0 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.oxpp-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	/* 16px so iOS does not zoom the page when the field is tapped. */
	font-size: 16px;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--oxpp-border);
	border-radius: 4px;
	background: var(--oxpp-shade);
	color: var(--oxpp-text);
}

.oxpp-input:focus {
	outline: 2px solid var(--oxpp-green);
	outline-offset: 1px;
	background: var(--oxpp-panel);
}

.oxpp-submit {
	display: block;
	width: 100%;
	margin-top: 1rem;
	/* 44px tall in practice — the smallest that is reliably tappable. */
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: 4px;
	background: var(--oxpp-green);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.oxpp-submit:hover,
.oxpp-submit:focus {
	background: var(--oxpp-green-dark);
}

.oxpp-submit:focus-visible {
	outline: 2px solid var(--oxpp-green-dark);
	outline-offset: 2px;
}

/* The one-line stand-in used where the content would otherwise be printed
   away from its own page — a listing, a widget, a search result. */
.oxpp-locked-note {
	color: #8a8378;
	font-style: italic;
}