@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fascinate+Inline&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mea+Culpa&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Shippori+Mincho+B1&display=swap');

/* ---------------- CSS Variables ---------------- */
:root {
	/* ----- Colors ----- */
	--color-background: #F0F0F0;
	--color-text: #000000;
	
	/* ----- Fonts ----- */
	--font-header: "Google Sans", sans-serif;
	--font-manuscript: "Roboto Serif", serif;
	--font-spread: "Fascinate Inline", sans-serif;
	--font-binding: "DM Sans", sans-serif;
	/* --font-links: ; */
	/* --font-functions: ; */
	--font-p: "Google Sans", sans-serif;

	/* --font-size-h1: 10rem;
	--line-height-h1: 1em; */

	--font-size-h2: 5rem;
	--line-height-h2: 1em;
	--letter-spacing-h2: .03em;

	--font-size-p: 1em;
	--line-height-p: 1.5em;

	--font-size-footer: 1rem;
	--line-height-footer: 1.5em;

	/* ----- Spacing ----- */
	--padding-xs: .5rem;
	--padding-small: 1rem;
	--padding-medium: 2rem;
	--padding-large: 3rem;
	--padding-xl: 6rem;
	--gap: 2rem;

	/* ----- Media Queries ----- */
	@media (width < 1270px) {
		--font-size-h2: 4rem;
	}

	/* ----- Etc. ----- */
	scroll-behavior: smooth;
}

/* ---------------- Body ---------------- */
body {
	background-color: var(--color-background);
	color: var(--text-color);
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--padding-xl);
	padding-block: var(--padding-medium);
	padding-inline: var(--padding-xl);

	@media (width < 1270px) {
		padding-inline: var(--padding-large);
	}
}

/* ---------------- Typography ---------------- */



/* ---------------- Underline Animation Hover Effect ---------------- */
/* I wanted to animate the underline hover effect to come in from the left on hover then when released to go back from left to right.  */
/* I referenced this: https://webdesign.tutsplus.com/css-hover-effects-for-inline-links--cms-37210t with the "Hover Effect 3: Passing Underline" to get the desired underline hover effect.  */
/* Using the psuedo-element ::after on the link, I'm specifying that before any hover, the line exists at width: 100% at the bottom left corner with a height of .1rem, but the scaleX(0) squishes it to 0% width making it essentially invisible. Then on :hover scaleX(1) expands the width out to 100%, expanding from left to right anchored by the transform-origin, which switches and disappears into the left ::after the hover state with the scale(0) back to 0.  */
header a,
footer a {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-end: 0;
		inline-size: 100%;
		block-size: .1rem;
		background-color: var(--color-text);
		transition: transform 0.3s ease;
		transform: scaleX(0);
		transform-origin: right;
	}

	&:hover::after {
		transform: scaleX(1);
		transform-origin: left;
	}
}



/* ---------------- Nav Bar ---------------- */
header > nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	& > a {
		font-family: var(--font-p);
		font-size: var(--font-size-p);
		line-height: var(--line-height-footer);
		text-wrap: balance;
		text-transform: uppercase;

		& > svg {
			width: 40px;
			height: 40px;
		}
	}
}

/* I just pulled this from my last binding project for now to remember to update and test this later.  */
/* Tested with VoiceOver to ensure the SVG home logo reads as Home on a screenreader */
.screen-reader {
	font-size: var(--font-size-p);
	font-weight: 500;
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-inline-style: 0;
} 


/* ---------------- Main ---------------- */
main > ol {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: repeat(5, auto);
	gap: var(--padding-xs);

	/* I wanted to change the list-style markers to mimic "/0#", so I did ul li at first and manually wrote the numbers into the h2 of the li and wrapped them in spans to target and style them while still being nested in the h2s but then I wanted to keep the semantic structure of an ol, as these links are in a specific progression throughout the year, so I had to look up how to specifically target these list markers. */
	/* In combo with this: https://css-tricks.com/almanac/properties/c/counter-increment/ and https://css-tricks.com/almanac/properties/c/counter-reset/ I learned how to use counters to incorporate a decimal-leading-zero and the /. */
	/* From my understanding, the counter-reset: item creates a counter called item and sets it to 0 at the start of the ol. Then with counter-increment, anytime there's a new li, the counter goes up by 1. The ::before pseudonym for h2 as we've previously learned inserts content before h2 to the content I specified which is the text "/0" + the counter(item) we established earlier.  */
	counter-reset: item;
	
	/* I wanted the other h2s to lower in opacity when hovering over the selected h2 to increase the affordance and make the hover state more obvious. */
	/* I referenced this website example: https://www.30secondsofcode.org/css/s/sibling-fade/#:~:text=CSS%20%2D%20Fade%20out%20siblings%20on,)%20%7B%20opacity:%200.5;%20%7D to figure out how to select and style a not hover item. */
	/* :has(a:hover) selects any link that's being hovered in ol. li:not(:has(a:hover)) selects list items that do not have a hovered link inside them, or all the other links not being hovered. Then h2 a targets the actual link inside the non-hovered items, which I then set the opacity to .3. */
	&:has(a:hover) li:not(:has(a:hover)) h2 a {
		opacity: 0.3;
	}

	& > li {
		counter-increment: item;
		text-align: start;

		& > h2 {
			font-size: var(--font-size-h2);
			line-height: var(--line-height-h2);
			font-family: var(--font-header);
			font-weight: 500;
			text-transform: uppercase;
			position: relative;


			&::before {
				content: "/0" counter(item);
				font-size: 0.9rem;
				font-weight: 400;
				letter-spacing: normal;
				vertical-align: top;
				line-height: 2rem;
				padding-inline-end: var(--padding-medium);

				@media (width < 1270px) {
					padding-inline-end: var(--padding-small);
				}
			}

			& > a {
				display: inline-block;
			}

			/* ---------------- iframe Website Preview ---------------- */
			/* I remembered Lucy using iframe on our last binding site to show a window preview of a linked site, and I wanted to similarly show an iframe preview of the linked site on hover. */
			/* I referenced https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe to understand the basic functionality and then in combination with this forum https://stackoverflow.com/questions/23251569/preview-page-on-link-hover so I knew which css elements needed styling.   */
			/* I wrapped the iframe in a div so it could be easier to style the borders, box-shadow, the border-radius, etc. as well as to keep the position aboslute for the container and static for the actual iframe preview. I set the iframe's necessary width and height. I temporarily have all the previews located 100% block-end, but I'd want each one to appear at a different location on my next round of edits.  */
			& > .preview {
				position: absolute;
				inset-block-start: 100%;
				inset-inline-start: 0;
				width: 400px;
				height: 270px;
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				/* transform: translateY(10px); */
				transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
				z-index: 100;
				/* border: .5px solid var(--color-text); */
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
				background-color: white;
				/* border-radius: 25px; */
				overflow: hidden;

				& > iframe {
					width: 100%;
					height: 100%;
					border: none;
					pointer-events: none;
				}
			}

			&:hover > .preview {
				opacity: 1;
				visibility: visible;
				/* transform: translateY(0); */
			}
		}

		&:nth-child(1) {
			grid-column: 3 / 11;
			grid-row: 1;
			
			h2 > a:hover {
				font-family: var(--font-manuscript);	
				font-weight: 800;
				transform: scaleY(1.6);
			}
		}

		&:nth-child(2) {
			grid-column: 8 / 12;
			grid-row: 2;

			h2 > a:hover {
				font-family: var(--font-spread);	
			}
		}

		&:nth-child(3) {
			grid-column: 5 / 12;
			grid-row: 3;
			
			h2 > a:hover {
				font-family: var(--font-binding);	
			}
		}

		&:nth-child(4) {
			grid-column: 3 / 12;
			grid-row: 4;
		}

		&:nth-child(5) {
			grid-column: 6 / 12;
			grid-row: 5;
		}
	}
}

/* ---------------- Footer ---------------- */
footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	font-family: var(--font-p);
	font-size: var(--font-size-footer);
	line-height: var(--line-height-footer);
	text-wrap: balance;

	& > p {
		flex-basis: 30%;
		text-align: start;

		& > a {
			display: inline-block;
		}
	}

	& > ul {
		display: flex;
		flex-direction: row;
		gap: var(--gap);

		& > li > a {
			text-transform: uppercase;
			display: inline-block;
		}
	}
}



/* QUESTIONS TO ADDRESS LATER:
- So much is dependent on the hover state, what about mobile? How will that look? */
/* - Make more responsive */
/* - Add color of the h2s? */
/* - figure out how to style/what else to put in nav bar */
/* - consolidate styling once finalized (a links in footer hover state, p typography with nav + footer, nth-child a h2) */