/**
 * Discovery of Nature 0.3.35 — native auth image-path + mobile composition stability.
 * Final owner for touch-width wp-login.php. Authentication logic remains native.
 */

/* Versioned CSS lives under /assets/releases/<version>/css. The release builder
 * now mirrors Theme-owned images into /assets/releases/<version>/images so every
 * ../images reference resolves identically to canonical /assets/css files. */

@media (min-width: 600px) and (max-width: 899px) {
  body.login #login {
    padding-top: 286px !important;
    background: linear-gradient(145deg, #13231a 0%, #0d1a12 100%) !important;
  }
  body.login #login::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 260px;
    z-index: 0;
    pointer-events: none;
    border-radius: 23px 23px 0 0;
    background-image:
      linear-gradient(0deg, #13231a 0%, rgba(19,35,26,.82) 12%, rgba(12,27,17,.24) 58%, rgba(7,18,11,.07) 100%),
      url("../images/auth-wildlife.jpg");
    background-size: cover, cover;
    background-position: center, 54% 42%;
    background-repeat: no-repeat;
    filter: saturate(1.03) contrast(1.04);
  }
}

@media (max-width: 599px) {
  html:has(body.login),
  body.login { background: #08120c !important; }

  body.login {
    padding: 10px 0 max(18px, env(safe-area-inset-bottom)) !important;
  }

  body.login #login {
    width: calc(100% - 20px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 206px 18px 22px !important;
    overflow: hidden;
    border: 1px solid rgba(190, 231, 166, .40) !important;
    border-radius: 24px !important;
    background-image:
      linear-gradient(0deg, #102017 0%, rgba(16,32,23,.94) 8%, rgba(16,32,23,.22) 52%, rgba(6,17,10,.03) 100%),
      url("../images/auth-wildlife.jpg"),
      linear-gradient(180deg, #102017 0%, #0b1710 100%) !important;
    background-size: 100% 194px, auto 194px, 100% 100% !important;
    background-position: top left, 54% top, center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.34), inset 0 1px rgba(228,255,212,.08) !important;
  }

  /* Do not reserve a second invisible media layer. */
  body.login #login::before { content: none !important; display: none !important; }

  /* Brand sits on the photograph instead of consuming another large text row. */
  body.login #login h1 {
    position: absolute !important;
    top: 18px;
    left: 20px;
    right: 20px;
    z-index: 3;
    margin: 0 !important;
  }
  body.login #login h1 a {
    display: inline-block !important;
    max-width: none !important;
    font-size: clamp(1.2rem, 5.8vw, 1.48rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    color: #f7faf4 !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.72) !important;
  }

  body.login #login .don-auth-intro {
    margin: 0 0 18px !important;
  }
  body.login #login .don-auth-intro__eyebrow {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: .16em;
  }
  body.login #login .don-auth-intro h2 {
    font-size: clamp(1.75rem, 8vw, 2.12rem) !important;
    line-height: 1.03;
  }
  body.login #login .don-auth-intro p:last-child {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.48;
  }

  /* The form is the tactile glass card; notices and navigation remain outside it. */
  body.login #login :is(form#loginform, form#registerform, form#lostpasswordform, form#resetpassform, form#admin-email-confirm-form, form#postpass) {
    padding: 16px !important;
    border: 1px solid rgba(190, 226, 175, .28) !important;
    border-radius: 18px !important;
    background: rgba(6, 19, 11, .66) !important;
    box-shadow: inset 0 1px rgba(226,255,211,.055), 0 12px 34px rgba(0,0,0,.16) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body.login #login label {
    font-size: 13px !important;
  }
  body.login #login form :is(.input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea) {
    min-height: 50px !important;
    margin: 6px 0 13px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
  body.login #login form p.submit {
    margin-top: 13px !important;
  }
  body.login #login form p.submit :is(input#wp-submit, button.button-primary) {
    min-height: 50px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  body.login #login :is(#login_error,.message,.success,.notice) {
    margin-bottom: 14px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  body.login #login :is(#login_error,.message,.success,.notice) a {
    min-height: 0 !important;
  }

  body.login #login #nav {
    margin-top: 14px !important;
    font-size: 12.5px !important;
  }
  body.login #login #backtoblog {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
  body.login #login :is(#nav,#backtoblog,.privacy-policy-page-link) a {
    min-height: 40px;
    font-size: 12.5px !important;
  }

  /* WordPress' admin-language chooser is not the site's TR/EN selector and was
   * visually breaking the approved mobile auth composition. Keep it off phone. */
  body.login .language-switcher { display: none !important; }
}

@media (max-width: 359px) {
  body.login #login {
    width: calc(100% - 16px) !important;
    padding: 184px 14px 18px !important;
    border-radius: 20px !important;
    background-size: 100% 172px, auto 172px, 100% 100% !important;
  }
  body.login #login h1 { top: 15px; left: 16px; right: 16px; }
  body.login #login :is(form#loginform, form#registerform, form#lostpasswordform, form#resetpassform, form#admin-email-confirm-form, form#postpass) {
    padding: 14px !important;
    border-radius: 16px !important;
  }
}