/*
	BEM Naming Convention (Block Element Modifier) is used for CSS class names.
	https://getbem.com/naming/

	OKLCH Color Format is used for color values.

	CSS nesting is used to group related styles together and to make the BEM naming convention more obvious.
*/
:root {
	--font-size-base: 1.25rem;
	--menu-border: 0.5px solid var(--color-primary);
	--menu-padding: 1.5rem;
}

html {
	overflow-x: clip;
}

body {
	background-color: var(--color-off-white);
	font-family: "Google Sans Flex", sans-serif;
	font-optical-sizing: auto; /* Make sure the we're using the optically aligned version of the font. */
	line-height: 1.5;
	margin: 0 auto;
	max-width: 768px;
	min-width: 320px !important;
	padding: 1rem;
	font-size: var(--font-size-base);
}

h1 {
	font-size: 1.75rem;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
}

h2 {
	font-size: 1.5rem;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
}

h3 {
	font-size: 1.25rem;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
}

h4 {
	font-size: 1rem;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
}

h5 {
	font-size: 0.75rem;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
}

h6 {
	font-size: 0.5rem;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
}

.heart svg {
	fill: var(--color-accent);
	height: 1.75rem;
	width: auto;
	vertical-align: middle;
	margin-left: -0.2rem;
	margin-right: -0.2rem;
}

header {
	display: grid;
	grid-template-areas:
	    "logo menu";
	grid-template-columns: 1fr auto;
	margin-bottom: 2rem;
	z-index: 2;

	.header__logo {
		grid-area: logo;
		height: 100%;
		justify-self: flex-start;
		align-content: center;
		padding: 0;
		margin: 0;
		z-index: 10;
		text-decoration: none;

		img {
			width: auto;
			height: clamp(1rem, 10vw, 5rem);
		}
	}
}

nav menu {
	grid-area: menu;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
	row-gap: 0.6rem;
	margin: 0;
	padding: var(--menu-padding);
	border-right: var(--menu-border);
	border-top: var(--menu-border);
	z-index: 10;
	font-size: 1rem;

	li {
		padding: 0;
		margin:0;
		list-style-type: none;
		z-index: 10;
	}
}

/* Note: these nav elements inherit a lot of their styling from header's nav element. */
footer {

	--label-top-padding: 0.3rem;

	margin-top: 4rem;
	margin-bottom: 4rem;
	display: grid;
	/* Note there is a media query down below that changes the grid template. */
	grid-template-areas:
		"logo contact"
		"love contact"
		"copyright contact";
	grid-template-columns: 1fr min-content;
	grid-template-rows: max-content auto max-content;
	column-gap: 1rem;

	menu {
		flex-flow: row wrap;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: center;
		row-gap: 0.6rem;
		column-gap: 1rem;

		li a:hover svg {
			fill: var(--color-accent);
		}
	}

	.footer__contact {
		grid-area: contact;
		align-self: stretch;

		menu {
			row-gap: 2rem;
		}

		.footer__contact--label {
			width: fit-content;
			justify-self: start;
			margin: 0 0 0.8rem 0;
			padding: var(--label-top-padding) 0.6rem;
			font-family: "Oswald", sans-serif;
			font-size: 0.8rem;
			font-weight: 600;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--color-off-white);
			background-color: var(--color-primary);
			background-image: url("/assets/images/noise.svg");
			background-repeat: repeat;

			a {
				text-decoration: none;
				color: var(--color-off-white);
			}

			&:hover {
				background-color: var(--color-accent--darker);
			}
		}

		.footer__contact--value {
			margin: 0;
			padding: 0;
		}

		/* Hovering the value link lights up its paired label. */
		.footer__contact--label:has(+ .footer__contact--value a:hover) {
			background-color: var(--color-accent--darker);
		}

		/* Contact entries claim full rows; the social icon <li>s then flow side by side. */
		.footer__contact--item {
			flex: 0 0 100%;
		}

		.footer__links {
			flex: 0 0 100%;
			display: flex;
			flex-flow: row;
			align-items: center;
			column-gap: 1rem;
			margin: -1rem 0 0 0;
			padding: 1rem 0 0 0;

			border-top: var(--menu-border);
		}

	}

	.footer__copyright {
		grid-area: copyright;
		align-self: stretch;
		margin: 0;
		padding: 0 0 var(--menu-padding) 0; /* Match Contact section's bottom padding. */
		text-align: left;
		font-size: 1rem;
		white-space: nowrap;
	}

	.footer__logo {
		grid-area: logo;
		width: clamp(6rem, 20vw, 10rem);
		height: clamp(6rem, 20vw, 10rem);
		padding-top: 1.5rem;

		img {
			width: auto;
			height: 100%;
		}
	}

	.footer__love {
		grid-area: love;
		text-transform: none;
		margin: 0;
		padding: 1rem 0 1rem 0;
		display: grid;
		align-content: center;
		text-align: left;
		align-self: stretch;
		font-size: clamp(1rem, 4.5vw, 1.3rem);

		.heart {
			padding: 0 0.2rem 0 0.2rem;
		}
	}

}

.back-to-top {
	--back-to-top-size: 3rem;

	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 20;
	display: grid;
	place-items: center;
	width: var(--back-to-top-size);
	height: var(--back-to-top-size);
	padding: 0;
	border: 1px solid color-mix(in oklch, var(--color-off-white) 42%, transparent);
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	color: var(--color-primary);
	background: color-mix(in oklch, var(--color-off-white) 28%, transparent);
	backdrop-filter: blur(8px) saturate(1.1);
	-webkit-backdrop-filter: blur(8px) saturate(1.1);
	box-shadow: 0 0.25rem 0.75rem color-mix(in oklch, var(--color-primary) 12%, transparent), inset 0 0 0.25rem color-mix(in oklch, var(--color-off-white) 22%, transparent);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;

	&.is-visible {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	&:hover,
	&:focus-visible {
		color: var(--color-accent);
		outline: none;
	}

	&:hover .back-to-top__icon,
	&:focus-visible .back-to-top__icon {
		color: var(--color-primary);
		stroke: var(--color-primary);
	}

	& .back-to-top__icon {
		position: relative;
		z-index: 1;
		width: 1.7rem;
		height: 1.7rem;
		color: var(--color-accent);
		stroke: var(--color-accent);
		stroke-width: 3.25;
		pointer-events: none;
	}

	& .back-to-top__progress {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: none;
	}
}