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

// used for the row that mimics a page hero
.super-hero {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-color: $offwhite;
	//background-image: url('../new/images/session-hero-mobile.jpg');
	color: $body-color;
	position: relative;
	padding: 1rem 0 0 0;
	
	h1 {
		color: $purple;
		font-family: $standout-font;
		letter-spacing: 1px;
		font-size: rem(36);
		text-transform: none;
		font-weight: normal;
	}

	p {
		font-size: rem(16);
		padding: 0;
		color:  $body-color;
	}
	



	
	@media (min-width: 768px){
		background-position: 25% center;
		padding: 3rem 0;
		
		h1 { font-size: rem(60); color: $purple; }
		p { font-size: rem(21); color: $body-color; }
		
	}
}

.hero-content {
	position: relative;
	z-index: 10;
}


// session detail info data

.session-info {
	position: relative;
	padding-left: 45px;
	margin-bottom: 2rem;
}

.session-icon {
	position: absolute;
	top: 0;
	left: 0;
	
	display: inline-block;
	text-align: center;
	width: 40px;
	height: 40px;
	color: $gray2;
	font-size: rem(36);
	line-height: 1em;
	
	&:before { margin: 0; }
}

.session-time {
	display: block;
	margin-bottom: 0.5rem;
	font-family: $heading-font;
	font-size: rem(21);
	color: $purple;
	font-weight: bold;
}

.session-location {
	font-style: normal;
	font-size: 1rem;
	
	p {
		line-height: 1.2em;
		padding: 0;
	}
}



// block that shows map embed and photo

.location-info {
	position: relative;
	overflow: hidden;
	margin: 0 0 2rem 0;
	border: 4px solid $offwhite;
	
	.col-sm-6 {
		padding: 0;
	}
	
	img {
		display: block;
		width: 100%;
		height: auto;
	}
}




// items in this row will be swap in order on mobile

.mobile-swap-rows {	
	@media (max-width: 767px){
		display: flex;
		flex-wrap: wrap;
		
		>div:nth-child(1){
			order: 2;
			flex: 1 1 auto;
		}
		
		>div:nth-child(2){
			order: 1;
			flex: 1 1 auto;
		}
	}
}




// styles for quote

.short-item.short-item-no-border {
	margin-bottom: 0;
}


// link items on listing page to session detail

.session-link {
	margin-bottom: .5rem;
	display: block;
	position: relative;
	text-decoration: none;
	border-radius: 5px;
	padding: 1rem;
	color: $blue1;
	
	i {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 1rem;
		font-size: rem(21);
		line-height: 24px;
		text-align: center;
		color: $blue1;
		
		&:before {
			margin: 0;
		}
	}
	
	p {
		padding: 0;
		line-height: 1.25em;
	}
	
	&:hover {
		background-color: $blue1;
		color: white;
		
		i { color: $gold; }
	}
}






// RSVP form styles

form {
	margin: 0;
}

form .row {
	padding: 0;
}

form .flexrow {
	align-items: flex-end;

	>div {
		flex: 1 1 auto;
	}
}

label > span {
	font-family: $heading-font;
	font-size: rem(14);
	font-weight: bold;
	color: $blue1;
	letter-spacing: normal;
	text-transform: none;
}

.horizontal-label {
	flex-wrap: nowrap;
	justify-content: flex-start;
	
	display: block;
	
	> span {
		font-weight: normal;
		font-size: rem(16);
	}
	
	input[type="checkbox"] {
		flex: 0 0 auto;
		align-self: flex-start;
	}
}


// prevents forms from showing invalid on page load



form:not(.submitted) input:invalid, 
form:not(.submitted) select:invalid,
form:not(.submitted) label input:invalid + span {
	border-color: #bbb;
	color: inherit;
}
	
input[type="submit"]{
	display: block;
	width: 100%;
}




// floating RSVP button on mobile

.mobile-sticky {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 2rem 1rem;
	background-image: linear-gradient(rgba(black,0) 0%, rgba(black,0.75) 100%);
}