/* Bluehost Site Migrator - admin page. This file loads on the plugin's own page only. */

/* The fonts ship with the plugin (SIL Open Font License, see assets/fonts). Latin characters only. */
@font-face {
	font-family: "BHSM Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url(../fonts/montserrat-400.woff2) format("woff2");
}

@font-face {
	font-family: "BHSM Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: block;
	src: url(../fonts/montserrat-600.woff2) format("woff2");
}

@font-face {
	font-family: "BHSM Source Serif";
	font-style: normal;
	font-weight: 700;
	font-display: block;
	src: url(../fonts/source-serif-pro-700.woff2) format("woff2");
}

/* One background colour for the whole page. */
html,
body,
#wpcontent,
#wpfooter {
	background: #e9f5ff;
}

.bhsm-panel {
	max-width: 560px;
	margin: 40px auto 0;
	padding: 24px 16px 0;
	color: #03243b;
	font-family: "BHSM Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
}

/* On a wide screen the content sits lower, so it does not hug the top of an empty page. */
@media screen and (min-width: 783px) {
	.bhsm-panel {
		margin-top: 9vh;
	}
}

/* The pointer on the current menu item takes the page colour. */
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
	border-right-color: #e9f5ff;
}

.bhsm-title {
	margin: 0 0 12px;
	font-family: "BHSM Source Serif", Georgia, "Times New Roman", serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: #03243b;
}

.bhsm-lead {
	max-width: 420px;
	margin: 0 auto 24px;
	font-size: 16px;
	line-height: 1.5;
}

.bhsm-button,
.bhsm-button:visited {
	display: inline-block;
	padding: 14px 28px;
	border: 0;
	border-radius: 6px;
	background: #0d6efd;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.bhsm-button:hover,
.bhsm-button:focus {
	background: #0b5ed7;
	color: #fff;
}

.bhsm-button:focus {
	outline: 2px solid #03243b;
	outline-offset: 2px;
	box-shadow: none;
}

/* No focus ring after a mouse click. Keyboard focus keeps it. */
.bhsm-button:focus:not(:focus-visible) {
	outline: 0;
}

/* Second choice: a plain link below the main button. */
.bhsm-second {
	max-width: 400px;
	margin: 24px auto 0;
	font-size: 14px;
	line-height: 1.5;
}

.bhsm-second a {
	color: #03243b;
}

.bhsm-button:disabled {
	cursor: default;
}

/*
 * Progress. The animated Bluehost mark takes the place of the button while the checks run, with
 * one line of text below it. The text changes as the checks run.
 */
/* A box of fixed height. The button, then the mark and its text, sit in the middle of it. */
.bhsm-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	margin: 0 0 8px;
	overflow: hidden;
}

.bhsm-action {
	margin: 0;
}

.bhsm-progress {
	display: none;
}

.bhsm-checking .bhsm-progress {
	display: block;
	animation: bhsm-in 0.25s ease-out;
}

.bhsm-checking .bhsm-start .bhsm-action {
	display: none;
}

.bhsm-progress img {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 10px;
	pointer-events: none;
}

.bhsm-progress ul {
	min-height: 22px;
	margin: 0;
}

.bhsm-progress li {
	display: none;
	margin: 0;
	font-size: 15px;
	line-height: 22px;
}

.bhsm-progress li.is-active {
	display: block;
	animation: bhsm-in 0.25s ease-out;
}

/* Without the script, the result shows at once. With it, the button comes first. */
.bhsm-start,
.bhsm-optin {
	display: none;
}

.bhsm-js .bhsm-start,
.bhsm-js .bhsm-optin {
	display: block;
}

.bhsm-js .bhsm-result,
.bhsm-js .bhsm-done .bhsm-start {
	display: none;
}

.bhsm-js .bhsm-done .bhsm-result {
	display: block;
	animation: bhsm-in 0.3s ease-out;
}

.bhsm-result:focus {
	outline: 0;
}

@keyframes bhsm-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.bhsm-optin {
	max-width: 380px;
	margin: 16px auto 0;
	font-size: 13px;
	line-height: 1.5;
	color: #3c5468;
	text-align: left;
}

.bhsm-optin label {
	display: flex;
	align-items: flex-start;
}

.bhsm-wrap .bhsm-optin label input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	min-width: 16px;
	height: 16px;
	margin: 1px 8px 0 0;
}

/* WordPress makes a checkbox and its tick larger on a small screen. Keep them the size of the text. */
.bhsm-wrap .bhsm-optin label input[type="checkbox"]:checked:before {
	width: 21px;
	height: 21px;
	margin: -3px 0 0 -4px;
}

.bhsm-art {
	position: relative;
	width: 200px;
	max-width: 60%;
	margin: 32px auto 0;
	perspective: 900px;
}

/* The pictures are decoration. A press or a drag does nothing, and a phone shows no "save image" menu. */
.bhsm-art img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* When the check has run on this site before, the result shows at once, with no flip. */
.bhsm-js .bhsm-seen .bhsm-result {
	display: block;
}

.bhsm-js .bhsm-seen .bhsm-art .bhsm-art__result {
	position: static;
	visibility: visible;
}

/* Without the script, only the result picture shows. */
.bhsm-art__start {
	display: none;
}

/* With it, the first picture stays until the checks finish. The result picture waits behind it. */
.bhsm-js .bhsm-art .bhsm-art__start {
	display: block;
}

.bhsm-js .bhsm-art .bhsm-art__result {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}

/*
 * The flip. The first picture turns until it is edge-on, then the result picture turns the rest of
 * the way, like a card that has a different picture on its back.
 */
.bhsm-js .bhsm-done .bhsm-art__start {
	animation: bhsm-flip-out 0.3s ease-in forwards;
}

.bhsm-js .bhsm-done .bhsm-art__result {
	visibility: visible;
	animation: bhsm-flip-in 0.3s ease-out 0.3s backwards;
}

@keyframes bhsm-flip-out {
	to {
		transform: rotateY(90deg);
	}
}

@keyframes bhsm-flip-in {
	from {
		transform: rotateY(-90deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bhsm-checking .bhsm-progress,
	.bhsm-progress li.is-active,
	.bhsm-js .bhsm-done .bhsm-result,
	.bhsm-js .bhsm-done .bhsm-art__result {
		animation: none;
	}

	.bhsm-js .bhsm-done .bhsm-art__start {
		animation: none;
		visibility: hidden;
	}
}

/*
 * Footer: the terms and privacy links, at the bottom of the screen. The panel is at least as tall
 * as the space below the toolbar, and the footer takes the last line of it. On a short screen the
 * footer follows the content, so it never covers anything.
 */
.bhsm-wrap {
	margin-bottom: 0;
}

.bhsm-panel {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: calc(100vh - 32px - 40px - 75px);
}

@media screen and (min-width: 783px) {
	.bhsm-panel {
		min-height: calc(100vh - 32px - 9vh - 75px);
	}
}

@media screen and (max-width: 782px) {
	.bhsm-panel {
		min-height: calc(100vh - 46px - 40px - 130px);
	}
}

.bhsm-footer {
	margin: auto 0 0;
	padding: 32px 0 8px;
}

.bhsm-footer,
.bhsm-footer a {
	color: #505e78;
	font-size: 12px;
}