@import './styles/tokens.css';
@import './styles/base.css';
@import './styles/icons.css';

body {
	display: flex;
	flex-direction: column;

	margin: auto;

	> * {
		padding: 1em;
	}
}

h1 {
	text-align: center;
	font-size: 300%;

	> strong {
		display: block;
		font-size: 135%;
		font-weight: 900;
		margin-block: 0.15em;
		letter-spacing: -0.01em;
	}

	> small {
		display: block;
		font-size: 60%;
		line-height: 1.2;
		font-weight: 500;
	}
}

body > header,
body > footer {
	padding-inline: clamp(1em, 50vw - 40em, 20em);
}

body > header {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5em 3em;

	@media (width < 42em) {
		justify-content: center;
	}

	.logo {
		font-weight: bold;
		width: 20em;
	}

	> nav {
		display: flex;
		gap: 1em;
	}
}

main {
	flex: 1;
	max-width: 80em;
	margin-inline: auto;
}

main > section {
	padding-block: 2em;

	@media (width > 60em) {
		padding-block: 1em;
		min-height: 70vh;
	}
}

.label {
	display: inline-block;
	vertical-align: .1em;
	padding-block: .2em;
	padding-inline: .45em .4em;
	width: fit-content;
	margin-inline-end: 0.2em;
	border-radius: 0.1em;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-kerning: normal;
	font-size: 70%;
	letter-spacing: 0.05em;
	background: canvasText;
	color: canvas;
	text-shadow: none;
}

#problem {
	color-scheme: dark;
	display: flex;
	flex-flow: column;
	justify-content: end;
	align-items: start;
	background: #4d493f url(images/child-lost.png) 100% 80% / 100% auto no-repeat;
	color: white;
	text-shadow: 0 .1em .3em hsl(0 0% 0% / 0.3);



	h1 {
		text-align: left;
		max-width: 42rem;
		padding: .5em 1.5em;
		background: rgb(0 0 0 / .8);
	}

	@media (aspect-ratio < .8) {
		justify-content: start;
	}
}

#fact {
	display: flex;
	flex-flow: column-reverse;
	align-items: end;

	h1 {
		padding-bottom: 1.5em;
		text-align: center;

		.label {
			display: block;
			margin-inline: auto;
		}
	}

	@media (min-width: 70em) {
		flex-flow: row-reverse;

		h1 {
			text-align: end;

			.label {
				display: block;
				margin-inline-end: 0;
			}
		}

		img {
			max-width: 50em;
		}
	}
}

#solution {
	> h1 {
		.label {
			background: var(--color-green);
		}
	}
	> ul {
		display: grid;
		gap: 1em;
		padding: 0 1em;

		@media (min-width: 60em) {
			grid-template-columns: repeat(2, 1fr);
		}

		> li {
			flex: 1 calc(50% - 2em);
			list-style: '✅';
			padding-inline-start: .5em;

			> strong {
				display: block;
				font-size: 135%;
			}

			> small {
				display: block;
				font-size: 100%;
			}
		}
	}
}

ol.steps {
	display: flex;
	flex-direction: column;
	gap: 1em;
	list-style: none;
	padding-inline-start: 4em;

	> li {
		position: relative;

		&::before {
			content: counter(list-item);
			position: absolute;
			inset-inline-end: calc(100% + .5em);
			inset-block-start: -.25em;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 150%;
			font-weight: 900;
			width: 2em;
			line-height: 2;
			background: var(--color-green);
			color: canvas;
			border-radius: 50%;
		}
	}
}

#how-it-works {
	.steps li > strong {
		display: block;
		font-size: 150%;
		font-weight: 900;
		color: var(--color-green);
	}
}