/*
 * Inloggningen, ram 01 — wp-login.php omstylad.
 *
 * Elementors kit laddas inte på wp-login.php, så tokens finns inte som CSS
 * custom properties här. Värdena är därför literala, men hämtade ur
 * design/tokens.json och inget annat. Det är den enda filen i projektet där
 * det gäller, och skälet står här så nästa läsare inte tror att det är slarv.
 */

body.login {
	background: #e3eef4;                 /* surface-accent */
	font-family: Inter, system-ui, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;                  /* space-gap-2xl / space-gap-lg */
	margin: 0;
}

body.login #login {
	width: 100%;
	max-width: 600px;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;                           /* space-gap-2xl */
}

/* --- Ordbilden. Mask i stället för background-image: SVG:n bär
   fill="currentColor" och en background-image ärver ingen färg. --- */

body.login h1,
body.login .wp-login-logo {
	margin: 0;
	display: flex;
	justify-content: center;
}

body.login h1 a,
body.login .wp-login-logo a {
	width: 240px;
	height: 32px;
	margin: 0;
	padding: 0;
	background: none;
	background-color: #03567d;           /* text-accent */
	-webkit-mask: var(--ecm-login-logo) center / contain no-repeat;
	mask: var(--ecm-login-logo) center / contain no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	box-shadow: none;
	outline-offset: 4px;
}

/* --- Kortet --- */

body.login form {
	background: #ffffff;                 /* surface-primary */
	border: 1px solid #e4e8eb;           /* border-subtle */
	border-radius: 12px;                 /* radius-lg */
	padding: 48px;                       /* space-inset-xl */
	margin: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 24px;                           /* space-gap-lg */
}

/* order: -1 flyttar blocket till toppen av formulärets flexkolumn. Markupen
   kommer från login_form, som löser ut före submit-knappen — wp-login.php har
   ingen hook högre upp inuti formuläret. */
.ecm-login__intro { order: -1; display: flex; flex-direction: column; gap: 8px; }

.ecm-login__titel {
	margin: 0;
	font-size: 2rem;                     /* heading-xl 32/38 */
	font-weight: 600;
	line-height: 1.1875em;
	color: #0f1720;                      /* text-primary */
}

.ecm-login__text {
	margin: 0;
	font-size: 1rem;                     /* text-md 16/26 */
	line-height: 1.625em;
	color: #3f4a55;                      /* text-body */
}

/* --- Fälten --- */

body.login form p,
body.login form .user-pass-wrap {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;                            /* space-gap-xs, 6 i Figma snappat */
}

body.login form label {
	font-size: 0.875rem;                 /* text-label 14/20 */
	font-weight: 600;
	line-height: 1.4286em;
	color: #0f1720;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="tel"],
body.login input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	/* WP ger #user_pass margin: 0 6px 16px 0. Hogermarginalen gjorde
	   losenordsfaltet 6px smalare an e-postfaltet, bottenmarginalen lade 16px
	   under det. Bada nollas har. */
	margin: 0;
	padding: 12px 16px;                  /* 14 i Figma snappat till 16 */
	border: 1px solid #c9d0d6;           /* border-strong */
	border-radius: 8px;                  /* radius-md */
	background: #ffffff;
	font-size: 1rem;
	line-height: 1.5em;
	color: #0f1720;
	box-shadow: none;
	min-height: 0;
}

body.login input::placeholder { color: #6b7681; }

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="tel"]:focus,
body.login input[type="number"]:focus {
	border-color: #1b79a8;               /* border-focus */
	box-shadow: 0 0 0 3px rgba(27, 121, 168, 0.18);
	outline: none;
}

body.login .wp-pwd { position: relative; display: flex; }
body.login .wp-pwd .button.wp-hide-pw {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 4px;
	background: none;
	border: 0;
	box-shadow: none;
	color: #6b7681;
	cursor: pointer;
}
body.login .wp-pwd .button.wp-hide-pw:hover { color: #03567d; }

/* --- Knappen --- */

body.login .submit,
body.login p.submit { margin: 0; }

body.login .button-primary,
body.login #wp-submit {
	width: 100%;
	height: auto;
	padding: 14px 20px;
	border: 0;
	border-radius: 8px;                  /* radius-md */
	background: #03567d;                 /* surface-action-primary */
	color: #ffffff;                      /* text-action-primary */
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
body.login .button-primary:hover,
body.login #wp-submit:hover { background: #012c42; }

/* Designen visar ingen kryssruta. Den döljs inte — att ta bort en nyttig
   funktion för att matcha en skiss är sämre — men den tonas ned. */
body.login .forgetmenot {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
body.login .forgetmenot label {
	font-size: 0.8125rem;
	font-weight: 400;
	color: #6b7681;
}

/* Kryssrutan: WP vaxlar 16 -> 25px vid 782, en brytpunkt vi inte ager, sa
   storleken hoppade i intervallet 600-782. Satt explicit i stallet. 24px pa
   touch ar WCAG 2.5.8:s minsta trafferyta och behalls darfor - etiketten ar
   kopplad med for-attributet, sa hela raden ar klickbar i bada fallen. */
body.login .forgetmenot input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 0;
	margin: 0;
	border-radius: 4px;                  /* radius-sm */
	accent-color: #03567d;               /* brand/700 */
}

/* --- Länkarna under kortet --- */

body.login #nav,
body.login #backtoblog {
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Sprakvaljaren doljs i markup via login_display_language_dropdown, men
   doljs aven har for sakerhets skull: verktyget ar helsvenskt. */
body.login .language-switcher,
body.login #language-switcher { display: none; }


body.login #nav a,
body.login #backtoblog a {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4286em;
	color: #03567d;                      /* text-accent */
	text-decoration: none;
}
body.login #nav a:hover,
body.login #backtoblog a:hover { text-decoration: underline; }
body.login #backtoblog { display: none; }

/* --- Meddelanden och fel --- */

body.login #login_error,
body.login .message,
body.login .notice {
	box-sizing: border-box;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: #fdf0e4;                 /* surface-status-forsenad */
	color: #9a4a15;                      /* text-status-forsenad */
	font-size: 0.875rem;
	line-height: 1.4286em;
	box-shadow: none;
}

body.login #login_error {
	background: #fbe9e7;
	color: #b3261e;                      /* text-error, formulärvalidering */
}

/* Neutral, inte gron: WP anvander .message bade for instruktioner ("ange din
   e-post") och for bekraftelser. Gront lases som att nagot redan lyckats,
   vilket ar fel i halften av fallen. */
body.login .message {
	background: #f4f8fa;                 /* surface-muted */
	color: #2d4653;                      /* text-secondary */
	border: 1px solid #d3e1e9;           /* border-default */
}

/* --- Hjalpmarket vid "Hall mig inloggad" ---
   WP 7.1 lagger en toggletip dar, med en riktig sakerhetsnotis: anvand bara
   pa egna enheter. Innehallet ar vart att ha kvar, sa det stylas i stallet
   for att doljas. Dashicons ar WP:s egen ikonfont pa inloggningssidan - inte
   ett glyftecken i text, sa designsystemets ikonregel gors ingen vald pa. */

body.login .wp-tooltip { display: inline-flex; align-items: center; }

body.login .wp-tooltip__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #5c7a8a;                      /* text-muted */
	cursor: pointer;
}
body.login .wp-tooltip__toggle:hover { color: #03567d; }
body.login .wp-tooltip__toggle:focus-visible {
	outline: 2px solid #03567d;
	outline-offset: 2px;
}
body.login .wp-tooltip__toggle .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}

body.login .wp-tooltip__bubble {
	box-sizing: border-box;
	max-width: 320px;
	/* Hoger sida gor plats for stangkrysset, som ligger absolut i bubblan. */
	padding: 12px 40px 12px 16px;
	border: 1px solid #d3e1e9;           /* border-default */
	border-radius: 8px;
	background: #ffffff;
	color: #2d4653;                      /* text-secondary */
	font-size: 0.8125rem;
	line-height: 1.5385em;
	box-shadow: 0 4px 12px rgba(3, 86, 125, 0.12);
}
body.login .wp-tooltip__close {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	padding: 4px;
	border: 0;
	background: transparent;
	color: #5c7a8a;
	cursor: pointer;
}
body.login .wp-tooltip__close .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* --- Tvastegsverifieringen (WP 2FA) ---
   Plugin:et renderar sina steg pa wp-login.php, sa de arver kortet harifran.
   Fyra saker traffar det inte automatiskt.

   1. Kodfaltet ar type="tel" (klass-login.php rad 1268), tackt ovan.
   2. Plugin:et skriver ut en inline <style> SIST i sin utmatning med
      `#login form > p { margin-bottom: 15px }`. Den kommer efter var fil i
      dokumentordning och bar en id-selektor, sa den slar var `form p`-reset.
      Selektorn nedan ar (1,2,1) mot deras (1,1,1).
   3. Aterskicka-kod och "gor det senare" ar sekundarknappar utan egen stil.
   4. `.backup-methods-wrap` bar inline `padding: 0 24px` som inte foljer
      kortets indrag. */

body.login #login form > p,
body.login #login form > div { margin-bottom: 0; }

body.login .wp-2fa-login-wrapper,
body.login .wp-2fa-login-standard {
	display: flex;
	flex-direction: column;
	gap: 24px;                           /* space-gap-lg */
}

body.login .wp-2fa-email-resend { margin: 0; }

body.login input.button:not(.button-primary):not(#wp-submit),
body.login a.button-secondary {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 14px 20px;
	border: 1px solid #c9d0d6;           /* border-strong */
	border-radius: 8px;                  /* radius-md */
	background: #ffffff;
	color: #03567d;                      /* text-accent */
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
body.login input.button:not(.button-primary):not(#wp-submit):hover,
body.login a.button-secondary:hover {
	border-color: #03567d;
	background: #f4f8fa;                 /* surface-muted */
}

body.login .backup-methods-wrap {
	margin: 0;
	padding: 0;
}
body.login .backup-methods-wrap a {
	font-size: 0.875rem;
	font-weight: 500;
	color: #03567d;                      /* text-accent */
}
body.login .backup-methods-wrap a:hover { text-decoration: underline; }

body.login .wp-2fa-error-msg { font-weight: 600; }

/* --- Under 600 --- */

@media (max-width: 600px) {
	body.login { padding: 24px 16px; }
	body.login #login { gap: 32px; }
	body.login form { padding: 24px; border-radius: 12px; }
	body.login .ecm-login__titel { font-size: 1.5rem; }
	body.login .forgetmenot input[type="checkbox"] { width: 24px; height: 24px; }
}