/* ==========================================================================
   Harmonie Euterpe — inlogscherm (restyling van wp-login.php)
   Hergebruikt zoveel mogelijk dezelfde tokens als het thema (app.css),
   zodat het inlogscherm er niet los van staat.
   ========================================================================== */

body.login {
  background: #0a0e27 !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Aurora-achtergrond, net als op de rest van de site */
body.login::before,
body.login::after,
body.login .he-blob-3 {
  content: '';
  position: fixed;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}
body.login::before {
  width: 620px; height: 620px; background: #4f6df5; top: -180px; left: -160px;
}
body.login::after {
  width: 560px; height: 560px; background: #a855f7; top: 40%; right: -220px;
}

body.login div#login {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  padding: 2.5rem 0;
  margin: 6vh auto;
}

/* Merk-blokje boven het formulier (golfje + naam + tagline) */
.he-login-brand { text-align: center; margin-bottom: 1.5rem; }
.he-login-brand .wave { justify-content: center; margin: 0 auto .85rem; }
.he-login-brand-name {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.he-login-brand-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
  margin: .35rem 0 0;
}

/* Verberg het standaard WordPress-logo/titel-element: wij tonen ons eigen
   merk-blokje via login_header hierboven. */
body.login h1 { display: none; }

/* Het glazen kaartje rond het formulier */
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform,
body.login #resetpassform {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  border-radius: 1.5rem;
  padding: 2rem !important;
  position: relative;
}
body.login #loginform::before,
body.login #registerform::before,
body.login #lostpasswordform::before,
body.login #resetpassform::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,124,250,.7), rgba(168,85,247,.7), transparent);
  border-radius: inherit;
}

body.login label {
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  font-weight: 500;
}

body.login .description.indicator-hint {
  color: rgba(255,255,255,.75);
}

body.login input[type=text],
body.login input[type=password],
body.login input[type=email] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: .9rem !important;
  color: #fff !important;
  padding: .6rem .9rem !important;
  font-size: .875rem !important;
  box-shadow: none !important;
  height: auto !important;
  width: 100% !important;
}
body.login input[type=text]:focus,
body.login input[type=password]:focus,
body.login input[type=email]:focus {
  border-color: rgba(91,124,250,.6) !important;
  box-shadow: 0 0 0 3px rgba(91,124,250,.18) !important;
}

body.login .submit {
  margin-top: .5rem;
}
body.login input.button-primary,
body.login input#wp-submit, body.login button#he-webauthn-login-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%;
  padding: .7rem 1.3rem !important; border-radius: 9999px !important;
  font-weight: 600 !important; font-size: .875rem !important; color: #fff !important;
  background: linear-gradient(135deg, #5b7cfa, #a855f7) !important;
  box-shadow: 0 10px 30px -8px rgba(168,85,247,.55) !important;
  border: none !important; text-shadow: none !important;
  transition: all .2s ease;
  cursor: pointer;
  height: auto !important;
}
body.login input.button-primary:hover,
body.login input#wp-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -6px rgba(168,85,247,.7) !important;
}

body.login .button.wp-generate-pw {
	display: none !important;
}

/* Links onder het formulier: "wachtwoord vergeten" + terug-naar-site */
body.login #nav, body.login #backtoblog {
  text-align: center;
  margin-top: 1.25rem !important;
}
body.login #nav a, body.login #backtoblog a {
  color: rgba(255,255,255,.55) !important;
  font-size: .8rem;
  text-decoration: none;
  transition: color .15s ease;
}
body.login #nav a:hover, body.login #backtoblog a:hover {
  color: #a9bcff !important;
}

/* Meldingen (foutmeldingen / succesmeldingen) in het meldingen-design */
body.login #login_error,
body.login .message,
body.login .success {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
}
body.login #login_error p, body.login .message p, body.login .success p { margin: 0; }

/* ==========================================================================
   07 · Meldingen — zelfde ontwerp als de rest van de site. Op het
   inlogscherm wordt dit apart geladen omdat login.css los staat van
   app.css (die niet op wp-login.php wordt geladen).
   ========================================================================== */
body.login .he-notice {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem 1.1rem; border-radius: 1.1rem;
  text-align: left; margin: 0 0 1.25rem;
}
body.login .he-notice-icon { flex-shrink: 0; margin-top: .1rem; }
body.login .he-notice-title { font-weight: 700; font-size: .875rem; margin: 0 0 .15rem; }
body.login .he-notice-text { font-size: .8rem; margin: 0; line-height: 1.5; opacity: .9; }

body.login .he-notice-info { background: rgba(91,124,250,.12); border: 1px solid rgba(91,124,250,.35); color: #dce4ff; }
body.login .he-notice-info .he-notice-icon, body.login .he-notice-info .he-notice-title { color: #a9bcff; }

body.login .he-notice-warning { background: rgba(242,193,78,.12); border: 1px solid rgba(242,193,78,.35); color: #fbeecb; }
body.login .he-notice-warning .he-notice-icon, body.login .he-notice-warning .he-notice-title { color: #f6d888; }

body.login .he-notice-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #ffd9d9; }
body.login .he-notice-error .he-notice-icon, body.login .he-notice-error .he-notice-title { color: #fca5a5; }

body.login .he-notice-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #d5f5e0; }
body.login .he-notice-success .he-notice-icon, body.login .he-notice-success .he-notice-title { color: #86efac; }

/* Instructieteksten van WordPress zelf (bv. bij "wachtwoord vergeten" en
   "check je e-mail") komen niet via ons meldingen-systeem binnen, maar als
   losse <p class="message">. Die geven we dezelfde info-uitstraling mee,
   met een eigen icoon (via ::before), zodat ze goed leesbaar zijn.
   De :not(:has(...)) zorgt dat een melding die we zelf al als he-notice
   opmaken (login_errors/login_messages) niet dubbel wordt ingepakt. */
body.login p.message:not(:has(.he-notice)), body.login div.message:not(:has(.he-notice)) {
  display: flex; align-items: flex-start; gap: .75rem;
  background: rgba(91,124,250,.12) !important;
  border: 1px solid rgba(91,124,250,.35) !important;
  color: #dce4ff !important;
  border-radius: 1.1rem !important;
  padding: .9rem 1.1rem !important;
  font-size: .8rem !important;
  line-height: 1.5;
  margin: 0 0 1.25rem !important;
}
body.login p.message:not(:has(.he-notice))::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px; margin-top: .05rem;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bcff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
body.login #pass-strength-result {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	color: #dce4ff !important;
	border-radius: .7rem !important;
	padding: .4rem .7rem !important;
	font-size: .8rem !important;
	line-height: 1.5;
	margin: 0.25rem 0 1.25rem !important;
}
body.login #pass-strength-result.short, body.login #pass-strength-result.bad { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #ffd9d9; }
body.login #pass-strength-result.good { background: rgba(242,193,78,.12); border: 1px solid rgba(242,193,78,.35); color: #fbeecb; }
body.login #pass-strength-result.strong { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #d5f5e0; }

/* Checkbox "onthoud mij": nette, op-merk gestylede checkbox in plaats van
   de kale browserstandaard, plus wat meer lucht rond het rijtje. */
body.login .forgetmenot {
  display: flex; align-items: center; gap: .6rem;
  margin: .35rem 0 1.1rem !important;
}
body.login .forgetmenot label {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  font-size: .8rem; color: rgba(255,255,255,.7); cursor: pointer;
}
body.login input#rememberme {
  appearance: none; -webkit-appearance: none;
  width: 1.15rem; height: 1.15rem; margin: 0;
  border-radius: .4rem; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: all .15s ease;
}
body.login input#rememberme:checked {
  background-image: linear-gradient(135deg, #5b7cfa, #a855f7);
  border-color: transparent;
}
body.login input#rememberme:checked::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.login input#rememberme:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(91,124,250,.28);
}
body.login .wp-hide-pw { display: none !important; }

/* "Terug naar blog"-link: bewust verborgen, leden horen altijd via het
   ledenomgeving-menu verder te navigeren. */
body.login #backtoblog { display: none !important; }

/* Taalkiezer onderaan het inlogscherm: bewust verborgen. */
body.login #language-switcher,
body.login .language-switcher { display: none !important; }

/* Select-elementen op het inlogscherm (bv. indien een plugin er een
   toevoegt): donkere achtergrond zodat de tekst leesbaar blijft. */
body.login select {
  background: #13173a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: .6rem !important;
}
body.login select option { background: #13173a; color: #fff; }

/* Checkbox "onthoud mij" */
body.login input[type=checkbox] {
  accent-color: #7c3aed;
  width: 1rem; height: 1rem;
}

/* Privacy-linkjes onderaan, indien aanwezig */
body.login .privacy-policy-page-link {
  text-align: center;
}
body.login .privacy-policy-page-link a { color: rgba(255,255,255,.4); font-size: .75rem; }

::selection { background: rgba(168,85,247,.4); }

/* Knop "Inloggen met pincode of biometrie" (WebAuthn), zie inc/login.php + assets/js/login.js */
.he-login-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0 1.1rem 0; font-size: .72rem; color: rgba(255,255,255,.35);
}
.he-login-divider::before, .he-login-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.12);
}
#he-webauthn-login-status {
	color: rgb(255 255 255 / 0.4);
	font-size: 0.75rem;
	line-height: 1rem;
	margin-top: 0.5rem;
}