/* =========================================================================
   70y70m — WordPress Login restyle (on-theme)
   Brand: ระดมทุนเพื่อพัฒนาคณะวิศวกรรมศาสตร์ มจธ. · "70 ปี 70 ล้าน"
   Palette mirrors main.css :root tokens (primary #7E001D / accent #A72D33).
   Loaded via login_enqueue_scripts (see inc/login.php). Overrides core
   wp-login styles which are enqueued before this file.
   ========================================================================= */

:root{
  --y70-primary:#7E001D;
  --y70-primary-600:#A72D33;
  --y70-dark:#2A2C2F;
  --y70-muted:#656A72;
  --y70-border:#D9D7D8;
  --y70-bg:#F6F7F9;
  --y70-card:#FFFFFF;
  --y70-danger:#FF4D4F;
  --y70-success:#20C997;
  --y70-warning:#FFC107;
  --y70-focus-ring:rgba(126, 0, 29, 0.16);
  --y70-card-shadow:0 28px 70px -28px rgba(0,0,0,.55), 0 10px 30px rgba(126,0,29,.18);

  /* ฟอนต์ระบบ — ค่าเริ่มต้น; inc/login.php ฉีดทับตามฟอนต์ที่เลือกใน Customizer */
  --y70-font-base:"Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing system — these two tokens drive the whole form's vertical rhythm.
     Retune spacing everywhere by changing them; no row defines its own margin. */
  --y70-field-gap:22px;   /* gap between every form row (username / password / remember / submit) */
  --y70-label-gap:8px;    /* gap between a label and its control */
}

/* ---------- Page canvas ---------- */
body.login{
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--y70-font-base);
  color:var(--y70-dark);
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(167,45,51,.55) 0%, rgba(167,45,51,0) 60%),
    linear-gradient(135deg, #7E001D 0%, #5C0014 52%, #2A0009 100%);
  background-attachment:fixed;
}

/* Faint gear motif echoing the brand (masked brand gear, recoloured white) */
body.login::before,
body.login::after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  background-color:rgba(255,255,255,.05);
  -webkit-mask:url(../images/gear_hero.svg) center / contain no-repeat;
          mask:url(../images/gear_hero.svg) center / contain no-repeat;
}
body.login::before{ width:560px; height:560px; left:-180px; bottom:-200px; transform:rotate(-12deg); }
body.login::after { width:420px; height:420px; right:-150px; top:-150px; background-color:rgba(255,255,255,.045); transform:rotate(18deg); }

/* ---------- Card ---------- */
#login{
  position:relative;
  z-index:2;
  width:min(430px, 92vw);
  padding:0;
  margin:24px auto;
  box-sizing:border-box;
  background:var(--y70-card);
  border:1px solid rgba(126,0,29,.08);
  border-radius:24px;
  box-shadow:var(--y70-card-shadow);
  padding:38px 38px 26px;
  /* NOT overflow:hidden — WP core nests #nav / #backtoblog (and the privacy
     policy link) INSIDE this card, not as siblings after it. On a short
     viewport that clipped them outright instead of letting the page scroll
     to reach them. Nothing in here bleeds past the rounded corners, so this
     was never needed for the card's own visuals. */
  animation:y70-login-in .5s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes y70-login-in{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}

/* ---------- Brand logo (replaces default WP mark) ---------- */
#login h1{ margin:0; }
#login h1 a{
  display:block;
  width:100%;
  height:150px;
  margin:0 auto;
  background-image:url(../images/logo_cm.png);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  /* hide the (accessible) site-title text WP renders inside the link */
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
  outline-offset:6px;
}
#login h1 a:focus-visible{ outline:2px solid var(--y70-primary-600); border-radius:10px; }

/* ---------- Intro heading (injected via login_message) ---------- */
.y70-login-intro{
  text-align:center;
  margin:2px 0 22px;
}
.y70-login-title{
  margin:0;
  font-size:21px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--y70-primary);
}
.y70-login-sub{
  margin:6px 0 0;
  font-size:13.5px;
  font-weight:500;
  line-height:1.5;
  color:var(--y70-muted);
}

/* ---------- Form: neutralise WP's own white box ---------- */
body.login form{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
  /* The form is the single source of vertical rhythm: every direct row
     (username <p>, .user-pass-wrap, .forgetmenot, .submit) is one gap apart. */
  display:flex;
  flex-direction:column;
  gap:var(--y70-field-gap);
}
/* Rows never set their own outer margin — spacing comes only from the gap above. */
body.login form > p,
body.login form > .user-pass-wrap,
body.login form > .submit{ margin:0; }

/* ---------- Labels ---------- */
body.login label{
  display:block;
  margin:0 0 var(--y70-label-gap);   /* label → control, same token everywhere */
  font-size:13.5px;
  font-weight:700;
  color:var(--y70-dark);
  line-height:1.6;
}

/* ---------- Inputs ---------- */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login .input{
  display:block;            /* removes the inline baseline gap so .wp-pwd height == input height */
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:12px 14px;
  font-size:15px;
  font-family:inherit;
  color:var(--y70-dark);
  background:#fff;
  border:1.5px solid var(--y70-border);
  border-radius:12px;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login .input:focus{
  border-color:var(--y70-primary) !important;
  box-shadow:0 0 0 4px var(--y70-focus-ring) !important;
  outline:2px solid transparent; /* keep an outline for forced-colors/HC mode */
  outline-offset:2px;
}
body.login input::placeholder{ color:#aeb2b8; }

/* ---------- Password show/hide ---------- */
body.login .wp-pwd{ position:relative; margin:0; }
body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"]{ padding-right:48px; }
body.login .wp-pwd .button.wp-hide-pw{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);   /* vertically centred on the input */
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-height:0;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--y70-muted);
  border-radius:10px;
}
body.login .wp-pwd .button.wp-hide-pw:hover{ color:var(--y70-primary); }
body.login .wp-pwd .button.wp-hide-pw:focus{
  box-shadow:0 0 0 3px var(--y70-focus-ring);
  outline:2px solid transparent;
}
/* Render the show/hide control as a GRAPHIC, not an icon-font glyph: a font
   glyph rides the text baseline (line-height makes it sit a few px low inside
   the button), but a masked SVG box centres purely geometrically. Hide the
   dashicons glyph and paint the eye via a currentColor-tinted mask instead. */
body.login .wp-pwd .dashicons{
  display:block;
  position:relative;
  top:0 !important;     /* cancel WP forms.css `.wp-hide-pw .dashicons{ top:4px }` that pushed the eye 4px low */
  width:22px !important;
  height:22px !important;
  font-size:0;          /* no glyph box / no baseline */
  line-height:0;
  background-color:currentColor;
  -webkit-mask:url(../images/icon-eye.svg) center / contain no-repeat;
          mask:url(../images/icon-eye.svg) center / contain no-repeat;
}
body.login .wp-pwd .dashicons::before{ content:none; }       /* drop the font glyph entirely */
body.login .wp-pwd .dashicons-hidden{                          /* WP toggles this class for "hide" */
  -webkit-mask-image:url(../images/icon-eye-off.svg);
          mask-image:url(../images/icon-eye-off.svg);
}

/* ---------- Remember me ---------- */
body.login .forgetmenot{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;                /* spacing handled by the form gap, not here */
  font-size:13.5px;
}
body.login .forgetmenot label{
  display:inline;
  margin:0;                /* inline label: no label-gap */
  font-weight:500;
  color:var(--y70-muted);
}
body.login input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  border:1.5px solid var(--y70-border);
  border-radius:5px;
  accent-color:var(--y70-primary);
}
body.login input[type="checkbox"]:focus{
  box-shadow:0 0 0 3px var(--y70-focus-ring);
  outline:2px solid transparent;
}

/* ---------- Submit ---------- */
body.login #wp-submit,
body.login .button-primary{
  display:block;
  float:none;
  width:100%;
  margin:0;
  padding:13px 18px;
  font-size:16px;
  font-weight:800;
  font-family:inherit;
  letter-spacing:.3px;
  color:#fff !important;
  text-shadow:none;
  background:var(--y70-primary) !important;
  border:1.5px solid var(--y70-primary) !important;
  border-radius:14px;
  box-shadow:0 10px 22px -10px rgba(126,0,29,.7) !important;
  cursor:pointer;
  transition:background .15s ease, transform .08s ease, box-shadow .15s ease;
}
body.login #wp-submit:hover,
body.login .button-primary:hover{
  background:var(--y70-primary-600) !important;
  border-color:var(--y70-primary-600) !important;
  box-shadow:0 14px 26px -10px rgba(126,0,29,.75) !important;
}
body.login #wp-submit:active,
body.login .button-primary:active{ transform:translateY(1px); }
body.login #wp-submit:focus,
body.login .button-primary:focus{
  box-shadow:0 0 0 4px var(--y70-focus-ring), 0 10px 22px -10px rgba(126,0,29,.7) !important;
  outline:2px solid transparent;
}

/* ---------- Footer links (Lost password / Back to site) ---------- */
#login #nav,
#login #backtoblog{
  margin:0;
  padding:14px 0 0;
  text-align:center;
  font-size:13px;
}
#login #nav{ margin-top:22px; border-top:1px solid var(--y70-border); }
#login #backtoblog{ padding-top:8px; }
#login #nav a,
#login #backtoblog a{
  color:var(--y70-muted);
  font-weight:600;
  text-decoration:none;
  transition:color .15s ease;
}
#login #nav a:hover,
#login #backtoblog a:hover,
#login #nav a:focus,
#login #backtoblog a:focus{ color:var(--y70-primary); text-decoration:underline; }

/* ---------- Messages / errors / notices ---------- */
body.login #login_error,
body.login .message,
body.login .notice,
body.login .success{
  box-sizing:border-box;
  margin:0 0 20px;
  padding:13px 16px;
  font-size:13.5px;
  line-height:1.55;
  background:#fff;
  border:1px solid var(--y70-border);
  border-left-width:5px;
  border-radius:12px;
  box-shadow:0 8px 22px -16px rgba(0,0,0,.4);
}
body.login #login_error{ border-left-color:var(--y70-danger); color:#7a1f22; }
body.login .message,
body.login .notice-info{ border-left-color:var(--y70-primary-600); color:var(--y70-dark); }
body.login .success,
body.login .notice-success{ border-left-color:var(--y70-success); color:var(--y70-dark); }
body.login #login_error a,
body.login .message a{ color:var(--y70-primary); font-weight:700; }

/* ---------- Language switcher (ไทย / English) — DORMANT FALLBACK ----------
   Hidden by default (login_display_language_dropdown => __return_false in
   inc/login.php) because the admin is Thai-only. Kept compact here so that IF it
   is ever re-enabled it renders as ONE small pill on a single line — brand globe +
   small white select + white "เปลี่ยนภาษา" button — never the unstyled 3-line stack. */
body.login .language-switcher{
  position:relative;
  z-index:2;
  margin:16px auto 2px;
  display:flex;
  justify-content:center;
}
body.login .language-switcher form{
  display:inline-flex;
  flex-wrap:nowrap;            /* globe + select + button stay on ONE line */
  align-items:center;
  white-space:nowrap;
  gap:6px;
  margin:0;
  padding:4px 5px 4px 11px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  box-shadow:0 8px 22px -16px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
/* brand globe replaces the unstyled dashicons translation glyph (broken box) */
body.login .language-switcher label{
  display:inline-flex;
  align-items:center;
  margin:0;
}
body.login .language-switcher label .dashicons{ display:none; }
body.login .language-switcher label::before{
  content:"";
  width:14px;
  height:14px;
  opacity:.92;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M12%203c3%203%203%2015%200%2018'/%3E%3Cpath%20d='M12%203c-3%203-3%2015%200%2018'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.login .language-switcher select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  margin:0;
  padding:5px 24px 5px 11px;
  min-height:28px;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  color:var(--y70-dark);
  background:#fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23656A72'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") no-repeat right 8px center / 11px;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px;
  cursor:pointer;
}
body.login .language-switcher select:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(255,255,255,.4);
}
body.login .language-switcher .button{
  margin:0;
  padding:5px 13px;
  min-height:28px;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:var(--y70-primary) !important;
  background:#fff !important;
  border:1.5px solid #fff !important;
  border-radius:999px;
  box-shadow:none !important;
  text-shadow:none;
  cursor:pointer;
  transition:background .15s ease, transform .08s ease;
}
body.login .language-switcher .button:hover{ background:rgba(255,255,255,.85) !important; }
body.login .language-switcher .button:active{ transform:translateY(1px); }
body.login .language-switcher .button:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(255,255,255,.45) !important;
}

/* ---------- Brand credit footer (below the card) ---------- */
.y70-login-footer{
  position:relative;
  z-index:2;
  width:min(430px, 92vw);
  margin:20px auto 4px;
  padding:0 12px;
  text-align:center;
  font-size:12.5px;
  font-weight:500;
  line-height:1.65;
  color:rgba(255,255,255,.74);
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  #login{ padding:30px 22px 22px; border-radius:20px; }
  #login h1 a{ height:120px; }
  .y70-login-title{ font-size:19px; }
  body.login::before{ width:380px; height:380px; left:-160px; }
  body.login::after { width:300px; height:300px; right:-130px; }
}

/* ---------- Motion / accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  #login{ animation:none; }
  body.login *{ transition:none !important; }
}