/* ------------------- */
/* Custom properties   */
/* ------------------- */
:root {
	/* colors */

	/* primary */

	--clr-dark-blue: 233, 26%, 24%;
	--clr-lime-green: 136, 65%, 51%;
	--clr-bright-cyan: 192, 70%, 51%;

	/* neutral */

	--clr-grayish-blue: 233, 8%, 62%;
	--clr-light-grayish-blue: 220, 16%, 96%;
	--clr-very-light-gray: 0, 0%, 98%;
	--clr-light: 0, 0%, 100%;

	/* font-sizes */
	--fs-900: 6.25rem;
	--fs-800: 3.5rem;
	--fs-700: 2.5rem;
	--fs-600: 2rem;
	--fs-500: 1.75rem;
	--fs-400: 1.125rem;
	--fs-300: 1rem;
	--fs-200: 0.875rem;
	--fs-100: 0.75rem;

	/* font weight */
	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;

	/* font-families */
	--ff-sans-normal: 'Public Sans', sans-serif;
}

@media screen and (max-width: 37.5em) {
	:root {
		--fs-800: 2.8rem;
	}
}

/* ------------------- */
/* Reset               */
/* ------------------- */

/* Box sizing */

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

/* Reset margins */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
figure,
picture {
	margin: 0;
}

/* set body defaults */

body {
	line-height: 1.5;
	min-height: 100vh;
	background-color: hsl(var(--clr-light));
	color: hsl(var(--clr-grayish-blue));
	font-family: var(--ff-sans-normal);
	font-size: var(--fs-400);
	margin: 0;
	text-rendering: optimizeSpeed;
}

/* Make images easier to work with */

img,
picture {
	max-width: 100%;
	display: block;
}

/* forms defaults */

input,
button,
textarea,
select {
	font: inherit;
}

/* specifics */
ul {
	list-style: none;
}

a {
	text-decoration: none;
}

/* ------------------- */
/* Utility classes     */
/* ------------------- */

/* general */

.grid {
	display: grid;
	gap: var(--gap, 1rem);
}

.flex {
	display: flex;
	gap: var(--gap, 1rem);
}

.block {
	display: block;
}

.container {
	max-width: 90rem;
	padding-inline: var(--pad-inline, 1em);
	margin-inline: auto;
}

.hide {
	display: hidden;
}

.pointer {
	cursor: pointer;
}

.flow > *:where(:not(:first-child)) {
	margin-top: var(--flow-space, 1rem);
}

/* colors */
.bg-accent {
	background: linear-gradient(0.25turn, hsl(var(--clr-lime-green)), hsl(var(--clr-bright-cyan)));
	transition: opacity 300ms ease-in-out;
}

.bg-accent:hover,
.bg-accent:focus {
	opacity: 0.5;
}

.bg-light-grayish-blue {
	background-color: hsl(var(--clr-light-grayish-blue));
}

.text-dark-blue {
	color: hsl(var(--clr-dark-blue));
}

/* typography */
.ff-sans {
	font-family: var(--ff-sans);
}

.fs-900 {
	font-size: var(--fs-900);
}
.fs-800 {
	font-size: var(--fs-800);
}
.fs-700 {
	font-size: var(--fs-700);
}
.fs-600 {
	font-size: var(--fs-600);
}
.fs-500 {
	font-size: var(--fs-500);
}
.fs-400 {
	font-size: var(--fs-400);
}
.fs-300 {
	font-size: var(--fs-300);
}
.fs-200 {
	font-size: var(--fs-200);
}
.fs-100 {
	font-size: var(--fs-100);
}

.fw-300 {
	font-weight: 300;
}
.fw-400 {
	font-weight: 400;
}
.fw-700 {
	font-weight: 700;
}

.letter-spacing-1 {
	letter-spacing: 4.75px;
}
.letter-spacing-2 {
	letter-spacing: 2.7px;
}
.letter-spacing-3 {
	letter-spacing: 2.35px;
}

.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.capitalize {
	text-transform: capitalize;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; /* added line */
	border: 0;
}

.fade-in {
	transition: opacity 250ms ease-in;
	opacity: 0;
}

.fade-in.appear {
	opacity: 1;
}

.from-left,
.from-back {
	transition: transform 400ms ease-in, opacity 250ms ease-in;
}

.from-left {
	transform: translateX(-100%);
	transition-delay: 1s;
	opacity: 0;
}

.from-left.appear {
	transform: translateX(0);
	opacity: 1;
}

.from-back {
	visibility: hidden;
}

.from-back.appear {
	animation: zoomin 1s linear 2s 1 forwards;
}

@keyframes zoomin {
	0% {
		transform: scale(0.5);
		visibility: visible;
	}
	100% {
		transform: scale(1);
		visibility: visible;
	}
}

/* ----------- */
/* Components  */
/* ------------*/

.header {
	--background: hsl(var(--clr-light));

	position: sticky;
	inset: 0;
	z-index: 9;
	height: 4em;
	background-color: var(--background);
	transition: background 250ms ease-in;
	box-shadow: 1px -1px 35px -5px rgba(0, 0, 0, 0.75);
}

.nav-scrolled {
	--background: hsl(var(--clr-light-grayish-blue));
}

.brand-plus {
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.nav-toggle {
	display: none;
}

.primary-nav > * > a {
	color: hsl(var(--clr-grayish-blue));
}

.cta {
	border-radius: 1.5em;
	padding-block: 0.7em;
	padding-inline: 2em;
	width: max-content;
}

.cta a {
	color: hsl(var(--clr-light));
}

.grid-container {
	--gap: 2rem;
	place-items: center;
	justify-items: flex-start;
	overflow: hidden;
}

.latest-container > * {
	box-shadow: 0 0 35px -10px rgba(0, 0, 0, 0.75);
	border-radius: 0.3em;
}

.latest-container > * > img {
	aspect-ratio: 2 / 1.5;
	object-fit: cover;
	object-position: center;
	width: 100%;
}
.article h4:hover,
.article h4:focus {
	color: hsl(var(--clr-lime-green));
}

footer {
	background: hsl(var(--clr-dark-blue));
	padding-block: 2em;
	--flow-space: 3rem;
}

.footer {
	/* flex-direction: column; */
	align-items: center;
	/* justify-content: space-between; */
}

.footer .brand > svg > g > path {
	fill: hsl(var(--clr-light));
}

.bottom-nav > * > a {
	color: hsl(var(--clr-light));
}

.footer > div > *:first-child {
	flex-direction: column;
}

.footer > *:last-child {
	flex-direction: column;
	align-items: flex-end;
}

.socials {
	padding: 0;
}

.bottom-nav {
	padding: 0;
}

@media screen and (min-width: 37.5em) {
	.primary-nav {
		--gap: 2rem;
		padding: 0;
		position: relative;
	}

	.primary-nav > * > a {
		position: relative;
		display: grid;
		align-items: center;
	}

	.primary-nav > * > a:hover,
	.primary-nav > * > a:focus {
		color: hsl(var(--clr-dark-blue));
	}

	.primary-nav > * > a:hover::after,
	.primary-nav > * > a:focus::after {
		content: '';
		position: absolute;
		width: 100%;
		border-bottom: 3px solid hsl(var(--clr-lime-green));
		padding-bottom: 3.5em;
	}

	.grid-container {
		grid-template-columns: 1fr repeat(2, minmax(0, 40rem)) 1fr;
		background: url(./images/bg-intro-desktop.svg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: right -35em top -20em;
	}
	.grid-container > *:first-child {
		max-width: 550px;
		grid-column: 2;
		padding-block: 5em;
		align-self: flex-start;
		margin-bottom: 5em;
		/* animation: moveright 1s linear 1s 1 forwards; */
		/* visibility: hidden; */
	}

	.grid-container > *:nth-child(2) {
		grid-column: 3;
	}

	.grid-container > *:nth-child(2) > img {
		width: 100%;
		object-position: center;
		object-fit: cover;
		margin-top: -6em;
		/* margin-left: 5em; */
	}

	.why {
		margin-top: -8em;
		padding-block: 6em;
		padding-inline: 6em;
		--flow-space: 4rem;
	}

	.why > *:first-child {
	}

	.benefits {
		grid-template-columns: repeat(4, 1fr);
		--gap: 2rem;
		--pad-inline: 1em;
	}
	.benefits > * {
		flex-direction: column;
		align-items: flex-start;
	}

	.latest {
		padding-block: 5em;
		padding-inline: 6em;
		--flow-space: 3rem;
	}

	.latest-container {
		grid-template-columns: repeat(4, 1fr);
		place-items: center;
		--gap: 1.5rem;
	}

	.article {
		--flow-space: 0.5rem;
		padding-block: 2em;
		padding-inline: 1.5em;
	}

	footer {
		padding-inline: 6em;
	}

	.footer {
		justify-content: space-between;
		height: 5em;
	}

	.footer > *:first-child {
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
		height: 100%;
	}

	.footer > *:nth-child(2) {
		flex: 2;
	}

	.footer > *:last-child {
		flex-direction: column;
		align-items: flex-end;
		flex: 1;
	}

	.bottom-nav {
		flex-wrap: wrap;
		flex-direction: column;
		max-height: 8em;
		align-items: flex-start;
		width: 60%;
	}

	.bottom-nav > * > a:hover,
	.bottom-nav > * > a:focus {
		color: hsl(var(--clr-lime-green));
	}

	.socials path:hover,
	.socials path:focus {
		fill: hsl(var(--clr-lime-green));
	}
}

@media screen and (max-width: 64em) {
	.brand-plus {
		--pad-inline: 0.5em;
	}
	.primary-nav {
		--gap: 0.5rem;
	}
	.cta {
		padding-block: 0.3em;
		padding-inline: 0.5em;
	}
	.why {
		padding-block: 4em;
		padding-inline: 2em;
	}

	.benefits {
		grid-template-columns: repeat(2, 1fr);
	}
	.latest {
		padding-block: 4em;
		padding-inline: 2em;
	}
	.latest-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 37.5em) {
	.cover[data-cover='true'] {
		z-index: 1;
		height: 100vh;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100vw;
		transition: transform 600ms ease-in-out;
	}

	.brand-plus {
		position: relative;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.nav-toggle {
		display: block;
		position: absolute;
		right: 3%;
		background: transparent;
		background-image: url(./images/icon-hamburger.svg);
		background-repeat: no-repeat;
		aspect-ratio: 1;
		width: 1.5rem;
		border: 0;
		z-index: 99;
		transition: background-image 500ms ease-in-out;
	}

	.nav-toggle[aria-expanded='true'] {
		background-image: url(./images/icon-close.svg);
	}

	.primary-nav {
		position: fixed;
		inset: 10% 10% 0 10%;
		background: hsl(var(--clr-light));
		flex-direction: column;
		height: 35%;
		z-index: 999;
		padding: 0;
		padding-block: 1em;
		justify-content: space-around;
		align-items: center;
		opacity: 0;
		transition: opacity 400ms ease-in-out;
		--flow-space: 0.5rem;
		box-shadow: 1px 50px 200px 60px rgba(0, 0, 0, 0.75);
		border-radius: 0.2em;
	}

	.primary-nav[data-open='true'] {
		opacity: 1;
	}

	.primary-nav > * > a {
		color: hsl(var(--clr-dark-blue));
	}

	.header .cta {
		display: none;
	}

	.grid-container {
		/* padding-block: 4em; */
	}

	.grid-container > *:first-child {
		padding-inline: 1.5em;
		text-align: center;
		display: grid;
		justify-items: center;
		padding-bottom: 3em;
	}
	.grid-container > *:nth-child(2) {
		background: url(./images/bg-intro-mobile.svg);
		background-repeat: no-repeat;
		background-size: cover;
		order: -1;
	}
	.grid-container > *:nth-child(2) > img {
		margin-top: -6em;
		/* margin-left: 5em; */
	}

	.why {
		text-align: center;
		padding-block: 4em;
		padding-inline: 1.5em;
		--flow-space: 4rem;
	}

	.benefits {
		grid-template-columns: 1fr;
		--gap: 2rem;
	}

	.benefits > * {
		flex-direction: column;
		align-items: center;
	}

	.benefits > * > img {
		width: 4em;
	}

	.latest {
		padding-inline: 1em;
		padding-block: 5em;
		--flow-space: 2rem;
	}

	.latest > h2 {
		text-align: center;
	}

	.latest > *:first-child {
		text-align: center;
	}

	.latest-container {
		grid-template-columns: 1fr;
		--pad-inline: 0;
	}

	.article {
		--flow-space: 0.5rem;
		padding-block: 2em;
		padding-inline: 1.8em;
	}

	footer {
		padding-block: 2em;
		background: hsl(var(--clr-dark-blue));
	}

	.footer {
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		--pad-inline: 0;
	}

	.footer > *:first-child {
		flex-direction: column;
	}

	.footer > :last-child {
		align-items: center;
	}

	.bottom-nav {
		flex-direction: column;
		align-items: center;
	}
}