/* ==========================================================================
   Single news article (single-post.php)
   ========================================================================== */

.hapi-single-article .site-content {
	display: block;
}

.hapi-single-article .content-area,
.hapi-single-article .site-main {
	margin: 0;
	width: 100%;
}

/* Header */

.hapi-article-header {
	padding: clamp(40px, 6vw, 72px) var(--hapi-gutter) 0;
	background: var(--hapi-charcoal);
	color: #ffffff;
}

.hapi-article-header__inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 1184px;
	margin: 0 auto;
	padding-bottom: 28px;
}

.hapi-article-header__inner > * {
	margin: 0;
}

.hapi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hapi-chip {
	padding: 5px 12px;
	border: 1px solid #777777;
	color: #e6e6e6;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.hapi-chip:hover {
	border-color: var(--hapi-amber);
	color: #ffffff;
}

.hapi-chip--solid {
	padding: 6px 12px;
	border: 0;
	background: var(--hapi-amber);
	color: #222222;
	font-weight: 700;
}

.hapi-chip--solid:hover {
	background: var(--hapi-gold);
	color: #222222;
}

.hapi-article-title {
	max-width: 900px;
	color: #ffffff;
	font-size: clamp(36px, 5vw, 60px);
	line-height: 1.04;
	text-wrap: balance;
}

.hapi-article-deck {
	max-width: 780px;
	color: #e6e6e6;
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.5;
	text-wrap: pretty;
}

.hapi-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	color: #cfcfcf;
	font-size: 15px;
}

/* Featured image overlaps into the white body */

.hapi-article-hero {
	position: relative;
	max-width: 900px;
	margin: 0 auto -120px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.hapi-article-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* Body: article column + sidebar */

.hapi-article-body {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: flex-start;
	max-width: calc(1184px + 2 * var(--hapi-gutter));
	margin: 0 auto;
	padding: 56px var(--hapi-gutter) 72px;
}

.hapi-article-body.has-hero-image {
	padding-top: calc(120px + 56px);
}

.hapi-article-content {
	flex: 1 1 480px;
	min-width: 0;
	max-width: 740px;
	color: #2a2a2a;
	font-size: 18px;
	line-height: 1.7;
}

.hapi-article-content > * {
	margin-top: 0;
	margin-bottom: 22px;
}

.hapi-article-content h2 {
	margin-bottom: 8px;
	color: #222222;
	font-size: 30px;
	line-height: 1.12;
	text-wrap: balance;
	scroll-margin-top: 24px;
}

.hapi-article-content h3 {
	font-size: 22px;
}

.hapi-article-content .is-style-eyebrow {
	margin-top: 6px;
	margin-bottom: 8px;
	padding-top: 28px;
	border-top: 1px solid var(--hapi-border);
}

.hapi-article-content .is-style-byline {
	margin-bottom: 18px;
}

.hapi-article-content .wp-block-image {
	max-width: 560px;
}

.hapi-article-content .wp-block-image img {
	background: #f2f2f2;
}

.hapi-article-content a:not(.wp-element-button) {
	color: var(--hapi-link-hover);
}

.hapi-article-actions {
	gap: 12px;
	padding-top: 28px;
	border-top: 1px solid var(--hapi-border);
}

.hapi-share .wp-block-button__link {
	border-color: #333333;
	color: #333333;
	cursor: pointer;
	font-family: inherit;
}

.hapi-share .wp-block-button__link:hover {
	background: #333333;
	color: #ffffff;
}

/* Sidebar */

.hapi-article-aside {
	display: flex;
	flex: 1 1 280px;
	flex-direction: column;
	gap: 24px;
	max-width: 360px;
}

.hapi-aside-widget > * {
	margin: 0;
}

/* Bordered newsletter box (widget group with class "hapi-outline-box") */
.hapi-outline-box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 2px solid #333333;
}

.hapi-outline-box > * {
	margin: 0;
}

.hapi-outline-box h2,
.hapi-outline-box h3 {
	font-size: 20px;
	line-height: 1.2;
}

.hapi-outline-box p {
	color: #555555;
	font-size: 15px;
	line-height: 1.5;
}

.hapi-outline-box .wp-block-button,
.hapi-outline-box .wp-block-button__link {
	width: 100%;
}

.hapi-outline-box .wp-block-button__link {
	padding: 12px;
	text-align: center;
}

.hapi-outline-box .hapi-placeholder {
	border-color: #bbbbbb;
	color: #6b6760;
}

/* Related articles */

.hapi-related {
	padding: 56px var(--hapi-gutter);
	background: var(--hapi-cream);
}

.hapi-related__inner {
	max-width: 1184px;
	margin: 0 auto;
}

.hapi-related .hapi-section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 24px;
}

.hapi-related__title {
	margin: 0;
	font-size: clamp(24px, 3vw, 30px);
}

.hapi-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hapi-related-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #ffffff;
}

.hapi-related-card__img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
	object-position: center top;
}

.hapi-related-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.hapi-related-card__title {
	color: var(--hapi-text);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.hapi-related-card__title:hover {
	color: var(--hapi-link-hover);
	text-decoration: underline;
}

@media (max-width: 860px) {
	.hapi-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hapi-article-aside {
		max-width: none;
	}

	.hapi-article-hero {
		margin-bottom: -60px;
	}

	.hapi-article-body.has-hero-image {
		padding-top: calc(60px + 40px);
	}
}

.hapi-article-content .wp-block-image figcaption,
.hapi-article-content .wp-element-caption {
	text-align: left;
}