/*
 * GravityStack Managed Site: login page.
 *
 * Every colour below is a role from gravitystack-design.md, with contrast
 * measured in GravityBrain on 2026-10-02:
 *
 *   #323731  gravity-surface-dark   page background
 *   #ffffff  gravity-link-inverse   links outside the white box, 12.16:1
 *   #5d3fb8  gravity-cta            primary button fill, label 7.32:1
 *   #ffffff  gravity-cta-label      primary button label
 *   #5231aa  action-10              button hover and focus, 8.83:1
 *   #5d3fb8  gravity-focus          focus ring inside the white box
 *   #ffffff  gravity-focus-inverse  focus ring outside the white box
 *   #5d3fb8  gravity-link           links inside white message boxes
 *
 * The white box and the message boxes otherwise keep WordPress's own styling,
 * including the message boxes' left borders. Messages that security plugins
 * add above the form are theirs and are left alone.
 */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/outfit/Outfit-SemiBold.woff2") format("woff2");
}

/*
 * WordPress 7.x colours the button, field focus, checkbox, and show-password
 * toggle from these variables, which it sets on body.admin-color-modern.
 * html body.login outranks that selector, so every consumer turns purple.
 */
html body.login {
	--wp-admin-theme-color: #5d3fb8;
	--wp-admin-theme-color--rgb: 93, 63, 184;
	--wp-admin-theme-color-darker-10: #5231aa;
	--wp-admin-theme-color-darker-10--rgb: 82, 49, 170;
	--wp-admin-theme-color-darker-20: #5231aa;
	--wp-admin-theme-color-darker-20--rgb: 82, 49, 170;
	--wp-admin-border-width-focus: 2px;

	background: #323731;
}

/*
 * Tightened so the page fits a laptop screen without scrolling. WordPress's
 * own top padding is 5% of the window's width, about 68px on a laptop.
 */
body.login #login {
	padding-top: clamp(16px, 4vh, 40px);
}

/* The "Go to site" link is removed by filter; its empty paragraph goes too. */
body.login #backtoblog {
	display: none;
}

body.login #nav {
	margin-top: 16px;
	text-align: center;
}

/* Top of the page: the site's name as text, in place of the WordPress logo. */

body.login #login h1 a {
	background-image: none;
	color: #ffffff;
	display: block;
	font-family: Outfit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.75rem;
	font-weight: 600;
	height: auto;
	line-height: 1.25;
	margin: 0 auto 16px;
	overflow: visible;
	overflow-wrap: anywhere;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	white-space: normal;
	width: auto;
}

body.login #login h1 a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Text and links outside the white box. */

body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link,
body.login .language-switcher label {
	color: #ffffff;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a,
body.login .gs-managed-site-login-footer__help a {
	color: #ffffff;
	opacity: 1;
	text-decoration: underline;
}

body.login #nav a:hover,
body.login #nav a:active,
body.login #backtoblog a:hover,
body.login #backtoblog a:active,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:active,
body.login .gs-managed-site-login-footer__help a:hover,
body.login .gs-managed-site-login-footer__help a:active {
	color: #ffffff;
	text-decoration-thickness: 2px;
}

/* Focus outside the white box: a white outline, offset from the element. */

body.login #login h1 a:focus,
body.login #nav a:focus,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:focus,
body.login .gs-managed-site-login-footer a:focus {
	box-shadow: none;
	color: #ffffff;
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

body.login .language-switcher select:focus,
body.login .language-switcher .button:focus {
	box-shadow: none;
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Inside the white box. */

body.login.wp-core-ui .button-primary {
	background: #5d3fb8;
	border-color: #5d3fb8;
	color: #ffffff;
}

body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:focus,
body.login.wp-core-ui .button-primary:active {
	background: #5231aa;
	border-color: #5231aa;
	color: #ffffff;
}

/* A white gap, then the purple ring, so the ring reads against the fill. */
body.login.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #5d3fb8;
	outline: 2px solid transparent;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: #5d3fb8;
	box-shadow: 0 0 0 2px #5d3fb8;
}

body.login .button.wp-hide-pw,
body.login .button.wp-hide-pw .dashicons {
	color: #5d3fb8;
}

body.login .button.wp-hide-pw:focus {
	border-color: #5d3fb8;
	box-shadow: 0 0 0 1px #5d3fb8;
}

body.login input[type="checkbox"]:focus {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #5d3fb8;
}

body.login form a,
body.login .message a,
body.login .notice a,
body.login .success a,
body.login #login_error a {
	color: #5d3fb8;
	text-decoration: underline;
}

body.login form a:hover,
body.login form a:focus,
body.login .message a:hover,
body.login .message a:focus,
body.login .notice a:hover,
body.login .notice a:focus,
body.login .success a:hover,
body.login .success a:focus,
body.login #login_error a:hover,
body.login #login_error a:focus {
	color: #5231aa;
}

/*
 * Below the box: the help line, then the lockup. login_footer renders this
 * after the login column closes, so it takes the column's width itself.
 */

.gs-managed-site-login-footer {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 100%;
	padding: 0 24px 24px;
	text-align: center;
	width: 320px;
}

body.login .gs-managed-site-login-footer__help {
	color: #ffffff;
	font-size: 13px;
	line-height: 1.6;
	margin: 24px 0 0;
}

.gs-managed-site-login-footer__lockup {
	margin: 12px 0 0;
}

/* The link is padded to a 44px target height around the 32px image. */
.gs-managed-site-login-footer__lockup-link {
	display: inline-block;
	line-height: 0;
	padding: 6px 0;
}

.gs-managed-site-login-footer__lockup img {
	display: inline-block;
	height: auto;
	max-width: 100%;
	width: 180px;
}