/**
 * The Healing Team Hiring Guide
 * Smarter Guides chapter styling for the five role groups.
 *
 * File: wp-content/themes/divi-child/healingteamhiring.css
 * Enqueued from functions.php. Not part of style.css, so it can be
 * edited without touching the theme's own stylesheet.
 *
 * Everything is scoped under .htg, so nothing here can reach the
 * rest of the site. Chapter markup must be wrapped in <div class="htg">.
 *
 * Wrapper classes:
 *   .htg .htg--front            A Note from Julie (front matter)
 *   .htg .htg--group .htg--g1   Group 1: Medical Doctors and Specialists
 *   .htg .htg--group .htg--g2   Group 2: Root Cause and Terrain
 *   .htg .htg--group .htg--g3   Group 3: Strategy and Advocacy
 *   .htg .htg--group .htg--g4   Group 4: Nervous System and Hands On Healers
 *   .htg .htg--group .htg--g5   Group 5: Mind, Body, Energy, and Spirit
 */

.htg {
	--htg-blue:   #004AAD;
	--htg-aqua:   #4FB4AD;
	--htg-purple: #875EFD;
	--htg-rasp:   #D6336C;
	--htg-off:    #EFEBEC;
	--htg-ink:    #373D3B;
	--htg-muted:  #5A6361;
	--htg-rule:   #DFDFDF;
	--htg-teal:   #3E7D79;

	/* Overridden per group below. */
	--htg-accent:     var(--htg-aqua);
	--htg-accent-ink: var(--htg-blue);

	font-family: "EB Garamond", Georgia, serif;
	font-size: 19px;
	line-height: 1.6;
	color: var(--htg-ink);
}

/* ---------- Group accents ---------- */

.htg--g1 { --htg-accent: #4FB4AD; --htg-accent-ink: #004AAD; }
.htg--g2 { --htg-accent: #875EFD; --htg-accent-ink: #875EFD; }
.htg--g3 { --htg-accent: #D6336C; --htg-accent-ink: #D6336C; }
.htg--g4 { --htg-accent: #373D3B; --htg-accent-ink: #004AAD; }
.htg--g5 { --htg-accent: #004AAD; --htg-accent-ink: #004AAD; }

/* ---------- Headings ---------- */

.htg h2,
.htg h3,
.htg h4 {
	font-family: "Bebas Neue", Impact, sans-serif;
	letter-spacing: .02em;
	line-height: 1.1;
	margin: 0;
}

.htg h2 {
	font-size: 2.6rem;
	color: var(--htg-blue);
	border-bottom: 3px solid var(--htg-aqua);
	padding-bottom: .3em;
	margin: 0 0 .6em;
}

.htg--front h2 {
	margin-top: 2.4em;
}

.htg--front h2:first-child {
	margin-top: 0;
}

.htg h3 {
	font-size: 2rem;
	color: var(--htg-blue);
	margin: 2.4em 0 .4em;
	padding-top: .6em;
	border-top: 1px solid var(--htg-rule);
}

.htg h3:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.htg h4 {
	font-size: 1.35rem;
	color: var(--htg-rasp);
	margin: 1.6em 0 .4em;
}

.htg p {
	margin: 0 0 1em;
}

/* ---------- Group banner ---------- */

.htg .htg-banner {
	background: var(--htg-accent);
	border-radius: 8px;
	padding: 1.2em 1.4em;
	margin: 0 0 2.2em;
}

.htg .htg-banner h2 {
	color: #fff;
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0 0 .3em;
}

.htg .htg-banner .htg-intro {
	color: #fff;
	border-left: 0;
	padding-left: 0;
	margin: 0;
	font-size: .92em;
	opacity: .95;
}

.htg--group h3,
.htg--group h4 {
	color: var(--htg-accent-ink);
}

.htg--group .htg-matters-most {
	border-color: var(--htg-accent);
}

.htg--group .htg-matters-most strong {
	color: var(--htg-accent-ink);
}

.htg--group .htg-q .htg-num {
	color: var(--htg-accent-ink);
}

.htg--group .htg-tips .htg-tips-h {
	color: var(--htg-rasp);
}

.htg--group .htg-card {
	border-color: var(--htg-accent);
}

.htg--group .htg-card-h {
	color: var(--htg-accent-ink);
}

.htg--group .htg-card table th {
	background: var(--htg-accent);
	color: #fff;
}

/* ---------- Intro line ---------- */

.htg .htg-intro {
	font-style: italic;
	color: var(--htg-muted);
	border-left: 4px solid var(--htg-aqua);
	padding-left: 1em;
	margin: 0 0 1.6em;
}

.htg .htg-role-lede {
	margin: 0 0 1.2em;
}

/* ---------- You might think / What matters more ---------- */

.htg .htg-contrast {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background: var(--htg-off);
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0 1.6em;
}

.htg .htg-contrast > div {
	flex: 1 1 260px;
	padding: 1.1em 1.3em;
	min-width: 0;
}

.htg .htg-contrast > div:first-child {
	border-right: 2px solid #fff;
}

.htg .htg-contrast .htg-lbl {
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.05rem;
	letter-spacing: .04em;
	display: block;
	margin-bottom: .3em;
}

.htg .htg-think .htg-lbl   { color: #8A9391; }
.htg .htg-matters .htg-lbl { color: var(--htg-rasp); }

.htg .htg-contrast p {
	margin: 0;
	font-size: .95em;
}

/* ---------- What matters most ---------- */

.htg .htg-matters-most {
	background: #fff;
	border: 2px solid var(--htg-aqua);
	border-radius: 8px;
	padding: 1.1em 1.4em;
	margin: 0 0 1.6em;
}

.htg .htg-matters-most h4 {
	margin-top: 0;
}

.htg .htg-matters-most ul {
	margin: 0;
	padding-left: 1.1em;
}

.htg .htg-matters-most li {
	margin: 0 0 .55em;
}

.htg .htg-matters-most li:last-child {
	margin-bottom: 0;
}

.htg .htg-matters-most strong {
	color: var(--htg-blue);
}

/* ---------- Questions ---------- */

.htg .htg-q {
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--htg-ink);
	margin: 1.8em 0 .2em;
}

.htg .htg-q .htg-num {
	color: var(--htg-rasp);
	margin-right: .45em;
}

.htg .htg-tests {
	font-style: italic;
	color: var(--htg-purple);
	margin: 0 0 .6em;
	font-size: .95em;
}

/* ---------- Rating scales ---------- */

.htg table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: .95em;
}

.htg .htg-scale td {
	border: 1px solid var(--htg-rule);
	padding: .6em .8em;
	vertical-align: top;
	background: #fff;
}

.htg .htg-scale .htg-s {
	width: 2.4em;
	text-align: center;
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.3rem;
	color: #fff;
}

.htg .htg-scale .htg-s1 { background: var(--htg-rasp); }
.htg .htg-scale .htg-s3 { background: var(--htg-aqua); }
.htg .htg-scale .htg-s5 { background: var(--htg-blue); }

/* Half steps, used only on the What Is a Rating Scale table. */
.htg .htg-scale .htg-s2,
.htg .htg-scale .htg-s4 {
	background: #D8DCDB;
	color: var(--htg-ink);
}

.htg .htg-scale .htg-name {
	width: 8.5em;
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.05rem;
	letter-spacing: .03em;
}

.htg .htg-scale .htg-n1 { color: var(--htg-rasp); }
.htg .htg-scale .htg-n3 { color: var(--htg-teal); }
.htg .htg-scale .htg-n5 { color: var(--htg-blue); }

/* ---------- Pro tips ---------- */

.htg .htg-tips {
	background: var(--htg-off);
	border-radius: 8px;
	padding: 1.1em 1.4em;
	margin: 1.4em 0 1.6em;
}

.htg .htg-tips .htg-tips-h {
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.2rem;
	color: var(--htg-blue);
	display: block;
	margin-bottom: .4em;
}

.htg .htg-tips ul {
	margin: 0;
	padding-left: 1.1em;
}

.htg .htg-tips li {
	margin: 0 0 .5em;
}

.htg .htg-tips li:last-child {
	margin-bottom: 0;
}

/* ---------- Scorecard ---------- */

.htg .htg-card {
	border: 3px solid var(--htg-blue);
	border-radius: 8px;
	padding: 1.2em 1.4em;
	margin: 1.4em 0 2.4em;
	page-break-inside: avoid;
	break-inside: avoid;
}

.htg .htg-card-h {
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.5rem;
	color: var(--htg-blue);
	margin: 0 0 .6em;
}

.htg .htg-card-meta {
	font-size: .95em;
	margin: 0 0 .9em;
	color: var(--htg-muted);
}

.htg .htg-card-meta span {
	display: inline-block;
	margin-right: 1.6em;
	border-bottom: 1px solid #B9C0BE;
	min-width: 9em;
}

.htg .htg-card table td,
.htg .htg-card table th {
	border: 1px solid var(--htg-rule);
	padding: .5em .7em;
	text-align: left;
	background: #fff;
}

.htg .htg-card table th {
	background: var(--htg-off);
	font-family: "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	letter-spacing: .03em;
	color: var(--htg-blue);
}

.htg .htg-card .htg-scores {
	white-space: nowrap;
	letter-spacing: .55em;
	font-size: 1.05em;
	width: 7.5em;
}

.htg .htg-card .htg-notes {
	width: 38%;
}

/* ---------- Front matter ---------- */

.htg .htg-steps {
	margin: 0 0 1.6em;
	padding-left: 1.5em;
}

.htg .htg-steps li {
	margin: 0 0 .6em;
}

.htg .htg-lead-list {
	margin: 0 0 1.6em;
	padding-left: 1.2em;
}

.htg .htg-lead-list li {
	margin: 0 0 .7em;
}

.htg .htg-lead-list strong {
	color: var(--htg-blue);
}

.htg .htg-callout {
	background: var(--htg-off);
	border-left: 4px solid var(--htg-purple);
	border-radius: 0 8px 8px 0;
	padding: 1.1em 1.4em;
	margin: 1.8em 0;
}

.htg .htg-callout .htg-callout-h {
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.2rem;
	letter-spacing: .03em;
	color: var(--htg-purple);
	display: block;
	margin-bottom: .35em;
}

.htg .htg-callout p:last-child {
	margin-bottom: 0;
}

.htg .htg-callout--aqua {
	border-left-color: var(--htg-aqua);
}

.htg .htg-callout--aqua .htg-callout-h {
	color: var(--htg-teal);
}

.htg .htg-signoff {
	font-style: italic;
	color: var(--htg-muted);
	margin: 1.8em 0 .1em;
}

.htg .htg-signoff-name {
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: 1.6rem;
	letter-spacing: .02em;
	color: var(--htg-blue);
	margin: 0 0 1em;
}

.htg .htg-groups td,
.htg .htg-groups th {
	border: 1px solid var(--htg-rule);
	padding: .6em .8em;
	text-align: left;
	vertical-align: top;
	background: #fff;
}

.htg .htg-groups th {
	background: var(--htg-blue);
	color: #fff;
	font-family: "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	letter-spacing: .03em;
}

.htg .htg-groups .htg-g-name {
	width: 13em;
	font-weight: 700;
}

.htg .htg-groups .htg-g1 { color: var(--htg-teal); }
.htg .htg-groups .htg-g2 { color: var(--htg-purple); }
.htg .htg-groups .htg-g3 { color: var(--htg-rasp); }
.htg .htg-groups .htg-g4 { color: var(--htg-ink); }
.htg .htg-groups .htg-g5 { color: var(--htg-blue); }

/* ---------- Compare your candidates ---------- */

.htg .htg-compare td,
.htg .htg-compare th {
	border: 1px solid var(--htg-rule);
	padding: .55em .8em;
	text-align: left;
	vertical-align: top;
	background: #fff;
	height: 2.4em;
}

.htg .htg-compare th {
	background: var(--htg-blue);
	color: #fff;
	font-family: "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	letter-spacing: .03em;
}

.htg .htg-compare .htg-cmp-row {
	background: var(--htg-off);
	font-weight: 700;
	width: 11em;
}

.htg .htg-lines span {
	display: block;
	border-bottom: 1px solid #B9C0BE;
	height: 2em;
}

/* ---------- Back matter ---------- */

.htg .htg-ref {
	font-size: .85em;
	line-height: 1.5;
	color: var(--htg-muted);
	margin: 0 0 .9em;
	word-break: break-word;
}

.htg .htg-closing {
	font-family: "EB Garamond", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 1.3em;
	color: var(--htg-blue);
	text-align: center;
	margin: 2.2em 0 .3em;
}

.htg .htg-closing-sub {
	text-align: center;
	color: var(--htg-muted);
	margin: 0 0 1.4em;
}

/* ---------- Disclaimer ---------- */

.htg .htg-note {
	font-size: .9em;
	color: var(--htg-muted);
	border-top: 1px solid var(--htg-rule);
	padding-top: 1em;
	margin-top: 2em;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 640px) {

	.htg {
		font-size: 18px;
	}

	.htg h2 { font-size: 2.1rem; }
	.htg h3 { font-size: 1.7rem; }

	.htg .htg-contrast > div:first-child {
		border-right: 0;
		border-bottom: 2px solid #fff;
	}

	.htg .htg-scale .htg-name { width: auto; }
	.htg .htg-card .htg-notes { width: auto; }
	.htg .htg-groups .htg-g-name { width: auto; }

	.htg .htg-card-meta span {
		display: block;
		margin: 0 0 .8em;
	}
}

/* ---------- Print ---------- */

@media print {

	.htg .htg-card,
	.htg .htg-contrast,
	.htg .htg-matters-most,
	.htg .htg-tips,
	.htg .htg-callout,
	.htg .htg-scale {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.htg h3,
	.htg h4 {
		page-break-after: avoid;
		break-after: avoid;
	}

	/* Fills stay visible when Background graphics is off, because the
	   numbers would otherwise be white on white. */
	.htg .htg-scale .htg-s {
		color: #000;
		background: none !important;
		border-right: 3px solid #000;
	}

	/* Same reason: the banner and the scorecard header rows are solid
	   colour with white text on screen. */
	.htg .htg-banner {
		background: none !important;
		border-left: 5px solid #000;
		border-radius: 0;
		padding: .2em 0 .2em .9em;
	}

	.htg .htg-banner h2      { color: #000; }
	.htg .htg-banner .htg-intro { color: #333; opacity: 1; }

	.htg--group .htg-card table th {
		background: none !important;
		color: #000;
		border-bottom: 2px solid #000;
	}

	.htg .htg-groups th,
	.htg .htg-compare th {
		background: none !important;
		color: #000;
		border-bottom: 2px solid #000;
	}

	.htg .htg-compare .htg-cmp-row {
		background: none !important;
	}
}