/**
 * LFBC password-protected content form.
 *
 * Restyles core's get_the_password_form() output (filtered in functions.php,
 * handle: lfbc-password-form) to match the site's design system. The title
 * itself is built as an "LP Hero — No Image" band (see the comment on
 * lfbc_password_form() in functions.php) and styled entirely by the
 * already-enqueued assets/css/patterns/lp-hero.css — nothing here targets it.
 * Below the hero: Noto Sans body copy, an Oatmeal input matching the
 * Gravity Forms / header-search field treatment (assets/css/gforms.css),
 * and the site's pill-shaped Primary button (assets/css/buttons.css) for
 * "Enter".
 *
 * Enqueued frontend + editor in functions.php.
 */

/* Guarantee true edge-to-edge breakout for the hero band regardless of which
   template wraps the password form. Core's `.alignfull` reaches the viewport
   edge by negating the theme's *root* padding var — correct when the
   containing block is already viewport-width (e.g. page.html's constrained
   post-content), but on page-narrow the containing block is the fixed
   1012px `.lfbc-content--narrow` box, so that same offset falls far short
   and the band renders visibly inset. The viewport-relative 50vw trick
   breaks out the same distance from any containing block. */
.lfbc-password-form__hero {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* `vw` includes the scrollbar gutter on browsers that reserve space for one,
   while the `%` half of the calc above doesn't — a few px of mismatch that
   overflows the page horizontally on any browser/OS with a reserved-space
   scrollbar. `.site-content` (<main>) is already unconstrained/viewport-width
   on every template, so clipping there trims only that stray sliver without
   touching the intended full-bleed width. */
.site-content {
	overflow-x: clip;
}

/* lp-hero.css's no-image variant pads 48/56 (mobile) and 64/80 (desktop) —
   intentionally asymmetric for the full pattern (eyebrow + title + body),
   where a bit of extra bottom padding balances that stack. With only the
   title left, that reads as off-center, so pull bottom back to match top.
   !important: same specificity as lp-hero.css's rule, and password-form.css
   is enqueued before the pattern CSS loop, so lp-hero.css would win the
   cascade without it. */
.lfbc-password-form__hero .lfbc-lp-hero__inner {
	padding-bottom: 48px !important;
}

@container (min-width: 1024px) {
	.lfbc-password-form__hero .lfbc-lp-hero__inner {
		padding-bottom: 64px !important;
	}
}

/* Breathing room above the message (below the hero) and before the footer,
   both sized to 3/4 of the fluid h1 (32px–56px, see typography.css) so they
   read as equal.
   The bottom margin needs !important because core's
   :where(.is-layout-constrained) > :last-child rule zeros out a last child's
   margin-block-end, and this div is the post-content wrapper's last child —
   same reason .lfbc-page-narrow above needs it; the top margin isn't a
   first-child so it isn't affected.
   The bottom margin also subtracts 20px (get-updates.css's fixed
   `.lfbc-get-updates { margin-top: 20px }`): core's `.entry-content` is
   `display: flow-root`, which traps this div's own margin as real space
   instead of letting it collapse with the footer's margin the way the top
   gap collapses with the hero's own bottom padding — so without the
   subtraction the two margins would stack and the bottom gap would render
   20px larger than the top. */
.lfbc-password-form {
	margin-block-start: calc(var(--wp--preset--font-size--display-1-responsive) * 0.75);
	margin-block-end: calc(var(--wp--preset--font-size--display-1-responsive) * 0.75 - 20px) !important;
}

/* On the page-narrow template, the post-content wrapper itself carries
   .lfbc-page-narrow (layout.css), which adds its own 48px margin-block-end
   for normal page bodies. That margin lives on the wrapper, not on this div,
   so it stacks on top of the compensation above instead of being covered by
   it, inflating the bottom gap by 48px more than page.html's equivalent.
   Zero it out specifically when it's this div the wrapper contains — normal
   (non-protected) page-narrow content never matches :has(> .lfbc-password-form)
   and keeps its usual spacing. */
.lfbc-page-narrow:has(> .lfbc-password-form) {
	margin-block-end: 0 !important;
}

.lfbc-password-form__message {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: var(--wp--preset--color--soft-black-500);
	margin: 0;
	text-align: center;
}

/* Shown only after a wrong-password attempt (core detects this itself and
   passes the message through). Matches the Poppy-900 error color Gravity
   Forms uses for invalid fields (assets/css/gforms.css). */
.lfbc-password-form__error {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: var(--wp--preset--font-size--body-base);
	font-weight: 600;
	color: var(--wp--preset--color--poppy-900);
	margin: 16px 0 0;
	text-align: center;
}

.lfbc-password-form__form--error input[type="password"] {
	border-color: var(--wp--preset--color--poppy-900);
}

.lfbc-password-form__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
	margin-block-start: 24px;
}

/* Ollie parent's global `label { width: 100%; display: block; }`
   (wp-content/themes/ollie/style.css) would otherwise force this onto its
   own full-width row, wrapping input+button below instead of alongside it. */
.lfbc-password-form__form label {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: var(--wp--preset--font-size--body-base);
	font-weight: 600;
	color: var(--wp--preset--color--soft-black-500);
	width: auto;
}

/* Keyed on the class, not [type="password"], so the styling holds when the
   "Show password" toggle switches the field to type="text". */
.lfbc-password-form__form .lfbc-password-form__input {
	background-color: var(--wp--preset--color--oatmeal-500);
	border: 1px solid var(--wp--preset--color--oatmeal-700);
	border-radius: 5px;
	padding: 11px 18px;
	color: var(--wp--preset--color--soft-black-500);
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 16px;
	line-height: 1.5;
	min-width: 220px;
	box-shadow: none;
}

.lfbc-password-form__form .lfbc-password-form__input:focus {
	border-color: var(--wp--preset--color--pollen-400);
	outline: none;
	box-shadow: none;
}

/* Matches .wp-block-button__link (assets/css/buttons.css): pill shape,
   Nootka-Rose fill, trailing arrow, Poppy hover — the site's Primary button. */
.lfbc-password-form__submit {
	display: inline-flex;
	align-items: center;
	background-color: var(--wp--preset--color--nootka-rose-900);
	color: var(--wp--preset--color--white);
	border: 1.3px solid var(--wp--preset--color--white);
	border-radius: 100px;
	padding: 14px 20px;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lfbc-password-form__submit::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 4px;
	background-color: currentColor;
	-webkit-mask-image: url(../images/icons/arrow-right.svg);
	mask-image: url(../images/icons/arrow-right.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	vertical-align: middle;
}

.lfbc-password-form__submit:hover,
.lfbc-password-form__submit:focus {
	background-color: var(--wp--preset--color--poppy-500);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

/* "Show password" toggle — sits on its own row below the input + submit
   button (flex-basis: 100% pushes it to a new line of the wrapping flex form). */
.lfbc-password-form__toggle {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Above 550px the input + button row is wide enough that the centered toggle
   reads as too far right; nudge it left to sit under the input. Below 550px the
   row wraps/narrows, so the offset is dropped to keep the toggle from pushing
   off the left edge. */
@media (min-width: 450px) {
	.lfbc-password-form__toggle {
		margin-left: -85px;
	}
}

.lfbc-password-form__toggle-input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--nootka-rose-900);
	cursor: pointer;
}

/* Ollie parent's global `label { width: 100%; display: block; }` would
   otherwise break this off onto its own full-width line. */
.lfbc-password-form__toggle-label {
	width: auto;
	margin: 0;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--preset--color--soft-black-500);
	cursor: pointer;
}