/**
 * Bonviver — login.css
 * Styles the WordPress login page to match the Bonviver brand
 */

/* ── BRAND TOKENS ── */
:root {
  --navy:     #1A2F4E;
  --navy-mid: #1F3A5F;
  --navy-lite:#264873;
  --blue:       #2E6DA4;
  --sky:       #5B9BC9;
  --gold:       #E2B84A;
  --gold-light: #F0D080;
  --gold-pale:  #FBF3DC;
  --champagne:  #C9A84C;
  --cream:      #FAF8F3;
  --cream-dark: #F0EDE4;
  --parchment:  #E8E2D4;
  --ink:        #2C2C2C;
  --slate:      #5A6472;
  --mist:       #9AABB8;
  --white:      #FFFFFF;
  --alert-red:  #E05A5A;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 40px;
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Outfit', sans-serif;
}

/* ── PAGE BACKGROUND ── */
body.login {
  background: var(--navy) !important;
  font-family: var(--font-body) !important;
  position: relative;
  overflow: hidden;
}

/* Decorative rings — same as hero */
body.login::before,
body.login::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.10);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 0;
}
body.login::before { width: 600px; height: 600px; }
body.login::after  { width: 1000px; height: 1000px; border-color: rgba(201,168,76,0.06); }

/* Grain overlay */
body.login .login-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  z-index: 0;
}

/* ── LOGO AREA ── */
#login h1 a,
.login h1 a {
  background-image: none !important;
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  display: block !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 auto 0.4rem !important;
  box-shadow: none !important;
  outline: none !important;
}

/* The dot */
#login h1 a::after,
.login h1 a::after {
  content: '.';
  color: var(--gold);
}

#login h1,
.login h1 {
  text-align: center;
  margin-bottom: 0.5rem !important;
}

/* Tagline below logo */
#login h1 + p,
.login-tagline {
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
  font-family: var(--font-body);
  margin-bottom: 2rem;
  letter-spacing: 0.3px;
}

/* ── LOGIN FORM WRAPPER ── */
#login,
.login #login {
  width: 100% !important;
  max-width: 420px !important;
  padding: 0 1.5rem !important;
  position: relative;
  z-index: 1;
}

/* ── FORM BOX ── */
#loginform,
.login form {
  background: var(--white) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  padding: 2.5rem !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  margin-top: 0 !important;
}

/* ── FORM LABELS ── */
.login form label,
#loginform label {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

/* ── INPUTS ── */
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"],
#loginform input[type="text"],
#loginform input[type="password"] {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--ink) !important;
  background: var(--cream) !important;
  border: 1.5px solid var(--parchment) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  height: auto !important;
  line-height: 1.5 !important;
  margin-bottom: 1.25rem !important;
}

.login form input[type="text"]:focus,
.login form input[type="password"]:focus,
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(46,109,164,0.12) !important;
  outline: none !important;
  background: var(--white) !important;
}

/* ── REMEMBER ME ── */
.login form .forgetmenot {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0 !important;
}

.login form .forgetmenot label {
  font-size: 0.82rem !important;
  color: var(--slate) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.login form input[type="checkbox"] {
  accent-color: var(--blue) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* ── SUBMIT BUTTON ── */
.login form .submit,
#loginform .submit {
  margin-top: 1.5rem !important;
}

.login form input[type="submit"],
#loginform input[type="submit"],
#wp-submit {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  background: var(--navy) !important;
  color: var(--gold) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 0.9rem 1rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  letter-spacing: 0.3px !important;
  text-shadow: none !important;
}

.login form input[type="submit"]:hover,
#wp-submit:hover {
  background: var(--navy-lite) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(26,47,78,0.3) !important;
  color: var(--gold) !important;
}

.login form input[type="submit"]:focus,
#wp-submit:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(226,184,74,0.35) !important;
}

/* ── LINKS BELOW FORM ── */
#nav,
#backtoblog,
.login #nav,
.login #backtoblog {
  text-align: center !important;
  padding: 0 !important;
  margin-top: 1.25rem !important;
}

#nav a,
#backtoblog a,
.login #nav a,
.login #backtoblog a {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

#nav a:hover,
#backtoblog a:hover,
.login #nav a:hover,
.login #backtoblog a:hover {
  color: var(--gold) !important;
}

/* ── ERROR / NOTICE MESSAGES ── */
#login_error,
.login #login_error {
  background: #FDEAEA !important;
  border: none !important;
  border-left: 4px solid var(--alert-red) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  color: #9B3A3A !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: none !important;
}

.login .message,
.login .success {
  background: var(--gold-pale) !important;
  border: none !important;
  border-left: 4px solid var(--gold) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  color: #7A5700 !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: none !important;
}

/* ── PRIVACY POLICY LINK ── */
.login #login_privacy_policy_link_container,
#login_privacy_policy_link_container {
  text-align: center !important;
  margin-top: 1rem !important;
}

.login #login_privacy_policy_link_container a {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.35) !important;
  text-decoration: none !important;
}

.login #login_privacy_policy_link_container a:hover {
  color: var(--gold) !important;
}

/* ── HIDE WORDPRESS BRANDING ── */
.login #backtoblog { display: none !important; }

/* ── MEMBER BADGE BELOW FORM ── */
.bv-login-footer {
  text-align: center;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.bv-login-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl);
  padding: 0.4rem 1rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  font-family: var(--font-body);
}

.bv-login-trust-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sky);
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  #login, .login #login { padding: 0 1rem !important; }
  #loginform, .login form { padding: 2rem 1.5rem !important; }
  body.login::before { width: 400px; height: 400px; }
  body.login::after  { width: 700px; height: 700px; }
}

/* ── FORGOT PASSWORD & JOIN LINKS ── */
.bv-login-extras {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--parchment) !important;
}
.bv-forgot-link,
.bv-join-link {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  display: block !important;
  text-align: center !important;
}
.bv-forgot-link {
  color: var(--blue) !important;
}
.bv-forgot-link:hover {
  color: var(--champagne) !important;
}
.bv-join-link {
  color: var(--slate) !important;
}
.bv-join-link strong {
  color: var(--navy) !important;
  font-weight: 600 !important;
}
.bv-join-link:hover {
  color: var(--navy) !important;
}

/* ── LOST PASSWORD / RESET MESSAGE ── */
.bv-reset-message {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.6) !important;
  text-align: center !important;
  line-height: 1.65 !important;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* ── RESET PASSWORD SUCCESS MESSAGE ── */
.login .message {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
}

/* ── HIDE DEFAULT WP LOST PASSWORD LINK (we add our own) ── */
#nav a[href*="lostpassword"] { display: none !important; }

/* ── FORGOT PASSWORD & JOIN LINKS (JS injected) ── */
#bv-login-extras {
  text-align: center !important;
  margin-top: 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.85rem !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
  clear: both !important;
}

#bv-login-extras a {
  font-family: var(--font-body) !important;
  font-size: 0.83rem !important;
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

#bv-login-extras a:first-child {
  color: var(--sky) !important;
}

#bv-login-extras a:first-child:hover {
  color: var(--gold) !important;
}

#bv-login-extras a:last-child {
  color: rgba(255,255,255,0.45) !important;
}

#bv-login-extras a:last-child strong {
  color: var(--white) !important;
  font-weight: 600 !important;
}

#bv-login-extras a:last-child:hover {
  color: rgba(255,255,255,0.7) !important;
}