/* NAV TAB BAR */
nav.tabbar {
	--bg-color: #e8e8e8;
	--bg-color-active: var(--corp-blue);
	--bg-color-hover: #ddd;
	--text-color: #868686;
	--text-color-active: #fff;
	--border-radius: 2em;
	--padding-y: 0.875em;
	--padding-x: 2em;
	--col-width: unset;
	--col-gap: 0;
	--row-gap: 0;
	display: flex;
	column-gap: var(--col-gap);
	row-gap: var(--row-gap);
	justify-content: space-around !important;
	background-color: var(--bg-color);
	border-radius: var(--border-radius);
	box-shadow: var(--base-box-shadow);
	margin-left: -3px; /* compensates for rounded corner illusion */
	margin-right: -3px;
	margin-bottom: 3rem;
	> a {
		flex: 1;
		white-space: nowrap;
		min-width: var(--col-width);
		text-decoration: none;
		color: var(--text-color);
		font-weight: var(--font-weight-heavy);
		padding: var(--padding-y) var(--padding-x);
		border-radius: var(--border-radius);
		text-align: center;
	}
	> a.active {
		color: var(--text-color-active);
		background: var(--bg-color-active);
		box-shadow: var(--base-box-shadow);
	}
	> a:not(.active):hover {
		background: var(--bg-color-hover);
	}
}


article.news-post {
	--wide-text: scaleY(0.95);
	--small-text: 0.875em;
	--smaller-text: 0.75em;
	display: flex;

	margin-bottom: 2rem;
	box-shadow: var(--base-box-shadow);
	border-radius: var(--bs-border-radius);
	gap: 4rem;
	border: solid 0 var(--bs-border-color);
	.article-poster {
		flex: 1;
		max-width: 300px;
		background: #000;
		color: #fff;
		padding: 0.75rem 0.75rem 1rem;
		text-align: center;
		border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 var(--bs-border-radius);
		.company-name { 
			padding-bottom: 56.25%; 
			position: relative; 
			background-color: #fff;
			color: #000;
			text-align: center;
			margin-bottom: 1rem;
		 	border-radius: var(--bs-border-radius-sm);
			> strong {
				position: absolute;
				left: 0;
				width: 100%;
				top: 50%;
				transform: translateY(-50%) scaleX(90%);
				font-size: 1.5em;
				font-weight: var(--font-weight-black);
				
			}
		}
		.logo { margin-bottom: 1rem; border-radius: var(--bs-border-radius-sm); background-color: #fff; background-size: 75% auto; }
		.funding { line-height: 1; margin-bottom:0.125em; font-weight: var(--font-weight-black); font-size: 1.75em; transform: var(--wide-text); }
		.funding sup { vertical-align:baseline; display: inline-block; font-size: 0.6875em; }
		.series { font-size: var(--smaller-text); transform: var(--wide-text); }
	}
	.article-body{
		padding: 1rem 2rem 1rem 0;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
	}
	.article-meta {
		display: flex;
		font-size: var(--smaller-text);
		margin-bottom: 0.75rem;
		transform: var(--wide-text);
		.article-category { color: var(--bs-blue);}
		.article-date { color: var(--bs-gray-600); }
	}
	h2 {
		font-size: 1.365em;
		font-weight: var(--font-weight-bold);
		a { color: var(--corp-blue) !important; }
	}
	.article-excerpt {
		font-size: 0.875em;
		font-weight: var(--font-weight-light);
		line-height: normal;
	}
	.article-footer {
		font-size: var(--smaller-text);
		display: flex;
		justify-content:space-between;
		align-items: center;
		padding: 0.5rem 0 0;
		border-top: solid 1px var(--bs-border-color);
		.supplemental-link > a {
			font-size: var(--smaller-text);
			display: inline-block;
			background: var(--bs-gray-300);
			border-radius: var(--bs-border-radius-sm);
			padding: 0.25rem 0.55rem 0.25rem 0.75rem;
			
		}
	}
	
}


@media(max-width:767px) {
	nav.tabbar {
		--border-radius: var(--bs-border-radius);
		--padding-x: 0;
		--row-gap: 0.5rem;
		--col-gap: 4px;
		--row-gap: 4px;
		--col-width: calc(50% - (var(--col-gap) / 2));
		padding: var(--col-gap);
		font-size: 0.75em;
		flex-wrap: wrap;
		>a {
			background: rgba(255,255,255,0.5);
		}
	}

	article.news-post {
		flex-direction: column;
		gap: 0;
		max-width: 420px;
		box-shadow: unset;
		margin-left: auto;
		margin-right: auto;
		.article-poster {
			max-width: unset;
			width: 100%;
			border-radius: var(--bs-border-radius);
			padding: 1rem;
			.logo {
				max-width: 220px;
				margin-left: auto;
				margin-right: auto;
				padding-bottom: 6rem;
			}
			
		}
	}
}