/*
 * Author: Caleb Bronn
 * Last Update: 6 Apr 2025

 * This page contains styling that applies to every page across the website.
 */

@import url("./reset.css");
@import url("./nav.css");
@import url("./footer.css");

:root {
	/* Colors! */
	--ripple-color: #fff;
	/* This is the same blue used by MBA on their website */
	--mba-blue: #62b6f3;
	/* These colors are sourced from the backdrop art by ozm0th */
	--oxford-blue: #122142;
	--blue-green: #3E93B5;
	--silver-lake-blue: #5885C2;
	--tangerine: #EA8A21;
	--saffron: #EEC21E;
	--verdigris: #3B9EA0;
	--zomp: #3D9C81;
	--mantis: #63C24E;
	--sgbus-green: #80D446;
	--straw: #DEE267;

	/* A linear gradient that matches the palette of the backdrop art by ozm0th */
	--rosa-gradient: linear-gradient(120deg,
						var(--blue-green), 
						var(--silver-lake-blue), 
						var(--tangerine), 
						var(--saffron) 49% 51%,
						var(--tangerine), 
						var(--verdigris), 
						var(--zomp), 
						var(--mantis), 
						var(--sgbus-green), 
						var(--straw)
					);
}

/* More color classes for easily applying text/background color */
.white-bg { background-color: #fff; }
.white-text { color: #fff; }
.black-bg { background-color: #000; }
.black-text { color: #000; }


/***************
 * FANCY LINKS *
 ***************/

/* Based on this CodePen I created: https://codepen.io/Chickenlord7321/pen/NPKEJLV

Which is based on this CodePen: https://codepen.io/team/css-tricks/pen/gOXMgxR
*/
.fancy-link {
	/* Reset default underlines */
	text-decoration: none;

	font-family: "Nunito", sans-serif;

	/* Inline display allows the background image to wrap around with the content */
	display: inline;
	/* 	The gradient underline is created by providing 2 backgrounds -- one white, the other a gradient. 
		The first background takes up the entire width, while the second has no width at all. When the 
		user hovers over the link, the backgrounds swap widths, creating a sliding effect.
	*/
	background-image: 
		linear-gradient(to right, #fff, #fff),
		var(--rosa-gradient);
	background-repeat: no-repeat, no-repeat;
	background-size: 
		100% 100%,
		0% 100%;
	background-position: 
		right bottom, 
		left bottom;
	transition: background-size 0.4s ease-in-out;

	color: transparent;
	/* Including the webkit version here because W3Schools says background-clip: text is deprected, but 
	MDN webdocs disagrees. This should cover almost every browser */
	-webkit-background-clip: text;
	background-clip: text;
}

.fancy-link:hover,
.fancy-link:active {
	color: transparent;
	/* Switches out the white background for a colored background. */
	background-size: 
		0% 100%,
		100% 100%;
}

/*************
 * HERO PAGE *
 *************/

/* 
The following rules contain everything that is common to every Hero Page. However, each individual page's 
style sheet applies its own styling on top of this. This is why there are so many things like flex, grid, 
or positioning that don't seem to have a purpose. There is a purpose, but it may be located in a different 
stylesheet. You can always finding any additional styling to the .hero-page near the top of each page's 
stylesheet, so it shouldn't be hard to find. Also, Inspect(Q) is your friend when you want to see exactly 
what rules are being applied.
*/

.hero-page {
	display: flex;
	flex-flow: row wrap;
	/* We make extensive use of 100vmin in the hero pages since it makes them naturally responsive to different
	screen sizes. */
	min-height: 100vmin;
}

.hero-page header {
	position: relative;		/* for children */
	background-color: rgba(0, 0, 0, 0.4);
	/* Make the hero page's text container fill the remaining space left over by the ripple div */
	flex: 1 1 0%;
	/* Font size is responsive to screen size */
	font-size: min(2rem, 6vw);
	text-align: center;
	/* Add enough padding for the h1 to be clear of the hamburger menu so that it doesn't get covered up */
	padding-top: calc(var(--nav-spacing) + var(--icon-size) + 1em);
}

.hero-page header ul {
	/* Adds some spacing around header content */
	display: grid;
	gap: 2em;
	margin: 2em 1em;
}

.hero-page .hero-img {
	/* Since <img> elements are inline by default, they are treated as "text", which means they have line height.
	This creates a small gap below the image, so we reset the img to block-level to fix this. */
	display: block;
	/* Using vmin allows the image to naturally resize based on the device width/height so that 
	it always fits */
	height: 100vmin;
	/* In case the screen is too small for the image, we use object-fit to maintain 
	the image's aspect ratio, and object-position to make Rosa stay in the same location. 
	This object-position prperty is sometimes overridden in other stylesheets. */
	object-fit: cover;
	object-position: 0 0;
}

/********
 * LOGO *
 ********/

#logo {
	position: absolute;
	top: 1em;
	left: 1em;
	text-decoration: none;
	font-size: 1.3rem;
	color: var(--mba-blue);
}

#logo i {
	font-size: 1.5em;
	margin-right: 5px;
}

/***********
 * HEADING *
 ***********/

h1 {
	/* Font size is responsive to screen size (these are just the numbers that work best) */
	font-size: max(4vw, 6vh);
	padding: 0 10px;
	margin-bottom: 2em;
	/* Using inline here maintains the background across multiple lines */
	display: inline;
	background: var(--rosa-gradient) no-repeat center;
	background-size: 100%;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;

	/* Adding a bit of shadow around the text makes it stand out against background images */
	filter: drop-shadow(5px 5px 3px #000);
}

/****************
 * MAIN CONTENT *
 ****************/

body {
	background-color: #000;
	color: #fff;
}

/* These colors stand out better against a black background */
a {
	color: var(--mba-blue);
	transition: all 0.3s;
}
a:hover,
a:active {
	color: var(--tangerine);
}

main {
	padding: 8rem 20%;
	/* Main content has a cool background, created by ozm0th */
	background-image: url("../images/swimming-blissfully-by-ozm0th.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 80%;
}

/* Tablet padding */
@media screen and (width < 1200px) {
	main {
		padding-left: 10%;
		padding-right: 10%;
	}
}

/* Some pages have a title explaining what the content is about. 
e.g. on the homepage, there's an h2 which says "Who Is Rosa?", because the content answers that question. */
main > h2 {
	margin: auto;
	width: 30%;
	text-align: center;
	font-size: 2.5rem;
	color: #fff;
	filter: drop-shadow(5px 5px 5px #000);
	border-bottom: 2px solid #fff;
}

/* Mobile size */
@media screen and (width < 700px) {
	main > h2 {
		width: 100%;
	}
}

/************************************
 * ARTICLES WITH ALTERNATING LAYOUT *
 ************************************/

article {
	display: grid;
	gap: 5%;
	margin: 8rem 0;
}

@media screen and (width >= 1000px) {
	/* Layout on wide screens */
	article:nth-of-type(even) {
		grid-template-columns: 6fr 5fr;
	}
	article:nth-of-type(odd) {
		grid-template-columns: 5fr 6fr;
	}

	/* Switches the order of the images and text so that the pattern becomes: text, img, img, text, etc... */
	article:nth-of-type(even) > .descrip-container { 
		order: +1; 
	}
}

article > * {
	position: relative;		/* for .chapter-tag with absolute positioning */
	background-color: #000;
	box-shadow: 5px 5px 10px #000;
	border-radius: 10px;
	border: 2px solid #fff;
	/* Decreases the padding on mobile screens, but keeps it at 2rem on wide screens */
	padding: min(10%, 2rem);

	/* Font styling */
	font-size: 1.3rem;
	line-height: 1.3;
}

/* Decrease font size on mobile screens to make the text fit better */
@media screen and (width < 600px) {
	.descrip-container {
		font-size: 1rem;
	}
}

/* Tags are positioned in the top left corner of their section */
.chapter-tag {
	position: absolute;
	top: -1.2em;
	left: -1.2em;
	padding: 0.3em 0.7em;
	font-size: 1.4rem;
	font-weight: 400;
	background-color: #000;
	border: 2px solid #fff;
	color: #fff;
	clip-path: polygon(
		15px 0,
		100% 0,
		100% calc(100% - 15px),
		calc(100% - 15px) 100%,
		0 100%,
		0 15px
	);
}

article h2 {
	margin-bottom: 1rem;
	font-size: 2rem;
	text-align: center;
	color: var(--mba-blue);
}

/* Images and videos are centered */
article img {
	display: block;
	width: 100%;
	margin: auto;
}

article iframe,
article video {
	display: block;
	margin: 0 auto;
}