/*------------------------------------*\
    Posts CSS

    Blog archive cards, featured post, search bar,
    single-post chrome, load more, and search results.
\*------------------------------------*/

.blog-listing-container {
	background-color: var(--color-surface-off-white);
}

.blog-listing-container + .blog-listing-container {
    padding-top: 0;
}

.blog-listing {
	margin-left: -12px;
	margin-right: -12px;
}

.blog-listing > [class*="col-"] {
	display: flex;
	margin-bottom: 24px;
	padding-left: 12px;
	padding-right: 12px;
}

.blog-post__item {
	background-color: var(--color-surface-white);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.blog-post__media,
.blog-post__media-link {
	display: block;
	text-decoration: none;
}

.blog-post__img-container {
	background-color: var(--color-surface-off-white);
	overflow: hidden;
	padding-top: 56.25%;
	position: relative;
	width: 100%;
}

.blog-post__img-container img,
.blog-post__img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.blog-post__meta {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.blog-post__tags {
	margin-bottom: 8px;
}

.blog-post__tag {
	color: var(--color-secondary-hover);
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.04em;
	margin-bottom: 4px;
	margin-right: 4px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 2;
}

.blog-post__title {
	color: var(--color-heading);
	font-size: 20px;
	line-height: 1.25;
	margin: 0 0 12px;
}

.blog-post__title a,
.blog-post__title__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.blog-post__excerpt {
	color: var(--color-paragraph);
	display: -webkit-box;
	flex-grow: 1;
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	margin: 0 0 16px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-decoration: none;
}

.blog-post__author {
	margin-bottom: 12px;
}

.blog-post__author__name {
	color: var(--color-paragraph);
	font-size: 14px;
}

.blog-post__author__highlight {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.blog-post__bottom {
	border-top: 1px solid var(--color-border);
	color: var(--color-paragraph);
	display: flex;
	font-size: 12px;
	font-weight: var(--font-weight-semibold);
	justify-content: space-between;
	letter-spacing: 0.02em;
	margin-top: auto;
	padding-top: 14px;
	text-decoration: none;
	text-transform: uppercase;
}

.blog-post__cta {
	align-items: center;
	color: var(--color-secondary-hover);
	display: inline-flex;
	font-family: var(--font-button);
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	gap: 7px;
	margin-top: 16px;
	text-decoration: none;
	text-transform: uppercase;
	/* transition: color 0.2s ease; */
}

.blog-post__cta::after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.blog-post__cta .icon-double-arrows {
	font-size: 13px;
}

.blog-post__cta:focus-visible,
.blog-post__title__link:focus-visible,
.blog-post__tag:focus-visible,
.blog-post__media-link:focus-visible,
.blog-post__author__highlight:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.blog-post__author__highlight {
	position: relative;
	z-index: 2;
}

.blog-post__item.blog-post__featured {
	max-width: 100%;
}

.blog-post__featured-grid {
	display: flex;
	flex-direction: column;
}

.blog-post__featured-media {
	width: 100%;
}

.blog-post__featured .blog-post__meta {
	padding: 24px;
}

.blog-post__featured_label {
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.blog-post__featured .blog-post__title {
	font-size: var(--font-size-h5);
}

.blog-post__featured .blog-post__excerpt {
	-webkit-line-clamp: 5;
}

.blog-listing__pagination {
	margin-top: 20px;
	padding-top: 10px;
	text-align: center;
}

.search_bar {
	margin-bottom: 30px;
	overflow: visible;
	position: relative;
	z-index: 4;
}

.search_bar__filters {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: visible;
}

.search_bar__search-wrap,
.search_bar__select-wrap {
	overflow: visible;
	position: relative;
	width: 100%;
}

.search_bar__search-wrap .icon-search {
	color: var(--color-secondary);
	font-size: 15px;
	left: 16px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.search_bar__select-wrap::after {
	border-bottom: 2px solid var(--color-primary);
	border-right: 2px solid var(--color-primary);
	content: "";
	height: 8px;
	pointer-events: none;
	position: absolute;
	right: 17px;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	width: 8px;
	z-index: 1;
}

.search_bar__search,
.search_bar__select {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--color-surface-white);
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-paragraph);
	font-family: var(--font-body);
	font-size: 14px;
	height: 48px;
	line-height: var(--line-height-body);
	width: 100%;
}

.search_bar__search {
	padding: 10px 16px 10px 44px;
}

.search_bar__search::placeholder {
	color: var(--color-placeholder);
}

.search_bar__select {
	padding: 10px 42px 10px 16px;
}

.search_bar__select-wrap .choices {
	margin-bottom: 0;
	width: 100%;
}

.search_bar__select-wrap .choices[data-type*="select-one"]::after {
	content: none;
}

.search_bar__select-wrap:has(.choices.is-open)::after {
	transform: translateY(-20%) rotate(-135deg);
}

.search_bar__select-wrap .choices[data-type*="select-one"] .choices__inner {
	align-items: center;
	background-color: var(--color-surface-white);
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-paragraph);
	display: flex;
	font-family: var(--font-body);
	font-size: 14px;
	min-height: 48px;
	padding: 10px 42px 10px 16px;
}

.search_bar__select-wrap .choices.is-focused .choices__inner {
	background-color: var(--color-surface-white);
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.search_bar__select-wrap .choices.is-open {
	overflow: visible;
}

.search_bar__select-wrap .choices__list--dropdown {
	border: 1px solid var(--color-border);
	border-radius: 0;
	margin-top: 0;
	z-index: 20;
}

.search_bar__select-wrap .choices__list--dropdown .choices__item {
	font-size: 14px;
	padding: 12px 16px;
}

.search_bar__select-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: var(--color-secondary);
	color: var(--color-primary);
}

.search_bar__search-submit,
.search_bar__reset {
	flex: 0 0 auto;
	white-space: nowrap;
	width: 100%;
}

.search_bar__search-submit::after,
.search_bar__reset::after {
	display: none;
}

.search_bar__search:focus-visible,
.search_bar__select:focus-visible,
.search_bar__search-submit:focus-visible,
.search_bar__reset:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.blog-listing.is-filtering {
	opacity: 0.25;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.blog-listing__empty {
	margin: 35px 0 0;
	text-align: center;
}

.blog-listing__controls {
	margin-top: 35px;
	text-align: center;
}

.blog-listing__count,
.load-more__counter {
	color: var(--color-paragraph);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	margin: 0 0 12px;
}

.blog-listing__progress {
	background-color: var(--color-surface-white);
	height: 10px;
	margin: 0 auto;
	max-width: 576px;
	width: 100%;
}

.blog-listing__progress-fill {
	background-color: var(--color-primary);
	display: block;
	height: 100%;
	transition: width 0.3s ease;
	width: var(--blog-progress, 0%);
}

.blog-listing__load-more {
	margin-top: 21px;
}

.blog-listing__load-more[hidden],
.blog-listing__empty[hidden],
.blog-listing__controls[hidden] {
	display: none;
}

.blog-listing__load-more.is-loading {
	cursor: wait;
	opacity: 0.65;
}

.blog_title_bar {
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 20px;
	padding: 40px 0 20px;
}

.blog_title_bar .right-title-bar {
	margin-top: 16px;
}

.blog_title_bar .search_bar__category,
.blog_title_bar .search_bar__search-form {
	width: 100%;
}

.blog_title_bar .search_bar__search-form {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.blog_title_bar .search_bar__search-form .search_bar__search-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 768px) {
	.blog_title_bar .right-title-bar {
		margin-top: 0;
	}

	.blog_title_bar .search_bar__category {
		flex: 1 1 160px;
		min-width: 0;
		width: auto;
	}

	.blog_title_bar .search_bar__search-form {
		align-items: center;
		flex: 1 1 200px;
		flex-direction: row;
		min-width: 0;
		width: auto;
	}

	.blog_title_bar .search_bar__search-submit {
		width: auto;
	}
}

@media (min-width: 1200px) {
	.blog_title_bar .search_bar__category {
		flex: 0 1 220px;
	}
}

.popular-posts {
	padding-bottom: var(--section-margins);
}

.popular-posts h2 {
	color: var(--color-heading);
	font-size: var(--font-size-h4);
	margin: 0 0 24px;
	text-align: center;
}

.blog-single-container {
	padding-bottom: 50px;
}

.blog-single-container .blog-post__img-container {
	margin-bottom: 20px;
}

.blog-single-meta {
	padding-bottom: 20px;
}

.blog-single-meta .social-share-row {
	height: 100%;
	justify-content: flex-start !important;
	padding: 0 !important;
	text-align: right;
}

.blog-single__author {
	align-items: flex-start;
	background: var(--color-surface-white);
	border: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	margin-bottom: 20px;
	margin-top: 20px;
	padding: 32px;
}

.blog-single__author__avatar {
	margin-right: 10px;
}

.blog-single__author__avatar img {
	border-radius: 50%;
}

.blog-single-meta__author__avatar {
	align-items: center;
	background-color: var(--color-surface-off-white);
	border-radius: 100%;
	display: flex;
	flex-shrink: 0;
	height: 56px;
	justify-content: center;
	margin-right: 10px;
	overflow: hidden;
	width: 56px;
}

.blog-single-meta__author__avatar img {
	border-radius: 0;
	display: block;
	height: auto;
	max-height: 60%;
	max-width: 60%;
	object-fit: contain;
	width: auto;
}

.blog-single__author__info {
	flex: 1;
}

.blog-single__author__name {
	color: var(--color-heading);
	font-size: 24px;
	margin: 0 0 10px;
}

.blog-single__author__position {
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	padding-bottom: 0;
}

.blog-single__author__email {
	align-items: center;
	display: flex;
	font-size: 12px;
	margin-bottom: 10px;
}

.blog-single__author__email a {
	align-items: center;
	display: flex;
	margin-right: 10px;
}

.blog-single__author__bio {
	color: var(--color-paragraph);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	padding-bottom: 10px;
}

.blog-single__author__bio:last-child {
	padding-bottom: 0;
}

.blog-single-meta__info {
	align-items: center;
	display: flex;
}

.blog-single__author__email__icon {
	margin-right: 5px;
}

.blog-single__author__email__link {
	text-decoration: none;
}

.blog-single__author__social {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
}

.blog-single__author__social__icon {
	height: 20px;
	width: 20px;
}

.blog .page-sidebar .widget {
	margin-bottom: 50px;
}

.load-more {
	text-align: center;
}

.load-more__progress {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	height: 10px;
	margin-top: 15px;
	min-width: 250px;
}

progress::-webkit-progress-bar,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
	border: 0;
	border-radius: 0;
	height: 10px;
}

progress::-webkit-progress-bar {
	background-color: var(--color-border);
}

progress::-webkit-progress-value {
	background-color: var(--color-primary);
}

.is-loading:before {
	-webkit-animation: simpleSpin 1.5s linear infinite;
	animation: simpleSpin 1.5s linear infinite;
	border: 5px solid;
	border-color: var(--color-border) var(--color-border) transparent;
	border-radius: 50%;
	content: "";
	display: block;
	height: 50px;
	left: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50px;
}

.load-more__btn {
	background-color: var(--color-primary);
	border: 0;
	border-radius: 0;
	color: var(--color-text-inverse);
	display: block;
	margin: 20px auto;
	padding: 10px 20px;
	display: flex;
	gap: 10px;
}

.load-more__btn.is-loading {
	cursor: not-allowed;
	opacity: 0.6;
	position: relative;
}

.load-more__btn.is-loading:before {
	height: 20px;
	width: 20px;
}

.load-more__btn[hidden],
.load-more__btn.is-disabled {
	display: none;
}

.placeholder-block {
	display: flex;
	position: relative;
}

.placeholder-block__inner {
	background-color: var(--color-surface-off-white);
	flex-grow: 1;
}

.placeholder-block.is-loading:before {
	height: 50px;
	width: 50px;
}

@-webkit-keyframes simpleSpin {
	0% {
		-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
		transform: translate(-50%, -50%) rotateZ(360deg);
	}
}

@keyframes simpleSpin {
	0% {
		-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
		transform: translate(-50%, -50%) rotateZ(360deg);
	}
}

.post-pagination {
	align-content: center;
	display: flex;
	justify-content: space-between;
}

.btn-post-pagination {
	background: var(--color-surface-off-white);
	color: var(--color-paragraph);
	font-size: 15px;
	padding: 10px 20px;
	position: relative;
}

.post-pagination-text {
	display: none;
}

.btn-post-pagination:hover {
	background: var(--color-border);
}

.btn-post-pagination strong {
	display: block;
	font-size: 12px;
}

.btn-previous-post,
.btn-next-post {
	display: flex;
	flex: 0 0 48%;
	flex-direction: column;
	justify-content: center;
	max-width: 48%;
	text-align: center;
	text-decoration: none;
}

.btn-previous-post {
	padding-left: 40px;
}

.btn-next-post {
	padding-right: 40px;
}

.mobile-arrow {
	position: absolute;
}

.mobile-arrow:after {
	border-bottom: 6px solid transparent;
	border-left: 6px solid var(--color-paragraph);
	border-top: 6px solid transparent;
	content: "";
	display: block;
	height: 0;
	width: 0;
}

.btn-previous-post .mobile-arrow {
	left: 19px;
}

.btn-next-post .mobile-arrow {
	right: 19px;
}

.btn-previous-post .mobile-arrow:after {
	transform: rotate(180deg);
}

.search-results-tabs .icon-tab-section__inner {
	gap: 40px;
}

.search-results-tabs .icon-tab-section__top {
	gap: 0;
}

.search-results-tabs .icon-tab-section__panel.is-active {
	gap: 40px;
}

.search-results-tabs .icon-tab-section__panels {
	max-width: 1500px;
	margin: 0 auto;
}

@media (min-width: 1200px) {
	.search-results-tabs .icon-tab-section__panel.is-active {
		align-items: stretch;
		flex-direction: column;
		gap: 40px;
	}
}

@media (min-width: 1367px) {
	.search-results-tabs .icon-tab-section__inner {
		padding-right: 0;
		padding-left: 0;
	}
}

.search-results {
	width: 100%;
}

.search-results__empty {
	margin: 0;
}

.search-results-tabs .blog-listing__pagination {
	width: 100%;
}

.search-results-tabs .blog-listing__pagination [class*="col-"] {
	padding-left: 0;
}

.search-highlighted {
	background-color: var(--color-secondary);
	color: inherit;
}

.blog-post__link {
	background-color: var(--color-primary);
	border-radius: 0;
	color: var(--color-text-inverse);
	padding: 15px 20px;
	text-decoration: none;
	width: fit-content;
}

.blog-post__link:hover {
	color: var(--color-text-inverse);
}

.toc-container {
	margin: 20px 0;
}

.blog-post__bottom__date {
	font-family: var(--font-body)!important;
}

@media (min-width: 600px) {
	.blog-single-meta .social-share-row {
		justify-content: flex-end !important;
	}
}

@media (min-width: 768px) {
	.blog-listing > [class*="col-"] {
		margin-bottom: 32px;
	}

	.blog-post__featured-grid {
		flex-direction: row;
	}

	.blog-post__featured-media {
		flex: 0 0 58%;
		max-width: 58%;
	}

	.blog-post__featured .blog-post__meta {
		flex: 1;
		justify-content: center;
		padding: 32px;
	}

	.blog-post__featured .blog-post__img-container {
		height: 100%;
		min-height: 320px;
		padding-top: 0;
	}

	.search_bar__filters {
		align-items: stretch;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.search_bar__search-wrap {
		flex: 1 1 100%;
	}

	.search_bar__select-wrap {
		flex: 1 1 calc(50% - 6px);
	}

	.search_bar__search-submit,
	.search_bar__reset {
		width: auto;
	}

	.blog-listing__controls {
		margin-top: 40px;
	}

	.blog-single__author {
		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
	}

	.post-pagination-text {
		display: block;
	}

	.btn-previous-post,
	.btn-next-post {
		text-align: inherit;
	}
}

@media (min-width: 1200px) {
	.blog-post__title {
		font-size: 22px;
	}

	.blog-post__featured .blog-post__title {
		font-size: var(--font-size-h4);
	}

	.search_bar {
		margin-bottom: 48px;
	}

	.search_bar__filters {
		align-items: center;
		flex-wrap: nowrap;
		gap: 16px;
	}

	.search_bar__search-wrap {
		flex: 1 1 auto;
	}

	.search_bar__select-wrap {
		flex: 0 0 250px;
	}

	.blog-listing__count,
	.load-more__counter {
		font-size: 18px;
	}

	.blog-listing__controls {
		margin-top: 50px;
	}

	.blog-post__tag:hover,
	.blog-post__author__highlight:hover {
		color: var(--color-primary-hover);
	}

	.blog-listing .blog-post__item:hover {
		box-shadow: var(--shadow-nav);
	}

	.blog-listing .blog-post__item:hover .blog-post__meta {
		background-color: var(--color-primary);
	}

	.blog-listing .blog-post__item:hover .blog-post__title,
	.blog-listing .blog-post__item:hover .blog-post__title a,
	.blog-listing .blog-post__item:hover .blog-post__title__link,
	.blog-listing .blog-post__item:hover .blog-post__excerpt,
	.blog-listing .blog-post__item:hover .blog-post__tag,
	.blog-listing .blog-post__item:hover .blog-post__bottom,
	.blog-listing .blog-post__item:hover .blog-post__author__name,
	.blog-listing .blog-post__item:hover .blog-post__author__highlight,
	.blog-listing .blog-post__item:hover .blog-post__cta {
		color: var(--color-text-inverse);
	}

	.blog-listing .blog-post__item:hover .blog-post__bottom {
		border-top-color: var(--color-white-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blog-post__item,
	.blog-post__cta {
		transition: none;
	}
}

/*---*\
Case Study PDF download
Mirrors resources library card: title, file meta, download action
\*---*/

.case-study-pdf__card {
	align-items: flex-start;
	background-color: var(--color-surface-white);
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 420px;
	padding: 24px;
}

.case-study-pdf__icon {
	align-items: center;
	color: var(--color-primary);
	display: flex;
	font-size: 60px;
	height: 60px;
	justify-content: center;
	line-height: 1;
	width: 60px;
}

.case-study-pdf__icon .icon-pdf {
	font-size: 60px;
	line-height: 1;
}

.case-study-pdf__body {
	width: 100%;
}

.case-study-pdf__title {
	color: var(--color-heading);
	font-size: 22px;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin: 0;
}

.case-study-pdf__meta {
	color: var(--color-paragraph);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	margin: 12px 0 0;
}

.case-study-pdf__action {
	align-items: center;
	color: var(--color-secondary-hover);
	display: inline-flex;
	font-family: var(--font-button);
	font-size: 14px;
	font-weight: var(--font-weight-bold);
	gap: 10px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.case-study-pdf__action .icon-download {
	font-size: 16px;
	line-height: 1;
}

.case-study-pdf__action:hover {
	color: var(--color-primary);
}

.case-study-pdf__action:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.case-study-pdf__title {
		font-size: 26px;
	}

	.case-study-pdf__action {
		font-size: 16px;
	}
}

@media (min-width: 1200px) {
	.case-study-pdf__title {
		font-size: 30px;
	}

	.case-study-pdf__meta {
		font-size: 18px;
	}

	.case-study-pdf__action {
		font-size: 18px;
	}
}