/* BaselMefleh HUD login screen. PLAT-013 owns the dynamic logo image URL. */

body.login{
  --login-ink:#080B08;
  --login-bg:#0A0F0B;
  --login-card:#121A13;
  --login-raised:#1A241B;
  --login-heading:#F4EFE3;
  --login-body:#CFC9BB;
  --login-muted:#8E8B7E;
  --login-accent:#E2A837;
  --login-accent-hover:#EFC35C;
  --login-accent-pressed:#B9842A;
  --login-accent-ink:#E2A837;
  --login-accent-ink-hover:#EFC35C;
  --login-on-accent:#0A0F0B;
  --login-focus:#E2A837;
  --login-border:rgba(244,239,227,0.10);
  --login-font-heading:"Fraunces", Georgia, serif;
  --login-font-body:"Inter", system-ui, sans-serif;
  --login-font-mono:"JetBrains Mono", ui-monospace, monospace;
  min-height:100vh;
  margin:0;
  color:var(--login-body);
  background:
    linear-gradient(180deg, var(--login-bg) 0%, var(--login-ink) 100%);
  font-family:var(--login-font-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

body.login *{
  box-sizing:border-box;
}

body.login::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(var(--login-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--login-border) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.36;
}

body.login #login{
  position:relative;
  z-index:1;
  width:min(420px, calc(100vw - 32px));
  padding:54px 0 42px;
}

body.login h1{
  margin:0;
  font-family:var(--login-font-heading);
  line-height:1.15;
  letter-spacing:-0.02em;
}

.login h1 a{
  display:block;
  width:min(280px, 78vw);
  height:96px;
  margin:0 auto 24px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  text-indent:-9999px;
  overflow:hidden;
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform{
  margin:0;
  padding:28px;
  color:var(--login-body);
  background:var(--login-card);
  border:1px solid var(--login-border);
  border-radius:16px;
  box-shadow:0 0 0 1px var(--login-ink);
}

body.login form p{
  margin:0 0 18px;
}

body.login label{
  display:block;
  margin:0 0 7px;
  color:var(--login-heading);
  font-family:var(--login-font-body);
  font-size:14px;
  font-weight:500;
  line-height:1.45;
}

body.login .forgetmenot{
  float:none;
  display:flex;
  align-items:center;
  margin:2px 0 0;
}

body.login .forgetmenot label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--login-body);
  font-size:13px;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="url"],
body.login input[type="number"],
body.login input[type="search"],
body.login .input{
  width:100%;
  min-height:46px;
  margin:0;
  padding:10px 12px;
  color:var(--login-heading);
  background:var(--login-ink);
  border:1px solid var(--login-border);
  border-radius:10px;
  box-shadow:none;
  font-family:var(--login-font-body);
  font-size:16px;
  line-height:1.45;
  transition:border-color .2s ease, background-color .2s ease, outline-color .2s ease;
}

body.login input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  border-color:var(--login-border);
  border-radius:4px;
  background:var(--login-ink);
  accent-color:var(--login-accent);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="url"]:focus,
body.login input[type="number"]:focus,
body.login input[type="search"]:focus,
body.login input[type="checkbox"]:focus,
body.login .input:focus{
  border-color:var(--login-focus);
  background:var(--login-raised);
  outline:2px solid var(--login-focus);
  outline-offset:2px;
  box-shadow:none;
}

body.login input::placeholder{
  color:var(--login-muted);
  opacity:1;
}

body.login form .submit{
  clear:both;
  float:none;
  margin:20px 0 0;
  padding:0;
}

body.login.wp-core-ui .button-primary,
body.login .button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  color:var(--login-on-accent);
  background:var(--login-accent);
  border:1px solid var(--login-accent);
  border-radius:10px;
  box-shadow:none;
  font-family:var(--login-font-body);
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-shadow:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

body.login #loginform .button-primary,
body.login #registerform .button-primary,
body.login #lostpasswordform .button-primary{
  width:100%;
}

body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:focus,
body.login .button-primary:hover,
body.login .button-primary:focus{
  color:var(--login-on-accent);
  background:var(--login-accent-hover);
  border-color:var(--login-accent-hover);
  box-shadow:none;
  transform:translateY(-1px);
}

body.login.wp-core-ui .button-primary:active,
body.login .button-primary:active{
  background:var(--login-accent-pressed);
  border-color:var(--login-accent-pressed);
  transform:none;
}

body.login.wp-core-ui .button-primary:focus-visible,
body.login .button-primary:focus-visible{
  outline:2px solid var(--login-focus);
  outline-offset:3px;
}

body.login #nav,
body.login #backtoblog{
  margin:18px 0 0;
  padding:0;
  color:var(--login-muted);
  font-family:var(--login-font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.6;
  text-align:center;
}

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

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a,
body.login #login_error a,
body.login .message a{
  color:var(--login-accent-ink);
  text-decoration:none;
  text-underline-offset:4px;
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus,
body.login #login_error a:hover,
body.login #login_error a:focus,
body.login .message a:hover,
body.login .message a:focus{
  color:var(--login-accent-ink-hover);
  text-decoration:underline;
}

body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible,
body.login .privacy-policy-page-link a:focus-visible,
body.login #login_error a:focus-visible,
body.login .message a:focus-visible{
  outline:2px solid var(--login-focus);
  outline-offset:3px;
}

body.login .privacy-policy-page-link{
  margin:18px 0 0;
  color:var(--login-muted);
  font-family:var(--login-font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.6;
  text-align:center;
}

body.login .message,
body.login .success,
body.login .notice,
body.login #login_error{
  margin:0 0 18px;
  padding:14px 16px 14px 18px;
  color:var(--login-body);
  background:var(--login-card);
  border:1px solid var(--login-border);
  border-left:4px solid var(--login-accent);
  border-radius:10px;
  box-shadow:0 0 0 1px var(--login-ink);
  font-family:var(--login-font-body);
  font-size:14px;
  line-height:1.6;
}

body.login #login_error{
  border-left-color:var(--login-accent-pressed);
}

body.login .message strong,
body.login .success strong,
body.login .notice strong,
body.login #login_error strong{
  color:var(--login-heading);
  font-weight:600;
}

body.login .language-switcher{
  margin:24px auto 0;
  color:var(--login-muted);
  font-family:var(--login-font-body);
}

body.login .language-switcher label{
  color:var(--login-muted);
}

body.login .language-switcher select{
  min-height:38px;
  color:var(--login-heading);
  background:var(--login-card);
  border:1px solid var(--login-border);
  border-radius:10px;
  font-family:var(--login-font-body);
}

body.login .language-switcher select:focus{
  outline:2px solid var(--login-focus);
  outline-offset:2px;
}

/* Plugin widgets: reCAPTCHA + Sign in with Google
   Injected by plugins (WP Captcha; Site Kit by Google) into core wp-login.php.
   Their markup is out of reach — this only sizes/positions them. Layout only:
   no colour, no edition-specific values, so no light-guard duplication needed. */

body.login .g-recaptcha{
  /* The plugin hard-codes inline transform:scale(0.9); only !important beats it.
     Where the card is wide enough (>=~410px viewport) the scale only leaves a
     gap and never reclaims the ~304x78 box, so neutralise it here. */
  transform:none !important;
  -webkit-transform:none !important;
  transform-origin:0 0 !important;
  -webkit-transform-origin:0 0 !important;
  width:304px;
  max-width:100%;
  margin:0 auto 18px !important;
}

body.login .googlesitekit-sign-in-with-google__frontend-output-button{
  /* Direct child of #login, which has zero horizontal padding — pin it to the
     card's visual width and centre it, whether Site Kit injects it above or
     below #loginform. */
  width:min(420px, calc(100vw - 32px));
  max-width:100%;
  margin:18px auto;
  display:flex;
  justify-content:center;
}

body.login .googlesitekit-sign-in-with-google__frontend-output-button > div,
body.login .googlesitekit-sign-in-with-google__frontend-output-button iframe{
  /* Google's cross-origin iframe ships a fixed pixel width — clamp it so it
     cannot push past the centred container. */
  max-width:100% !important;
}

@media (max-width:410px){
  body.login .g-recaptcha{
    /* 304px stops fitting the form content box here. Scale the widget down AND
       shrink .g-recaptcha's own box to the scaled size (304*0.8 / 78*0.8) with
       overflow:hidden, so the reserved layout box shrinks with the visual and
       nothing overflows the narrow card. 304*0.8 = 243.2 clears the ~250px
       content box at a 320px viewport. */
    transform:scale(0.8) !important;
    -webkit-transform:scale(0.8) !important;
    width:244px;
    height:62px;
    overflow:hidden;
  }
}

:root[data-theme="light"] body.login{
  --login-ink:#DED6C1;
  --login-bg:#E7E0CE;
  --login-card:#DFD7C3;
  --login-raised:#D7CEB7;
  --login-heading:#2A2820;
  --login-body:#3E3A2D;
  --login-muted:#544E38;
  --login-accent:#B9842A;
  --login-accent-hover:#B9842A;
  --login-accent-pressed:#7A5511;
  --login-accent-ink:#664914;
  --login-accent-ink-hover:#5B4010;
  --login-on-accent:#1A1712;
  --login-focus:#664914;
  --login-border:rgba(42,40,32,0.14);
  background:
    linear-gradient(180deg, var(--login-bg) 0%, var(--login-ink) 100%);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) body.login{
    --login-ink:#DED6C1;
    --login-bg:#E7E0CE;
    --login-card:#DFD7C3;
    --login-raised:#D7CEB7;
    --login-heading:#2A2820;
    --login-body:#3E3A2D;
    --login-muted:#544E38;
    --login-accent:#B9842A;
    --login-accent-hover:#B9842A;
    --login-accent-pressed:#7A5511;
    --login-accent-ink:#664914;
    --login-accent-ink-hover:#5B4010;
    --login-on-accent:#1A1712;
    --login-focus:#664914;
    --login-border:rgba(42,40,32,0.14);
    background:
      linear-gradient(180deg, var(--login-bg) 0%, var(--login-ink) 100%);
  }

  body.login.wp-core-ui .button-primary:hover,
  body.login.wp-core-ui .button-primary:focus,
  body.login .button-primary:hover,
  body.login .button-primary:focus{
    border-color:var(--login-accent-pressed);
  }

  body.login.wp-core-ui .button-primary:active,
  body.login .button-primary:active{
    background:var(--login-accent);
    border-color:var(--login-accent-pressed);
  }
}

@media (max-width:480px){
  body.login #login{
    width:calc(100vw - 24px);
    padding:28px 0 32px;
  }

  .login h1 a{
    width:min(250px, 74vw);
    height:84px;
    margin-bottom:18px;
  }

  body.login #loginform,
  body.login #registerform,
  body.login #lostpasswordform{
    padding:22px;
  }
}

@media (prefers-reduced-motion: reduce){
  body.login *,
  body.login *::before,
  body.login *::after{
    transition:none !important;
  }
}