/* Text editor looks: Text (body, body-justify, lead, emphasis, note, caption, hint), Box and List groups.
   Box rules follow the text rules so a box's own alignment and weight win. */

/* ---------- Text ---------- */

:is(.hmf-text--body, .hmf-text--body-justify) {
	color: var(--hc-slate);
	font-size: 16px;
	line-height: 2.2;
}

:is(.hmf-text--body, .hmf-text--body-justify) p {
	margin: 0 0 20px;
}

:is(.hmf-text--body, .hmf-text--body-justify) p:last-child {
	margin: 0;
}

:is(.hmf-text--body, .hmf-text--body-justify) :is(strong, b) {
	color: var(--hc-ink);
}

:is(.hmf-text--body, .hmf-text--body-justify) :is(ul, ol) {
	margin-block: 0;
	padding-inline-start: 24px;
}

:is(.hmf-text--body, .hmf-text--body-justify) li {
	padding-block: 6px;
}

:is(.hmf-text--body, .hmf-text--body-justify) ol {
	list-style-type: persian;
}

:is(.hmf-text--body, .hmf-text--body-justify) h3 {
	margin-block: 0 18px;
	color: var(--hc-ink);
	font-size: 23px;
	line-height: 1.8;
}

.hmf-text--lead {
	color: var(--hc-slate);
	font-size: 16px;
	line-height: 2.2;
}

.hmf-text--lead p {
	margin: 0 0 22px;
}

.hmf-text--lead p:last-child {
	margin-block-end: 0;
}

.hmf-text--lead a {
	color: var(--hc-blue-deep);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	overflow-wrap: anywhere;
}

.hmf-text--lead a:hover {
	color: var(--hc-ink);
}

.hmf-text--emphasis {
	color: var(--hc-slate-2);
	font-size: 16px;
	font-weight: 600;
	line-height: 2.2;
	text-align: justify;
}

.hmf-text--emphasis p {
	margin: 0;
}

.hmf-text--note {
	color: var(--hc-slate-2);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 2.15;
}

.hmf-text--note p {
	margin: 0;
}

.hmf-text--note strong {
	color: var(--hc-gold-ink);
	font-weight: 900;
	white-space: nowrap;
}

.hmf-text--caption {
	color: var(--hc-blue-deep);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.9;
	text-align: center;
}

.hmf-text--caption p {
	margin: 0;
}

/* Body, justified: tighter paragraphs, both edges aligned on wide screens. */
.hmf-text--body-justify {
	line-height: 2.15;
}

.hmf-text--body-justify p {
	margin-block-end: 18px;
}

/* Hint: a small muted line pulled up under a carousel or gallery. */
.hmf-text--hint {
	margin-block-start: -14px;
	padding-inline: 20px;
	color: #69828d;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.hmf-text--hint p {
	margin: 0;
}

@media (width >= 68.75rem) {
	.hmf-text--body-justify p {
		text-align: justify;
	}
}

@media (width >= 48rem) {
	.hmf-text--lead {
		font-size: 18px;
	}

	.hmf-text--emphasis {
		font-size: 16.5px;
	}
}

/* On navy surfaces the text switches to its on-dark tone. */
:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) :is(.hmf-text--body, .hmf-text--body-justify, .hmf-text--lead) {
	color: #cbd5e1;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) :is(.hmf-text--body, .hmf-text--body-justify, .hmf-text--lead) :is(strong, b) {
	color: #ffcb77;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) :is(.hmf-text--body, .hmf-text--body-justify, .hmf-text--lead) a {
	color: #ffcb77;
	overflow-wrap: anywhere;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-text--emphasis {
	color: var(--hc-white);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-text--note {
	color: var(--hc-line-2);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-text--note strong {
	color: var(--hc-gold);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-text--caption {
	color: var(--hc-line);
}

/* ---------- Box ---------- */

:is(.hmf-box--edge-blue, .hmf-box--edge-gold, .hmf-box--tint, .hmf-box--quote, .hmf-box--navy) {
	padding: 24px 22px;
	border: 1px solid var(--hc-line);
	border-radius: 26px;
}

.hmf-box--edge-blue {
	border: 0;
	border-inline-start: 5px solid var(--hc-blue);
	background: var(--hc-sky);
	color: #1e293b;
}

.hmf-box--edge-gold {
	border-inline-start: 5px solid var(--hc-gold);
	background: var(--hc-gold-tint);
}

.hmf-box--tint {
	background: var(--hc-sky);
}

.hmf-box--quote {
	border: 1px dashed rgb(255 178 56 / 0.6);
	background: rgb(255 178 56 / 0.12);
	font-weight: 800;
	text-align: center;
}

.hmf-box--navy {
	border: 0;
	border-inline-start: 5px solid var(--hc-gold);
	background: linear-gradient(135deg, var(--hc-ink), #1a1c33);
	color: var(--hc-white);
	font-size: 16.5px;
	font-weight: 800;
	text-align: start;
}

/* Links in a tinted box: underlined blue (a text look's own link colour wins). */
.hmf-box--tint a {
	color: var(--hc-blue-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) :is(.hmf-box--edge-gold, .hmf-box--tint) {
	border-color: rgb(255 255 255 / 0.14);
	background: rgb(255 255 255 / 0.06);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-box--edge-gold {
	border-inline-start-color: var(--hc-gold);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-box--quote {
	color: var(--hc-white);
}

@media (width >= 48rem) {
	:is(.hmf-box--edge-blue, .hmf-box--edge-gold, .hmf-box--tint, .hmf-box--quote, .hmf-box--navy) {
		padding: 30px 34px;
	}

	.hmf-box--navy {
		font-size: 18px;
	}
}

/* ---------- List ---------- */

.hmf-list--dots ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hmf-list--dots li {
	position: relative;
	margin: 0;
	padding-block: 0;
	padding-inline-start: 18px;
}

.hmf-list--dots li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.85em;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--hc-gold);
}

.hmf-list--steps ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hmf-step;
}

.hmf-list--steps ol li {
	position: relative;
	padding-block: 14px;
	padding-inline: 52px 0;
	border-block-start: 1px solid var(--hc-line);
	counter-increment: hmf-step;
}

.hmf-list--steps ol li:first-child {
	border: 0;
}

.hmf-list--steps ol li::before {
	content: counter(hmf-step, persian);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 14px;
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--hc-gold);
	color: var(--hc-ink);
	font-size: 15px;
	font-weight: 900;
}

/* Justified course prose originally used pretty wrapping. */
.hmf-text--body-justify p { text-wrap: pretty; }

.hmf-list--links ul {
 display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; list-style:none;
}
.hmf-list--links li { flex:1 1 100%; margin:0; padding:0; }
.hmf-list--links li a {
 display:flex; align-items:center; justify-content:space-between; gap:12px;
 min-block-size:48px; padding:10px 16px; border:1px solid var(--hc-line);
 border-radius:14px; background:var(--hc-blue-soft); font-size:15px;
 line-height:2.2; color:var(--hc-blue-deep); font-weight:700; text-decoration:none;
}
.hmf-list--links li a::after {
 content:""; flex:none; inline-size:18px; block-size:18px; background:currentColor;
 mask:var(--hc-icon-arrow) center/contain no-repeat;
}
.hmf-list--links li a:hover {border-color:var(--hc-blue);}
@media (min-width:768px) { .hmf-list--links li {flex-basis:calc(50% - 12px);} }
@media (min-width:1100px) { .hmf-list--links li {flex-basis:calc(25% - 12px);} }

/* Proposed: numbered achievement cards. */
.hmf-list--awards { inline-size: 100%; }
.hmf-list--awards ul { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0; counter-reset: hmf-award; }
.hmf-list--awards li { flex: 1 1 100%; padding: 24px; background: var(--hc-sky); border: 1px solid var(--hc-line); border-radius: 22px; color: var(--hc-ink); font-size: 17px; font-weight: 700; line-height: 2; counter-increment: hmf-award; }
.hmf-list--awards li::before { content: counter(hmf-award, persian); display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: 14px; color: var(--hc-blue-deep); font-size: 19px; margin-block-end: 16px; }
.hmf-list--awards li:last-child { background: var(--hc-gold-soft); border-color: var(--hc-gold-line); }
@media (min-width:768px) { .hmf-list--awards li { flex-basis:calc(50% - 16px); } }
@media (min-width:1025px) { .hmf-list--awards li { flex-basis:calc(33.333% - 16px); } }