/*
 * Branded wp-login.php styles.
 *
 * wp-login is a standalone screen — none of the theme.json font/color
 * pipeline applies here, so this file is self-contained: @font-face for
 * Source Sans 3, brand variables, and explicit overrides for the default
 * WordPress login markup (#login, #loginform, #wp-submit, #nav, #backtoblog).
 */

@font-face {
	font-family: 'Source Sans 3';
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/SourceSans3-VariableFont_wght.woff2') format('woff2-variations'),
	     url('../fonts/SourceSans3-VariableFont_wght.woff2') format('woff2');
}

:root {
	--mipta-blue:       #002f6c;
	--mipta-blue-dark:  #001a3d;
	--mipta-gold:       #ffb600;
	--mipta-gold-dark:  #b88300;
	--mipta-off-white:  #f5f1ea;
	--mipta-ink:        #1a1a1a;
	--mipta-neutral-600:#52525b;
	--mipta-neutral-200:#e4e4e7;
	--mipta-radius:     14px;
	--mipta-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 16px 40px -12px rgba(0, 47, 108, 0.30);
	--mipta-font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Page chrome ----------
 * WP's default login.min.css sets `html { background: #f0f0f1 }` and
 * `body.login { padding: 8% 0 0 }`. The 8% top padding stacked on min-height:
 * 100vh forces a scrollbar and the default gray html bg shows through at the
 * bottom. Override both so the brand wash covers the whole viewport.
 */
html { background: var(--mipta-off-white); height: 100%; }
body.login {
	background:
		radial-gradient(ellipse at top left, rgba(0, 47, 108, 0.13), transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(255, 182, 0, 0.18), transparent 55%),
		var(--mipta-off-white);
	background-attachment: fixed;
	font-family: var(--mipta-font-sans);
	color: var(--mipta-ink);
	/* `box-sizing: border-box` is the load-bearing line: WP's default body has
	   `content-box`, so `min-height: 100vh` + vertical padding produces
	   100vh + 4rem of total height and forces a scrollbar. With border-box
	   the padding is included in the min-height. */
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem 1.25rem;          /* overrides WP's 8% 0 0 default */
	margin: 0;
}

/* ---------- Logo header ---------- */
body.login #login {
	width: 100%;
	max-width: 420px;
	padding: 0;
	margin: 0;
}
body.login #login h1 {
	margin: 0 0 1.5rem;
	text-align: center;
}
body.login #login h1 a {
	background-image: url('../logos/mipta-blue.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 200px;
	height: 80px;
	margin: 0 auto;
	display: block;
	text-indent: -9999em;
	overflow: hidden;
	outline: none;
}
body.login #login h1 a:focus-visible {
	outline: 3px solid var(--mipta-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---------- Form card ---------- */
body.login form,
body.login .login form,
body.login #login_error,
body.login .message,
body.login .notice {
	background: #ffffff;
	border: 0;
	border-radius: var(--mipta-radius);
	box-shadow: var(--mipta-shadow);
	padding: 2rem 2rem 1.75rem;
	margin: 0 0 1.25rem;
}
body.login form { position: relative; overflow: hidden; }
body.login form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--mipta-gold);
}

/* ---------- Labels + inputs ---------- */
body.login label {
	color: var(--mipta-ink);
	font-weight: 600;
	font-size: 0.95rem;
}
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login input[type="number"] {
	width: 100%;
	font-size: 1rem;
	font-family: var(--mipta-font-sans);
	padding: 0.65rem 0.85rem;
	border: 1.5px solid var(--mipta-neutral-200);
	border-radius: 8px;
	background: #ffffff;
	color: var(--mipta-ink);
	margin: 0.4rem 0 1rem;
	box-shadow: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.login input[type="number"]:focus {
	border-color: var(--mipta-blue);
	box-shadow: 0 0 0 3px rgba(0, 47, 108, 0.18);
	outline: none;
}
body.login .input.password-input,
body.login .wp-pwd { position: relative; }

/* WP's "show password" eye button */
body.login button.wp-hide-pw {
	color: var(--mipta-neutral-600);
}
body.login button.wp-hide-pw:hover,
body.login button.wp-hide-pw:focus-visible { color: var(--mipta-blue); }

/* ---------- Remember-me row ---------- */
body.login .forgetmenot {
	font-size: 0.92rem;
	color: var(--mipta-neutral-600);
	margin-bottom: 0;
}
body.login .forgetmenot label { font-weight: 500; }

body.login p.submit {
	margin: 1rem 0 0;
	text-align: right;
}

/* ---------- Primary button ---------- */
body.login .button-primary,
body.login #wp-submit {
	background: var(--mipta-blue);
	background-image: none;
	border: 2px solid var(--mipta-blue);
	color: #ffffff;
	text-shadow: none;
	box-shadow: none;
	font-family: var(--mipta-font-sans);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.01em;
	padding: 0.7rem 1.5rem;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
	min-height: 0;
	line-height: 1.2;
}
body.login .button-primary:hover,
body.login #wp-submit:hover,
body.login .button-primary:focus-visible,
body.login #wp-submit:focus-visible {
	background: var(--mipta-blue-dark);
	border-color: var(--mipta-blue-dark);
	color: #ffffff;
	transform: translateY(-1px);
	outline: none;
}
body.login .button-primary:focus-visible,
body.login #wp-submit:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 47, 108, 0.30);
}

/* Secondary buttons (e.g., on password-reset screens) */
body.login .button,
body.login .button-secondary {
	background: #ffffff;
	color: var(--mipta-blue);
	border: 2px solid var(--mipta-blue);
	border-radius: 10px;
	font-family: var(--mipta-font-sans);
	font-weight: 700;
	box-shadow: none;
	text-shadow: none;
}
body.login .button:hover,
body.login .button-secondary:hover {
	background: var(--mipta-blue);
	color: #ffffff;
}

/* ---------- Links below the card ---------- */
body.login #nav,
body.login #backtoblog {
	text-align: center;
	margin: 0.5rem 0;
	padding: 0 1rem;
	font-size: 0.95rem;
}
body.login #nav a,
body.login #backtoblog a,
body.login .mipta-login__back {
	color: var(--mipta-blue);
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 0.2em;
}
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .mipta-login__back:hover,
body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible,
body.login .mipta-login__back:focus-visible {
	color: var(--mipta-blue-dark);
	text-decoration: underline;
}

/* ---------- Messages / errors ---------- */
body.login .message,
body.login #login_error,
body.login .notice {
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	line-height: 1.4;
	border-left: 4px solid var(--mipta-blue);
	background: #ffffff;
}
body.login #login_error {
	border-left-color: #c0392b;
	color: var(--mipta-ink);
}
body.login .message {
	border-left-color: var(--mipta-gold);
}

/* Hide the language switcher footer — keeps the screen calm. Editors who
   want to swap admin language can do it from wp-admin → Profile. */
body.login .language-switcher { display: none; }

/* ---------- Privacy policy + small print ---------- */
body.login .privacy-policy-page-link {
	text-align: center;
	margin-top: 1rem;
	font-size: 0.85rem;
}
body.login .privacy-policy-page-link a {
	color: var(--mipta-neutral-600);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------- Small viewports ---------- */
@media (max-width: 480px) {
	body.login { padding: 1.5rem 1rem; }
	body.login #login h1 a { width: 160px; height: 64px; }
	body.login form,
	body.login .login form { padding: 1.5rem 1.25rem; }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
	body.login .button-primary,
	body.login #wp-submit { transition: none; }
	body.login .button-primary:hover,
	body.login #wp-submit:hover { transform: none; }
}