/* ============================================================
   BOZA v7 — the login screen.

   WHAT THIS FILE IS

   WordPress draws the login page with markup of its own, and a theme cannot
   change that markup, only dress it. So this is an adapter in the sense of
   assets/css/adapter.css: WordPress's own selectors on the left, and on the
   right the values the system family gave the login card, the field and the
   button. Where the family's rule is quoted it is quoted exactly; where the
   family drew a piece of markup WordPress does not have, the checkbox's box
   and the brand's mark, the same drawing is done in CSS.

   The family's two designs are both here, chosen under BOZA > Options: the
   photograph, on the theme's own art or a chosen picture, with the card over
   it; and the split, the message on the deep green beside the form. The
   picture and the overlay's strength arrive as custom properties, --lg-photo
   and --lg-overlay, which the rules below read.
   ============================================================ */

/* ---------- the type ---------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
}

/* ---------- the ground: the photograph, and the overlay that lets the card read ---------- */

body.login {
  min-height: 100vh;
  margin: 0;
  padding: 56px 24px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--lg-photo, url("../art/hall-dusk.svg")) center / cover no-repeat, linear-gradient(155deg, #33544a, #0e2b22);
}

body.login::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 20, var(--lg-overlay, 0.45));
  pointer-events: none;
}

/* ---------- the card: #login is the card, because the brand is inside it ---------- */

.login #login {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  margin: 0;
  padding: 38px 40px;
  background: var(--paper);
  border: var(--line-w) solid var(--line-dark);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
}

.login form,
.login #loginform,
.login #lostpasswordform,
.login #resetpassform,
.login #registerform {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

/* ---------- the brand ---------- */

.login h1 {
  margin: 0 0 20px;
  text-align: left;
}

.login h1 a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  text-indent: 0;
  overflow: visible;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 540;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

/* the house mark, drawn as the header draws it, in the one colour the mark is */
.login h1 a::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: none;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 28V15a12 12 0 0 1 24 0v13'/%3E%3Cpath d='M11 28V15.5a5 5 0 0 1 10 0V28'/%3E%3Cpath d='M2 28h28'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 28V15a12 12 0 0 1 24 0v13'/%3E%3Cpath d='M11 28V15.5a5 5 0 0 1 10 0V28'/%3E%3Cpath d='M2 28h28'/%3E%3C/svg%3E") no-repeat center / contain;
}

.login h1 a:focus-visible {
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- the fields: the family's .fld ---------- */

.login label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--r-inner);
  border: var(--line-w) solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 var(--line-w) var(--green);
  outline: none;
}

.login .wp-pwd {
  position: relative;
}

.login .wp-pwd .input {
  padding-right: 52px;
}

.login .wp-pwd .button.wp-hide-pw {
  top: 50%;
  right: 6px;
  transform: translateY(calc(-50% - 8px));
  height: 36px;
  min-height: 0;
  width: 36px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ink-soft);
}

.login .wp-pwd .button.wp-hide-pw:hover,
.login .wp-pwd .button.wp-hide-pw:focus {
  color: var(--green);
  background: none;
  box-shadow: none;
}

/* ---------- remember me, and the way to a lost password: the family's .lg-row ---------- */

.login .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 22px;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

.login .forgetmenot label {
  margin: 0;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

/* the family's .chk box, on the checkbox itself */
.login input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border-radius: var(--r-xs);
  border: var(--line-w) solid var(--line-dark);
  background: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.login input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}

.login input[type="checkbox"]:checked::before {
  content: "";
  width: 11px;
  height: 11px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
  float: none;
  margin: 0;
  display: block;
}

.login input[type="checkbox"]:focus-visible {
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  box-shadow: none;
}

/* the help toggletip WordPress hangs on "remember me" is noise on this card */
.login .forgetmenot .wp-tooltip__toggle,
.login .forgetmenot [popover] {
  display: none;
}

/* ---------- the button: the family's .btn.btn-green ---------- */

.login .submit {
  float: none;
  padding: 0;
  margin: 0;
}

.login .submit .button,
.login #wp-submit {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  min-height: 0;
  padding: 0 28px;
  margin: 0;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--green);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.25s;
}

.login .submit .button:hover,
.login #wp-submit:hover {
  background: var(--green-deep);
  color: #fff;
}

.login .submit .button:focus-visible,
.login #wp-submit:focus-visible {
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- the two lines under the form ---------- */

.login #nav,
.login #backtoblog {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  text-align: center;
}

.login #nav {
  margin-top: 22px;
}

.login #backtoblog {
  margin-top: 10px;
}

.login #nav a {
  color: var(--green);
  text-decoration: none;
}

.login #backtoblog a {
  color: var(--ink-soft);
  text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover {
  color: var(--green);
  text-decoration: underline;
}

.login .privacy-policy-page-link {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  font-size: 0.85rem;
  text-align: center;
}

.login .privacy-policy-page-link a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

/* ---------- what the page has to say ---------- */

.login .message,
.login .success,
.login #login_error {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: var(--line-w) solid var(--line-dark);
  border-left: 4px solid var(--green);
  border-radius: var(--r-sm);
  background: var(--tint);
  box-shadow: none;
  font-size: 0.92rem;
  line-height: 1.5;
}

.login #login_error {
  border-left-color: var(--amber);
  background: #fff;
}

.login .message a,
.login #login_error a {
  color: var(--green);
}

/* ---------- a phone ---------- */

@media (max-width: 640px) {
  body.login {
    padding: 24px 16px;
  }
  .login #login {
    padding: 28px 22px;
  }
}

/* ---------- the split design: the family's .lg-split, on WordPress's markup ---------- */
/* inc/login.php prints .lg-side before WordPress's own #login, so the page is a
   two-column grid: the message on the deep green, the card on paper. The card
   loses its border and shadow, as the family drew it, because the paper is
   the card now. Under 1000px the columns stack and the message keeps the top. */
body.login.boza-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: stretch;
  padding: 0;
  background: var(--paper);
}
body.login.boza-split::before {
  display: none;
}
.login .lg-side {
  background: var(--green-deep);
  color: #fff;
  padding: 56px 54px;
  display: grid;
  align-content: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.login .lg-side h2 {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  max-width: 15ch;
}
.login .lg-side p {
  margin: 0;
  color: var(--on-ink-dim-green);
  max-width: 28rem;
  font-size: 1.02rem;
  line-height: 1.55;
}
.login .lg-side .mark {
  position: absolute;
  right: -60px;
  bottom: -70px;
  color: var(--on-ink-fill);
}
.login.boza-split #login {
  justify-self: center;
  align-self: center;
  width: min(420px, calc(100% - 80px));
  margin: 56px 0;
  border: 0;
  box-shadow: none;
  padding: 0;
}
@media (max-width: 1000px) {
  body.login.boza-split {
    grid-template-columns: 1fr;
  }
  .login .lg-side {
    padding: 40px 32px;
  }
  .login.boza-split #login {
    width: calc(100% - 48px);
    margin: 40px 0;
  }
}