@import url("https://use.typekit.net/xhj4vuj.css");

@font-face {
	font-family: "GothamWeb";
	ascent-override: 100%;
	src:
		url("/wp-content/themes/wimbledon/assets/fonts/Gotham-Bold.otf") format("woff2"),
		url("/wp-content/themes/wimbledon/assets/fonts/Gotham-Bold.woff") format("woff"),
		url("/wp-content/themes/wimbledon/assets/fonts/Gotham-Bold.otf") format("opentype");
	font-style: normal;
	font-weight: 700;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

:root {
	--gutter: 20px;
	--pageMarginTotal: 20px;
	--negPageMargin: calc(var(--pageMarginTotal) * -1);
	--fullBleedWidth: calc(100% + (var(--pageMarginTotal) * 2));
	--innerWidth: calc(100% - (var(--pageMarginTotal) * 2));
	--pageMargin: calc(var(--pageMarginTotal) - (var(--gutter) / 2));
	--easeOut: cubic-bezier(0.16, 1, 0.3, 1);
	--easeInOut: cubic-bezier(0.83, 0, 0.17, 1);
}


body.login {
	background-color: rgb(15, 35, 12);
	color: rgb(255, 255, 255);
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.login #login {
	height: 100vh;
  height: 100svh;
  position: relative;
  display: grid;
  row-gap: var(--gutter);
  grid-template-rows: max-content 1fr max-content;
	padding: 0;
	width: 100%;
}

body.login #login .wordmark {
	align-self: end;
}

.login .wp-login-logo {
  padding: 20px var(--pageMarginTotal);
  display: flex;
  align-items: center;
  justify-content: center;
	width: 100%;
}

.login h1 a {
	background-image: url('/wp-content/themes/wimbledon/assets/img/primary-logo.svg');
	background-size: 100%;
	background-position: center center;
	color: #fff;
	height: 89px;
	margin: 0;
	padding: 0;
	width: 89px;
	text-indent: -9999px;
	outline: 0;
	overflow: hidden;
	display: block;
}

@media all and (max-width: 950px) {
	.login h1 a {
		width: 64px;
		height: 64px;
	}
}

.login form {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border: 0;
	box-shadow: none;
	width: 100%;
	max-width: 455px;
	display: flex;
	flex-direction: column;
	align-self: center;
	padding-bottom: 5px;
}

.login form label {
	display: none;
}

.login form input[type=email],
.login form input[type=text],
.login form input[type=password] {
	height: 40px;
	display: block;
	color: currentColor;
	width: 100%;
	padding: 11px;
	margin: 0;
	line-height: 100%;
	background: transparent;
	border: 0;
	outline: 0;
	appearance: none;
	border-bottom: 1px solid white;
	font-size: 18px;
	text-align: center;
	margin-bottom: 18px;
	font-family: "adobe-caslon-pro", serif;
	border-radius: 0;
	font-weight: 400;
}

.js.login input.password-input {
	padding-right: 11px;
}

@media all and (max-width: 950px) {
	.login form input[type=email],
	.login form input[type=text],
	.login form input[type=password] {
		text-align: left;
	}
}

.login form input[type=email]::placeholder,
.login form input[type=text]::placeholder,
.login form input[type=password]::placeholder {
	opacity: 1;
	color: white;
}

.login form input[type=email]:focus-within::placeholder,
.login form input[type=text]:focus-within::placeholder,
.login form input[type=password]:focus-within::placeholder {
	color: rgba(255,255,255, .6);
}

.login form input[type=email]:focus-within,
.login form input[type=text]:focus-within,
.login form input[type=password]:focus-within,
.login form input[type=email]:focus,
.login form input[type=text]:focus,
.login form input[type=password]:focus {
	box-shadow: none;
}

.login form input[type=submit] {
	margin-top: 18px;
	margin-bottom: 20px;
}

.wp-core-ui .button, .wp-core-ui .button-secondary {
	color: white;
}

.wp-core-ui .button-secondary:hover, .wp-core-ui .button.hover, .wp-core-ui .button:hover {
	color: rgba(255,255,255, .6);
}

.login form .forgetmenot {
	display: none;
}

.login form .button {
  font-family: "GothamWeb", sans-serif;
  font-weight: 700;
  display: block;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
	line-height: 18px;
  cursor: pointer;
  appearance: none;
  border: 0;
  outline: 0;
  transition: background-color .3s var(--easeOut);
	background-color: rgb(34, 178, 99);
  color: rgb(255,255,255);
	float: none;
	width: 100%;
}

.login form .button:hover {
	background-color: rgb(0, 102, 51);
}

@media all and (max-width: 950px) {
	.login form .button {
		padding: 16px;
	}
}

.login #nav,
.login #backtoblog {
	display: none;
}

.wordmark svg {
	width: 100%;
	height: auto;
}
.wordmark svg * {
	fill: currentColor;
}

.appear {
  opacity: 0;
  transform: translateY(10px);
  transition: transform 1.2s var(--easeInOut), opacity 1.2s var(--easeInOut);
}

.appear.has-been-seen {
	opacity: 1;
	transform: translateY(0);
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

:has(>.floral-point) {
  position: relative;
  padding-inline-start: calc(79px + var(--pageMarginTotal));
  padding-inline-end: calc(79px + var(--pageMarginTotal));
}

@media all and (max-width: 950px) {
	:has(>.floral-point) {
		padding-inline-start: 0;
		padding-inline-end: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 32px;
	}
}

.floral-point {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  pointer-events: none;
}

.floral-point.left {
	left: 55px;
}

.floral-point.right {
	right: 55px;
}

@media all and (max-width: 950px) {
	.floral-point {
		position: static;
		transform: translateY(0);
		font-size: 10px;
	}
}

.login-form {
  align-self: center;
	text-align: center;
}

.label {
	color: white;
	text-decoration: underline;
	font-family: "GothamWeb", sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
	text-transform: uppercase;
	line-height: 110%;
	letter-spacing: 0.02em;
}

.label:active, 
.label:hover {
	color: white;
	opacity: .6;
}

#login-message {
	position: fixed;
	top: 2rem;
	right: 2rem;
	background-color: rgb(15, 35, 12);
	color: rgb(255, 255, 255);
}