/*
 * Kirkepakka — innloggingsskjerm (fase 9I). Brandes med Kirkepakka-identitet via standard
 * wp_login-hooks (panel-skin.php): kirke-glyph erstatter WP-logoen, ordmerke + menighetsnavn
 * over skjemaet, panelets blå på knappen/lenkene. Gjelder alle (siden er rolleløs).
 */

body.login {
	background: #f4f4f1;
}

/* Kirke-glyph i stedet for WordPress-logoen (statisk data-URI SVG, --kp-primar). */
.login h1 a {
	width: 100%;
	height: 60px;
	margin-bottom: 6px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2323425F'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2021h18M5%2021V9l7-6%207%206v12'/%3E%3Cpath%20d='M12%203v4M10%205h4'/%3E%3C/svg%3E");
	background-size: 56px;
	background-position: center;
}

.kp-login-merke {
	margin: 0 0 2px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: #23425f;
}
.kp-login-menighet {
	margin: 0 0 20px;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
	color: #5f6368;
}

.login form {
	border: 1px solid #e3e2dc;
	border-radius: 16px;
	box-shadow: 0 8px 26px rgba(38, 40, 43, 0.06);
}
.login form .input,
.login input[type="text"],
.login input[type="password"] {
	border-radius: 10px;
	font-size: 1rem;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: #23425f;
	box-shadow: 0 0 0 1px #23425f;
}
.wp-core-ui .button-primary {
	background: #23425f;
	border-color: #1a3349;
	border-radius: 999px;
	text-shadow: none;
	box-shadow: none;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #1a3349;
	border-color: #1a3349;
}
.login #nav a,
.login #backtoblog a {
	color: #5f6368;
}
.login #nav a:hover,
.login #backtoblog a:hover {
	color: #23425f;
}
.login #login_error,
.login .message,
.login .success {
	border-left-color: #23425f;
	border-radius: 8px;
}

/* ============================================================
   MAGIC LINK (fase 10d) — primærveien øverst, passord bak en bryter.
   Skjemaet vårt skrives ut via login_message, altså inne i #login rett før
   wp-login.php sitt eget <form id="loginform">. Kjernens `.login form`-regler
   treffer derfor begge, og magic link-kortet arver kortlooken gratis.
   ============================================================ */

.kp-login-beskjed {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-left: 4px solid #23425f;
	border-radius: 8px;
	background: #e8eff6;
	color: #1a3349;
	font-size: 0.92rem;
	line-height: 1.5;
}

.kp-magisk__intro {
	margin: 0 0 16px;
	color: #5f6368;
	font-size: 0.92rem;
	line-height: 1.5;
}

.login form.kp-magisk .submit {
	margin-bottom: 0;
}

.kp-magisk .kp-magisk__send {
	width: 100%;
	height: auto;
	padding: 10px 16px;
	font-size: 1rem;
	line-height: 1.4;
}

/* «eller»-skille mellom de to veiene. */
.kp-login-eller {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 14px;
	color: #5f6368;
	font-size: 0.85rem;
	text-transform: lowercase;
}
.kp-login-eller::before,
.kp-login-eller::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e3e2dc;
}

/* Bryteren til passordveien. Vises kun når JavaScript kjører (hidden fra PHP). */
.kp-login-bytt {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #c9cdd2;
	border-radius: 999px;
	background: transparent;
	color: #23425f;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}
.kp-login-bytt:hover {
	border-color: #23425f;
	background: #e8eff6;
}
.kp-login-bytt:focus-visible,
.kp-magisk .kp-magisk__send:focus-visible {
	outline: 2px solid #23425f;
	outline-offset: 2px;
}

.kp-login-passord-tittel {
	margin: 0 0 -8px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #26282b;
}

/* Uten JavaScript står begge veiene åpne — da trenger passordseksjonen litt luft. */
.kp-login-passord-tittel + form#loginform {
	margin-top: 16px;
}