/*
 * VELYON Theme — Split-screen Login Page
 *
 * Two modes share this stylesheet:
 *  - Mode A (default): WP's native #login form is restyled in place and
 *    pushed into the right half via margin, while .velyon-login-aside
 *    (printed via login_footer) is pinned to the left half via
 *    position:fixed — no DOM nesting needed, CSS alone does the split.
 *  - Mode B (plugin takeover, .velyon-login-override): the same aside +
 *    a .velyon-login-form-area on the right, this time in normal flow
 *    since we control the whole page in that mode.
 *
 * Everything here reads --velyon-* tokens, so both modes automatically
 * follow dark/light mode and the admin's Brand Color choice with zero
 * login-page-specific color values.
 *
 * v1.1.2: .velyon-login-aside's position/size and #login h1's
 * display:none are now !important-protected (see the comments at each
 * rule) after a live desktop regression; added .velyon-login-mobile-
 * heading, a themed/animated headline+subhead for mobile (previously
 * background-only there — see velyon_login_mobile_heading() in
 * inc/login-page.php).
 */

html { background: var(--velyon-bg); }

body.login {
	background: var(--velyon-bg);
	min-height: 100vh;
	font-family: var(--velyon-font-body);
	color: var(--velyon-text);
}

/* ---------- Left panel (shared by both modes) ----------
   Base look is the two gradients below. An admin's own <style> block
   inside Customize → Login Page's HTML field (velyon-login-panel-html)
   can freely override the DECORATIVE part of this rule (e.g.
   background:url(...) center/cover;) — it's plain CSS, printed after
   this stylesheet, so a same- or higher-specificity
   .velyon-login-aside{background:...} rule there wins without needing
   !important. The STRUCTURAL part (position/top/left/width/height) is
   !important-protected below (v1.1.2) and isn't meant to be touched
   from that field — see the comment on the rule itself for why.

   v1.0.8: aside-inner used to be flex-centered + capped at 420px wide —
   fine for the short default headline/subhead, but it silently squeezed
   any elaborate custom HTML/CSS design (absolutely-positioned decorative
   elements, a content block meant to fill the full panel) into a narrow
   centered box. Centering now happens on aside-inner itself instead of
   on the outer aside, and aside-inner fills the full panel (100% width,
   100% height of a fixed-height parent) rather than being width-capped —
   a custom design can now safely assume it has the whole panel to work
   with. The default template keeps its narrower, readable look via
   max-width on its own text elements instead of on the shared container. */
.velyon-login-aside {
	/* v1.1.2: position/top/left/width/height are !important — these are
	   the frame that makes the split-screen layout physically work, as
	   opposed to background/color below, which stays freely overridable
	   (see the comment above). A prior desktop regression showed this
	   panel collapsing to its content's natural size instead of filling
	   the left half of the viewport — if that was caused by a custom
	   <style> block in Customize → Login Page redeclaring one of these
	   without the others, cascade rules let the redeclared one win even
	   though it wasn't the intent. Locking the frame closes that whole
	   class of accident; resizing the panel already has its own proper
	   control (Customize → Login Page → Panel Width →
	   --velyon-login-panel-width), so there's no legitimate need to
	   override width here directly. */
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: var(--velyon-login-panel-width, 46%) !important;
	height: 100vh !important;
	box-sizing: border-box;
	background:
		linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
		linear-gradient(160deg, var(--velyon-accent-deep), var(--velyon-accent));
	color: #fff;
	z-index: 1;
}
.velyon-login-aside-inner {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px;
}
.velyon-login-logo { display: inline-block; margin-bottom: 32px; flex: none; }
.velyon-login-logo img { max-height: 40px; width: auto; }
.velyon-login-logo .site-title {
	font-family: var(--velyon-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: #fff;
}
.velyon-login-headline {
	font-family: var(--velyon-font-heading);
	font-size: 34px;
	line-height: 1.2;
	margin: 0 0 14px;
	max-width: 420px;
	color: #fff;
}
.velyon-login-subhead {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	max-width: 420px;
	color: rgba(255,255,255,.85);
}
.velyon-login-mobile-bg {
	/* v1.0.9: tablet/mobile-only backdrop — hidden on desktop, shown
	   (and the desktop panel hidden) below the 860px breakpoint further
	   down this file. Deliberately simple by convention (see the
	   Customizer control's description) — a background color/gradient/
	   image, not an attempt to reflow the desktop design. */
	display: none;
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--velyon-bg);
}
.velyon-login-theme-toggle {
	/* v1.0.9: fixed to the viewport, not absolute-within-the-panel — it's
	   a sibling of both backdrops now (pulled out of
	   velyon_login_left_panel() in inc/login-page.php), so this keeps it
	   working identically whichever of the two is currently showing. */
	position: fixed;
	top: 24px;
	right: 24px;
	/* v1.0.8: high on purpose — a custom design in the HTML/CSS field
	   (Customize → Login Page) may legitimately use its own z-index
	   values for decorative layering; this keeps the toggle clickable
	   above all of them without the admin needing to know it exists. */
	z-index: 50;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.4);
	background: rgba(0,0,0,.2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.velyon-login-theme-toggle .dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
}

/* ---------- Mode A: native WP form, restyled + pushed right ---------- */
body.velyon-login:not(.velyon-login-override) #login {
	margin: 0 0 0 var(--velyon-login-panel-width, 46%);
	width: auto;
	max-width: 400px;
	padding: 0 32px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
}
/* We render our own branding in the left panel; the default WP h1/logo
   link at the top of #login would duplicate it — and since
   velyon_login_headerurl() (inc/login-page.php) points that default
   logo's link at the homepage, a failure of THIS rule specifically is
   exactly what "there's a second logo and it links home" looks like.
   !important (v1.1.2) so nothing else loaded on the login screen —
   another plugin's own login CSS, a stale cache serving an older
   version of this file, a specificity fight — can win against it. */
body.velyon-login:not(.velyon-login-override) #login h1 { display: none !important; }

/* ---------- Mode B: plugin takeover, normal flow on the right ---------- */
.velyon-login-override { display: flex; min-height: 100vh; }
.velyon-login-form-area {
	margin-left: var(--velyon-login-panel-width, 46%);
	width: calc(100% - var(--velyon-login-panel-width, 46%));
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

/* ---------- Native form field restyling (Mode A) ---------- */
.login form {
	background: var(--velyon-surface);
	border: 1px solid var(--velyon-border);
	border-radius: var(--velyon-radius-l);
	box-shadow: var(--velyon-shadow);
	padding: 32px 28px;
}
.login label {
	color: var(--velyon-text);
	font-family: var(--velyon-font-body);
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: var(--velyon-surface-alt);
	border: 1px solid var(--velyon-border);
	color: var(--velyon-text);
	border-radius: var(--velyon-radius-s);
	box-shadow: none;
}
.login form .input:focus,
.login input:focus {
	border-color: var(--velyon-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--velyon-accent) 30%, transparent);
}
.login .button-primary {
	background: var(--velyon-accent);
	border-color: var(--velyon-accent-deep);
	color: var(--velyon-on-accent);
	border-radius: var(--velyon-radius-s);
	text-shadow: none;
	box-shadow: none;
	font-weight: 600;
}
.login .button-primary:hover,
.login .button-primary:focus {
	background: var(--velyon-accent-deep);
	border-color: var(--velyon-accent-deep);
}
.login #nav a,
.login #backtoblog a,
.login form .forgetmenot label {
	color: var(--velyon-text-muted);
}
.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--velyon-accent);
}
.login .message,
.login #login_error {
	background: var(--velyon-surface-alt);
	border-left: 4px solid var(--velyon-accent);
	color: var(--velyon-text);
	border-radius: var(--velyon-radius-s);
}
.login #login_error {
	border-left-color: var(--velyon-danger);
}
.login form .forgetmenot input[type="checkbox"] { accent-color: var(--velyon-accent); }

/* ---------- Tablet/mobile: no left panel, centered form ---------- */
/* v1.1.2 — mobile headline/subhead (velyon_login_mobile_heading() in
   inc/login-page.php), theme-owned like the logo/toggle. Hidden on
   desktop by default; shown and laid out in the 860px block below.
   position:relative + z-index:1 for the same reason #login/.velyon-
   login-form-area already have it here — .velyon-login-mobile-bg is a
   position:fixed, z-index:0 sibling, and CSS stacking rules paint a
   positioned z-index:0 element ABOVE plain in-flow siblings, not below,
   so without this the backdrop would sit on top of the heading text. */
.velyon-login-mobile-heading {
	display: none;
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 56px 24px 4px;
	max-width: 480px;
	margin: 0 auto;
	animation: velyon-login-fade-up .6s ease both;
}
/* Bug fix (v1.1.6): .velyon-login-headline/-subhead's own base rules set
   max-width:420px; margin:0 — correct for the desktop panel, where
   they're meant to hug the left edge. Here, on mobile, that same
   margin:0 means the ~420px-wide box sits flush-left inside this (up to
   480px-wide) wrapper instead of centering — text-align:center only
   centers inline content WITHIN a block, it doesn't center the block's
   own box. Visible on anything wider than roughly 420px + this
   wrapper's padding (large phones, tablets in portrait — easily inside
   the 860px breakpoint), as a lopsided gap on the right. Scoped to
   these two classes only INSIDE .velyon-login-mobile-heading, so the
   desktop panel's left alignment (inside .velyon-login-aside-inner) is
   untouched. */
.velyon-login-mobile-heading .velyon-login-headline,
.velyon-login-mobile-heading .velyon-login-subhead {
	margin-left: auto;
	margin-right: auto;
}
@keyframes velyon-login-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
/* Shimmering gradient sweep across the headline text — CSS-only, no JS,
   same convention as the rest of the theme's decorative motion (see
   welcome-banner.css). Assumes a dark-ish backdrop (the default mobile
   gradient and the desktop panel both are) since the base color is
   white; an admin using a light custom background here should also
   override this class's gradient stops in the same <style> block. Can
   be turned off from Customize → Login Page (v1.1.6), in which case a
   plain color applies instead — see velyon_login_mobile_heading() in
   inc/login-page.php. -webkit-text-fill-color included alongside plain
   color (v1.1.6) — belt-and-suspenders for older WebKit specifically,
   since this text-clip trick historically wanted its own property
   there rather than trusting plain `color`. */
.velyon-login-headline-shimmer {
	background: linear-gradient(100deg, #fff 30%, var(--velyon-gold) 50%, #fff 70%);
	background-size: 250% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: velyon-login-fade-up .6s ease both, velyon-login-shimmer 3s linear infinite .6s;
}
@keyframes velyon-login-shimmer {
	0% { background-position: 200% center; }
	100% { background-position: -50% center; }
}

@media (max-width: 860px) {
	.velyon-login-aside {
		display: none;
	}
	.velyon-login-mobile-bg {
		display: block;
	}
	.velyon-login-mobile-heading {
		display: block;
		order: -1; /* visually above the form regardless of DOM order — see login-page.php's doc comment on why Mode A needs this. */
	}

	/* Mode A: stack heading + form as a centered flex column over the
	   mobile backdrop. (Prior to v1.1.2 this only centered #login on
	   its own — flex-direction:column + the heading above is new.) */
	body.velyon-login:not(.velyon-login-override) {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
	}
	body.velyon-login:not(.velyon-login-override) #login {
		margin: 0;
		width: 100%;
		max-width: 400px;
		padding: 24px;
		min-height: 0;
		position: relative;
		z-index: 1;
	}

	/* Mode B: same column stacking for .velyon-login-form-area. */
	.velyon-login-override {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.velyon-login-form-area {
		margin-left: 0;
		width: 100%;
		max-width: 400px;
		min-height: 0;
	}
}