// .scss files will get core functions and variables automatically from build script


@import 'page-navbar.scss';


.page-hero {
	background-position: center center;
}


.section-title {
	text-transform: none;
}

#living-campus-header {
	margin-bottom: 1rem;
}

.form-area {
	margin-top: 1rem;
	margin-bottom: 1rem;

	label {
		margin-bottom: 1rem;
		padding: 5px;
		border-radius: 5px;
		display: block;
		cursor: pointer;
		
		transition: 100ms all linear;
		
		&:hover {
			background: $gray3;
		}
		
		input {
			align-self: flex-start;			
		}
		
		> span {
			font-family: $body-font;
			font-size: rem(18);
			font-weight: normal;
			text-transform: none;
			letter-spacing: normal;
			margin-left: 10px;
			
			.secondary-label {
				color: $body-color;
				font-size: rem(14);
				padding: 0;
				margin: 0;
			}
		}
		
		&.inline {
			display: inline-flex;
			margin: 0 0.5rem;
			padding: 5px 10px;
			
			span {
				font-weight: bold;
				font-size: rem(24);
			}
			
			input {
				align-self: center;
			}
		}
		
		&.selected {
			background: $blue1;
			span { 
				color: $gold;
				.secondary-label { color: white; }
			}
		}
		
	}
	

}

.number-badge {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto 1rem auto;
	max-width: 150px;
	min-height: 1em;
	border-radius: 5px;
	
	color: white;
	font-family: $standout-font;
	font-size: rem(50);
	
	&.green { background: $green1; }
	&.purple { background: $purple-alt; }
	
	span {
		display: block;
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		text-align: center;
		width: 100%;
	}
	
	&:after {
		content: '';
		display: block;
		padding-top: 50%;
	}
}




.big-number {
	display: block;
	font-family: $standout-font;
	font-size: rem(60);
	color: $green1;
	line-height: 1em;
	margin-bottom: 2rem;
	
	span {
		display: block;
		font-family: $heading-font;
		font-size: rem(16);
		line-height: rem(21);
		color: $purple;
	}
	
	@media (min-width: 992px){
		font-size: rem(72);
	}
}




.fin-aid-callouts {
	p {
		font-size: rem(14);
	}
	
	@media (min-width: 768px){
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: nowrap;
		flex-direction: row;
	}
	
	@media (min-width: 992px){
		p { font-size: rem(16); }	
	}

}

	.fin-aid-callout-item {
		padding: 0 1rem 4rem 1rem;
		border-radius: 5px;
		position: relative;
	
		&.green { background-color: $green3; }
		&.brown { background-color: $red3; }
		&.blue { background-color: $blue3; }
		&.purple { background-color: lighten($purple-alt,40%); width: 100%; }
		
		@media (min-width: 768px){
			flex: 1 1 20%;
		}
		
		.btn {
			position: absolute;
			bottom: 1rem;
			left: 1rem;
			right: 1rem;
			display: block;
			
			border-radius: 3px;
			box-shadow: inset 0 0 0 2px rgba(black,0.2);
		}
	}
	
	.col-tiny {
		padding: 1rem 0;
		text-align: center;
		
		@media (min-width: 768px){
			flex: 0 0 auto;
			align-self: center;
			padding: 0 0.5rem;
		}
	}


.fin-aid-callout {
	border-radius: 5px 5px 0 0;
	padding: 1rem;
	margin: 0 -1rem 1rem -1rem;
	line-height: 1em;
	font-family: $standout-font;
	font-size: rem(36);
	color: white;
	
	span {
		font-family: $heading-font;
		font-size: rem(14);
		font-weight: bold;
		color: $gold-alt;
		display: block;
		margin-top: 0.5rem;
		line-height: 1em;
	}
	
	.green & { background-color: $green1; }
	.brown & { background-color: $brown1; }
	.blue & { background-color: $blue1; }
	.purple & { background-color: $purple-alt;
		font-size: rem(38);
	}
	
	@media (min-width: 992px){
		font-size: rem(48);
		min-height: 108px;
		span { font-size: rem(18); }
	}
}


.inline-block {
	display: inline-block;
	margin: 0;
}



// chart styles

#cost-barchart {
	.ct-bar { stroke-width: 30px; }
	.ct-series-a .ct-bar { stroke: $red1; }
	.ct-series-b .ct-bar { stroke: $red1; }
	.ct-series-c .ct-bar { stroke: $red1; }
	.ct-series-d .ct-bar { stroke: $purple-alt; }
	
	.ct-label {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: rem(13);
		color: $body-color;
		fill: $body-color;
	}
	
	.label-inner {
		font-weight: bold;
		font-size: rem(16);
		color: white;
		fill: white;
	}
	
	.ct-grids .ct-horizontal {
		stroke-width: 0;
		
		&:nth-child(1){
			stroke-width: 4px;
			stroke: $input-border;
			stroke-dasharray: 0;
		}
	}
}


#loans-barchart, #debt-barchart {
	.ct-bar { stroke-width: 50px; }
	.ct-series-a {
		.ct-bar { 
			stroke: $purple-alt;
		}
		
		.label-inner {
			color: $purple-alt;
			fill: $purple-alt;
		}
	}
	.ct-series-b {
		.ct-bar { 
			stroke: $red1; 
		}
		
		.label-inner {
			color: $red1;
			fill: $red1;
		}
	}
	
	.ct-label {
		font-family: $body-font;
		font-size: rem(16);
		color: $body-color;
		fill: $body-color;
	}
	
	.label-inner {
		font-family: $standout-font;
		font-weight: normal;
		font-size: rem(30);
		text-align: center;
		
	}
	
	.ct-grids .ct-vertical {
		stroke-width: 0;
		
		&:nth-child(1){
			stroke-width: 4px;
			stroke: $input-border;
			stroke-dasharray: 0;
		}
	}
}



#afford-pie {
	.ct-series-a .ct-slice-donut { stroke: $red2; }
	.ct-series-b .ct-slice-donut { stroke: $tan2; }
	.ct-series-c .ct-slice-donut { stroke: $green2; }
	.ct-series-d .ct-slice-donut { stroke: $blue2; }
	.ct-series-e .ct-slice-donut { stroke: $purple-alt; }
	
	.ct-label {
		font-family: $body-font;
		font-size: rem(16);
		font-weight: bold;
		color: white;
		fill: white;
		text-anchor: middle;
		text-shadow: 0 0 6px black;
		alignment-baseline: central;
	}
	
	.outside-label {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: rem(13);
		color: $body-color;
		fill: $body-color;
		text-anchor: middle;
	}
}


$pie_colors: $purple-alt, $green3, $red3, $blue3, $gray2;

#actual-cost-pie {
	opacity: 0.25;
	transition: all 250ms linear;
	
	.ct-series-a .ct-slice-pie { fill: nth($pie_colors,1); }
	.ct-series-b .ct-slice-pie { fill: nth($pie_colors,2); }
	.ct-series-c .ct-slice-pie { fill: nth($pie_colors,3); }
	.ct-series-d .ct-slice-pie { fill: nth($pie_colors,4); }
	.ct-series-e .ct-slice-pie { fill: nth($pie_colors,5); }
	//.ct-series-e .ct-slice-pie { fill: nth($pie_colors,6); }
	
	.ct-label {
		font-family: $sans-alt;
		font-size: rem(14);
		font-weight: normal;
		color: $body-color;
		fill: $body-color;
	}
	
	.highlight {
		font-weight: bold;
		font-size: rem(16);
		color: nth($pie_colors,1);
		fill: nth($pie_colors,1);
	}
}

.list-legend {
	margin: 1rem 0 0 0;
	padding: 0;
	list-style: none;
	opacity: 0.25;
	transition: all 250ms linear;
	
	&#actual-cost-legend {
		width: 140px;
		margin: 0 auto 0 auto;
	}
	
	li {
		padding: 0;
		margin: 0 0 0.5rem 0;
		font-family: $sans-alt;
		font-size: rem(14);
		line-height: 1em;
		
		&:before {
			width: 16px;
			height: 16px;
			content: '';
			display: inline-block;
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 5px;
		}
		
		&.ct-series-a:before { background-color: nth($pie_colors,1); }
		&.ct-series-b:before { background-color: nth($pie_colors,2); }
		&.ct-series-c:before { background-color: nth($pie_colors,3); }
		&.ct-series-d:before { background-color: nth($pie_colors,4); }
		&.ct-series-e:before { background-color: nth($pie_colors,5); }
		//&.ct-series-e:before { background-color: nth($pie_colors,6); }
	}
}