/*
   Rhinory v4 — /login page-scoped CSS.

   Source of truth: prototypes/13/14-login.html (#cd-login-styles).
   Brief: docs/briefs/2026-08-06-gate-signin-return-redirect.md (Pass 2).

   SCOPE BOUNDARY — read before editing:
   This file owns everything the THEME renders on this page: the section
   backdrop, the scrim, the return link, the card, the return-context chip,
   the SDK-failure fallback, and the card foot. It owns NOTHING inside the
   Commerce7 form, and nothing in the site header/footer.
   The form is branded exclusively by re-setting --c7-* / --winery-c7-*
   variables scoped to .winery-c7-login-form, and that block lives in
   assets/css/c7-overrides.css with the rest of the C7 variable surface.
   ZERO inner .c7-* selectors appear in this file or that one. The prototype's
   #cd-c7-sdk-emulation block is a stand-in for Commerce7's own stylesheet and
   is explicitly not shipped.

   REGISTER: light-warm. The card matches the wine PDP the visitor came from
   and will be returned to — continuity in, continuity out — while the
   backdrop stays in the dark cinematic register so the card reads as a
   lightbox floating over the estate.

   CHROME (Pass 2b): /login carries the STANDARD site header + footer. The
   chromeless treatment shipped in Pass 2 read as an embed / a broken page, so
   it was reversed. The consequence for this file is structural, not cosmetic:
   the backdrop and scrim are absolutely positioned INSIDE .lp-stage rather
   than fixed to the viewport. A fixed layer would paint over the header and
   footer, which is the whole thing this pass restores. Nothing here may style
   `body` itself for the same reason.

   Enqueued only on is_page('login') (functions.php). The .lp-* selectors are
   page-unique.
*/

/* ---------------------------------------------------------------
   Local tokens.

   --paper / --ink-warm / --rhino-warm / --rule-warm* / --acacia / --ivory
   are global theme tokens (style.css :root). --burgundy, --card and --card-2
   are v13 light-warm tokens that have not been promoted into the theme's
   global palette yet, so they are declared here as page-local values with
   the v13 originals as their source. When the v13 palette lands globally,
   delete these three and let the globals through — the var() references
   below already resolve to whatever is in scope.
   Source: prototypes/13/v13-shared.css:33-36
   --------------------------------------------------------------- */
body.page-login {
	--burgundy:    #520000;
	--burgundy-dk: #3D0000;
	--card:        #F4EEE0;
	--card-2:      #EAE1CE;
	--login-radius: 3px;
}

/* ---------------------------------------------------------------
   Stage — the login SECTION. It is a normal page section between the
   site header and footer, and it is the containing block for the
   backdrop: `position: relative` here is what keeps the atmosphere
   inside the section instead of over the chrome.

   `overflow: hidden` clips the backdrop's scale(1.12) blur bleed at the
   section's own edges — the job the old full-viewport layer got from
   `body { overflow-x: hidden }`.

   min-height gives the section enough vertical presence to read as a
   destination rather than a stripe, without pinning it to the viewport:
   a tall card (long wine name, stacked form errors) grows the section
   instead of clipping.
   --------------------------------------------------------------- */
body.page-login .lp-stage {
	position: relative;
	isolation: isolate;                  /* keeps the card/backdrop z-order out of the nav's */
	overflow: hidden;
	background: #14100D;                 /* deep warm ground under the photo */
	color: var(--ivory);
	min-height: min(70vh, 760px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 64px 24px 72px;
}

/* The chrome block is a positioning host only; its children lay out against
   .lp-stage directly. */
body.page-login .lp-chrome {
	display: contents;
}

/* ---- Backdrop: darkened + blurred estate photo ------------------ */
body.page-login .lp-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../images/login-backdrop-vine.jpg");
	background-size: cover;
	background-position: center 42%;
	/* Heavy blur + darken so the card and the burgundy CTA hold; warm-filmic
	   grade to match the winery imagery treatment. scale() hides the blur
	   bleed at the edges. */
	filter: blur(9px) saturate(0.86) contrast(1.02) brightness(0.62);
	transform: scale(1.12);
}

/* Protection gradient, not a flat wash: radial focus toward the center plus a
   warm bottom vignette. Keeps the estate readable at the corners while the
   card sits on a calm, near-black core. The vertical pass also lets the
   section meet the header and footer on near-black rather than mid-photo. */
body.page-login .lp-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(120% 100% at 50% 46%, rgba(20,16,13,0.30) 0%, rgba(20,16,13,0.62) 52%, rgba(20,16,13,0.86) 100%),
		linear-gradient(180deg, rgba(20,16,13,0.72) 0%, rgba(20,16,13,0.35) 42%, rgba(20,16,13,0.82) 100%);
}

/* ---- Manual escape back to the wine -----------------------------
   Sits above the card and aligned to its left edge, so it reads as
   "leave this card" rather than as page chrome — the real header owns
   page-level navigation now.
   ----------------------------------------------------------------- */
body.page-login .lp-return {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 452px;
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(243,242,237,0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}
body.page-login .lp-return .arr { transition: transform 0.2s ease; }
body.page-login .lp-return:hover { color: var(--acacia); }
body.page-login .lp-return:hover .arr { transform: translateX(-4px); }

/* ---- The floating card (light-warm register) -------------------- */
body.page-login .lp-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 452px;
	background: var(--paper);
	color: var(--ink-warm);
	border: 1px solid rgba(45,41,38,0.14);
	border-radius: var(--login-radius);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.5) inset,
		0 40px 90px -34px rgba(0,0,0,0.72),
		0 12px 30px -18px rgba(0,0,0,0.5);
	padding: 44px 44px 34px;
}
/* Burgundy base hairline — the house "spotlight the action" mark. */
body.page-login .lp-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--burgundy);
	opacity: 0.5;
	border-radius: 0 0 var(--login-radius) var(--login-radius);
}

/* ---- Return-context chip ---------------------------------------
   Reinforces the redirect-return story — "you'll be sent back to this
   exact bottle" — before the visitor commits their password. Absent
   entirely when there is no resolvable return target (the block renders
   nothing), so no empty-state styling is needed here.
   ----------------------------------------------------------------- */
body.page-login .lp-context {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px 10px 10px;
	margin: 0 0 26px;
	background: var(--card);
	border: 1px solid var(--rule-warm-2);
	border-radius: 2px;
}
body.page-login .lp-context-thumb {
	flex: 0 0 auto;
	width: 38px;
	height: 52px;
	overflow: hidden;
	border: 1px solid var(--rule-warm-2);
	background: var(--card-2);
}
body.page-login .lp-context-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.page-login .lp-context-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
body.page-login .lp-context-eye {
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rhino-warm);
}
body.page-login .lp-context-name {
	font-family: var(--ff-display, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	font-style: italic;
	font-size: 19px;
	line-height: 1.05;
	color: var(--ink-warm);
	/* Product names run long; one line with an ellipsis keeps the chip from
	   competing with the card head for vertical weight. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Card head --------------------------------------------------- */
body.page-login .lp-eyebrow {
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--burgundy);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
body.page-login .lp-eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--burgundy);
}
body.page-login .lp-title {
	font-family: var(--ff-display, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	font-size: 37px;
	line-height: 1.04;
	letter-spacing: -0.006em;
	color: var(--ink-warm);
	margin: 16px 0 0;
	text-wrap: balance;
}
body.page-login .lp-title em {
	font-style: italic;
	color: var(--burgundy);
}
body.page-login .lp-lede {
	font-family: var(--ff-body, "Lora", Georgia, serif);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--ink-warm-2);
	margin: 14px 0 0;
	max-width: 36ch;
}

/* ---- State gating (Pass 3) --------------------------------------
   /login is state-aware: an already-signed-in visitor must never be
   shown a login form. The wrapper carries data-rhinory-login-state,
   written by blocks/login-mount/render.php's inline bootstrap (pending,
   at parse time) and then by assets/js/login.js (the resolved outcome).

   The ABSENCE of the attribute is a meaningful state — it means no
   script ran at all — and it deliberately shows the form, because a
   visitor with broken JS is better served by the pre-Pass-3 behavior
   than by a spinner that never resolves. So every rule here is keyed on
   a state being PRESENT; nothing is hidden by default.
   ----------------------------------------------------------------- */
body.page-login .winery-c7-login-form[data-rhinory-login-state="pending"] #c7-login-form,
body.page-login .winery-c7-login-form[data-rhinory-login-state="redirecting"] #c7-login-form,
body.page-login .winery-c7-login-form[data-rhinory-login-state="signed-in"] #c7-login-form {
	display: none;
}

/* ---- Hold: the form's slot while state resolves ------------------ */
body.page-login .lp-hold { display: none; }
body.page-login .winery-c7-login-form[data-rhinory-login-state="pending"] .lp-hold,
body.page-login .winery-c7-login-form[data-rhinory-login-state="redirecting"] .lp-hold {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Roughly the height the two fields + button occupy, so resolving into
	   the form does not jump the card or the page below it. */
	min-height: 168px;
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rhino-warm);
}
body.page-login .lp-hold-spin {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(82,0,0,0.18);
	border-top-color: var(--burgundy);
	border-radius: 50%;
	animation: lp-spin 0.85s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* One hold element, two messages — which one shows is the state's job. */
body.page-login .lp-hold-msg { display: none; }
body.page-login .winery-c7-login-form[data-rhinory-login-state="pending"] .lp-hold-msg--pending,
body.page-login .winery-c7-login-form[data-rhinory-login-state="redirecting"] .lp-hold-msg--return {
	display: inline;
}

/* ---- Already-signed-in panel ------------------------------------
   Reached only when the visitor is authenticated AND there is no valid
   return target (a valid one redirects instead). Same visual weight as
   the form it replaces.
   ----------------------------------------------------------------- */
body.page-login .lp-signedin { display: none; }
body.page-login .winery-c7-login-form[data-rhinory-login-state="signed-in"] .lp-signedin {
	display: block;
	margin-top: 4px;
}
body.page-login .lp-signedin-lede {
	font-family: var(--ff-body, "Lora", Georgia, serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-warm-2);
	margin: 0 0 22px;
}
body.page-login .lp-signedin-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}
body.page-login .lp-signedin-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 16px 28px;
	background: var(--burgundy);
	color: var(--ivory);
	text-decoration: none;
	border-radius: 2px;
	box-shadow: 0 14px 34px -14px rgba(82,0,0,0.62);
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background 0.18s ease;
}
body.page-login .lp-signedin-primary:hover { background: var(--burgundy-dk); }
body.page-login .lp-signedin-secondary {
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--burgundy);
	text-decoration: none;
	border-bottom: 1px solid rgba(82,0,0,0.32);
	padding-bottom: 2px;
}
body.page-login .lp-signedin-secondary:hover {
	color: var(--burgundy-dk);
	border-bottom-color: var(--burgundy);
}

/* The card's own copy sells signing in. Two lines of it are wrong to say to
   someone who already has — hidden rather than swapped, because the heading
   ("Welcome back to the Conservation Circle") reads correctly either way and
   swapping text under a resolving state is how layouts jump. */
body.page-login[data-rhinory-login-state="signed-in"] .lp-lede,
body.page-login[data-rhinory-login-state="signed-in"] .lp-foot-new {
	display: none;
}

/* ---- SDK-failure fallback ---------------------------------------
   Ships in the HTML, hidden; revealed by assets/js/login.js adding
   .is-empty to the wrapper. Quiet, on-register, and carries a real path
   out rather than just an apology.
   ----------------------------------------------------------------- */
body.page-login .winery-c7-login-form__fallback { display: none; }
body.page-login .winery-c7-login-form.is-empty #c7-login-form { display: none; }
body.page-login .winery-c7-login-form.is-empty .winery-c7-login-form__fallback {
	display: block;
	margin-top: 30px;
	padding: 24px 22px;
	border: 1px solid var(--rule-warm-2);
	border-left: 2px solid var(--burgundy);
	background: var(--card);
	border-radius: 2px;
}
body.page-login .winery-c7-login-form__fallback p {
	font-family: var(--ff-body, "Lora", Georgia, serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-warm-2);
	margin: 0;
}
body.page-login .winery-c7-login-form__fallback p a {
	color: var(--burgundy);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.page-login .winery-c7-login-form__fallback-out {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--burgundy);
	text-decoration: none;
	border-bottom: 1px solid rgba(82,0,0,0.32);
	padding-bottom: 2px;
}
body.page-login .winery-c7-login-form__fallback-out:hover {
	color: var(--burgundy-dk);
	border-bottom-color: var(--burgundy);
}

/* Plugin-absent branch — a plain, on-register way in to C7's hosted login. */
body.page-login .rhinory-login-mount__fallback { margin: 30px 0 0; }

/* ---- Card foot: create-account + brand tie ----------------------- */
body.page-login .lp-foot {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--rule-warm);
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	text-align: center;
}
body.page-login .lp-foot-new {
	font-family: var(--ff-body, "Lora", Georgia, serif);
	font-size: 15px;
	color: var(--ink-warm-2);
	margin: 0;
}
body.page-login .lp-foot-new a {
	color: var(--burgundy);
	text-decoration: none;
	border-bottom: 1px solid rgba(82,0,0,0.34);
	padding-bottom: 1px;
	transition: border-color 0.18s ease, color 0.18s ease;
}
body.page-login .lp-foot-new a:hover {
	color: var(--burgundy-dk);
	border-bottom-color: var(--burgundy);
}
body.page-login .lp-tie {
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--rhino-warm);
	margin: 0;
}
body.page-login .lp-tie span { color: var(--burgundy); margin: 0 5px; }

/* ---- Trust line under the card, on the backdrop (dark register) -- */
body.page-login .lp-secure {
	position: relative;
	z-index: 2;
	margin: 22px auto 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ff-mono, "Josefin Sans", sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(243,242,237,0.62);
}
body.page-login .lp-secure svg {
	width: 13px;
	height: 13px;
	stroke: var(--acacia);
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Default link colors, scoped to the DARK backdrop only — the light-warm card
   keeps its own burgundy link rules, because gold on paper fails small-text
   contrast. */
body.page-login .lp-secure a { color: var(--acacia); }
body.page-login .lp-secure a:hover { color: var(--ivory); }

@media (prefers-reduced-motion: reduce) {
	body.page-login .lp-return,
	body.page-login .lp-return .arr,
	body.page-login .lp-signedin-primary,
	body.page-login .lp-foot-new a { transition: none; }
	/* The ring stays as a static mark rather than disappearing — it is the
	   only thing distinguishing "working on it" from "nothing here". */
	body.page-login .lp-hold-spin { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
	body.page-login .lp-stage { padding: 38px 16px 48px; }
	body.page-login .lp-return { margin-bottom: 14px; }
	body.page-login .lp-card {
		/* Fills more of the viewport on mobile but still reads as a contained
		   card rather than a full-bleed page. */
		max-width: none;
		padding: 34px 24px 28px;
	}
	body.page-login .lp-title { font-size: 31px; }
	body.page-login .lp-backdrop { filter: blur(7px) saturate(0.86) contrast(1.02) brightness(0.58); }
}