/**
 * Brand the WP login / register / lost-password / reset screens.
 * Uses the directory-news palette: navy #002855 + red #a42a38 + serif headings.
 */

:root {
	--tdn-navy: #002855;
	--tdn-red: #a42a38;
	--tdn-line: #d9dde3;
	--tdn-bg:   #f4f3ee;
	--tdn-text: #1f2937;
}

/* ---------- Page background ---------- */
body.login.tdn-login-body {
	background: var(--tdn-bg);
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--tdn-text);
}
body.login.tdn-login-body a { color: var(--tdn-navy); }
body.login.tdn-login-body a:hover { color: var(--tdn-red); }

/* ---------- Logo ---------- */
body.login.tdn-login-body #login h1 a {
	background-image: var(--tdn-login-logo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 280px;
	height: 90px;
	margin: 0 auto 18px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
}

/* ---------- Container width ---------- */
body.login.tdn-login-body #login {
	width: 380px;
	padding: 36px 0 24px;
}

/* ---------- Welcome lede ---------- */
.tdn-login__lede {
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.1rem;
	color: var(--tdn-navy);
	margin: 0 0 18px;
	font-weight: 600;
	line-height: 1.3;
}

/* ---------- Form ---------- */
body.login.tdn-login-body #loginform,
body.login.tdn-login-body #registerform,
body.login.tdn-login-body #lostpasswordform,
body.login.tdn-login-body #resetpassform {
	background: #fff;
	border: 1px solid var(--tdn-line);
	border-top: 4px solid var(--tdn-navy);
	box-shadow: 0 2px 8px rgba(0, 40, 85, .06);
	padding: 26px 24px 18px;
	border-radius: 4px;
}

body.login.tdn-login-body .login form .input,
body.login.tdn-login-body .login input[type="text"],
body.login.tdn-login-body .login input[type="email"],
body.login.tdn-login-body .login input[type="password"],
body.login.tdn-login-body input[type="text"],
body.login.tdn-login-body input[type="email"],
body.login.tdn-login-body input[type="password"] {
	background: #fff;
	border: 1px solid var(--tdn-line);
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 1rem;
	color: var(--tdn-text);
	box-shadow: none;
}
body.login.tdn-login-body input[type="text"]:focus,
body.login.tdn-login-body input[type="email"]:focus,
body.login.tdn-login-body input[type="password"]:focus {
	border-color: var(--tdn-navy);
	box-shadow: 0 0 0 2px rgba(0, 40, 85, .15);
	outline: none;
}

body.login.tdn-login-body label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--tdn-navy);
}

/* ---------- "Remember me" checkbox row ---------- */
body.login.tdn-login-body .forgetmenot { color: var(--tdn-text); }

/* ---------- Primary button (Log In / Register / Reset / Get New Password) ---------- */
body.login.tdn-login-body .button-primary,
body.login.tdn-login-body #wp-submit {
	background: var(--tdn-navy) !important;
	border-color: var(--tdn-navy) !important;
	color: #fff !important;
	text-shadow: none;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 10px 22px !important;
	height: auto !important;
	border-radius: 4px;
	box-shadow: none;
}
body.login.tdn-login-body .button-primary:hover,
body.login.tdn-login-body #wp-submit:hover {
	background: #001838 !important;
	border-color: #001838 !important;
}

/* ---------- Error / notice messages ---------- */
body.login.tdn-login-body .message,
body.login.tdn-login-body #login_error {
	border-left: 4px solid var(--tdn-red);
	background: #fff;
	box-shadow: 0 1px 4px rgba(164, 42, 56, .12);
	border-radius: 4px;
	font-size: .95rem;
	padding: 12px 14px;
}
body.login.tdn-login-body .message { border-left-color: var(--tdn-navy); }
body.login.tdn-login-body .success {
	border-left-color: #16a34a;
}

/* ---------- Below-form nav (Lost password / Register) ---------- */
body.login.tdn-login-body #nav,
body.login.tdn-login-body #backtoblog {
	text-align: center;
	font-size: .9rem;
	padding: 14px 0 6px;
}
body.login.tdn-login-body #nav a,
body.login.tdn-login-body #backtoblog a {
	color: var(--tdn-navy);
	text-decoration: none;
	font-weight: 600;
}
body.login.tdn-login-body #nav a:hover,
body.login.tdn-login-body #backtoblog a:hover { text-decoration: underline; color: var(--tdn-red); }

/* Hide WP's default "Back to ..." since we add our own branded footer */
body.login.tdn-login-body #backtoblog { display: none; }

/* ---------- Our branded footer ---------- */
.tdn-login__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	max-width: 380px;
	margin: 18px auto 0;
	padding: 14px 4px;
	border-top: 1px solid var(--tdn-line);
	font-size: .88rem;
}
.tdn-login__back,
.tdn-login__subscribe {
	color: var(--tdn-navy) !important;
	text-decoration: none;
	font-weight: 600;
}
.tdn-login__back:hover,
.tdn-login__subscribe:hover { color: var(--tdn-red) !important; text-decoration: underline; }
.tdn-login__subscribe { color: var(--tdn-red) !important; }
.tdn-login__subscribe:hover { color: #861f2c !important; }

/* ---------- Language switcher (multilingual setups) ---------- */
body.login.tdn-login-body .language-switcher { text-align: center; font-size: .85rem; }

/* ---------- Mobile ---------- */
@media ( max-width: 480px ) {
	body.login.tdn-login-body #login { width: 92%; padding: 24px 0 16px; }
	.tdn-login__footer { flex-direction: column; gap: 8px; text-align: center; }
}