/**
 *	MIXIN: RANGE
 *
 *	@version 1.1
 *	@date    2026-03-11
 *	@author  michael@mdg.agency
 *
 *	This SASS mixin creates a media query for one or more predefined ranges of
 *	screen widths. It requires a map of named ranges with min and/or max values (in
 *	pixels). Example:
 *
 *		$ranges: (
 *			small:   (max: 500),
 *			medium:  (min: 501, max: 768),
 *			large:   (min: 769)
 *		);
 *
 *	Bootstrap ranges are created by default, but may be overwritten in your
 *	stylesheet after this file is included. It was designed to be used on documents
 *	with at least one finite range (with both min and max), but should work equally
 *	well with a mobile-first design.
 *
 *	Use examples:
 *
 *		@include range.query(small) { ... }
 *
 *		@include range.query(small, medium) { ... }
 *
 *		@include range.query(medium, large) { ... }
 *
 *		@include range.query(alpha, bravo, charlie) { ... }
 *
 *	Argument order does not matter. The ranges are merged inclusively, meaning each
 *	included range can only expand the total scope of the final media query, not
 *	contract it. This means that if ANY included range has a "null" max or min, the
 *	final media query will not have a max-width or min-width constraint,
 *	respectively. It also means that if there are gaps between the included ranges,
 *	they will be ignored, since both min and max will have been provided.
 *
 *	A more sophisticated version of this mixin would detect gaps in the included
 *	ranges and output multiple media queries.

*/
#login .button-primary,
#login .button:not(.wp-hide-pw) {
  border-radius: 999px;
  background-color: var(--wp--context--button-base-color);
  color: var(--wp--context--button-text-color);
}
#login .button-primary:hover,
#login .button:hover:not(.wp-hide-pw) {
  background-color: var(--wp--context--button-hover-color);
  color: var(--wp--context--button-text-color);
}
#login .button-primary,
#login .button:not(.wp-hide-pw) {
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding-block: 0.75em;
  padding-inline: 2em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  outline: none;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  #login .button-primary,
  #login .button:not(.wp-hide-pw) {
    transform: scale(1);
  }
  #login .button-primary:hover,
  #login .button:hover:not(.wp-hide-pw) {
    transform: scale(1.05);
  }
  #login .button-primary,
  #login .button:not(.wp-hide-pw) {
    transition: transform 0.2s;
  }
}
.is-style-outline #login .button-primary, #login .is-style-outline .button-primary,
.is-style-outline #login .button:not(.wp-hide-pw),
#login .is-style-outline .button:not(.wp-hide-pw) {
  border: 2px solid currentColor;
  background-color: transparent;
  --wp--context--button-text-color: var(--wp--context--foreground-color);
  --wp--context--button-hover-color: var(--wp--context--foreground-color);
  --wp--context--button-base-color: var(--wp--context--foreground-color);
}

.login-main-inner {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
  padding-block: calc(2 * var(--wp--context--gap));
  padding-inline: var(--wp--context--gap);
  container-type: inline-size;
}

body.mdg-login {
  --login-input-height: 3.25rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
body.mdg-login .header #menu-actions {
  display: none;
}
body.mdg-login .screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal !important;
}

.login-main {
  --wp--context--background-color: var(--wp--custom--context--neutral--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--neutral--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--neutral--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--neutral--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--neutral--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--neutral--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--neutral--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--neutral--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--neutral--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--neutral--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--neutral--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--neutral--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--neutral--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.login-decoration {
  display: none;
  position: absolute;
  bottom: 0;
  left: -2rem;
  aspect-ratio: 17/22;
  width: min(400px, 50vw - 18rem);
  background-image: url(../../../common/images/section_decoration_animals.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .login-decoration {
    display: block;
  }
}

.login-main-inner {
  position: relative;
  width: 100%;
}

#login {
  --wp--context--background-color: var(--wp--custom--context--default--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--default--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--default--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--default--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--default--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--default--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--default--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--default--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--default--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--default--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--default--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--default--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--default--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
  display: flex;
  flex-direction: column;
  gap: var(--wp--context--gap);
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding: calc(1.5 * var(--wp--context--gap));
  border-radius: var(--wp--custom--spacing--corner);
  box-shadow: var(--wp--preset--shadow--light);
  font-size: var(--wp--preset--font-size--40);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  #login {
    padding: var(--wp--context--gap);
  }
}
#login .wp-login-logo,
#login #backtoblog,
#login .privacy-policy-page-link {
  display: none;
}
#login p {
  margin: 0;
}

.login-intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-intro-title {
  margin: 0;
  color: var(--wp--context--heading-text-color);
  font-size: var(--wp--preset--font-size--80);
  font-weight: 800;
  line-height: 1.1;
}

#login .notice,
#login .message,
#login .success {
  margin: 0;
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid var(--wp--custom--color--primary);
  border-radius: var(--wp--custom--spacing--corner);
  background-color: var(--wp--custom--color--gray);
  overflow-wrap: anywhere;
}
#login .notice p + p,
#login .message p + p,
#login .success p + p {
  margin-block-start: 0.5em;
}
#login .notice-success,
#login .success {
  border-color: var(--wp--custom--color--green);
}
#login .notice-error {
  border-color: var(--wp--custom--color--red);
  background-color: color-mix(in srgb, var(--wp--custom--color--red) 8%, var(--wp--custom--color--white));
}
#login .login-error-list {
  margin: 0;
  padding-inline-start: 1.25em;
}

#login form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
#login form br {
  display: none;
}
#login form.shake {
  animation: login-shake 0.2s cubic-bezier(0.19, 0.49, 0.38, 0.79) both;
  animation-iteration-count: 3;
}
@media (prefers-reduced-motion: reduce) {
  #login form.shake {
    animation: none;
  }
}
#login label {
  display: block;
  margin-block-end: 0.5em;
  font-weight: 700;
  cursor: pointer;
}
#login .input,
#login input[type=text],
#login input[type=email],
#login input[type=password] {
  display: block;
  width: 100%;
  height: var(--login-input-height);
  margin: 0;
  padding: 0 1em;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--40);
  color: var(--wp--context--input-foreground-color);
  background-color: var(--wp--context--input-background-color);
  border: 1px solid var(--wp--context--input-border-color);
  border-radius: var(--wp--custom--spacing--corner);
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#login .input:focus,
#login input[type=text]:focus,
#login input[type=email]:focus,
#login input[type=password]:focus {
  border-color: var(--wp--custom--color--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--custom--color--secondary) 60%, transparent);
}
#login input[type=checkbox] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  margin-inline-end: 0.5em;
  vertical-align: middle;
  accent-color: var(--wp--custom--color--primary);
  cursor: pointer;
}
#login .forgetmenot label,
#login .pw-weak label {
  display: inline;
  margin: 0;
  font-weight: 400;
  vertical-align: middle;
}
#login .pw-weak {
  display: none;
}
#login #reg_passmail,
#login .indicator-hint {
  color: var(--wp--context--muted-color);
  font-size: var(--wp--preset--font-size--30);
}

#login .wp-pwd {
  position: relative;
}
#login .password-input {
  padding-inline-end: var(--login-input-height);
  font-family: var(--wp--preset--font-family--monospace);
}
#login .wp-hide-pw {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--login-input-height);
  height: var(--login-input-height);
  margin: 0;
  padding: 0;
  color: var(--wp--context--muted-color);
  background: transparent;
  border: 0;
  border-radius: var(--wp--custom--spacing--corner);
  cursor: pointer;
}
#login .wp-hide-pw:hover {
  color: var(--wp--context--foreground-color);
}
#login .wp-hide-pw:focus-visible {
  outline: 2px solid var(--wp--custom--color--primary);
  outline-offset: -6px;
}
#login .wp-hide-pw .dashicons {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}
#login #pass-strength-result {
  margin-block-start: 0.5rem;
  padding: 0.5em 1em;
  border-radius: var(--wp--custom--spacing--corner);
  background-color: var(--wp--custom--color--gray);
  font-size: var(--wp--preset--font-size--30);
  font-weight: 700;
  text-align: center;
}
#login #pass-strength-result.short {
  background-color: color-mix(in srgb, var(--wp--custom--color--red) 45%, var(--wp--custom--color--white));
}
#login #pass-strength-result.bad {
  background-color: color-mix(in srgb, var(--wp--custom--color--red) 25%, var(--wp--custom--color--white));
}
#login #pass-strength-result.good {
  background-color: #f5e6ab;
}
#login #pass-strength-result.strong {
  background-color: color-mix(in srgb, var(--wp--custom--color--green) 40%, var(--wp--custom--color--white));
}
#login .caps-warning {
  display: none;
  margin-block-start: 0.5rem;
  padding: 0.5em 1em;
  border: 1px solid #f0c33c;
  border-radius: var(--wp--custom--spacing--corner);
  background-color: #fcf9e8;
  font-size: var(--wp--preset--font-size--30);
}
#login .caps-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-end: 0.25em;
  vertical-align: middle;
}
#login input::-ms-reveal {
  display: none;
}

.no-js #login .hide-if-no-js {
  display: none;
}

#login .submit {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#login .button-primary,
#login .button:not(.wp-hide-pw) {
  display: block;
  width: 100%;
  margin: 0;
  padding-block: 1em;
  border: 0;
  font-size: var(--wp--preset--font-size--40);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
#login .button:not(.button-primary):not(.wp-hide-pw) {
  border: 2px solid currentColor;
  background-color: transparent;
}
#login .button:not(.button-primary):not(.wp-hide-pw):hover {
  background-color: var(--wp--custom--color--gray);
}

#login #nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.25em;
  padding-block-start: var(--wp--context--gap);
  border-block-start: 1px solid var(--wp--custom--color--gray-border);
  font-size: var(--wp--preset--font-size--30);
}
#login #nav a + a {
  padding-inline-start: 1.25em;
  border-inline-start: 1px solid var(--wp--custom--color--gray-border);
}

@keyframes login-shake {
  25% {
    transform: translateX(-20px);
  }
  75% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}