/* Styles for program pages */

/* Page layout ========================================== */

/* Grid */
.programPageLayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px; /* minmax(0, 1fr) is to prevent an issue with slick slider */
	grid-template-rows: auto auto auto auto 1fr;
	column-gap: 4%;
	grid-template-areas:
		"title title"
		"image form"
		"content form" /* This row exists to prevent excess white space when form expands past its usual boundaries */
		"content menuDesktop"
		"content promotions";
}
@media (max-width: 850px) {
	.programPageLayout {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-template-areas:
			"title"
			"image"
			"form"
			"menuMobile"
			"content"
			"promotions";
	}
}

/* Typical container behavior */ 
.containerOnDesktop, .containerOnMobile {
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	width: 90%;
}
@media (min-width: 1200px) {
	.containerOnDesktop, .containerOnMobile {
		max-width: 1170px;
		width: 100%;
	}
}
@media (max-width: 400px) {
	.containerOnDesktop, .containerOnMobile {
		width: 100%;
		padding: 0 20px;
	}
}

/* Toggle between desktop and mobile containers */
@media (max-width: 850px) {
	.containerOnDesktop {
		width: 100%;
		padding: 0;
	}
}
@media (min-width: 851px) {
	.containerOnMobile {
		width: 100%;
	}
	.mobileOnlyProgramPage {
		display: none !important;
	}
}

.layoutSectionTitle {
	grid-area: title;
}
.layoutSectionImage {
	grid-area: image;
	margin-bottom: 40px;
}
.layoutSectionForm {
	grid-area: form;
	margin-bottom: 25px;
}
.layoutSectionContent {
	grid-area: content;
	margin-bottom: 25px;
}
.layoutSectionMenuDesktop {
	grid-area: menuDesktop;
	margin-bottom: 25px;
}
.layoutSectionMenuMobile {
	grid-area: menuMobile;
	margin-bottom: 25px;
}
.layoutSectionPromotions {
	grid-area: promotions;
	margin-bottom: 25px;
}
@media (max-width: 850px) {
	.layoutSectionImage {
		margin-bottom: 25px;
	}
}
@media (min-width: 851px) {
	.layoutSectionImage img {
		min-height: 490px;
		object-fit: cover;
	}
}

/* Title */
#pageTitle {
	font-family: 'jubilat';
	font-weight: 500;
	text-transform: none;
}

/* Top Details */
.topDetails__separator {
	margin: 0 8px;
}
@media(max-width: 850px) {
	.topDetails__separator {
		display: none;
	}
	.topDetails__line {
		display: block;
	}
}

/* Form */
.layoutSectionForm h3 {
	margin-bottom: 5px;
}
@media (min-width: 851px) {
	.layoutSectionForm h3 {
		margin-top: -3px;
	}
}
.layoutSectionForm .form_container div.form_question {
	margin-bottom: 7px; /* Vertical space between form lines */
}

/* Menu */
.layoutSectionMenuDesktop {
	display: block;
}
.layoutSectionMenuMobile {
	display: none;
}
@media (max-width: 850px) {
	.layoutSectionMenuMobile {
		display: block;
	}
	.layoutSectionMenuDesktop {
		display: none;
	}
}

/* Desktop Menu */
.contentMenuDesktop__button {
	display: block;
	width: 100%;
	padding: 9px 20px 10px 40px;
	background-color: #EBEAE9;
	border-bottom: 2px solid #B6B5B4;
	color: #5F5E5C;
	font-weight: normal;
	font-size: 18px;
	text-align: left;
	margin: 0;
	transition: background-color .3s, color .3s;
}
.contentMenuDesktop__button.active,
.contentMenuDesktop__button:hover,
.contentMenuDesktop__button:active,
.contentMenuDesktop__button:focus {
	background-color: #003E7E;
	color: #fff;
}
.contentMenuDesktop__button::before {
    content: "\2039";
	font-size: 50px;
    line-height: .36;
    float: left;
    margin: -1px 0px 0px -20px;
}

/* Mobile Menu */
.contentMenuMobile {
	background-color: #FFD200;
	padding: 40px 0;
}

/* Content sections are hidden by default */
.contentSection {
	display: none;
}

/* Hide "contact us" in menu */
.contactUs {
	display: none;
}


/* Unique styles ========================================== */

/* Promotion Box (under menu) */
.promotionBox {
	padding: 25px 30px;
	background-color: #FFD200;
}
.promotionBox p {
	font-weight: 600;
	color: #003E7E;
}

/* Editor adjustments ========================================== */

/* Make the content section TTS table span the whole width of the container while editing */
#cms-inline-editor-id .ou-justedit-region:not(.layoutSectionPromotions) {
	grid-column: 1 / span 2;
}

/* Reposition the content section Edit button */
#cms-inline-editor-id .programPageLayout > a[data-region-style='button'][role="button"].ou-btn {
grid-row: 4;
grid-column: 2;
align-self: start;
justify-self: start;
position: relative;
top: 0 !important;
transform: translateY(-100%) !important;
}