/*
 * QualifAI sign-in pages (docs/marca/README.md). Brand colors and font of the app (frontend/src/styles/tokens.css),
 * applied over Keycloak's keycloak.v2 theme (PatternFly 5). The sign-in page is the introduction beside the form;
 * on a phone the introduction shrinks to the brand and the headline, so the fields still show without scrolling.
 */
@font-face {
	font-family: "Public Sans";
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Public Sans";
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/public-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Public Sans";
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Public Sans";
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Public Sans";
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/public-sans-latin-800-normal.woff2") format("woff2");
}

:root {
	--qf-brand: #0e7490;
	--qf-brand-hover: #0b5d73;
	--qf-brand-light: #5cc8e0;
	--qf-text: #14181f;
	--qf-text-secondary: #5b6472;
	--qf-bg: #f6f7f9;
	--qf-border: #e1e4ea;
	--qf-ocean-deep: #062a35;
	--qf-ocean-night: #03141a;

	--pf-v5-global--FontFamily--text: "Public Sans", system-ui, -apple-system, sans-serif;
	--pf-v5-global--FontFamily--heading: "Public Sans", system-ui, -apple-system, sans-serif;
	--pf-v5-global--primary-color--100: var(--qf-brand);
	--pf-v5-global--primary-color--200: var(--qf-brand-hover);
	--pf-v5-global--link--Color: var(--qf-brand);
	--pf-v5-global--link--Color--hover: var(--qf-brand-hover);
	--pf-v5-global--active-color--100: var(--qf-brand);
	--pf-v5-global--BorderRadius--sm: 6px;
}

.login-pf body.qf-body {
	background: var(--qf-bg);
	color: var(--qf-text);
	font-family: var(--pf-v5-global--FontFamily--text);
	min-height: 100vh;
	min-height: 100dvh;
}

/* Layout: the form card centered (every page), or the introduction beside it (sign-in page). */
.qf-page {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
}

.qf-page--intro {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(400px, 0.8fr);
}

.qf-auth {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 32px 24px;
}

/* The brand above the card (pages without the introduction). */
.qf-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.qf-wordmark {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--qf-text);
	line-height: 1;
}

.qf-wordmark span {
	color: var(--qf-brand);
}

.qf-wordmark--light {
	color: #fff;
}

.qf-wordmark--light span {
	color: var(--qf-brand-light);
}

/* The form card. */
.pf-v5-c-login__main.qf-card {
	width: 100%;
	max-width: 420px;
	margin: 0;
	align-self: center;
	padding-bottom: 24px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--qf-border);
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 12px 32px rgba(20, 24, 31, 0.08);
	grid-area: auto;
}

.qf-card .pf-v5-c-login__main-header {
	border-top: none;
	padding: 32px 32px 8px;
	align-items: center;
}

.qf-card .pf-v5-c-login__main-body,
.qf-card .pf-v5-c-login__main-footer {
	padding-inline: 32px;
}

.qf-card .pf-v5-c-title {
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: 1.6rem;
}

.qf-card .pf-v5-c-button.pf-m-primary {
	border-radius: 8px;
	font-weight: 600;
	padding-block: 10px;
}

/* Wide screens: the language choice leaves the card for the page's top right corner. */
@media (min-width: 901px) {
	.qf-auth {
		position: relative;
	}

	.pf-v5-c-login__main.qf-card {
		position: static;
	}

	.qf-card .pf-v5-c-login__main-header {
		display: block;
	}

	.qf-card .pf-v5-c-login__main-header-utilities {
		position: absolute;
		top: 20px;
		right: 24px;
		width: 200px;
	}
}

/* The introduction: deep ocean, large type, few words. */
.qf-intro {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 48px clamp(32px, 6vw, 96px);
	color: #fff;
	background:
		radial-gradient(1100px 700px at 0% 0%, rgba(14, 116, 144, 0.75), transparent 60%),
		radial-gradient(800px 600px at 100% 100%, rgba(92, 200, 224, 0.22), transparent 60%),
		linear-gradient(160deg, var(--qf-ocean-deep), var(--qf-ocean-night));
}

/* The mark, large and faint, as the background's only figure. */
.qf-intro::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -18%;
	width: 62%;
	aspect-ratio: 1;
	background: url("../img/qualifai-simbolo-branco.svg") no-repeat center / contain;
	opacity: 0.05;
	pointer-events: none;
}

.qf-intro__inner {
	position: relative;
	z-index: 1;
	max-width: 620px;
}

.qf-intro__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(28px, 6vh, 56px);
}

.qf-intro__title {
	margin: 0 0 20px;
	font-size: clamp(2.2rem, 3.8vw, 3.6rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: #fff;
	text-wrap: balance;
}

.qf-intro__lead {
	margin: 0 0 clamp(28px, 5vh, 48px);
	font-size: clamp(1.05rem, 1.3vw, 1.25rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	max-width: 34em;
}

.qf-intro__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.qf-intro__points li {
	display: grid;
	gap: 2px;
	padding-left: 16px;
	border-left: 2px solid var(--qf-brand-light);
}

.qf-intro__points strong {
	font-weight: 600;
	color: #fff;
}

.qf-intro__points span {
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.95rem;
}

/* A short entrance of the introduction, one element after the other (the form is there at once); none for who asks
 * for less motion. */
@keyframes qf-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.qf-intro__brand,
.qf-intro__title,
.qf-intro__lead,
.qf-intro__points li {
	animation: qf-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.qf-intro__title {
	animation-delay: 0.08s;
}

.qf-intro__lead {
	animation-delay: 0.16s;
}

.qf-intro__points li:nth-child(1) {
	animation-delay: 0.24s;
}

.qf-intro__points li:nth-child(2) {
	animation-delay: 0.3s;
}

.qf-intro__points li:nth-child(3) {
	animation-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
	.qf-intro__brand,
	.qf-intro__title,
	.qf-intro__lead,
	.qf-intro__points li {
		animation: none;
	}
}

/* Short screens (small laptops): the points go first, then the lead. */
@media (max-height: 700px) and (min-width: 901px) {
	.qf-intro__points {
		display: none;
	}
}

@media (max-height: 540px) and (min-width: 901px) {
	.qf-intro__lead {
		display: none;
	}
}

/* Tablets and phones: the introduction becomes a band with the brand and the headline above the form. */
@media (max-width: 900px) {
	.qf-page--intro {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.qf-intro {
		padding: 24px 20px 28px;
	}

	.qf-intro::after {
		width: 220px;
		right: -60px;
		bottom: -80px;
	}

	.qf-intro__brand {
		margin-bottom: 14px;
	}

	.qf-intro__mark {
		width: 32px;
		height: 32px;
	}

	.qf-intro .qf-wordmark {
		font-size: 20px;
	}

	.qf-intro__title {
		margin: 0;
		font-size: clamp(1.35rem, 5.4vw, 1.9rem);
	}

	.qf-intro__lead,
	.qf-intro__points {
		display: none;
	}

	.qf-auth {
		justify-content: flex-start;
		padding: 20px 16px 24px;
	}

	.qf-card .pf-v5-c-login__main-header {
		display: block;
	}

	.qf-card .pf-v5-c-login__main-header-utilities {
		margin-top: 12px;
	}
	.qf-card .pf-v5-c-login__main-header {
		padding: 24px 20px 8px;
	}

	.qf-card .pf-v5-c-login__main-body,
	.qf-card .pf-v5-c-login__main-footer {
		padding-inline: 20px;
	}
}

/* Tablets: room for the lead under the headline. */
@media (min-width: 600px) and (max-width: 900px) {
	.qf-intro {
		padding: 40px 48px 44px;
	}

	.qf-intro__title {
		font-size: 2.4rem;
	}

	.qf-intro__lead {
		display: block;
		margin: 16px 0 0;
		font-size: 1.1rem;
	}

	.qf-auth {
		padding-top: 40px;
	}

}