/**
 * `:root` is used to break specificity ties with other selectors from theme because it applies to ANY markup situation and has the specificty weight of a class rather than an element
 */

/**
 * Info Link
 */
.icon-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.icon-link svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.icon-link svg:first-child {
	margin-right: .5em;
}
.icon-link svg:last-child {
	margin-left: .25em;
}

/**
 * Card Grid
 */
.card-grid {
	display: grid;
	grid-gap: 30px;
	align-items: stretch;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) )
}

@supports( display:grid ) {
	.card-grid .card {
		margin-bottom: 0;
	}
}

/**
 * Card Component
 *
 * This should be SUPER minimal styles with lots of composable variations
 */
.card {
	display: flex;
	flex-flow: column nowrap;
	border-radius: 3px;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.15);
	box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

.card:target {
	border-color: #7b95b5;
	box-shadow:
		1px 1px 1px rgba(0,0,0,.1),
		0 0 5px 2px #7b95b5;
}

.card > :first-child {
	margin-top: 1rem;
}

.card > :last-child {
	margin-bottom: 1rem;
}

.post-content .card > * {
	margin-left: 2rem;
	margin-right: 2rem;
}

:root .post-content .card__tab {
	order: -1;
	margin: 0;
	padding: .5rem;
	background-color: #dde3e3;
}

:root .card__tab a:focus,
:root .card__tab a:hover,
:root .card__tab a {
	color: inherit;
}

.card__tab svg {
	fill: currentColor;
}

.card--small {
	font-size: 16px;
}

.card--small .card__title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: .5em;
}

.card--small .card__subhead {
	margin-top: 1em;
	font-size: 16px;
	margin-bottom: .5em;
}

.card--small p {
	margin-bottom: .5em;
}

body .card--small .card__tab {
	padding: .25em .5em;
	font-size: 14px;
}

/**
 *
 * Progress Meter
 *
 */
ul.progress-meter {
	display: flex;
	position: relative; /* need new stacking context */
	z-index: 1;
	list-style: none;
	margin-left: 1em;
	margin-right: 1em;
}

.progress-meter.progress-meter--simple {
	margin-bottom: 0 !important;
}

.progress-meter__phase {
	flex: 1 1 25%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: relative;
	min-height: 1.25rem;
	margin-top: 2.5rem;
	margin-bottom: 1.5rem !important;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25 !important;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

	.progress-meter__phase::after {
		display: block;
		content: '';
		position: absolute;
		bottom: 0;
		left: -1%;
		width: 102%;
		height: 100%;
		transform: skew(-25deg);
		z-index: -1;
	}

	/* The Map Marker*/
	.progress-meter__phase.is-max::before {
		display: block;
		content: '';
		position: absolute;
		width: 100%;
		height: 2.5rem;
		bottom: 100%;
		margin-bottom: .125em;
		background: url('img/marker.svg') center / contain no-repeat;
	}
	.progress-meter__phase.is-max.approved::before {
		background-image: url('img/marker-approved.svg');
	}

body .progress-meter__phase a {
	display: block;
	color: inherit;
	text-decoration: none;
	text-align: center;
}
	body .progress-meter__phase a:hover {
		color: inherit;	
		text-decoration: underline;
		text-decoration-style: dotted;
	}

.progress-meter__phase__label {
	font-size: 1rem;
	text-transform: uppercase;
}

.progress-meter__phase__name {
	position: absolute;
	top: 100%;
	margin-top: .25rem;
	font-size: .875rem;
	color: #20406f;
	text-shadow: none;
}

.progress-meter__phase__icon {
	display: none;
}

.progress-meter__phase__icon svg {
	fill: rgba(255,255,255,.8);
	width: 50px;
	height: 50px;
}

@media (min-width: 500px) {
	.progress-meter__phase__icon {
		display: block;
		margin: .5em 0 .25em 0;
	}
}

/*
 WARNING: max-width query
 It's easier to manage screen reader text with single query
 */
@media (max-width: 650px) {
	.progress-meter__phase__label {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}
}

@media (min-width: 650px) {
	.progress-meter {
		margin-bottom: 2rem !important;
	}

	.progress-meter__phase {
		margin-top: 4.25rem;
	}
		.progress-meter__phase.is-max::before {
			height: 4.25rem;
		}
		.progress-meter__phase::after {
			transform: skew(-15deg);
		}

	.progress-meter__phase__count {
		font-size: 2.5rem;
	}

	.post-content .progress-meter__phase__label {
		display: block;
		margin-bottom: .5em;
	}

	.progress-meter__phase__name {
		font-size: 1rem;
	}

	.progress-meter__phase__icon svg {
		width: 75px;
		height: 75px;
	}
}

@media (min-width: 800px) {
	.progress-meter__phase {
		min-height: 2rem;
		margin-top: 6rem;
	}

		.progress-meter__phase.is-max::before {
			height: 6rem;
		}

	.progress-meter__phase__count {
		font-size: 3.5rem;
	}

}

/* Progress Meter Colors */
.progress-meter__phase.phase-1::after {
	border-radius: 3px 0 0 3px;
	background-color: #7b95b5;
}

.progress-meter__phase.phase-2::after {
	background-color: #3c5881;
}

.progress-meter__phase.phase-3::after {
	background-color: #20406f;
}

.progress-meter__phase.approved::after {
	border-radius: 0 3px 3px 0;
	background-color: #1d7272;
}

/* Show all uncompleted phases in gray */
.progress-meter__phase.is-max ~ .progress-meter__phase::after {
	background-color: #ccc;
}

/**
 * Progress Meter Small Version
 */
.progress-meter.progress-meter--small {
	margin-bottom: 1.3em;
}
.progress-meter--small .progress-meter__phase__label {
	display: none;
}
.progress-meter--small .progress-meter__phase.is-max::before {
	height: 2.5rem;
}
.progress-meter--small .progress-meter__phase {
	margin-top: 3rem;
	min-height: 1.25rem;
}

/**
 * Progress Meter Trial Phases
 */
.progress-meter--trial-phases .progress-meter__phase {
	margin-top: 1.5rem;
}
.progress-meter--trial-phases .progress-meter__phase:not(.is-active)::after {
	background-color: #ccc;
}
.progress-meter--trial-phases .progress-meter__phase.is-active::after {
	height: 150%;
	top: -25%;
	left: -1px;
	width: calc( 100% + 2px);
	z-index: 1;
}

/**
 * Data Graphic
 */
.data-graphic {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 2rem;
	color: #20406f;
}
.data-graphic a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.data-graphic a:hover {
	text-decoration: underline;
}
.data-graphic__item {
	position: relative;
	/* You can only fit 3 26% items on a line */
	flex: 1 0 26%;
	text-align: center;
	padding: 2rem;
}
.data-graphic__value {
	font-size: 2.5rem;
	font-weight: 600;
	text-align: center;
	line-height: .8;
}
.data-graphic__icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.data-graphic__icon svg {
	top: 10%;
	left: 10%;
	position: absolute;
	width: 80%;
	height: 80%;
	opacity: .7;
}
.data-graphic__icon svg * {
	fill: hsl(213, 28%, 90%);
}
.data-graphic__label {
	margin-top: .5em;
	font-size: 1.25rem;
	line-height: 1.25;
	text-align: center;
}

@media (min-width: 630px) {	
	.data-graphic__value {
		font-size: 4rem;
	}
	.data-graphic__label {
		font-size: 1.75rem;
	}
	.data-graphic--small .data-graphic__value {
		font-size: 2.5rem;
	}
	.data-graphic--small .data-graphic__label {
		font-size: 1rem;
	}
}

@media (min-width: 800px) {
	.data-graphic--small .data-graphic__value {
		font-size: 3rem;
	}
	.data-graphic--small .data-graphic__label {
		font-size: 1.5rem;
	}
}

/**
 * No Longer Progressing Count
 */
.no-longer-progressing-count {
	margin-top: -.5em;
	margin-bottom: .5em;
	text-align: center;
}

.no-longer-progressing-count span {
	position: relative;
	display: inline-block;
	color: #fff;
	padding: .25em 1em;
	font-size: 1rem;
}

	.no-longer-progressing-count span::after {
		display: block;
		content: '';
		position: absolute;
		bottom: 0;
		left: -1%;
		width: 102%;
		height: 100%;
		transform: skew(-25deg);
		z-index: -1;
		background-color: #767676;
		border-radius: 3px;
	}

/**
 * About Phases Link
 */
:root .about-phases {
	position: relative;
	z-index: 1;
	margin-bottom: 1em;
	text-align: center;
}
.about-phases .icon-link {
	font-size: 14px;
	color: #3c5881;
}

/* Platform Color Classes */
.card.platform-live-attenuated {
	border: 1px solid #61d1be;
}
.card.platform-live-attenuated .card__tab {
	background-color: #61d1be;
}

.card.platform-dna {
	border: 1px solid #6696cc;
}
.card.platform-dna .card__tab {
	background-color: #6696cc;
}

.card.platform-inactivated {
	border: 1px solid #b57cc8;
}
.card.platform-inactivated .card__tab {
	background-color: #b57cc8;
}

.card.platform-non-replicating-viral-vector {
	border: 1px solid #e375b6;
}
.card.platform-non-replicating-viral-vector .card__tab {
	background-color: #e375b6;
}

.card.platform-protein-subunit {
	border: 1px solid #ff7297;
}
.card.platform-protein-subunit .card__tab {
	background-color: #ff7297;
}

.card.platform-replicating-viral-vector {
	border: 1px solid #ff7d70;
}
.card.platform-replicating-viral-vector .card__tab {
	background-color: #ff7d70;
}

.card.platform-rna {
	border: 1px solid #ff9547;
}
.card.platform-rna .card__tab {
	background-color: #ff9547;
}

.card.platform-vlp {
	border: 1px solid #f2b21b;
}
.card.platform-vlp .card__tab {
	background-color: #f2b21b;
}

/* Utility Classes */
.vertical-margin-none {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.vertical-margin-small {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

.has-font-weight-normal {
	font-weight: 400 !important;
}

.list--style-none {
	list-style: none !important;
}

.list--inline-block {
	list-style: none;
}

.list--inline-block li {
	display: inline-block;
	margin-bottom: .25em;
	margin-right: .75em;
}