@import "common-post-bottom-nav.css";

body.resource-template-resource-ungated {

	h2 {
		color: #7ac0b7;
		font-family: MADERA-BOLD;
		font-size: 30px;
		line-height: 45px;
		margin-bottom: 30px;
	}

	p {
		color: #262626;
		font-size: 18px;
		line-height: 30px;
	}

	a.button-blue {
		background-color: #23315d;
		border-radius: 50px;
		color: white;
		display: block;
		font-family: madera-regular;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.1;
		margin: 0;
		padding: 13px 33px 17px;
		width: fit-content;

		&:hover {
			background-color: #7ac0b7;
		}
	}

	a.button-white {
		background-color: white;
		border-radius: 50px;
		color: #23315D;
		display: block;
		font-family: madera-regular;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.1;
		margin: 0;
		padding: 13px 33px 17px;
		width: fit-content;

		&:hover {
			background-color: #4671a9;
		}
	}

	.editor-content {
		padding: 0 16px 80px;

		ul li {
			color: #262626;
			font-size: 18px;
			line-height: 30px;
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}

			&::marker {
				color: #7ac0b7;
			}
		}

		.content-card {
			/*
			border-radius: 20px;
			background-color: #23315D;
			padding: 43px 55px;
			*/

			h3 {
				color: white;
				font-size: 30px;
				margin-bottom: 30px;
				line-height: 46px;
			}
		}
	}

	.site-main {

		.section-inner {
			margin: 0 auto;
			max-width: 1265px;
			width: 100%;

			.content-row {
				column-gap: 3%;
				display: flex;
				flex-wrap: wrap;
				row-gap: 50px;

				@media only screen and (min-width: 1000px) {
					flex-direction: row;
				}

				@media only screen and (max-width: 999px) {
					flex-direction: column;
				}
			}

			ul li {
				color: #262626;
				font-size: 18px;
				line-height: 30px;
				margin-bottom: 20px;

				&:last-child {
					margin-bottom: 0;
				}

				&::marker {
					color: #7ac0b7;
				}
			}
		}

		.page-content {
			padding: 0 16px 80px;

			.content-row {
				.col-l {
					@media only screen and (min-width: 1000px) {
						flex: 0 0 35%;
					}

					@media only screen and (max-width: 999px) {
						flex: 0 0 100%;
					}
				}

				.col-r {
					@media only screen and (min-width: 1000px) {
						flex: 0 0 62%;
						width:60%;
					}

					@media only screen and (max-width: 999px) {
						flex: 0 0 100%;
						width: 100%;
					}
				}

				.sidebar-toc {
					background-color: #f5f8f9;
					padding: 35px 30px;
					position: relative;
					top: 0;
					border-radius: 20px;

					@media only screen and (max-width: 999px) {
						display: none;
					}

					h2 {
						color: #23315D;
						font-size: 30px;
						margin-bottom: 35px;
					}
					
					ul {
						margin-left: 0;
						
						li {
							list-style: none;
							margin-bottom: 15px;

							a {
								color: #262626;

								&:hover {
									text-decoration: underline;
								}
							}	
						}
					}

					.sidebar-card {
						padding: 29px 23px 0;
						border-top: 1px solid white;
					}

					h3 {
						color: #23315D;
						font-size: 18px;
						line-height: 28px;
						margin-bottom: 20px;
						text-align: center;
					}

					.button-container {
						a {
							margin: 0 auto;
						}
					}
				}

				.sidebar-toc.sticky {
					position: fixed;
					top: 100px;
					z-index: 110;
				}

			}
		}

		.page-masthead {
			background-size: contain;
			background: url('/wp-content/themes/salient-child/img/masthead-graphic@2x.png') no-repeat right top #f5f8f9;
			padding: 57px 16px 66px;

			h1 {
				color: #23315d;
				font-family: MADERA-BOLD;
				font-size: 45px;
				line-height: 55px;
				width: 80%;

				@media only screen and (max-width: 999px) {
					width: 100%;
				}
			}

			.text-slash {
				color: #4671a9;
				font-family: MADERA-REGULAR;
				font-size: 16px;
				font-weight: 600;
				letter-spacing: 2px;
				line-height: 32px;
				margin-bottom: 35px;
				padding: 0 0 0 16px;
				position: relative;
				text-transform: uppercase;

				&:before {
					color: inherit;
					content: '/';
					display: block;
					left: 0;
					position: absolute;
					top: 0;
				}
			}
		}

		.shape-divider-left {
			background-color: white;

			img {
				display: block;
				height: auto;
				max-width: 137px;
				width: 100%;
			}
		}

	}

	/* Override the embeded images width, otherwise it breaks the layout with its fixed width */
	.wp-caption.alignnone {
		width: auto !important;
	}

}