/**
 * Era branding – login-side (wp-login.php)
 * ------------------------------------------------------------------
 * Sort/hvid Era-branding af login-skærmen. Adresserer de tre punkter fra
 * screenshot'et: ① Era-logo, ② hover-state på "Log ind", ③ fjern "affald"
 * (sprog-dropdown, tilbage-til-site/privacy-link, evt. cookie-banner).
 */

:root {
	--era-black:   #111111;
	--era-black-2: #2b2b2b;
	--era-white:   #ffffff;
	--era-line:    #e5e7eb;
	--era-green:   56, 142, 104; /* RGB – samme Era-grøn som wp-admin */
}

/* Mørk Era-baggrund med et subtilt grønt glow i nederste højre hjørne –
   samme tema som wp-admin. Den hvide login-boks popper oven på. */
body.login {
	background-color: var(--era-black);
	background-image:
		radial-gradient( 1700px circle at 82% 118%, rgba( var(--era-green), .50 ) 0%, rgba( var(--era-green), .18 ) 45%, rgba( var(--era-green), 0 ) 72% ),
		linear-gradient( 160deg, #0d0d0d 0%, #181818 100% );
	background-attachment: fixed;
}

/* ① Era-logo: tekst-fallback hvis billedet mangler (background sættes via
   inline-CSS fra PHP når assets/logo/era-logo.jpeg findes). */
.login h1 {
	height: fit-content;
}

#login h1 a,
.login h1 a {
	width: 100%;
	max-width: 140px;
	height: 64px;
	margin-bottom: 0;
}

/* Login-boksen: rene kanter, diskret skygge, luftig padding, flex-layout. */
.login form {
	margin-top: 10px;
	border: 1px solid var(--era-line);
	box-shadow: 0 8px 24px rgba(17, 17, 17, .06);
	border-radius: 8px;
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
}

/* --- Fejl- og statusbeskeder: mørke, brandede "glas"-kort -----------------
   Bevidst IKKE WP's hvide not-bokse med venstrekant. I stedet mørke,
   semi-transparente kort der matcher den mørke login-baggrund, med en
   farvetone der indikerer typen. */
.login #login_error,
.login .message,
.login .notice,
.login .success {
	box-sizing: border-box;
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid rgba( 255, 255, 255, .16 );
	border-left: 1px solid rgba( 255, 255, 255, .16 ); /* overskriv WP's venstrekant */
	border-radius: 10px;
	background: rgba( 255, 255, 255, .06 );
	box-shadow: none;
	color: rgba( 255, 255, 255, .92 );
	font-size: 13px;
	line-height: 1.55;
	text-align: center;
}

.login #login_error p,
.login .message p,
.login .notice p,
.login .success p {
	margin: 0;
	padding: 0;
	color: inherit;
}

/* Fejl = rød tone. */
.login #login_error {
	max-width: 300px;
	margin: 0 auto 18px;
	background: rgba( 214, 54, 56, .16 );
	border-color: rgba( 214, 54, 56, .45 );
}

/* Succes (fx "nulstillingsmail sendt") = Era-grøn tone. */
.login .success {
	background: rgba( var(--era-green), .16 );
	border-color: rgba( var(--era-green), .45 );
}

/* Links i beskederne er lyse. */
.login #login_error a,
.login .message a,
.login .notice a,
.login .success a {
	color: var(--era-white);
	font-weight: 600;
	text-decoration: underline;
}

/* "Husk mig"-checkbox i sort i stedet for WP-blå. */
.login input[type="checkbox"] {
	accent-color: var(--era-black);
}

.login input[type="checkbox"]:checked {
	background: var(--era-black);
	border-color: var(--era-black);
}

.login input[type="checkbox"]:checked::before {
	/* WP's eget flueben-ikon farves sort/hvidt frem for blåt. */
	color: var(--era-white);
}

.login input[type="checkbox"]:focus {
	border-color: var(--era-black);
	/* Samme tydelige sorte fokus-ring som login-knappen. */
	box-shadow: 0 0 0 1px var(--era-white), 0 0 0 3px var(--era-black);
	outline: 2px solid transparent;
}

/* Felter i fokus følger sort tema frem for WP-blå. */
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--era-black);
	box-shadow: 0 0 0 1px var(--era-black);
}

/* "Vis adgangskode"-øjet i sort/grå frem for WP-blå. */
.login .wp-hide-pw .dashicons {
	color: var(--era-black);
}

.login .wp-hide-pw:hover .dashicons,
.login .wp-hide-pw:focus .dashicons {
	color: var(--era-black-2);
}

/* Højere specificitet end .wp-core-ui .button:focus, så ringen bliver sort
   og ikke WP-blå. */
.login .button.wp-hide-pw:focus,
.wp-core-ui .login .button.wp-hide-pw:focus {
	border-color: var(--era-black);
	box-shadow: 0 0 0 1px var(--era-white), 0 0 0 3px var(--era-black);
	outline: 2px solid transparent;
}

/* ② "Log ind"-knap: sort, fuld bredde, med tydelig hover/focus-state. */
.login .button-primary,
.wp-core-ui .login .button-primary {
	background: var(--era-black);
	border-color: var(--era-black);
	color: var(--era-white);
	text-shadow: none;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease;
	/* Fuld bredde – overskriver WP's standard float/auto-bredde. */
	display: block;
	width: 100%;
	float: none;
	margin: 20px 0 0;
	/* Typografi på "Log ind"-knappen. */
	font-size: 16px;
	font-weight: 300;
}

/* Submit-rækken må ikke begrænse knappens bredde. */
.login .submit,
.login p.submit {
	width: 100%;
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: var(--era-black-2);
	border-color: var(--era-black-2);
	color: var(--era-white);
}

.login .button-primary:focus {
	box-shadow: 0 0 0 1px var(--era-white), 0 0 0 3px var(--era-black);
}

/* Links (fx "Mistet din adgangskode?") i lyst, så de ses på mørk baggrund. */
.login #nav a,
.login #backtoblog a {
	color: rgba( 255, 255, 255, .85 );
	transition: color .15s ease;
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus {
	color: var(--era-white);
}

/* Era-footer på login-siden (supportlinje + diskret signatur). */
.era-login-footer {
	margin: 24px auto 0;
	max-width: 320px;
	text-align: center;
	line-height: 1.6;
}

.era-login-footer .era-login-support {
	display: block;
	color: rgba( 255, 255, 255, .85 );
	font-size: 13px;
	font-weight: 300;
	text-decoration: none;
}

.era-login-footer .era-login-support:hover,
.era-login-footer .era-login-support:focus {
	color: var(--era-white);
	text-decoration: underline;
}

.era-login-footer .era-login-credit {
	display: block;
	margin-top: 8px;
	color: rgba( 255, 255, 255, .45 );
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Gør "Mistet din adgangskode?" større og mere synlig. */
.login #nav {
	font-size: 15px;
	text-align: center;
}

.login #nav a {
	font-size: 15px;
	font-weight: 600;
}

/* ③ Fjern "affald":
   - #backtoblog  = "← Tilbage til {site}"
   - .privacy-policy-page-link = privatlivslink
   - .language-switcher = sprog-dropdown (også slået fra via PHP-filter)
   - #era-cookie / .cookie-notice m.fl. = typiske cookie-bannere på login. */
.login #backtoblog,
.login .privacy-policy-page-link,
.login .language-switcher,
body.login .cookie-notice,
body.login #cookie-notice,
body.login .cli-bar-container,
body.login #cookie-law-info-bar {
	display: none !important;
}