/*
Login Page Branding Stylesheet
Recolors wp-login.php (the login/password-reset/registration screen) to
match the Regen Sports Network brand palette. Loaded only on the login
page via rsn_enqueue_login_assets() in inc/enqueue.php.
*/
/* ^ wp-login.php is a completely separate screen from both the website and wp-admin, */
/* and loads neither of their stylesheets. The brand colors used below come from */
/* tokens.css, which inc/enqueue.php loads just before this file. */

/* The full-page background behind the centered login form */
body.login {
    background: var(--rsn-deep); /* Deep — same dark page base used across the front end and admin */
}

/* The logo link above the login form. login_headerurl/login_headertext filters */
/* in inc/login.php point this link at the homepage and set its title-text; the */
/* background-image below swaps in the real RSN logo file in place of the default. */
#login h1 a {
    background-image: url('../images/rsn-logo-v2.png'); /* Path is relative to this CSS file (assets/css): up one folder, then into assets/images */
    background-size: contain; /* Scale the logo to fit the box without cropping or distorting it */
    background-position: center; /* Center the logo within its box */
    background-repeat: no-repeat; /* Prevent the logo from tiling if the box is larger than the image */
    width: 240px; /* Fixed display width for the logo container, sized for the new wide horizontal logo */
    height: 68px; /* Height matches the logo's real ~3.5:1 aspect ratio (250×71px source) so it isn't letterboxed */
    margin: 0 auto 20px; /* Center horizontally, with space below before the login form card */
}

/* The white card containing the username/password fields */
#loginform {
    background: var(--rsn-depth) !important; /* Depth — secondary surface, same role as front-end article cards */
    border-color: var(--rsn-carbon); /* Carbon — subtle dark border to define the card's edge against the page */
    border-radius: 6px; /* Rounded corners, consistent with the front-end's card styling */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); /* Matches the front-end article card's dark-theme shadow treatment */
}

/* Field labels above the username/password inputs */
#loginform label {
    color: var(--rsn-ice); /* Ice — legible label text against the dark Depth form background */
}

/* The username and password text inputs */
#loginform input[type="text"],
#loginform input[type="password"] {
    background: var(--rsn-carbon); /* Carbon — dark input background, distinct from the surrounding Depth card */
    color: var(--rsn-ice); /* Ice — typed text stays legible against the dark input background */
    border-color: var(--rsn-drive); /* Drive — subtle brand-colored border instead of default gray */
}

/* Focus state on the username/password inputs, using Signal to mark the active field */
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    border-color: var(--rsn-signal) !important; /* Signal — brand accent clearly marks which field is active */
    box-shadow: 0 0 0 1px var(--rsn-signal) !important; /* Thin Signal glow reinforces the focus state */
}

/* The "Remember Me" checkbox label text */
.forgetmenot label {
    color: var(--rsn-ice); /* Ice — legible against the dark Depth form background */
}

/* The main "Log In" submit button */
.wp-core-ui .button-primary {
    background: var(--rsn-signal) !important; /* Signal — primary brand color drives the main call-to-action button */
    border-color: var(--rsn-signal) !important; /* Matching border so the button reads as one solid brand-colored shape */
    color: var(--rsn-ice) !important; /* Ice — button label text stays legible against the bright Signal background */
    text-shadow: none; /* Remove WordPress's default text shadow, tuned for the default blue scheme */
}

/* Hover/focus state on the "Log In" button */
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
    background: var(--rsn-drive) !important; /* Drive — Signal's designated hover/pressed state */
    border-color: var(--rsn-drive) !important; /* Matching border keeps the hover state visually solid */
    color: var(--rsn-ice) !important; /* Ice text stays legible against the Drive hover background */
}

/* "Lost your password?" and "← Back to [Site Name]" links below the form */
#nav a,
#backtoblog a {
    color: var(--rsn-ice); /* Ice — visible against the dark Deep page background outside the form card */
}

/* Hover state on those links */
#nav a:hover,
#backtoblog a:hover {
    color: var(--rsn-signal); /* Signal — brand accent marks the interactive/hover state */
}

/* Login error messages (e.g. "The password you entered is incorrect.") */
#login_error {
    background: var(--rsn-depth) !important; /* Depth — matches the login form's own dark surface */
    color: var(--rsn-ice); /* Ice — legible message text against the dark Depth background */
    border-left-color: var(--rsn-alert) !important; /* Alert — reuses the site-wide "urgent/critical" semantic color */
}