/* GK Hair mark on the login / sign-up / forgot-password card.

   Same masked asset as the desk splash, so the two never drift apart, and the
   colour comes from CSS rather than the file. Frappe caps this logo at 32px,
   which is why signing in used to show a small mark and then a large one on
   the desk.

   Drawn on `.page-card-head::before` rather than on the <img> itself: masking a
   replaced element still paints its own pixels on top. The <img> is hidden and
   the pseudo-element carries the mark.

   Scoped to `.page-card` so the app logo in the website navbar is untouched,
   and because login.bundle.css loads after this file - the extra class is what
   wins the 32px clamp. */

.page-card .page-card-head img.app-logo {
	display: none;
}

.page-card .page-card-head::before {
	content: "";

	/* the card is 371px wide at most and shrinks with the screen, so a
	   percentage is already responsive; the bounds stop it going tiny or
	   filling the card edge to edge */
	width: clamp(140px, 62%, 230px);
	aspect-ratio: 1200 / 628;
	background-color: #000;

	-webkit-mask-image: url("/assets/gkhair_custumization/images/gk-hair-logo.png");
	mask-image: url("/assets/gkhair_custumization/images/gk-hair-logo.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* The website side ships no dark theme, so the mark stays black there. This
   only takes effect if a dark website theme is ever switched on - deliberately
   not keyed off prefers-color-scheme, which would turn the mark white on a
   page that is still light. */
[data-theme="dark"] .page-card .page-card-head::before {
	background-color: #fff;
}

/* Without mask support the pseudo-element would be a solid block, so keep
   Frappe's own <img> instead. */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
	.page-card .page-card-head img.app-logo {
		display: block;
	}

	.page-card .page-card-head::before {
		display: none;
	}
}