/*
	Perk Satellite Styles
*/

:root {
	/* Primary Colors */
	--perk-primary: #224039;
	--perk-primary-light: #f39100;

	/* Text Colors */
	--perk-text-light: #ffffff;
	--perk-text-dark: #224039;

	/* Background Colors */
	--perk-bg-primary: var(--perk-primary);
	--perk-bg-accent: var(--perk-primary-light);

	/* Button Colors */
	--perk-btn-bg: var(--perk-bg-primary);
	--perk-btn-border: var(--perk-bg-primary);
	--perk-btn-hover-bg: var(--perk-bg-accent);
	--perk-btn-hover-border: var(--perk-bg-accent);
	--perk-btn-text: var(--perk-text-light);
}

/* Perks Card
============================================================================ */
.perks {
	margin-top: 50px;
}

.perks .card {
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	flex-direction: column;
	margin-bottom: 62px;
}

@media screen and (min-width: 700px) {
	.perks .card {
		width: 33.33333%;
		padding-left: 10px;
		padding-right: 10px;
	}
}

.perks .card__title {
	font-size: 20px;
}

.perks .card__image {
	aspect-ratio: 3/2;
	object-fit: cover;
}

.perks .card__excerpt {
	flex: 1;
	padding: 20px;
	background: var(--perk-bg-primary);
	color: var(--perk-text-light);
}

.perks .card__excerpt p:last-child {
	margin-bottom: 0;
}

.perks .card .btn {
	margin: 0;
	width: 100%;
	text-align: left;
}

/* Perks Card - Featured
============================================================================ */
.perks .card-featured {
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	min-height: 500px;
	margin-bottom: 62px;
	display: flex;
	flex-direction: column-reverse;
}

@media screen and (min-width: 650px) {
	.perks .card-featured {
		flex-direction: row-reverse;
	}
}

@media screen and (min-width: 650px) {
	.perks .card-featured__content,
	.perks .card-featured__image {
		width: 50%;
	}
}

.perks .card-featured__image {
	height: 100%;
	object-fit: cover;
}

.perks .card-featured__featured-title {
	color: var(--perk-primary-light);
	margin-bottom: 40px;
}

.perks .card-featured__content {
	flex: 1;
	padding: 40px;
	height: 100%;
	color: var(--perk-text-light);
	background: var(--perk-bg-primary);
}

@media screen and (min-width: 650px) {
	.perks .card-featured__content {
		padding: 60px;
	}
}

.perks .card-featured__title {
	font-size: 18px;
	margin-bottom: 10px;
	color: var(--perk-text-light);
	position: relative;
	z-index: 1;
}

.perks .card-featured__btn {
	margin-top: 20px;
	margin-bottom: 0;
	padding: 8px 15px;
}


/* Perks Card - Promo
============================================================================ */
.perks .card--promo > .card__title {
	visibility: hidden;
}

.perks .card--promo .card__excerpt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: all 0.3s;
}

.perks .card--promo:hover .card__excerpt {
	text-decoration: none;
	background-color: var(--perk-bg-accent);
}

.perks .card--promo .card__excerpt .card__title {
	color: var(--perk-text-light);
	font-size: 35px;
	transition: all 0.3s;
}

.perks .card--promo:hover .card__excerpt .card__title {
	color: var(--perk-text-light);
}

.perks .card--promo .btn {
	background: var(--perk-btn-bg);
	border-color: var(--perk-btn-border);
}

.perks .card--promo:hover .btn {
	background: var(--perk-btn-hover-bg);
	border-color: var(--perk-btn-hover-border);
}


/*  Single Perk
============================================================================ */
.single-perk article {
	padding-bottom: 80px;
}

.single-perk .row {
	margin: 0 -10px;
  	display: flex;
  	flex-wrap: wrap;
}

.single-perk .entry-title {
	font-size: 44px;
	margin-bottom: 27px;
}

.single-perk .subtitle {
	color: var(--perk-text-dark);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 4px;
}

.single-perk .meta {
	margin-bottom: 30px;
}

.single-perk .entry-content {
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}

.single-perk .entry-content h1,
.single-perk .entry-content h2,
.single-perk .entry-content h3,
.single-perk .entry-content h4,
.single-perk .entry-content h5,
.single-perk .entry-content h6 {
	color: var(--perk-text-dark);
}

.single-perk .entry-content img {
	margin-top: 10px;
	margin-bottom: 30px;
}

.single-perk .entry-buttons,
.single-perk aside {
	margin-top: 30px;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (min-width: 800px) {
	.single-perk .entry-buttons,
	.single-perk .has-sidebar .entry-content {
		width: 58.33333%;
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media screen and (min-width: 800px) {
	.single-perk .has-sidebar aside {
		margin: 0;
		width: 41.66667%;
		padding-left: 10px;
		padding-right: 10px;
		padding-left: 38px;
		align-self: flex-start;
		position: sticky;
		top: 140px;
	}
}

.single-perk .has-sidebar .aside-content {
	padding: 40px;
	background-color: #efedeb;
	position: relative;
}

@media screen and (min-width: 800px) {
	.single-perk .has-sidebar .aside-content:before {
		content: "";
		width: 0;
		height: 0;
		border-top: 29px solid transparent;
		border-bottom: 29px solid transparent;
		border-right: 29px solid #efedeb;
		position: absolute;
		top: 45px;
		right: 100%;
		z-index: 1;
	}
}

.single-perk .has-sidebar .aside-content h1,
.single-perk .has-sidebar .aside-content h2,
.single-perk .has-sidebar .aside-content h3,
.single-perk .has-sidebar .aside-content h4,
.single-perk .has-sidebar .aside-content h5,
.single-perk .has-sidebar .aside-content h6 {
	color: var(--perk-text-dark);
}

.single-perk .entry-buttons .btn {
	margin-right: 16px;
}