/*
 * wp-login.php branded styles — Renéra.
 *
 * Extracted verbatim from reneranutrition_login_styles() in functions.php
 * (was a ~700-line inline <style> heredoc). Enqueued on login_enqueue_scripts
 * with a dependency on `reneranutrition-design-system-login` (design-system.css),
 * so the --renera-* tokens used in the notice block below are defined first.
 *
 * Loaded ONLY on wp-login.php (the canonical /login/ surface) — see ADR-0001.
 * The two botanical background images resolve relative to THIS file
 * (assets/css/ -> ../images/decor/).
 *
 * NOTE: body.login starts at opacity:0 here; it is revealed to opacity:1 by the
 * inline reveal script in functions.php (login_head), with a <noscript> fallback.
 */
/* === Design tokens ===
   Aliases only — the canonical values live in design-system.css, which
   functions.php enqueues on wp-login.php (login_enqueue_scripts). Never put
   literal colours here; a palette change in design-system.css must flow
   through automatically. */
:root {
    --rn-olive-900: var(--renera-olive-900);
    --rn-olive-700: var(--renera-olive-700);
    --rn-olive-800: var(--renera-olive-800);
    --rn-olive-500: var(--renera-olive-500);
    --rn-clay-700: var(--renera-clay-700);
    --rn-sand-300: var(--renera-sand-300);
    --rn-sand-200: var(--renera-sand-200);
    --rn-clay-300: var(--renera-clay-300);
    --rn-ink: var(--renera-ink);
    --rn-mute: var(--renera-mute);
    --rn-ease: var(--renera-ease);
}

/* === Full-viewport grid layout === */
html {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.login {
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    grid-template-rows: minmax(100vh, auto) !important;
    grid-auto-rows: 0 !important;
    align-items: stretch !important;
    min-height: 100vh !important;
    background: var(--rn-sand-300) !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    color: var(--rn-ink) !important;
    opacity: 0;
}

/* === Form pane (#login is the WP default wrapper) === */
#login {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 36px 56px 56px !important;
    min-height: 100vh !important;
    background: var(--rn-sand-300) !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Botanical wash behind form content */
#login::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url('../images/decor/botanical-set-2.svg') !important;
    background-size: 120% !important;
    background-position: -60px -40px !important;
    background-repeat: no-repeat !important;
    opacity: 0.06 !important;
    pointer-events: none !important;
}

/* === Top bar (wordmark + back link — injected via login_message) === */
.rn-wp-top-bar {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 2 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}
.rn-wp-wordmark {
    font-family: 'Recoleta Alt', 'Recoleta', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    color: var(--rn-olive-700) !important;
    letter-spacing: -0.02em !important;
    text-decoration: none !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* Inline brand logo (renera-primary.svg) — inherits currentColor */
.rn-wp-wordmark svg {
    height: 0.82em !important;
    width: auto !important;
    display: block !important;
}
.rn-wp-top-link {
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--rn-mute) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 160ms var(--rn-ease) !important;
}
.rn-wp-top-link:hover { color: var(--rn-olive-700) !important; }

/* === Form content area — vertically centered === */
.rn-wp-form-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 440px !important;
    align-self: center !important;
}

/* Eyebrow */
.rn-wp-eyebrow {
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--rn-mute) !important;
    margin: 0 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.rn-wp-eyebrow::before {
    content: '' !important;
    display: inline-block !important;
    width: 28px !important;
    height: 1px !important;
    background: var(--rn-clay-300) !important;
}

/* Headline */
.rn-wp-headline {
    font-family: 'Recoleta', 'Newsreader', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 52px !important;
    line-height: 1.04 !important;
    letter-spacing: -0.015em !important;
    color: var(--rn-olive-700) !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
    text-wrap: balance !important;
}
.rn-wp-headline em {
    font-style: italic !important;
    color: var(--rn-olive-700) !important;
}

/* Lead */
.rn-wp-lead {
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--rn-mute) !important;
    margin: 0 0 40px !important;
    max-width: 380px !important;
}

/* === Form wrapper === */
#login h1 { display: none !important; }
.login form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
#loginform,
.rn-admin-row,
.rn-admin-signup-section,
.rn-wp-form-footer {
    width: 100% !important;
    box-sizing: border-box !important;
}
.login form p,
.login form .user-pass-wrap {
    margin-bottom: 22px !important;
}

/* === Labels === */
.login label:not(.rn-admin-remember) {
    display: block !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--rn-mute) !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

/* === Hairline underline inputs === */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rn-clay-300) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 14px 0 !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 16px !important;
    color: var(--rn-ink) !important;
    box-shadow: none !important;
    background-image: none !important;
    outline: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    height: auto !important;
    transition: border-color 160ms var(--rn-ease) !important;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-bottom-color: var(--rn-olive-700) !important;
    box-shadow: none !important;
    background-image: none !important;
}
.login input::placeholder {
    color: var(--rn-mute) !important;
    opacity: 0.6 !important;
}
input::-webkit-credentials-auto-fill-button,
input::-webkit-strong-password-auto-fill-button { visibility: hidden !important; }

/* === WP password toggle — restyle to match design === */
.wp-pwd {
    position: relative !important;
    border-bottom: 1px solid var(--rn-clay-300) !important;
    transition: border-color 160ms var(--rn-ease) !important;
}
.wp-pwd:focus-within {
    border-bottom-color: var(--rn-olive-700) !important;
}
.wp-pwd input[type="password"],
.wp-pwd input[type="text"] {
    border-bottom: 0 !important;
}
.wp-hide-pw {
    position: static !important;
    float: right !important;
    margin: 0 !important;
    color: var(--rn-mute) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 8px !important;
    min-height: unset !important;
    height: 36px !important;
    width: 36px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    transition: color 160ms var(--rn-ease) !important;
}
.wp-hide-pw:hover { color: var(--rn-olive-700) !important; background: transparent !important; }
.wp-hide-pw .dashicons {
    position: static !important;
    color: inherit !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    display: block !important;
}
.user-pass-wrap { display: flex !important; flex-direction: column !important; }

/* === Options row === */
.login .forgetmenot { display: none !important; }
.rn-admin-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: -6px 0 32px !important;
}
label.rn-admin-remember {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rn-ink) !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.rn-admin-remember input[type="checkbox"] {
    display: none !important;
    width: 0 !important; height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    opacity: 0 !important; position: absolute !important;
    pointer-events: none !important;
}
.rn-admin-check-box {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--rn-clay-300) !important;
    border-radius: 4px !important;
    background: var(--rn-sand-200) !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    transition: background 0.15s var(--rn-ease), border-color 0.15s var(--rn-ease) !important;
}
.rn-admin-remember input[type="checkbox"]:checked + .rn-admin-check-box {
    background: var(--rn-olive-700) !important;
    border-color: var(--rn-olive-700) !important;
}
.rn-admin-remember input[type="checkbox"]:checked + .rn-admin-check-box::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: auto !important;
    width: 9px !important;
    height: 5px !important;
    border-left: 1.5px solid var(--rn-sand-200) !important;
    border-bottom: 1.5px solid var(--rn-sand-200) !important;
    transform: rotate(-45deg) !important;
}
.rn-admin-forgot {
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--rn-olive-700) !important;
    text-decoration: none !important;
    transition: color 160ms var(--rn-ease) !important;
}
.rn-admin-forgot:hover {
    color: var(--rn-olive-500) !important;
}

/* === Submit button === */
.login .submit { padding: 0 !important; margin: 0 !important; }
.wp-core-ui .button-primary,
#wp-submit {
    background: var(--rn-olive-700) !important;
    border: 1px solid var(--rn-olive-700) !important;
    border-radius: 4px !important;
    height: 56px !important;
    width: 100% !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--rn-sand-200) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background 160ms var(--rn-ease) !important;
}
.wp-core-ui .button-primary:hover,
#wp-submit:hover {
    background: var(--rn-clay-700) !important;
    border-color: var(--rn-clay-700) !important;
    color: var(--rn-olive-900) !important;
}

/* === Hide WP nav links and layout-disrupting body children === */
#nav, #backtoblog, #language-switcher, .language-switcher,
.privacy-policy-page-link { display: none !important; }

/* === Suppress password manager icons === */
[data-lastpass-icon-root],[data-lastpass-infield-wrapper],
[data-lastpass-infield],.__lpform_input_wrap,[data-lastpass-type],
.lp-icon,[data-dashlane-clip],[data-1password-visible] { display: none !important; }

/* === Captcha hide === */
#cerber-captcha,.cerber-captcha-block,[class*="cerber"],[id*="cerber"],
.math-captcha-form-field,#wpcaptcha_block,.login-captcha,p.math-captcha { display: none !important; }

/* === Legal footer (injected by login_footer hook) === */
.rn-wp-legal {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 28px !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--rn-mute) !important;
    opacity: 0.6 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.rn-wp-legal a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
}
.rn-wp-legal a:hover { border-bottom-color: var(--rn-clay-300) !important; }
.rn-wp-legal-links { display: flex !important; gap: 18px !important; }

/* === Form footer — "New to Renéra?" === */
.rn-wp-form-footer {
    margin-top: 36px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    color: var(--rn-mute) !important;
    text-align: center !important;
    width: 100% !important;
}
.rn-wp-form-footer a {
    color: var(--rn-olive-700) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 6px !important;
}
.rn-wp-form-footer a:hover {
    color: var(--rn-olive-500) !important;
}
/* Suppress mouse-click focus box; preserve keyboard focus ring for a11y */
.rn-wp-form-footer a:focus { outline: none !important; box-shadow: none !important; }
.rn-wp-form-footer a:focus-visible {
    outline: 2px solid var(--rn-olive-500) !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
}

/* === Field control flex wrapper (injected by JS around each input) === */
.rn-wp-field-ctrl {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--rn-clay-300) !important;
    transition: border-color 160ms var(--rn-ease) !important;
}
.rn-wp-field-ctrl:focus-within {
    border-bottom-color: var(--rn-olive-700) !important;
}
.rn-wp-field-ctrl input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
/* ID selector (1,1,1) — .login-username does NOT exist in this WP version so class
   chains were never matching; #login beats any class-based rule unconditionally */
#login .rn-wp-field-ctrl input,
#login .rn-wp-field-ctrl input:focus,
#login .rn-wp-field-ctrl input:active {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Password field: .wp-pwd becomes the flex row */
.wp-pwd {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--rn-clay-300) !important;
    transition: border-color 160ms var(--rn-ease) !important;
}
.wp-pwd:focus-within {
    border-bottom-color: var(--rn-olive-700) !important;
}
.wp-pwd input[type="password"],
.wp-pwd input[type="text"] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    border-bottom: 0 !important;
}
.rn-wp-lead-icon {
    display: block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 14px !important;
    color: var(--rn-mute) !important;
    transition: color 160ms var(--rn-ease) !important;
    pointer-events: none !important;
}
.rn-wp-field-ctrl:focus-within .rn-wp-lead-icon,
.wp-pwd:focus-within .rn-wp-lead-icon {
    color: var(--rn-olive-700) !important;
}

/* === Imagery pane (injected via login_footer) === */
.rn-wp-image-pane {
    position: relative !important;
    overflow: hidden !important;
    background: var(--rn-olive-700) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 100vh !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    isolation: isolate !important;
}
.rn-wp-image-pane::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url('../images/decor/botanical-set-1.svg') !important;
    background-size: 130% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.12 !important;
    filter: brightness(2.5) saturate(0.3) !important;
    z-index: 0 !important;
}
.rn-wp-product-floater {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -55%) !important;
    max-width: 70% !important;
    z-index: 2 !important;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.25)) !important;
    display: block !important;
}
.rn-wp-baroque-corner {
    position: absolute !important;
    top: 40px !important;
    right: 40px !important;
    width: 64px !important;
    height: 64px !important;
    opacity: 0.5 !important;
    z-index: 2 !important;
    filter: brightness(2.5) saturate(0.3) !important;
    display: block !important;
}
.rn-wp-pane-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 56px 56px 60px !important;
    color: var(--rn-sand-200) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
.rn-wp-pane-eyebrow {
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(246,238,232,0.7) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.rn-wp-pane-eyebrow::before {
    content: '' !important;
    width: 28px !important;
    height: 1px !important;
    background: rgba(246,238,232,0.4) !important;
}
.rn-wp-pane-quote {
    font-family: 'Recoleta', 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 44px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
    color: var(--rn-sand-200) !important;
    margin: 0 !important;
    max-width: 480px !important;
    padding: 0 !important;
    border: none !important;
}
.rn-wp-pane-attribution {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(246,238,232,0.7) !important;
    margin-top: 8px !important;
}
.rn-wp-pane-attribution::before {
    content: '' !important;
    width: 36px !important;
    height: 1px !important;
    background: currentColor !important;
    opacity: 0.5 !important;
}

/* === Recovery screens — single column, no imagery pane ===
   The lost-password request (#lostpasswordform) and reset (#resetpassform)
   screens drop the two-column split so they match the WooCommerce
   "set new password" page (form-reset-password.php). Scoped via :has() to the
   recovery forms, so the main login stays two-column and untouched. */
body.login:has( #lostpasswordform ),
body.login:has( #resetpassform ) {
    grid-template-columns: 1fr !important;
}
body.login:has( #lostpasswordform ) .rn-wp-image-pane,
body.login:has( #resetpassform ) .rn-wp-image-pane {
    display: none !important;
}
/* Constrain the now-full-width form column to a comfortable centered measure */
body.login:has( #lostpasswordform ) #login,
body.login:has( #resetpassform ) #login {
    align-items: center !important;
}
body.login:has( #lostpasswordform ) #login > *,
body.login:has( #resetpassform ) #login > * {
    width: 100% !important;
    max-width: 540px !important;
}

/* === Branded notices ===
   wp-login.php renders failed-login (#login_error) and info messages
   ("Check your email…", lost-password instructions) as default WP
   .notice boxes — an unbranded white box with a coloured left bar that
   reads as foreign here. Restyle them to the SAME look as the WC card
   notices (login-page.css .rn-form-card .woocommerce-*) so the banner is
   branded in place — design tokens are available because design-system.css
   is enqueued on wp-login.php. */
#login .notice,
#login_error,
#login .message {
    list-style: none !important;
    margin: 0 0 22px !important;
    padding: 13px 16px !important;
    border-radius: var( --renera-r-sm ) !important;
    font-family: var( --renera-font-sans ) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var( --renera-ink ) !important;
    background-color: var( --renera-clay-100 ) !important;
    box-shadow: none !important;
}
#login .notice::before,
#login_error::before,
#login .message::before { display: none !important; }
#login .notice p,
#login_error p,
#login .message p { margin: 0 !important; padding: 0 !important; }
/* Error — terracotta left-stripe */
#login_error,
#login .notice-error {
    border: 1px solid var( --renera-clay-500 ) !important;
    border-left: 3px solid var( --renera-clay-700 ) !important;
}
/* Info / confirmation — olive-700 left-stripe (overrides the shared shell) */
#login .notice-info,
#login .message {
    background-color: var( --renera-sand-200 ) !important;
    border: 1px solid var( --renera-clay-300 ) !important;
    border-left: 3px solid var( --renera-olive-700 ) !important;
}
/* Success — olive left-stripe */
#login .notice-success {
    background-color: var( --renera-sand-100 ) !important;
    border: 1px solid var( --renera-clay-300 ) !important;
    border-left: 3px solid var( --renera-olive-500 ) !important;
}
#login .notice a,
#login_error a,
#login .message a {
    color: var( --renera-olive-700 ) !important;
    text-decoration: underline !important;
}

/* === Responsive — collapse at 980px === */
@media (max-width: 980px) {
    body.login {
        grid-template-columns: 1fr !important;
    }
    .rn-wp-image-pane { display: none !important; }
    #login { padding: 32px 24px !important; }
}