/* ============================================
   LYRE WHOLESALE — wp-login.php BRANDED STYLING
   Lyre Digital
   --------------------------------------------
   Applied to all WordPress login screens (login, lostpassword, resetpass, rp).
   Retailers hit these when setting their initial password (welcome-email link)
   or recovering a forgotten one. Editorial-minimal to match /login/ and
   /account/.

   wp-login.php does NOT load the theme's main.css, @font-face, or the
   ACF-driven Google fonts — so the brand tokens are re-declared here and the
   font stacks lean on system fallbacks. Values mirror main.css :root DEFAULTS;
   keep them in sync with that file so brand customisation reads consistently.
   ============================================ */

/* ── FONTS (local) ────────────────────────────
   Satoshi is locally bundled (the registry marks it google:null), so its
   @font-face lives in main.css — which wp-login.php never loads. Re-declare it
   here so the body face renders; the heading face (Cormorant Garamond et al.)
   is Google-served and enqueued by the plugin via the theme's lw_enqueue_fonts.
   Paths are relative to this file (assets/css/), matching main.css. ── */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
         url('../fonts/Satoshi-Variable.woff') format('woff');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
         url('../fonts/Satoshi-VariableItalic.woff') format('woff');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --primary:    #1A1A1A;
    --secondary:  #555555;
    --accent:     #B8956A;
    --background: #FFFFFF;
    --text:       #1A1A1A;
    --bark:       #555555;
    --muted:      #888888;
    --border:     #E2E2E2;

    --heading-font: 'Cormorant Garamond', Georgia, serif;
    --body-font:    'Satoshi', 'Helvetica Neue', Arial, sans-serif;

    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  32px;
    --space-lg:  64px;
    --space-xl:  100px;
}

/* ── BODY / BACKGROUND ────────────────────── */
body.login {
    background: var(--background);
    color: var(--text);
    font-family: var(--body-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── CONTAINER ────────────────────────────── */
#login {
    width: 400px;
    padding: 60px 0 20px;
}

/* ── LOGO / SITE TITLE ────────────────────────
   No custom logo → render the site title as text in the brand heading face.
   WordPress hides this text with a negative text-indent and an image sprite;
   reverse both. When a custom logo IS set, the plugin's inline <style>
   re-applies the image + re-hides the text (see inc/wp-login-styling.php). */
.login h1 a {
    background-image: none;
    background-size: 0;
    width: auto;
    height: auto;
    text-indent: 0;
    overflow: visible;

    color: var(--text);
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 400;
    text-decoration: none;
    margin: 0 auto;
    padding: 0;
    display: block;
    text-align: center;
}

.login h1 a:hover,
.login h1 a:focus {
    color: var(--text);
    text-decoration: none;
    box-shadow: none;
}

/* ── FORM CONTAINER ───────────────────────── */
.login form {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 30px;
    margin-top: 20px;
}

/* ── LABELS ───────────────────────────────── */
.login label {
    color: var(--muted);
    font-size: 0.85rem;
}

/* ── INPUTS ───────────────────────────────── */
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    padding: 10px 12px;
    font-size: 1rem;
    box-shadow: none;
    transition: border-color 0.2s;
}

.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus {
    border-color: var(--text);
    box-shadow: none;
    outline: none;
}

/* ── SUBMIT BUTTON ────────────────────────── */
.wp-core-ui .button-primary,
.login .button-primary {
    background: var(--text);
    border: 1px solid var(--text);
    border-radius: 0;
    color: var(--background);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    transition: opacity 0.2s;
    /* Don't force full-width — let WordPress's default sizing apply.
       Overrides core login.css's float:right / full-width on the
       p.submit button so it sits proportionate to the form. */
    width: auto;
    float: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus,
.login .button-primary:hover,
.login .button-primary:focus {
    background: var(--text);
    border-color: var(--text);
    color: var(--background);
    opacity: 0.85;
    box-shadow: none;
}

/* ── BELOW-FORM LINKS (lost password, back to site) ── */
.login #nav,
.login #backtoblog {
    text-align: center;
    margin: var(--space-sm) 0 0;
}

.login #nav a,
.login #backtoblog a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--text);
    text-decoration: none;
    box-shadow: none;
}

/* ── MESSAGES (error / success / info) ────── */
.login .message,
.login #login_error {
    background: var(--background);
    border-left: 3px solid;
    border-radius: 0;
    padding: 10px 14px;
    margin-bottom: var(--space-sm);
    box-shadow: none;
    font-size: 0.9rem;
}

.login .message {
    border-left-color: var(--border);  /* informational — neutral, no status colour */
    color: var(--text);
}

.login #login_error {
    border-left-color: #dc3232;  /* error red — fixed semantic colour */
    color: var(--text);
}

/* ── NATIVE PASSWORD TOGGLE ────────────────────
   WordPress renders its own show/hide-password button (.wp-hide-pw). The brand
   toggle (assets/js/password-toggle.js) adds one too, so without this wp-login
   shows two eye icons. Hide WP's; !important beats the inline display WordPress
   sets on it via JS. (When JS is off, .hide-if-no-js already hides it anyway.) */
.login .wp-hide-pw {
    display: none !important;
}

/* WP makes .wp-pwd a flexbox so the input sits beside its native button. With
   that button hidden, our wrapper becomes the lone flex item and traps the
   input's bottom margin, making it taller than the input — which pushes the
   brand toggle off-centre. Back to block flow so the eye centres on the input. */
.login .wp-pwd {
    display: block;
}

/* ── REMEMBER ME ──────────────────────────────
   WordPress floats .forgetmenot left and .submit right so they share a row.
   We un-float the checkbox and clear the submit wrapper so each sits on its
   own line (the submit button itself is already float:none above). */
.login .forgetmenot {
    float: none;
    margin: 12px 0 16px;
}

.login .submit {
    clear: both;
    margin-top: 0;
}

.login .forgetmenot label {
    font-size: 0.9rem;
    color: var(--text);
}

/* ── PRIVACY POLICY LINK ──────────────────── */
.login .privacy-policy-page-link {
    text-align: center;
    margin-top: var(--space-sm);
}

.login .privacy-policy-page-link a {
    color: var(--muted);
    font-size: 0.8rem;
}

/* ── LANGUAGE SWITCHER ────────────────────── */
.login .language-switcher {
    text-align: center;
    margin-top: var(--space-sm);
}

/* ── PASSWORD STRENGTH METER ──────────────── */
.login .password-input-wrapper {
    position: relative;
}

.login #pass-strength-result {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.85rem;
}

/* ── MOBILE RESPONSIVE ────────────────────── */
@media (max-width: 480px) {
    #login {
        width: 100%;
        padding: 40px 20px 20px;
    }

    .login form {
        padding: 24px;
    }
}