/* ═══════════════════════════════════════════════════════════════════════
   wp-login.php — Write & Direct Studio
   rev 2026-08-06

   INSTALL  wp-content/themes/write-direct-studio/assets/css/login.css
            enqueued by wd-login-style.php

   ── WHAT THIS SKINS ─────────────────────────────────────────────────────

   Three screens, all still handled by core:

     wp-login.php?action=lostpassword   request a reset link
     wp-login.php?action=rp / resetpass set a new password
     wp-login.php                        sign in

   Styling only. Nothing here changes behaviour, and nothing in the PHP
   touches a request. Core keeps handling the flow — which is the whole
   point, because the flow was never what was broken.

   ── WHY SOME SELECTORS LOOK OVERQUALIFIED ───────────────────────────────

   wp-login.php loads its own stylesheet with high specificity, and it
   loads AFTER nothing — there is no theme CSS on this page to inherit
   from. Several rules below use `body.login` prefixes purely to win
   against core, not out of habit. Removing them will silently undo the
   rule.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Palette, for reference ──────────────────────────────────────────────
   Deliberately literals below rather than custom properties. wp-login.php
   loads without the theme stylesheet, so a mistyped variable would resolve
   to nothing and blank a colour — on a login screen that can mean an
   invisible form or unreadable error text. Not worth the tidiness.

     ink     #1a1a1a      panel and body text
     gold    #f5cf14      buttons, links, focus rings
     line    #3a3a3a      panel borders
     paper   #e8e4d9      labels on dark
     muted   #b8b3a6      hints and secondary copy
   ──────────────────────────────────────────────────────────────────────── */


/* ── Page ──────────────────────────────────────────────────────────────── */

body.login {
    /* Same photograph as /login/ so the reset journey feels continuous
       rather than like being dumped somewhere else mid-flow. Path is
       relative to this file: assets/css/ -> assets/media/ */
    background: #1a1a1a url('../media/login-form-background.jpg') center / cover no-repeat;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Darken the photo so white form text stays legible over any part of it.
   Fixed attachment keeps the overlay covering the viewport when the reset
   form grows (the strength meter adds height). */
body.login::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    pointer-events: none;
}

body.login #login {
    position: relative;   /* lifts the panel above the ::before overlay */
    z-index: 1;
    width: 380px;
    max-width: 92vw;
    padding: 6vh 0 4vh;
}


/* ── Logo ──────────────────────────────────────────────────────────────── */

body.login h1 a {
    background-image: url('../media/logo-studio.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Half width. `contain` scales the wordmark to fit, so width is the
       binding constraint on a wide logo and height just needs to be enough
       not to clip it — 34px suits the current aspect. If you swap the file
       for a squarer mark, raise the height or it will letterbox. */
    width: 50%;
    height: 34px;
    margin: 0 auto 20px;
    /* Core sets a text-indent to hide the site name; keep it. */
}


/* ── The form panel ────────────────────────────────────────────────────── */

body.login form {
    background: rgba(26, 26, 26, 0.92);
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    padding: 26px 24px 22px;
    margin-top: 0;
}

body.login form label,
body.login form .login-remember label {
    color: #e8e4d9;
    font-size: 14px;
    font-weight: 600;
}

body.login form .forgetmenot label,
body.login form .login-remember label {
    font-weight: 400;
    color: #cfcabd;
    padding-bottom:25px;
}


/* ── Inputs ────────────────────────────────────────────────────────────── */

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #d8d3c6;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 16px;   /* 16px stops iOS Safari zooming the page on focus */
    line-height: 1.3;
    box-shadow: none;
    margin-bottom: 16px;  /* spacing to the button is set on .submit instead */
}

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
    border-color: #f5cf14;
    box-shadow: 0 0 0 3px rgba(245, 207, 20, 0.28);
    outline: 2px solid transparent;   /* keeps a focus ring in forced-colors mode */
}


/* ── Password field: the show/hide eye ─────────────────────────────────── */

body.login .wp-pwd {
    position: relative;
}

body.login .wp-pwd button.wp-hide-pw {
    color: #6b6b6b;
    top: 2px;
    right: 2px;
    height: 44px;   /* full-height target rather than a 20px icon */
    width: 44px;
}

body.login .wp-pwd button.wp-hide-pw:hover,
body.login .wp-pwd button.wp-hide-pw:focus {
    color: #1a1a1a;
    background: transparent;
}


/* ── Password strength meter (reset screen) ────────────────────────────── */

body.login #pass-strength-result {
    border-radius: 8px;
    border: 0;
    margin: 8px 0 12px;
    padding: 9px 12px;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}

body.login #pass-strength-result.short   { background: #f6d4d4; color: #7a1c1c; }
body.login #pass-strength-result.bad     { background: #f8dfc4; color: #7a4310; }
body.login #pass-strength-result.good    { background: #d9ecc6; color: #33540f; }
body.login #pass-strength-result.strong  { background: #c6e8c9; color: #14532d; }

/* Core's hint paragraph under the password field. Long, and unreadable at
   its default size against a dark panel. */
body.login .description.indicator-hint,
body.login p.description {
    color: #b8b3a6;
    font-size: 13px;
    line-height: 1.5;
}


/* ── Buttons ───────────────────────────────────────────────────────────── */

body.login .button-primary,
body.login #wp-submit {
    background: #f5cf14;
    border: 0;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 14px 20px;
    height: auto;
    width: 100%;
    float: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

body.login .button-primary:hover,
body.login #wp-submit:hover {
    background: #ffd91f;
    color: #1a1a1a;
}

body.login .button-primary:focus,
body.login #wp-submit:focus {
    box-shadow: 0 0 0 3px rgba(245, 207, 20, 0.4);
    outline: 2px solid transparent;
}

/* "Generate Password" on the reset screen — secondary, so it should not
   compete with Save Password. */
body.login .wp-generate-pw {
    background: transparent;
    border: 1px solid #5a5a5a;
    border-radius: 8px;
    color: #e8e4d9;
    font-weight: 600;
    padding: 11px 16px;
    width: 100%;
    margin-bottom: 10px;
}

body.login .wp-generate-pw:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: #7a7a7a;
}

/* The submit row floats right in core, which leaves a full-width button
   sitting in a half-width box.

   margin-top here is the ONLY thing setting the gap between the last field
   and the button — the inputs above have margin-bottom:0 precisely so this
   number is the whole answer rather than half of a collapsing pair. Adjust
   this one value to taste. */
body.login .submit,
body.login p.submit {
    float: none;
    width: 100%;
    margin-top: 14px;
    margin-bottom: 0;
}


/* ── Notices: errors, messages, "check your email" ─────────────────────── */

body.login #login_error,
body.login .notice,
body.login .message,
body.login .success {
    background: rgba(26, 26, 26, 0.92);
    border: 1px solid #3a3a3a;
    border-left: 4px solid #f5cf14;
    border-radius: 10px;
    color: #f0ece2;
    font-size: 14.5px;
    line-height: 1.5;
    padding: 13px 16px;
    margin: 0 0 16px;
    box-shadow: none;
}

body.login #login_error {
    border-left-color: #e06666;
}

body.login .success {
    border-left-color: #7ac97f;
}

body.login #login_error a,
body.login .message a,
body.login .notice a {
    color: #f5cf14;
}


/* ── The links under the form ──────────────────────────────────────────── */

body.login #nav,
body.login #backtoblog {
    text-align: center;
    padding: 0;
    margin: 14px 0 0;
    text-shadow: none;
}

body.login #nav a,
body.login #backtoblog a {
    color: #e8e4d9;
    font-size: 14px;
    text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: #f5cf14;
    text-decoration: underline;
}

/* Core separates the two nav links with a pipe that inherits a colour
   which disappears on dark. */
body.login #nav {
    color: #6f6a5f;
}

body.login .privacy-policy-page-link {
    margin-top: 18px;
}

body.login .privacy-policy-page-link a {
    color: #b8b3a6;
    font-size: 13px;
}


/* ── Language switcher, if it ever appears ─────────────────────────────── */

body.login .language-switcher {
    margin-top: 14px;
}

body.login .language-switcher select {
    border-radius: 8px;
}


/* ── Small screens ─────────────────────────────────────────────────────── */

@media (max-width: 480px) {

    body.login #login {
        width: 100%;
        padding: 4vh 16px 3vh;
    }

    body.login form {
        padding: 20px 18px 18px;
    }

    /* Logo is already at 50% of a 380px column; on a narrow phone that gets
       too small to read, so give it more of the width back. */
    body.login h1 a {
        width: 68%;
    }

    /* Core reserves room for a wide meter; on a phone it wraps awkwardly. */
    body.login #pass-strength-result {
        font-size: 12.5px;
    }
}


/* ── Reduced motion / forced colours ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    body.login * {
        transition: none !important;
        animation: none !important;
    }
}