/*
 * Benecaster Theme — wp-login.php styling
 *
 * Standalone page: does NOT go through header.php / footer.php and does NOT
 * carry .bc-page on <body>. Selectors here target WordPress core markup
 * directly (`body.login`, `#login`, `#loginform`, etc.) and are loaded via
 * bc_login_enqueue_assets() on the login_enqueue_scripts action, after
 * fonts.css + tokens.css.
 *
 * Covers the four action variants: login (#loginform), register
 * (#registerform), lostpassword (#lostpasswordform), and resetpass
 * (#resetpassform). The inline template-tag output of wp_login_form() is
 * handled by a separate block in site.css scoped under .bc-page.
 */


/* --- Page canvas --- */

body.login {
	margin: 0;
	padding: var(--bc-space-16) var(--bc-space-4);
	min-height: 100vh;
	box-sizing: border-box;
	background: var(--bc-color-bg);
	color: var(--bc-color-text);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	line-height: var(--bc-leading-normal);
}

body.login * {
	box-sizing: border-box;
}


/* --- Top wordmark (link → home_url() via login_headerurl filter) --- */

#login {
	width: 100%;
	max-width: var(--bc-max-width-narrow);
	margin: 0 auto;
	padding: 0;
}

#login h1 {
	margin: 0 0 var(--bc-space-8);
	text-align: center;
}

/* Wordmark SVG rendered as background-image. Text set by the
   login_headertext filter (site name) remains in the DOM as the
   accessible label; the Kellum method (text-indent: 100% +
   overflow: hidden + white-space: nowrap) keeps screen readers
   happy while pushing the glyphs off-screen. Aspect ratio matches
   the source viewBox (440 × 100). */
#login h1 a {
	display: inline-block;
	width: 240px;
	height: 56px;
	padding: 0;
	margin: 0;
	background-image: url('../img/branding/wordmark-horizontal-dark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	transition: opacity var(--bc-transition-fast);
}

#login h1 a:hover,
#login h1 a:focus {
	opacity: 0.85;
}

#login h1 a:focus-visible {
	outline: 2px solid var(--bc-color-accent);
	outline-offset: 4px;
	border-radius: var(--bc-radius-sm);
}


/* --- The form card --- */

#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
	padding: var(--bc-space-8);
	margin: 0 0 var(--bc-space-6);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	overflow: visible;
}

#loginform p,
#registerform p,
#lostpasswordform p,
#resetpassform p {
	margin: 0 0 var(--bc-space-6);
	font-size: var(--bc-text-base);
	color: var(--bc-color-text);
}

#loginform p:last-of-type,
#registerform p:last-of-type,
#lostpasswordform p:last-of-type,
#resetpassform p:last-of-type {
	margin-bottom: 0;
}


/* --- Labels --- */

body.login label {
	display: block;
	margin: 0 0 var(--bc-space-2);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	color: var(--bc-color-text);
}


/* --- Text inputs --- */

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login input[type="url"],
body.login input[type="tel"],
body.login input[type="number"] {
	width: 100%;
	padding: var(--bc-space-3) var(--bc-space-4);
	margin: 0;
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	line-height: var(--bc-leading-normal);
	color: var(--bc-color-text-strong);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	box-shadow: none;
	transition: border-color var(--bc-transition-fast), box-shadow var(--bc-transition-fast);
}

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.login input[type="url"]:focus,
body.login input[type="tel"]:focus,
body.login input[type="number"]:focus {
	outline: none;
	border-color: var(--bc-color-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-color-accent) 25%, transparent);
}


/* --- Password field with the show/hide toggle --- */

/* The .wp-pwd wrapper positions the toggle button on the right; give it
   room and stop the button from overlapping the input text. */
.login .wp-pwd {
	position: relative;
	display: flex;
	align-items: stretch;
}

.login .wp-pwd input[type="password"],
.login .wp-pwd input[type="text"] {
	padding-right: var(--bc-login-pw-toggle);
}

/*
 * Show/hide password toggle — core's Dashicons eye, inset in the input frame.
 *
 * ⚠⚠ This replaced an ASCII-text treatment that spilled outside the field,
 * and the comment that justified it was simply wrong: it said the Dashicons
 * font is not enqueued on the login page. It is. Verified on live
 * `wp-login.php` 2026-10-19 — `wp-includes/css/dashicons.min.css` is among the
 * page's stylesheets, and the button's own `<span>` is already
 * `dashicons dashicons-visibility` with `font-family: dashicons`. The theme
 * was hiding a glyph that works, to draw a worse one.
 *
 * What it drew instead: `::before { content: 'Show' }` in a button core sizes
 * at 40px with `padding: 0 var(--bc-space-3)`, i.e. a **16px content box
 * holding 32px of text** (measured, 12px font; "Hide" is 27px). With
 * `overflow: visible` the word simply rendered past its own box —
 * `scrollWidth` 44 against `clientWidth` 40 — straddling the input's right
 * border rather than sitting inside the field.
 *
 * ⚠ The report described it as running past the input's right edge too. It
 * does not quite: measured on live, button and input share a right edge at the
 * same x, so the text crowds and crosses the *border*, it does not escape the
 * field. The fault and the fix are unchanged either way; the detail is noted
 * so nobody re-measures looking for an overhang that is not there.
 *
 * Core swaps `dashicons-visibility` for `dashicons-hidden` as it toggles, so
 * the icon tracks state on its own and the `[aria-label*="Hide"]` selectors
 * that faked that are gone with the text. Width is tokenised with the input's
 * padding-right — see --bc-login-pw-toggle for why they must stay equal.
 *
 * ⚠ `right: 0` is load-bearing, not tidiness: core's `forms.min.css` carries
 * `.wp-pwd button.wp-hide-pw { right: 2.5rem }`, which would park the toggle
 * 40px short of the field's edge. `width` likewise overrides core's `2.5rem`
 * from `login.min.css`; both win on specificity (0,3,1 against 0,3,0) because
 * this selector names the `button` element as well as the three classes.
 */
.login .wp-pwd button.wp-hide-pw {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bc-login-pw-toggle);
	height: 100%;
	padding: 0;
	background: transparent;
	color: var(--bc-color-text-muted);
	border: none;
	border-radius: 0 var(--bc-radius-md) var(--bc-radius-md) 0;
	line-height: 1;
	cursor: pointer;
	transition: color var(--bc-transition-fast);
}

.login .wp-pwd button.wp-hide-pw:hover,
.login .wp-pwd button.wp-hide-pw:focus {
	color: var(--bc-color-accent);
	outline: none;
}

/*
 * Pin the glyph to the button's colour, so the hover and focus states above
 * reach it.
 *
 * ⚠ Strictly redundant today and kept deliberately. `color` is inherited, and
 * nothing sets it on this glyph: checked the source of all four sheets that
 * could — `dashicons.min.css` (its base rule sets font, display, line-height
 * and smoothing, no colour), `login.min.css` and `forms.min.css` (both size
 * the `.dashicons` to 1.25rem and no more) and `buttons.min.css` (no
 * `wp-hide-pw` rule at all). So the glyph would follow the button anyway; this
 * one line means a future core release that does set a colour cannot quietly
 * strand the hover state.
 */
.login .wp-pwd button.wp-hide-pw .dashicons {
	color: inherit;
}


/* --- Reset-password strength meter --- */

.login .pw-weak {
	margin-top: var(--bc-space-3);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
}

.login .pw-weak label {
	display: inline-flex;
	align-items: center;
	gap: var(--bc-space-2);
	margin: 0;
}

.login #pass-strength-result {
	margin: var(--bc-space-3) 0 0;
	padding: var(--bc-space-2) var(--bc-space-3);
	font-size: var(--bc-text-sm);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	color: var(--bc-color-text);
	text-align: center;
}

.login #pass-strength-result.short,
.login #pass-strength-result.bad {
	border-color: var(--bc-color-error);
	color: var(--bc-color-error);
}

.login #pass-strength-result.good {
	border-color: var(--bc-color-accent);
	color: var(--bc-color-accent);
}

.login #pass-strength-result.strong {
	border-color: var(--bc-color-success);
	color: var(--bc-color-success);
}


/* --- Remember-me row --- */

.login p.forgetmenot {
	display: flex;
	align-items: center;
	gap: var(--bc-space-2);
	margin-bottom: var(--bc-space-6);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}

.login p.forgetmenot input[type="checkbox"] {
	accent-color: var(--bc-color-accent);
	margin: 0;
}

.login p.forgetmenot label {
	display: inline;
	margin: 0;
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}


/* --- Submit button (primary CTA look) --- */

/* WP core sets `padding: 26px 24px 46px` + a light-gray strip background and
   border-top on p.submit; the 46px padding-bottom pushes the button below the
   card border on our dark surface. Reset padding + all chrome so the button
   sits flush inside the form card.

   The submit button itself also needs `float: none` — WP core's
   `.login .button-primary { float: right }` combined with our `width: 100%`
   removes the button from p.submit's normal flow, collapsing p.submit's
   height so the card renders without room for the button and it visually
   drops below the card. */
.login p.submit,
.login .submit {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	text-align: left;
}

body.login input[type="submit"],
body.login .button.button-primary,
body.login .button.button-primary.button-large {
	display: inline-block;
	float: none;
	width: 100%;
	padding: var(--bc-space-3) var(--bc-space-6);
	margin: 0;
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	color: var(--bc-navy-900);
	background: var(--bc-color-accent);
	border: 1px solid var(--bc-color-accent);
	border-radius: var(--bc-radius-md);
	box-shadow: none;
	cursor: pointer;
	transition: background var(--bc-transition-fast), border-color var(--bc-transition-fast);
	min-height: auto;
	text-transform: none;
	letter-spacing: normal;
}

body.login input[type="submit"]:hover,
body.login input[type="submit"]:focus,
body.login .button.button-primary:hover,
body.login .button.button-primary:focus {
	background: var(--bc-color-accent-hover);
	border-color: var(--bc-color-accent-hover);
	color: var(--bc-navy-900);
}

body.login input[type="submit"]:active,
body.login .button.button-primary:active {
	background: var(--bc-color-accent-pressed);
	border-color: var(--bc-color-accent-pressed);
}

body.login input[type="submit"]:focus-visible,
body.login .button.button-primary:focus-visible {
	outline: 2px solid var(--bc-color-text-strong);
	outline-offset: 2px;
}


/* --- Below-card links (Lost password / Register / Back to blog) --- */

#nav,
#backtoblog {
	margin: var(--bc-space-4) 0 0;
	padding: 0 var(--bc-space-2);
	text-align: center;
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
}

#nav a,
#backtoblog a {
	color: var(--bc-color-link);
	text-decoration: none;
	transition: color var(--bc-transition-fast);
}

#nav a:hover,
#nav a:focus,
#backtoblog a:hover,
#backtoblog a:focus {
	color: var(--bc-color-link-hover);
	text-decoration: underline;
}


/* --- Messages and errors above the form --- */

#login .message,
#login .notice,
#login #login_error {
	padding: var(--bc-space-4) var(--bc-space-6);
	margin: 0 0 var(--bc-space-6);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-left: 3px solid var(--bc-color-accent);
	border-radius: var(--bc-radius-md);
	color: var(--bc-color-text);
	box-shadow: none;
	font-size: var(--bc-text-sm);
}

#login #login_error,
#login .notice-error {
	border-left-color: var(--bc-color-error);
	color: var(--bc-color-text-strong);
}

#login .notice-info {
	border-left-color: var(--bc-color-accent);
}

#login .message p,
#login .notice p,
#login #login_error p {
	margin: 0 0 var(--bc-space-2);
}

#login .message p:last-child,
#login .notice p:last-child,
#login #login_error p:last-child {
	margin-bottom: 0;
}

#login .message a,
#login .notice a,
#login #login_error a {
	color: var(--bc-color-link);
	text-decoration: underline;
}


/* --- Language switcher (bottom of page on multisite / translated installs) --- */

.login .language-switcher {
	margin-top: var(--bc-space-8);
	text-align: center;
}

.login .language-switcher select {
	padding: var(--bc-space-2) var(--bc-space-3);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-sm);
}

.login .language-switcher input[type="submit"] {
	width: auto;
	margin-left: var(--bc-space-2);
	padding: var(--bc-space-2) var(--bc-space-4);
	font-size: var(--bc-text-sm);
}


/* --- User-registered privacy-policy link (register screen) --- */

.login .privacy-policy-page-link {
	margin-top: var(--bc-space-6);
	text-align: center;
	font-size: var(--bc-text-sm);
}