/**
 * Trekzone's 2026 LCARS — assets/css/login.css (14.1.1)
 *
 * Styles for wp-login.php when loaded with the full TZ14 site chrome.
 * main.css is enqueued separately as a dependency.
 *
 * CONTENTS:
 *   1.  WP Login Page Resets
 *   2.  Hide Default WP Login Elements
 *   3.  #login Wrapper Reset
 *   4.  Sign In / Register Tabs
 *   5.  Form Panel
 *   6.  Form Fields
 *   7.  Password Toggle
 *   8.  Remember Me
 *   9.  Submit Button
 *   10. LCARS Form Divider (spacer between submit + nav links)
 *   11. Nav Links (#nav — Lost Password / Register)
 *   12. Messages (errors, success, info)
 *   13. Privacy Note
 *   14. Hero Banner
 *   15. Duplicate Footer Suppression
 *   16. Mobile
 */


/* ─────────────────────────────────────────────────────────────────────────────
 * 1. WP Login Page Resets
 * ───────────────────────────────────────────────────────────────────────────── */
body.login {
    background-color: var(--lcars-bg) !important;
    background-image: none !important;
}

body.login div#login {
    padding-top: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Header search: wp-login.css resets all inputs — restore LCARS styling ── */
body.login .tz14-header-search-desktop .search-form,
body.login .tz14-header-search-desktop .search-form label {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.login .tz14-header-search-desktop input[type="search"],
body.login .tz14-header-search-desktop .search-field {
    background: rgba(0, 0, 0, .40) !important;
    border: 1px solid var(--lcars-line) !important;
    border-radius: 3px !important;
    color: rgba(255, 255, 255, .90) !important;
    font-size: 13px !important;
    font-family: inherit !important;
    padding: 6px 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color .15s ease !important;
    margin: 0 !important;
}

body.login .tz14-header-search-desktop input[type="search"]:focus,
body.login .tz14-header-search-desktop .search-field:focus {
    outline: none !important;
    border-color: var(--lcars-cyan) !important;
    background: rgba(0, 0, 0, .60) !important;
    box-shadow: none !important;
}

body.login .tz14-header-search-desktop .search-submit {
    display: flex !important;
    align-items: stretch !important;
    gap: 2px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    font-family: var(--lcars-font) !important;
    font-size: 11px !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .90) !important;
    padding: 6px 6px 0 6px !important;
    border-top: 1px solid var(--lcars-line) !important;
    border-bottom: 1px solid var(--lcars-line) !important;
    background: rgba(0, 0, 0, .60) !important;
    border-radius: 0 13px 13px 0 !important;
    transition: all .15s ease !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 2. Hide Default WP Login Elements
 *    - <h1> logo: replaced by our full .tz14-header
 *    - #backtoblog: replaced by footer home link
 *    - .privacy-policy-page-link: re-shown below with our own styling
 *    - .language-switcher: WP language select — not needed on LCARS page
 * ───────────────────────────────────────────────────────────────────────────── */
body.login h1,
body.login #login h1,
body.login #backtoblog,
body.login .language-switcher {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 3. #login Wrapper Reset
 *    WP wraps everything in <div id="login"> — make it transparent inside .tz14-content.
 *    The LCARS heading is output BEFORE #login opens (in login_header action),
 *    so it spans the full .tz14-content width correctly.
 * ───────────────────────────────────────────────────────────────────────────── */
.tz14-login-content #login {
    max-width: 480px;
    margin: 0 auto;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    float: none;
}

/* Heading sits outside #login — spans full content width via main.css flex rules */
.tz14-login-content .tz14-content-heading {
    margin-bottom: 16px;
}

.tz14-login-content .tz14-content-heading-text {
    font-size: 26px;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 4. Sign In / Register Tabs
 *    Injected via login_message filter in trek-login.php.
 *    Tabs sit inside #login (max-width 480px) and each take 50% of that width.
 * ───────────────────────────────────────────────────────────────────────────── */

/* WP injects "Register For This Site" as a .message.register paragraph above
   the register form — redundant since our tabs show context. Hide it. */
body.login-action-register p.message.register {
    display: none !important;
}

.tz14-login-tabs {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 38px;
    margin-bottom: 20px;
    gap: 0;
}

.tz14-tab-link {
    flex: 1 1 50%;
    display: flex;
    text-decoration: none !important;
}

.tz14-tab-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px 0 16px;
    font-family: var(--lcars-font);
    font-size: 15px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .50);
    border: 1px solid var(--lcars-line);
    background: rgba(0, 0, 0, .40);
    transition: border-color .15s ease, color .15s ease;
}

.tz14-tab-link:first-child .tz14-tab-inner {
    border-radius: 25px 0 0 25px;
    border-right: none;
}

.tz14-tab-link:last-child .tz14-tab-inner {
    border-radius: 0 25px 25px 0;
    border-left: 1px solid var(--lcars-line);
}

/* Only child (registration disabled — Sign In tab only) */
.tz14-tab-link:only-child .tz14-tab-inner {
    border-radius: 25px;
    border: 1px solid var(--lcars-line);
}

.tz14-tab-link:hover .tz14-tab-inner {
    border-color: rgba(100, 180, 255, .40);
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

/* Active tab — cyan outline */
.tz14-tab-link.tz14-tab-active .tz14-tab-inner {
    border-color: var(--lcars-cyan) !important;
    color: var(--lcars-cyan);
    background: rgba(0, 0, 0, .70);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 5. Form Panel
 * ───────────────────────────────────────────────────────────────────────────── */
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform,
body.login #resetpassform {
    background: rgba(0, 0, 0, .60) !important;
    border: 1px solid var(--lcars-line) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 20px rgba(0, 0, 0, .50) !important;
    padding: 28px !important;
    margin-top: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 6. Form Fields + Label Icons
 *    FA font-face is declared in main.css. We use ::before on specific
 *    label[for] selectors to inject icons without touching WP's form HTML.
 * ───────────────────────────────────────────────────────────────────────────── */
body.login label {
    font-family: var(--lcars-font) !important;
    font-size: 13px !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .55) !important;
    display: block !important;
    margin-bottom: 7px !important;
}

/* Username / email icon */
body.login label[for="user_login"]::before,
body.login label[for="user_email"]::before {
    content: "\f007";   /* FA user */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    margin-right: 7px;
    color: rgba(100, 180, 255, .55);
    font-size: 11px;
}

/* Password icon */
body.login label[for="user_pass"],
body.login label[for="pass1"],
body.login label[for="pass2"] {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

body.login label[for="user_pass"]::before,
body.login label[for="pass1"]::before,
body.login label[for="pass2"]::before {
    content: "\f023";   /* FA lock */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    margin-right: 7px;
    color: rgba(100, 180, 255, .55);
    font-size: 11px;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="search"] {
    background: rgba(0, 0, 0, .50) !important;
    border: 1px solid var(--lcars-line) !important;
    border-radius: 3px !important;
    color: rgba(255, 255, 255, .90) !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    width: 100% !important;
    transition: border-color .2s ease, background .2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
    border-color: var(--lcars-cyan) !important;
    background: rgba(0, 0, 0, .70) !important;
    box-shadow: 0 0 0 1px rgba(102, 204, 204, .20) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 7. Password Visibility Toggle (.wp-pwd)
 * ───────────────────────────────────────────────────────────────────────────── */
.wp-pwd {
    position: relative;
}

.wp-pwd button.button {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .40) !important;
    padding: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 14px !important;
    transition: color .15s !important;
}

.wp-pwd button.button:hover {
    color: var(--lcars-cyan) !important;
    background: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 8. Remember Me Checkbox
 * ───────────────────────────────────────────────────────────────────────────── */
body.login .forgetmenot {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

body.login .forgetmenot label {
    margin: 0 !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, .60) !important;
    font-size: 13px !important;
    letter-spacing: .06em !important;
}

body.login input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--lcars-cyan);
    cursor: pointer;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 9. Submit Button — LCARS full-width pill
 * ───────────────────────────────────────────────────────────────────────────── */
body.login .submit {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

body.login input[type="submit"],
body.login #wp-submit {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: 42px !important;
    width: 100% !important;
    background: rgba(0, 0, 0, .60) !important;
    border: 1px solid var(--lcars-cyan) !important;
    border-radius: 25px !important;
    color: var(--lcars-cyan) !important;
    font-family: var(--lcars-font) !important;
    font-size: 17px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: border-color .2s ease, color .2s ease, background .2s ease !important;
    margin-top: 8px !important;
    display: block !important;
}

body.login input[type="submit"]:hover,
body.login #wp-submit:hover {
    background: rgba(0, 0, 0, .80) !important;
    border-color: var(--lcars-orange) !important;
    color: var(--lcars-orange) !important;
    box-shadow: 0 0 12px rgba(255, 153, 0, .20) !important;
}

body.login input[type="submit"]:active,
body.login #wp-submit:active {
    transform: scale(.98) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 10. LCARS Form Divider
 *     The real stub+cap separator is injected via JS in trek-login.php
 *     (see the login_footer action's inline script). CSS here just cleans up
 *     the #nav spacing so it sits flush below the injected separator.
 * ───────────────────────────────────────────────────────────────────────────── */
body.login #nav {
    display: none !important; /* shown selectively — see section 11 */
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 11. #nav Links + Privacy Policy
 *     JS in trek-login.php (wp_footer hook) does three things:
 *       1. Injects a real .lcars-separator div before #nav
 *       2. Appends the Privacy Policy link into #nav with a meta dot
 *       3. Removes the now-empty .privacy-policy-page-link wrapper
 *
 *     Login page:    show #nav — Recover Password · Privacy Policy
 *     Register page: hide #nav entirely (tabs cover context)
 * ───────────────────────────────────────────────────────────────────────────── */

/* Injected separator sits directly above #nav */
body.login .tz14-login-separator {
    margin: 16px 0 12px 0;
    opacity: .5;
}

/* Login page: show #nav */
body.login-action-login #nav {
    display: block !important;
    text-align: center;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Register page: hide #nav (tabs cover it) */
body.login-action-register #nav {
    display: none !important;
}

/* Hide Register link from #nav on login page — it's a tab */
body.login-action-login #nav a[href*="action=register"] {
    display: none !important;
}

/* Collapse separator characters between hidden links */
body.login-action-login #nav {
    font-size: 0;
}

/* All #nav links + the injected Privacy Policy link */
body.login #nav a,
body.login #nav .tz14-meta-dot,
body.login #backtoblog a {
    font-family: var(--lcars-font);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: color .15s;
}

body.login #nav .tz14-meta-dot {
    color: rgba(100, 180, 255, .30);
    margin: 0 6px;
}

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

/* Hide the original privacy-policy-page-link wrapper (content moved into #nav by JS) */
body.login .privacy-policy-page-link {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 12. Messages — errors, success, info
 * ───────────────────────────────────────────────────────────────────────────── */
body.login #login_error {
    background: rgba(137, 0, 0, .20) !important;
    border: 1px solid rgba(137, 0, 0, .70) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #ffcccc !important;
    font-family: var(--lcars-font);
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}

body.login #login_error a { color: var(--lcars-orange); }

body.login .message {
    background: rgba(0, 130, 80, .20) !important;
    border: 1px solid rgba(0, 180, 100, .50) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #aaffcc !important;
    font-family: var(--lcars-font);
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}

body.login .notice {
    background: rgba(0, 80, 160, .20) !important;
    border: 1px solid rgba(100, 153, 204, .50) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .85) !important;
    font-size: 13px;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 13. Dashicons + Language Switcher
 * ───────────────────────────────────────────────────────────────────────────── */
.dashicons { color: rgba(255, 255, 255, .50); }

/* Belt-and-braces hide for language switcher (also hidden in section 2) */
body.login .language-switcher,
body.login #login .language-switcher {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 14. Hero Banner
 *     The actual customizer image (tz14_ad_manhattan) is now used directly
 *     in login_header — no CSS placeholder needed. Just ensure the hero
 *     container behaves the same as on regular pages.
 * ───────────────────────────────────────────────────────────────────────────── */
.tz14-login-content .tz14-header-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 15. Duplicate Footer Suppression
 *     WP 6.x calls wp_footer() inside login_footer() — plugins can hook in
 *     and output a second .tz14-footer. We hide anything that isn't ours.
 *     Our injected footer carries data-tz14-login-footer="1".
 * ───────────────────────────────────────────────────────────────────────────── */
body.tz14-login-page .tz14-footer:not([data-tz14-login-footer]) {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 16. Interim Login (wp-admin iframe popup) — strip all chrome
 * ───────────────────────────────────────────────────────────────────────────── */
.interim-login .tz14-header,
.interim-login .tz14-sidebar,
.interim-login .tz14-footer,
.interim-login .tz14-login-tabs {
    display: none !important;
}

.interim-login.tz14-login-page .tz14-layout {
    display: block !important;
    padding: 20px !important;
}

.interim-login #login {
    max-width: 380px;
    margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * 17. Mobile
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {

    .tz14-login-content #login {
        max-width: none;
    }

    body.login #loginform,
    body.login #registerform,
    body.login #lostpasswordform,
    body.login #resetpassform {
        padding: 20px 16px !important;
    }

    /* Prevent iOS auto-zoom on focus */
    body.login input[type="text"],
    body.login input[type="password"],
    body.login input[type="email"] {
        font-size: 16px !important;
    }
}