/**
 * @file
 * Front Page Specific CSS
 * AT-Legolas Barrio Subtheme for Drupal 10
 */

/* ===== Highlights Section ===== */

#page
{
	background-image: radial-gradient(closest-side, transparent 50%, rgba(0, 0, 0, 0.6)), url('../images/stock-background.jpg') !important;
	background-size: 100% auto;
}

#frontpage-callout
{
	margin: 100px 0 150px 0;
	max-height: 80vh;
}

#frontpage-callout-text
{
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 4em;
	line-height: 80%;
	letter-spacing: -0.02em;
	max-width: 28ch;
}

#frontpage-callout-buttons
{
	margin: 15px 0px;
}

/* content area on front page only */

#frontpage-content-wrapper
{
	background-color: #f6f6f6;
	color: #222222;
	font-family:"Roboto", sans-serif;
	font-size: 18px;
	line-height: 150%;
	font-weight: 400;
}

/* dumb stuff to show we can do what ModernCampus does */

.triangles .frontpage-highlights-box
{
	background-image: url('../images/trianglify-green.jpg'); /* Dumb MC stuff */
	box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.2); /* Black shadow */
	color: #ffffff;
}

.triangles .frontpage-highlights-box a
{
	color: #ffffff;
}

.triangles .frontpage-highlights-box .call-to-action
{
	background-color: #efefef;
	color: #595959;
}

.triangles .frontpage-highlights-box .call-to-action:hover
{
	background-color: #333333;
	color: #ffffff;
}

/* On screens that are 900px or less */
@media screen and (max-width: 900px) 
{
	#page
	{
		background-size: cover;
	}
	
	#site-title-container
	{
		background: rgba(0, 0, 0, 0.3);
	}
	
	#frontpage-callout
	{
		margin: 20px 0 20px 0;
		max-height: 80vh;
	}
	
	#frontpage-callout-text
	{
		font-size: 4em;
	}
	
	#frontpage-callout-buttons
	{
		margin: 15px auto;
		width: 90%;
	}
	
	#frontpage-callout-buttons .call-to-action
	{
		margin: 0 auto 10px auto;
		padding: 1em 2em;
		width: 100%;
	}
	
}