/*
 * Front Porch login styling.
 *
 * Loaded on:
 *   - /login/  (page-login.php template)  via wp_enqueue_scripts
 *   - /wp-login.php and password reset    via login_enqueue_scripts
 *
 * The two-panel split (hero left, form right) is the /login/ layout.
 * On wp-login.php we keep WP's centered-card structure but theme it
 * with the same tokens so the chrome matches.
 *
 * UX 1/4 ship 2026-05-04. Theme v2.5.1.
 */

/* ─── Tokens (duplicated from style.css so login is self-contained) ─── */
:root {
    --linen: #F5F0E8;
    --linen-deep: #ECE4D5;
    --paper: #FBF8F2;
    --surface: #FFFCF7;
    --ink: #2E2E2E;
    --charcoal-soft: #4A4A4A;
    --taupe: #8C7B6B;
    --taupe-light: #B5A797;
    --sage: #6B7C5E;
    --sage-soft: #8C9C7E;
    --sage-deep: #4F5E45;
    --accent: var(--sage);
    --accent-deep: var(--sage-deep);
    --rule: rgba(92,79,61,0.14);
    --rule-strong: rgba(92,79,61,0.24);
    --shadow-card: 0 1px 2px rgba(46,46,46,0.04), 0 4px 16px rgba(92,79,61,0.06);
    --ok: #4F7A4A;
    --ok-bg: #E5ECDF;
    --warn: #B8860B;
    --danger: #B5371F;
    --danger-bg: #F7E4DE;
    --serif: 'Cormorant Garamond', 'Hoefler Text', Garamond, serif;
    --sans: 'Lato', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ─── Page reset (only on the /login/ template body) ─── */
html, body { background: var(--linen); }
body.fp-login-page {
    margin: 0; padding: 0;
    min-height: 100vh;
    font-family: var(--sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Two-panel split layout ─── */
.fp-login-split {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hero panel (sage gradient) */
.fp-login-hero {
    background: linear-gradient(155deg, var(--sage) 0%, var(--sage-deep) 100%);
    color: var(--paper);
    padding: 32px 24px 36px;
    position: relative;
    overflow: hidden;
}
.fp-login-hero::before {
    /* warm dot texture overlay echoes .paper::before in the main app */
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
}
.fp-login-hero-inner { position: relative; max-width: 480px; margin: 0 auto; }

.fp-login-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fp-login-mark-svg { color: var(--paper); flex-shrink: 0; }
.fp-login-mark-name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.2px;
}
.fp-login-mark-name .italic { font-style: italic; }
.fp-login-mark-sub {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(251,248,242,0.78);
    margin-top: 4px;
}

.fp-login-welcome {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    color: var(--paper);
}
.fp-login-welcome .italic { font-style: italic; color: var(--paper); opacity: 0.82; }

.fp-login-tagline {
    font-family: var(--sans);
    font-size: 13px;
    color: rgba(251,248,242,0.72);
    margin: 0;
}

/* Form panel */
.fp-login-form {
    flex: 1;
    background: var(--linen);
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
}
.fp-login-form-inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 24px 20px;
}

.fp-login-form-head { margin-bottom: 14px; }
.fp-login-form-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ink);
}
.fp-login-form-sub {
    font-size: 13px;
    color: var(--taupe);
    margin: 0;
    line-height: 1.4;
}

/* Magic-login shortcode chrome */
.fp-login-magic { margin-top: 4px; }
.fp-login-magic label,
#magic-login-shortcode label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 6px;
}
.fp-login-magic input[type="text"],
.fp-login-magic input[type="email"],
#magic-login-shortcode input[type="text"],
#magic-login-shortcode input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
    font-family: var(--sans);
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-radius: 10px;
    outline: none;
}
.fp-login-magic input:focus,
#magic-login-shortcode input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107,124,94,0.16);
}
.fp-login-magic input[type="submit"],
.fp-login-magic button[type="submit"],
#magic-login-shortcode input[type="submit"],
#magic-login-shortcode button[type="submit"] {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--paper);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.fp-login-magic input[type="submit"]:hover,
.fp-login-magic button[type="submit"]:hover,
#magic-login-shortcode input[type="submit"]:hover,
#magic-login-shortcode button[type="submit"]:hover {
    background: var(--accent-deep);
}
.fp-login-magic #login_error,
#magic-login-shortcode #login_error,
.fp-login-magic .magic-login-message,
#magic-login-shortcode .magic-login-message {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.fp-login-magic #login_error,
#magic-login-shortcode #login_error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(181,55,31,0.18);
}
.fp-login-magic .magic-login-message,
#magic-login-shortcode .magic-login-message {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid rgba(79,122,74,0.18);
}

/* Password fallback toggle */
.fp-login-toggle { text-align: center; margin-top: 18px; }
.fp-login-toggle button {
    background: none; border: none; padding: 6px 4px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--taupe);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fp-login-toggle button:hover { color: var(--accent-deep); }

/* Password fallback panel */
.fp-login-pw {
    display: none;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.fp-login-pw.is-open { display: block; }
.fp-login-pw .login-username,
.fp-login-pw .login-password,
.fp-login-pw .login-remember,
.fp-login-pw .login-submit { margin-bottom: 12px; }
.fp-login-pw label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 6px;
}
.fp-login-pw input[type="text"],
.fp-login-pw input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
    font-family: var(--sans);
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-radius: 10px;
    outline: none;
}
.fp-login-pw input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107,124,94,0.16);
}
.fp-login-pw .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 13px;
    color: var(--charcoal-soft);
}
.fp-login-pw .login-submit input[type="submit"] {
    display: block;
    width: 100%;
    min-height: 48px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.fp-login-pw .login-submit input[type="submit"]:hover {
    background: var(--accent);
    color: var(--paper);
}

.fp-pw-error {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(181,55,31,0.18);
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
}
.fp-pw-lostpw { text-align: center; margin-top: 8px; }
.fp-pw-lostpw a { font-size: 12px; color: var(--taupe); text-decoration: none; }
.fp-pw-lostpw a:hover { text-decoration: underline; color: var(--accent-deep); }

/* Support contact line */
.fp-login-support {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    text-align: center;
    font-size: 13px;
    color: var(--taupe);
    line-height: 1.5;
}
.fp-login-support a { color: var(--accent-deep); text-decoration: none; }
.fp-login-support a:hover { text-decoration: underline; }

/* Footer */
.fp-login-foot {
    text-align: center;
    margin-top: 24px;
    padding: 0 16px 8px;
    font-size: 11px;
    color: var(--taupe);
    letter-spacing: 0.04em;
}

/* ─── Desktop split (>=768px) ─── */
@media (min-width: 768px) {
    .fp-login-split {
        flex-direction: row;
        align-items: stretch;
    }
    .fp-login-hero {
        flex: 0 0 45%;
        max-width: 540px;
        padding: 64px 56px;
        display: flex;
        align-items: center;
    }
    .fp-login-hero-inner { width: 100%; }
    .fp-login-mark-svg { width: 48px; height: 48px; }
    .fp-login-mark-name { font-size: 26px; }
    .fp-login-welcome { font-size: 36px; margin-top: 20px; margin-bottom: 12px; }
    .fp-login-tagline { font-size: 14px; }

    .fp-login-form {
        flex: 1 1 auto;
        padding: 64px 32px 32px;
        justify-content: center;
    }
    .fp-login-form-inner { padding: 32px 28px; }
    .fp-login-foot { margin-top: 40px; }
}

/* ─── wp-login.php theming (default WP login + password reset) ─── */
/*
 * The default WP login chrome is centered-card. We theme it so the
 * tokens, logo, and button match /login/ even though the layout differs.
 */
body.login {
    background: var(--linen) !important;
    font-family: var(--sans) !important;
    color: var(--ink) !important;
}
body.login #login {
    padding: 40px 0 !important;
    width: 380px !important;
}
body.login h1 a {
    /* Replace the WP logo with a sage circle + Cormorant wordmark via CSS.
       The actual link href + text comes from login_headerurl + login_headertext
       filters in functions.php. */
    background: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.05 !important;
    font-family: var(--serif) !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    display: block;
    text-align: center;
    margin-bottom: 4px;
}
body.login h1 a::after {
    content: "of Bowdon \00B7 Staff Intranet";
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-top: 4px;
}
body.login form {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-card) !important;
    padding: 24px 24px 28px !important;
    margin-top: 18px !important;
}
body.login form label {
    color: var(--taupe) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule-strong) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    font-family: var(--sans) !important;
    box-shadow: none !important;
    min-height: 44px !important;
}
body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(107,124,94,0.16) !important;
    outline: none !important;
}
body.login .button-primary,
body.login .wp-core-ui .button-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--paper) !important;
    border-radius: 10px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-family: var(--sans) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    width: 100% !important;
    float: none !important;
}
body.login .button-primary:hover,
body.login .wp-core-ui .button-primary:hover,
body.login .button-primary:focus,
body.login .wp-core-ui .button-primary:focus {
    background: var(--accent-deep) !important;
    border-color: var(--accent-deep) !important;
}
body.login .forgetmenot { font-size: 13px !important; color: var(--charcoal-soft) !important; }
body.login p.submit { margin-top: 18px !important; }
body.login #nav,
body.login #backtoblog {
    text-align: center !important;
    padding: 0 !important;
    margin: 14px 0 !important;
}
body.login #nav a,
body.login #backtoblog a {
    color: var(--taupe) !important;
    text-decoration: none !important;
    font-size: 13px !important;
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: var(--accent-deep) !important;
    text-decoration: underline !important;
}
body.login .message,
body.login .notice,
body.login #login_error {
    border-radius: 10px !important;
    border-left-width: 4px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
}
body.login #login_error {
    background: var(--danger-bg) !important;
    border-left-color: var(--danger) !important;
    color: var(--danger) !important;
}
body.login .message {
    background: var(--ok-bg) !important;
    border-left-color: var(--ok) !important;
    color: var(--ok) !important;
}
body.login .privacy-policy-page-link { display: none !important; }

/* Custom intro line injected via login_message filter */
.fp-login-intro {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    text-align: center;
    margin: 18px 0 0;
    line-height: 1.2;
}
.fp-login-intro .italic { font-style: italic; color: var(--accent-deep); }