/*
 * WordPress's login page (wp-login.php) dressed as the site (functions.php,
 * porter_mason_login_style). Every colour, font and the logo come from the
 * site's own Customizer settings, passed in as the same --pm-* properties the
 * site uses, so each site's login page matches that site.
 */

/* style.css's default, which this page doesn't load; a Menu Font setting
   overrides it (the inline properties come after this file). */
:root {
	--pm-font-menu: 'Kameron', Georgia, serif;
}

/* The page's own background is the footer's colour, and the cream is painted
   behind the form's column only (#login, below): Safari on an iPhone tints
   the strip under its toolbar from the body's background, so it now matches
   the footer (Porter, Oct 20). */
body.login {
	background: var(--pm-footer-bg);
	color: var(--pm-text);
	font-family: 'Open Sans', sans-serif;
}

/* The column grows to fill the space between header and footer, and its
   cream is spread to the window's edges by a shadow, clipped above and below
   to the column. */
#login {
	flex: 1 0 auto;
	box-sizing: border-box;
	width: 360px;
	max-width: calc(100% - 2rem);
	padding-top: 6vh;
	padding-bottom: 2rem;
	background: var(--pm-band-bg);
	box-shadow: 0 0 0 100vmax var(--pm-band-bg);
	clip-path: inset(0 -100vmax);
}

/* The site's header (functions.php, porter_mason_login_header), drawn as
   style.css draws it: the Header Image contained in the band over the Header
   Pattern (covering, 35% from the left) and Header and Sidebar Background
   Color, 150px; then a thin strip of the menu bar's colour with the site's
   3px rule, a hint of the menu without an empty bar (Porter, Oct 20). Up to
   499, the site's upright phone bar instead: 61px, its logo 28px tall at the
   left. WordPress's own logo is hidden. */
.login h1 {
	display: none;
}

.pm-login-header {
	height: 150px;
	background: var(--pm-header-pattern-url, none) 35% center / cover no-repeat, var(--pm-header-bg);
}

.pm-login-header a {
	display: block;
	box-sizing: border-box;
	height: 100%;
	padding: 0;
	background: var(--pm-header-logo-url, none) center / contain no-repeat content-box;
}

.pm-login-logo-bar {
	display: none;
}

.pm-login-bar {
	height: 6px;
	background: var(--pm-navbar-bg);
	border-bottom: 3px solid var(--pm-text);
}

@media (max-width: 499px) {
	/* Pinned to the top: Safari on an iPhone then tints the strip above it
	   from the bar, not from the body. */
	.pm-login-header {
		position: sticky;
		top: 0;
		z-index: 10;
		height: 61px;
		border-bottom: 3px solid var(--pm-text);
	}
	/* Built as the site's bar is: the pinned element only the header's
	   colour, the pattern on the link inside it. Safari tinted the strip
	   above a stronger yellow while the pinned element carried the pattern
	   itself (Porter, Oct 20). */
	.pm-login-header {
		background: var(--pm-header-bg);
	}
	.pm-login-header a {
		display: flex;
		align-items: center;
		padding: 0 1.25rem;
		background: var(--pm-header-pattern-url, none) 35% center / cover no-repeat;
	}
	.pm-login-logo-bar {
		display: block;
		width: auto;
		height: 28px;
	}
	.pm-login-bar {
		display: none;
	}
}

/* The site's promo card (style.css, "The promo card"): Promo Card Color, the
   ink border and its soft shadow. The form is a wrapping row so its pieces
   can be put in order: Patreon WordPress's button (an unnamed box with an
   inline style), the "or", then the fields, with Remember Me and Log In
   sharing a line and "Lost your password?" under them. */
.login form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 0;
	padding: 1.25rem 1.25rem 1.5rem;
	border: 2px solid var(--pm-text);
	border-radius: 0;
	background: var(--pm-promo-bg);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
}

.login form > * {
	flex: 0 0 100%;
}

.login form > div[style*="text-align"] {
	order: -3;
}

/* Patreon WordPress prints 20px above and below its button with !important. */
.login form > div[style*="text-align"] p,
.login form .ptrn-button {
	margin: 0 !important;
}

/* The two ways in (functions.php, porter_mason_login_card): Patreon's
   button, an "or" on a rule, then the fields. */
.login form .pm-login-or {
	order: -2;
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 1.1rem 0;
	color: var(--pm-text);
	font-size: .85rem;
}

.login form .pm-login-or::before,
.login form .pm-login-or::after {
	content: "";
	flex: 1;
	border-top: 1px solid rgba(0, 0, 0, .25);
}

/* Patreon's button in Patreon's own black, the way its login page draws
   its buttons, rather than the plugin's 2017 coral. */
.login form .ptrn-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: .5rem 1rem;
	border: 2px solid #000;
	border-radius: 4px;
	background: #000;
	color: #fff;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.login form .ptrn-button:hover,
.login form .ptrn-button:focus {
	background: #2b2b2b;
	color: #fff;
}

.login form .ptrn-button .pm-patreon-symbol {
	width: auto;
	height: 1.15rem;
}

/* The wordmark's letters as tall as "Log in with" from the top of its L to
   the foot of its g (Porter, Oct 20; measured: its file has room above and
   below the letters, so 1.2em, set .07em low to line up). */
.login form .ptrn-button .pm-patreon-wordmark {
	position: relative;
	top: .07em;
	width: auto;
	height: 1.2em;
}

.login form .pm-login-patrons {
	order: -3;
	margin: .6rem 0 0;
	color: var(--pm-text);
	font-size: .85rem;
	text-align: center;
}

.login form .pm-login-lost {
	order: 1;
	margin: .75rem 0 0;
	font-size: .85rem;
}

.login form .pm-login-lost a {
	color: var(--pm-link);
}

.login:has(.pm-login-lost) #nav {
	display: none;
}

/* The heading above the card (functions.php, porter_mason_login_heading),
   in the site's headline type. WordPress's own h1 (the logo) stays hidden. */
.login h1.pm-login-heading {
	display: block;
	margin: 0 0 1rem;
	color: var(--pm-text);
	font-family: var(--pm-font-menu);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.15;
}

.login form .forgetmenot {
	flex: 1 1 auto;
	margin: 0;
}

.login form .submit {
	flex: 0 0 auto;
}



.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: var(--pm-content-bg);
}

.login label {
	color: var(--pm-text);
	font-family: var(--pm-font-menu);
	font-weight: 700;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	border: 2px solid var(--pm-text);
	border-radius: 4px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--pm-link);
	box-shadow: 0 0 0 1px var(--pm-link);
}

.login .button.wp-hide-pw .dashicons {
	color: var(--pm-link);
}

/* The site's primary button: Main Content Link Color, Action Color hovered. */
.wp-core-ui .button-primary {
	background: var(--pm-link);
	border: 2px solid var(--pm-link);
	border-radius: 4px;
	color: var(--pm-action-text);
	font-family: var(--pm-font-menu);
	font-weight: 700;
	text-shadow: none;
	box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--pm-action);
	border-color: var(--pm-action);
	color: var(--pm-action-text);
	box-shadow: none;
}

/* "You are now logged out" and the like. */
.login .message,
.login .notice,
.login .success {
	border: 2px solid var(--pm-text);
	border-left: 6px solid var(--pm-link);
	box-shadow: none;
}

.login #nav,
.login #backtoblog {
	padding: 0;
}

.login #nav a,
.login #backtoblog a {
	color: var(--pm-link);
	font-weight: 700;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--pm-action);
}

/* WordPress's language switcher: the sites are in English only. */
.language-switcher {
	display: none;
}

/* The footer, light (functions.php, porter_mason_login_footer): the site's
   rule, colours and Footer Logo (smaller than the site footer's 3rem: alone
   here it loomed; Porter, Oct 20),
   then the copyright line, at the bottom of the window however short the
   page. It replaces WordPress's "Go to" link. */
body.login {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Past the end of the page, the root's background shows: the footer's too. */
html {
	background: var(--pm-footer-bg);
}

.login #backtoblog {
	display: none;
}

.pm-login-footer {
	margin-top: auto;
	padding: 1.75rem 1rem 1.25rem;
	border-top: 3px solid var(--pm-text);
	background: var(--pm-footer-bg);
	color: var(--pm-footer-text);
	text-align: center;
}

.pm-login-footer .pm-footer-name {
	margin: 0 0 .6rem;
	font-family: var(--pm-font-menu);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
}

.pm-login-footer .pm-footer-name a {
	color: inherit;
	text-decoration: none;
}

.pm-login-footer .pm-footer-logo {
	display: block;
	width: auto;
	max-height: 1.75rem;
	max-width: 100%;
	margin: 0 auto;
}

@media (max-width: 499px) {
	.pm-login-footer .pm-footer-logo {
		max-height: 1.4rem;
	}
}

.pm-login-copyright,
.pm-login-copyright p {
	margin: 0;
	font-size: .85rem;
}

.pm-login-copyright a {
	color: var(--pm-footer-link);
}