/**
 * Inloggningssidan i sajtens formspråk.
 *
 * wp-login.php laddar varken theme.json eller temats stilark — den är
 * administrationssidan och lever sitt eget liv. Därför deklareras både
 * typsnitten och färgerna om här, med samma värden som theme.json.
 *
 * Sidan har inga designbrädor. Formspråket är hämtat ur bygget: hjältens
 * rutmönster som botten, kontaktformulärets etiketter och fält, och
 * primärknappen. Inget nytt är uppfunnet.
 *
 * Kärnans egna id:n används som de är (#login, #loginform, #wp-submit) —
 * wp-login.php är inte ett block-tema och markupen går inte att ändra utan
 * att ta över hela sidan, vilket vore mer att underhålla än det är värt.
 */

@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
}

:root {
  --bm-svart: #1E1E1E;
  --bm-rod: #E30D18;
  --bm-rod-ljus: #FF6A72;
  --bm-gra-100: #F5F4F2;
  --bm-gra-300: #D8D6D2;
  --bm-gra-400: #B8B8B8;
  --bm-gra-600: #6E6E6E;
  --bm-gra-700: #424242;
}

/* Samma rutmönster som sidans hjältesektion. */
body.login {
  background-color: var(--bm-svart);
  background-image: repeating-conic-gradient(var(--bm-svart) 0% 25%, #262626 0% 50%);
  background-size: 30px 30px;
  font-family: 'Barlow', system-ui, sans-serif;
}

#login { width: 400px; max-width: calc(100vw - 32px); padding: 56px 0 40px; }

/* Logotypen ersätter W:et. Bredden är satt på länken eftersom kärnan lägger
   bilden som background-image på den. */
.login h1 a {
  background-image: url('../images/logo-vit.svg');
  background-size: contain; background-position: center;
  width: 240px; height: 58px; margin-bottom: 28px;
}

.login form {
  background: #fff; border: 0; border-radius: 8px;
  padding: 28px 28px 24px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  margin-top: 0;
}

.login form label,
.login label[for="user_login"], .login label[for="user_pass"] {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bm-svart); line-height: 1.2;
}

.login input[type="text"], .login input[type="password"], .login input[type="email"] {
  font-family: 'Barlow', system-ui, sans-serif; font-size: 16px;
  color: var(--bm-svart); background: #fff;
  border: 1px solid var(--bm-gra-400); border-radius: 6px;
  padding: 0 14px; min-height: 48px; box-sizing: border-box;
  box-shadow: none;
}
.login input[type="password"] { padding-right: 46px; }
.login input[type="text"]:focus, .login input[type="password"]:focus {
  border-color: var(--bm-svart);
  outline: 3px solid var(--bm-rod-ljus); outline-offset: 1px; box-shadow: none;
}
.login .button.wp-hide-pw { color: var(--bm-gra-600); }
.login .button.wp-hide-pw:hover { color: var(--bm-svart); }

/* "Kom ihåg mig" och knappen delar rad i kärnans markup. */
.login .forgetmenot label { font-family: 'Barlow', system-ui, sans-serif;
  font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--bm-gra-700); }
.login input[type="checkbox"] {
  width: 20px; height: 20px; border: 1px solid var(--bm-gra-400); border-radius: 4px;
}
.login input[type="checkbox"]:checked { background: var(--bm-rod); border-color: var(--bm-rod); }
.login input[type="checkbox"]:checked::before {
  content: ''; display: block; width: 100%; height: 100%; margin: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

/* body bär BÅDA klasserna — login OCH wp-core-ui — så ".wp-core-ui .login ..."
   matchar ingenting alls; ett element är inte ättling till sig självt. Kvar
   blir två klasser, och kärnan har .button.button-large med tre. Därför
   nämns button-large här. */
.login .button-primary,
.login .button-primary.button-large {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--bm-rod); border: 0; border-radius: 6px;
  min-height: 52px; padding: 0 26px; box-shadow: none; text-shadow: none;
  color: #fff;
}
.login .button-primary:hover, .login .button-primary:focus {
  background: #c00b14; color: #fff;
}
.login .button-primary:focus-visible {
  outline: 3px solid var(--bm-rod-ljus); outline-offset: 2px;
}

/* Länkarna under rutan ligger på mörk botten och ärver kärnans grå, som
   inte räcker mot #1E1E1E. */
.login #nav, .login #backtoblog { padding: 0; margin: 18px 0 0; text-align: center; }
.login #nav a, .login #backtoblog a, .login .privacy-policy-link {
  font-family: 'Barlow', system-ui, sans-serif; font-size: 15px;
  color: var(--bm-gra-300); text-decoration: none;
}
.login #nav a:hover, .login #backtoblog a:hover, .login .privacy-policy-link:hover {
  color: var(--bm-rod-ljus); text-decoration: underline;
}
.login .privacy-policy-page-link { margin: 26px 0 0; }

/* Språkväljaren: kärnan lägger den sist och ostilad. */
.login .language-switcher { margin-top: 28px; }
.login .language-switcher label { color: var(--bm-gra-300); font-weight: 400;
  text-transform: none; letter-spacing: normal; font-family: 'Barlow', sans-serif; }
.login .language-switcher select {
  border-radius: 6px; border: 1px solid var(--bm-gra-400); min-height: 40px;
  font-family: 'Barlow', sans-serif;
}
.login .language-switcher .button,
.login .language-switcher .button.button-large {
  border-radius: 6px; min-height: 40px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  /* Knappen står på den MÖRKA botten, inte i det vita kortet. Svart text
     här blev osynlig. */
  background: transparent; border: 2px solid var(--bm-gra-600); color: #fff;
  box-shadow: none;
}
.login .language-switcher .button:hover,
.login .language-switcher .button:focus {
  border-color: var(--bm-rod-ljus); background: transparent; color: var(--bm-rod-ljus);
}

/* Meddelanden: kärnans blå vänsterkant byts mot sajtens röda. */
.login .message, .login #login_error, .login .notice {
  border-radius: 6px; border-left-width: 4px;
  font-family: 'Barlow', system-ui, sans-serif;
}
.login #login_error { border-left-color: var(--bm-rod); }
.login .message { border-left-color: var(--bm-svart); }

@media (max-width: 599px) {
  /* Kärnan krymper knappar under 782 px med .wp-core-ui .button — två klasser
     plus button-large, alltså tyngre än en ensam .button-primary. Uppmätt:
     40 px hög i stället för 52. */
  .login .button-primary,
  .login .button-primary.button-large {
    min-height: 52px; font-size: 18px; line-height: 1.2; padding: 0 26px;
  }
  #login { padding-top: 36px; }
  .login h1 a { width: 200px; height: 48px; }
  .login form { padding: 22px 20px 20px; }
}