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

.page-hero h1 { line-height: 1.2em; }
.breadcrumb-row {
	@media (max-width: 767px){
		display: none;
	}
}

.page-content {
	
	section:nth-child(1){
		@media (max-width: 767px){
			padding: 1rem 0 0 0;
		}
	}
	
	h2 {
		font-size: rem(18);
		
		@media (min-width: 768px){
			font-size: rem(32);
		}
	}
}


/* PROGRAM SEARCH */
FORM#search-form {
	margin: 0.75rem 0 1rem 0;
	overflow: visible;

	@media (min-width: 768px){
		display: inline-block;
		margin: 0.75rem 0 2rem 0;
		min-width: 300px;
	}
	
	LABEL {

	}

	.search-wrapper {
		position: relative;
		
		i {
			position: absolute;
			top: 50%;
			left: 5px;
			transform: translateY(-50%);
			font-size: rem(34);
			color: $input-border;
			background: $input-bg;
			
			&:before { margin: 0; }
			
			@media (min-width: 768px){
				display: block;
				left: -55px;
				font-size: rem(48);
				background: transparent;
			}
		}
	}

	INPUT {
		font-size: rem(32);
		text-align: center;
		padding: 0.125rem;
		border-radius: 0;
	}

	#search-results {
		position: relative;
		width: 100%;

		UL {
			display: none;
			list-style-type: none;
			list-style-image: none;
			margin: 0;
			padding: 0;
			position: absolute;
			background-color: $blue2;
			z-index: 100;
			width: 100%;

			LI {
				padding: 0;
				margin: 0;

				&.active {
					background: $blue1;
					a{ color: $gold; }
				}

				& + LI {
					border-top: 1px solid $blue3;
				}

				A {
					display: block;
					color: #fff;
					font-size: 1rem;
					font-family: $body-font;
					font-weight: bold;
					text-decoration: none;
					padding: 0.5rem 0;

					EM {
						font-style: normal;
						font-family: $heading-font;
						font-weight: normal;
						font-size: .9em;
					}
				}
			}
		}
	}
}



UL#the-categories {
	margin: .75rem 0 1.5rem 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
	
	display: flex;
	flex-wrap: wrap;

	@media (min-width: 768px){
		display: block;		
	}

	LI {
		flex: 0 0 50%;
		font-size: 1.125rem;

		@media (min-width: 768px){
			font-size: 1rem;
			display: inline-block;
			margin-right: 1.5rem;
		}

		label {
			display: flex;
			align-items: center;
			cursor: pointer;
		
			> span { 
				text-transform: none; 
				font-size: rem(24);
				margin-left: 0.5rem;
				@include tungsten;
				color: $link-color;
				font-weight: normal;
			}
		
		}

		A {
			text-decoration: none;

			&::before {
				content: ' ';
				width: 1em;
				display: inline-block;
			}
		}

		&.active {
			A {
				color: $gold;

				&::before {
					content: '\221a';
				}
			}
		}
	}
}




DL.tabs {
	DT {

	}
	DD {

		h2 { margin-bottom: 2rem; text-align: center; }

		

		A {
			display: block;
			line-height: 1.2em;
			padding: .25em 0 .25em .25em;
			font-family: $heading-font;
			font-weight: bold;
			color: $purple;
			text-decoration: none;
			margin-bottom: 0rem;
			opacity: .2;
			
			transition: 100ms linear opacity;

			&:hover {
				color: $gold;
			}

			SMALL {
				font-weight: 600;
				font-size: .8em;
				color: rgba(black,0.4);
			}
			
			&.category-on {
				opacity: 1;
			}
		}

		.row {
			margin-left: 12px;
			margin-right: 12px;

			@media (min-width: 768px){
				padding: 1rem 2rem;
			}
		}
		
		ul > li { margin-bottom: 0; font-size: 1rem; }
	}

	&.all-categories {
		DD {
			A {
				opacity: 1;
			}
		}
	}
}