/**
 * WordPress login page styling.
 *
 * Overrides for wp-login.php: removes WP defaults, centers the form,
 * applies brand typography + button styling, customizes password show/hide
 * toggle, error/message panels, and the "back to site" / "forgot password"
 * helper links.
 *
 * Loaded via the same enqueue as everything else; the body.login selector
 * scopes it to the WP login page only.
 *
 * @package OpcinaTema
 */

body.login {
  min-height: 100vh;
  background: var(--mt-paper);
  color: var(--mt-ink);
  font-family: var(--mt-font-sans);
}

body.login #login {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body.login #login > h1,
body.login #nav,
body.login #backtoblog,
body.login .language-switcher,
body.login .privacy-policy-page-link,
body.login .forgetmenot {
  display: none;
}

/* -- Login header: brand logo + site name above the form -- */
.opcina-login-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: min(100% - 2rem, 760px);
  margin: 0 auto;
  padding-top: 2.8rem;
}

.opcina-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--mt-ink);
  text-decoration: none;
}

.opcina-login-brand__logo {
  width: auto;
  height: 3.4rem;
}

.opcina-login-brand__name {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
}

.opcina-login-back {
  width: min(100% - 2rem, 760px);
  margin: 3.6rem auto 1.8rem;
}

.opcina-login-back a,
.opcina-login-forgot a {
  color: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration-color: var(--mt-color-primary-bright);
  text-decoration-thickness: 0.16rem;
  text-underline-offset: 0.14rem;
}

body.login #login_error,
body.login .message,
body.login .notice {
  width: min(100% - 2rem, 760px);
  margin: 1rem auto;
  border-left-color: var(--mt-color-primary);
  box-shadow: none;
}

body.login form#loginform {
  width: min(100% - 2rem, 760px);
  min-height: 31.5rem;
  margin: 0 auto 5rem;
  padding: 4.2rem 3rem 3rem;
  background: var(--mt-color-primary);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(3, 25, 39, 0.14);
  color: var(--mt-paper);
}

body.login form#loginform::before {
  display: block;
  margin-bottom: 2.3rem;
  color: var(--mt-paper);
  font-size: clamp(2rem, 3vw, 2.45rem);
  font-weight: 800;
  line-height: 1.1;
  content: "Prijava";
}

body.login form#loginform p,
body.login form#loginform .user-pass-wrap {
  margin: 0 0 1.65rem;
}

body.login label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--mt-paper);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}

body.login form .input,
body.login input[type=text],
body.login input[type=password] {
  width: min(100%, 31rem);
  min-height: 3.25rem;
  padding: 0 0.85rem;
  background: var(--mt-paper);
  border: 2px solid transparent;
  border-radius: 3px;
  box-shadow: none;
  color: var(--mt-ink);
  font: inherit;
  font-size: 1.15rem;
}

body.login form .input:focus,
body.login input[type=text]:focus,
body.login input[type=password]:focus {
  border-color: var(--mt-color-primary-bright);
  box-shadow: 0 0 0 2px var(--mt-paper);
  outline: 0;
}

body.login .wp-pwd {
  width: min(100%, 31rem);
}

body.login .button.wp-hide-pw {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  padding: 0;
  border: 0;
  place-items: center;
  background: transparent;
  box-shadow: none;
  color: var(--mt-ink);
}

body.login .button.wp-hide-pw:hover,
body.login .button.wp-hide-pw:focus,
body.login .button.wp-hide-pw:active,
body.login .button.wp-hide-pw:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

body.login .button.wp-hide-pw .dashicons {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  background: currentColor;
  margin: 0;
  font-size: 0;
  line-height: 1;
  transform: none;
  -webkit-mask: url("../../svg/eye-password-show-svgrepo-com.svg") center/contain no-repeat;
  mask: url("../../svg/eye-password-show-svgrepo-com.svg") center/contain no-repeat;
}

body.login .button.wp-hide-pw .dashicons::before {
  display: none;
  content: "";
}

body.login .button.wp-hide-pw .dashicons-hidden {
  -webkit-mask-image: url("../../svg/eye-password-hide-svgrepo-com.svg");
  mask-image: url("../../svg/eye-password-hide-svgrepo-com.svg");
}

.opcina-login-forgot {
  margin: -0.55rem 0 0;
}

.opcina-login-forgot a {
  color: var(--mt-paper);
  text-decoration-color: var(--mt-paper);
}

body.login .submit {
  margin: 7rem 0 0;
  padding: 0;
}

body.login .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0 1.05rem;
  background: var(--mt-paper);
  border: 2px solid var(--mt-paper);
  border-radius: 999px;
  box-shadow: none;
  color: var(--mt-color-primary);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  transition: background 180ms ease, color 180ms ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus-visible {
  background: var(--mt-color-primary);
  color: var(--mt-paper);
}