/* ============================================================
   FACECAST THEME — login.css
   Branded skin for wp-login.php.
   Mirrors the tokens from main.css so the login feels like the
   front-end: snow background, ink form panel header, peak accents.
   ============================================================ */

:root {
    --fc-snow:        #F7F9FC;
    --fc-paper:       #FFFFFF;
    --fc-ink:         #0B1B2B;
    --fc-ink-soft:    #1F2D3D;
    --fc-stone:       #5C6B7A;
    --fc-stone-soft:  #8895A6;
    --fc-line:        #E2E8EF;
    --fc-line-strong: #C8D2DC;
    --fc-peak:        #1E4F8F;
    --fc-peak-deep:   #143A6B;
    --fc-sky:         #5BA3E0;
    --fc-sky-soft:    #BFD9EE;
}

/* ---------- Page background ---------- */
body.login {
    background:
        radial-gradient(60% 90% at 80% 10%, rgba(91,163,224,.18), transparent 60%),
        radial-gradient(40% 70% at 0% 100%, rgba(20,58,107,.14), transparent 60%),
        linear-gradient(180deg, #FBFCFE 0%, #EAF2FA 100%);
    background-attachment: fixed;
    color: var(--fc-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

body.login::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 75%, rgba(11,27,43,.04) 100%);
    pointer-events: none;
    z-index: 0;
}

#login {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 0;
}

/* ---------- Logo header ---------- */
.login h1 {
    margin: 0 0 1.5rem;
    text-align: center;
}
.login h1 a {
    background-image: url("../img/mark.png");
    background-image: -webkit-image-set(
        url("../img/mark.png") 1x,
        url("../img/mark@2x.png") 2x
    );
    background-image: image-set(
        url("../img/mark.png") 1x,
        url("../img/mark@2x.png") 2x
    );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 96px;
    height: 72px;
    margin: 0 auto;
    text-indent: -9999px;
    outline: 0;
    overflow: hidden;
    display: block;
    transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.login h1 a:hover { transform: translateY(-1px); }
.login h1 a:focus-visible {
    text-indent: 0;
    outline: 2px solid var(--fc-sky);
    outline-offset: 4px;
    border-radius: 8px;
}

/* ---------- Tagline above form ---------- */
.fc-login-tagline {
    text-align: center;
    margin: 0 auto 1.5rem;
    color: var(--fc-stone);
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
}
.fc-login-tagline strong {
    display: block;
    color: var(--fc-ink);
    font-size: 1.05rem;
    letter-spacing: -.005em;
    text-transform: none;
    font-weight: 600;
    margin-bottom: .25rem;
}

/* ---------- Form panel ---------- */
.login form {
    background: var(--fc-paper);
    border: 1px solid var(--fc-line);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(11,27,43,.08);
    padding: 1.75rem 1.75rem 1.5rem;
    margin: 0 0 1.25rem;
    overflow: visible;
}

/* Labels */
.login label {
    color: var(--fc-ink);
    font-weight: 500;
    font-size: .92rem;
}

/* Inputs */
.login input[type=text],
.login input[type=email],
.login input[type=password],
.login input[type=tel],
.login input[type=number] {
    background: var(--fc-snow) !important;
    border: 1px solid var(--fc-line) !important;
    border-radius: 8px !important;
    color: var(--fc-ink) !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    padding: .7rem .85rem !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s, box-shadow .15s;
    width: 100%;
}
.login input[type=text]:focus,
.login input[type=email]:focus,
.login input[type=password]:focus,
.login input[type=tel]:focus,
.login input[type=number]:focus {
    background: #fff !important;
    border-color: var(--fc-peak) !important;
    box-shadow: 0 0 0 3px rgba(30,79,143,.15) !important;
    outline: 0 !important;
}
.login form .input,
.login input[type=text],
.login input[type=password] {
    margin-top: .35rem;
    margin-bottom: .25rem;
}

/* Password toggle button (the eye icon) */
.login .wp-pwd .button.wp-hide-pwd {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--fc-stone) !important;
    transform: none !important;
    top: 6px !important;
    right: 4px !important;
}
.login .wp-pwd .button.wp-hide-pwd:hover { color: var(--fc-ink) !important; }

/* Remember me */
.login .forgetmenot {
    margin: .85rem 0 1.1rem;
}
.login .forgetmenot label {
    color: var(--fc-stone);
    font-size: .9rem;
}
.login input[type=checkbox] {
    accent-color: var(--fc-peak);
    border-radius: 4px;
    border: 1px solid var(--fc-line-strong);
}

/* Submit row */
.login .submit {
    margin: 0;
}

/* Primary button — match .fc-btn--primary */
.login .button-primary,
.wp-core-ui .button-primary {
    background: var(--fc-ink) !important;
    border: 1px solid var(--fc-ink) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    padding: .8rem 1.4rem !important;
    height: auto !important;
    line-height: 1 !important;
    width: 100%;
    transition: background .15s cubic-bezier(.2,.7,.2,1), border-color .15s, transform .15s;
    float: none !important;
}
.login .button-primary:hover,
.wp-core-ui .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:focus {
    background: var(--fc-peak-deep) !important;
    border-color: var(--fc-peak-deep) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.login .button-primary:active { transform: translateY(0); }

/* ---------- Below-form links ---------- */
.login #nav,
.login #backtoblog {
    text-align: center;
    padding: 0;
    margin: .35rem 0;
    text-shadow: none;
    font-size: .92rem;
}
.login #nav a,
.login #backtoblog a {
    color: var(--fc-stone) !important;
    text-decoration: none;
    transition: color .15s;
    font-weight: 500;
}
.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--fc-peak) !important;
}
.login #backtoblog a {
    color: var(--fc-peak) !important;
    font-weight: 600;
}
.login #backtoblog a:hover { color: var(--fc-peak-deep) !important; }

/* Separator dot between nav links */
.login #nav { padding-top: .25rem; }

/* ---------- Messages / errors ---------- */
.login .message,
.login .notice,
.login #login_error {
    background: #fff !important;
    border-left: 3px solid var(--fc-peak) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(11,27,43,.06) !important;
    color: var(--fc-ink) !important;
    padding: .85rem 1rem !important;
    font-size: .92rem;
    margin: 0 0 1rem !important;
}
.login #login_error {
    border-left-color: #B23A2A !important;
}
.login .notice-success,
.login .message {
    border-left-color: #2E8B57 !important;
}

/* ---------- Footer area ---------- */
.login .privacy-policy-page-link,
.language-switcher {
    text-align: center !important;
    margin-top: 1.25rem !important;
}
.login .privacy-policy-page-link a {
    color: var(--fc-stone) !important;
    font-size: .85rem;
}
.login .privacy-policy-page-link a:hover { color: var(--fc-ink) !important; }

.language-switcher form,
.login .language-switcher {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.language-switcher label,
.language-switcher select,
.language-switcher .button {
    font-size: .82rem !important;
    color: var(--fc-stone) !important;
}
.language-switcher select {
    background: rgba(255,255,255,.7);
    border: 1px solid var(--fc-line);
    border-radius: 6px;
    padding: .25rem .4rem;
}
.language-switcher .button {
    background: transparent !important;
    border: 1px solid var(--fc-line-strong) !important;
    border-radius: 6px !important;
    color: var(--fc-ink) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ---------- Brand footer line ---------- */
.fc-login-footer {
    text-align: center;
    margin-top: 2rem;
    color: var(--fc-stone-soft);
    font-size: .8rem;
    letter-spacing: .04em;
}
.fc-login-footer span { color: var(--fc-stone); }

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
    body.login { padding: 1rem; }
    .login form { padding: 1.25rem; border-radius: 12px; }
    .login h1 a { width: 80px; height: 60px; }
}