/*
 * Helia single-post content modules.
 * Values transcribed from "Helia Care - Client Review (Single Posts)",
 * frame "Resources - Single Post".
 *
 * These classes live in the post body, so each module carries its own type and
 * colour rather than inheriting from a wrapper. Loaded on the front end and
 * inside TinyMCE, so the visual editor matches the published page.
 */

/* ---------------------------------------------------------------- CTA box */

.hr-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 48px;
	border: 1px solid #c4c8ce;
	border-radius: 32px;
	background-color: #fafbff;
	box-sizing: border-box;
	margin-bottom: 40px;
}

.hr-cta__text {
	margin: 0 !important;
	max-width: 684px;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.576px;
	text-align: center;
	color: #f99e22;
	text-wrap: pretty;
}

.hr-cta__actions {
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

/* Also usable on its own, anywhere in the body. */
.hr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 16px 24px;
	border-radius: 8px;
	background-color: #f99e22;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: #2b313a;
	text-decoration: none;
	box-sizing: border-box;
}

.hr-btn:hover,
.hr-btn:focus {
	color: #2b313a;
	text-decoration: none !important;
	background-color: #f7912a;
}

/* The 20px white arrow from the button component, as a background so writers
   cannot break it and do not have to paste an SVG. */
.hr-btn::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5'/%3E%3C/svg%3E");
	filter: invert(1);
}


/* ------------------------------------------------------------- Pull quote */

.hr-quote {
    position: relative;
    margin: 0;
    padding: 0 0 0 56px !important;
    border: 0 !important;
    quotes: none;
    background: transparent !important;
	margin-bottom: 40px !important;
}

.hr-quote::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: 0;
	font-family: "DM Serif Text", Georgia, "Times New Roman", serif;
	font-size: 48px;
	line-height: 1;
	color: #f99e22;
}

.hr-quote > p {
	margin: 0 0 24px;
	font-family: "DM Serif Text", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	color: #616669;
	text-wrap: pretty;
}

.hr-quote > p:last-child {
	margin-bottom: 0;
}

.hr-quote__author {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif !important;
	font-style: normal !important;
	font-weight: 400;
	font-size: 18px !important;
	line-height: 1.7 !important;
	color: #f99e22 !important;
	margin: 0 !important;
}

.hr-quote__role {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif !important;
	font-style: normal !important;
	font-weight: 400;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #616669 !important;
	margin: 0 !important;
}

/* ------------------------------------------------------------- Data table */

.hr-table {
	width: 100%;
	border-collapse: collapse;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	color: #2b313a;
	margin-bottom: 40px;
}

.hr-table th,
.hr-table td {
	border: 1px solid #f99e22;
	/* The design's row height, so an empty table (a freshly inserted one, or
	   any column the writer leaves blank) keeps its shape. */
	height: 43px;
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	box-sizing: border-box;
}

.hr-table th {
	background-color: #fee7cc;
	font-weight: 700;
}

/* --------------------------------------------------------- Statistic cards */

.hr-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 40px;
}

.hr-stat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 252px;
	min-height: 160px;
	padding: 24px;
	border-radius: 24px;
	background-color: #fafbff;
	box-sizing: border-box;
}

.hr-stat__value {
	margin: 0 !important;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 56px;
	line-height: 1;
	letter-spacing: -1.6px;
	color: #F99E22;
}

.hr-stat__label {
	margin: 0 !important;
	max-width: 176px;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	color: #040707;
}

/* -------------------------------------------------------------- Mobile */

@media (max-width: 640px) {
	.hr-cta {
		padding: 32px 24px;
	}
	.hr-cta__actions {
		width: 100%;
		flex-direction: column;
		gap: 16px;
	}
	.hr-btn {
		width: 100%;
	}
	.hr-table {
		display: block;
		overflow-x: auto;
	}
}