/*
 * Q10 qualification pages: the qualification overview and the Training Equivalence page.
 * Same tokens and 1200px container as the rest of the site.
 *
 *   "Q10 Foundation in Investment Promotion (Level 4 Award)"  slug q10-foundation-in-investment-promotion
 *   "Training Equivalence"                                     slug training-equivalence
 *
 * Built by scratchpad/q10/c-build-qualification-pages.php (Elementor). Wording is the
 * client's spreadsheet (Part 2 ... 261004.xlsx). Not in Figma, so the pages follow the
 * site style: Contact-page banner, PT Serif headings, Open Sans text, the course page's
 * navy "About" box and 20px cards, pills radius 999.
 * Container spacing, backgrounds and radii are Elementor settings; this file does type,
 * lists, pills, the table and the column split.
 */

/* ================================================================ Shared */
.fdi-q {
	--fdi-q-meta: #4c595d; /* kit colour "fdimeta" */
	--fdi-q-tint: rgba(0, 177, 168, 0.1);
	--fdi-q-teal-rule: rgba(0, 177, 168, 0.5);
	overflow-wrap: break-word;
}

/* Arabic text (PT Serif and Open Sans have no Arabic glyphs). */
.fdi-q [lang="ar"] {
	font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
	font-size: 1.05em;
	font-weight: 400;
	unicode-bidi: isolate;
}

/* Long-form text: Open Sans 400 17px, like the course page description. */
.fdi-q .fdi-q-prose p,
.fdi-q .fdi-q-prose li {
	font-family: var(--fdi-font-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6;
}

.fdi-q .fdi-q-prose p {
	margin: 0 0 14px;
}

.fdi-q .fdi-q-prose :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

.fdi-q .fdi-q-prose strong {
	font-weight: 700;
}

/* List with the course page's teal ring + chevron (client icon). */
.fdi-q .fdi-q-ticks {
	display: grid;
	gap: 12px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.fdi-q .fdi-q-ticks > li {
	position: relative;
	margin: 0;
	padding-left: 42px;
}

.fdi-q .fdi-q-ticks > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;
	background: url("../icons/teal-arrow-course-content.svg") center / 28px 28px no-repeat;
}

/* Headings are Elementor settings: h2 = kit fdih2 (PT Serif 700 31px), h3 = PT Serif 700 24px, navy. */

/* ====================================================== Overview: intro */
.fdi-q .fdi-q-code {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 4px 18px;
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-navy);
	color: var(--fdi-white);
	font: 700 18px/1 var(--fdi-font-heading);
	letter-spacing: 1px;
}

.fdi-q .fdi-q-lead {
	max-width: 900px;
}

.fdi-q .fdi-q-lead p {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	color: var(--fdi-navy);
}

.fdi-q .fdi-q-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fdi-q .fdi-q-facts li {
	display: inline-flex;
	align-items: center;
	min-height: 43px;
	margin: 0;
	padding: 7.5px 22px;
	box-sizing: border-box;
	border: 2px solid var(--fdi-teal);
	border-radius: var(--fdi-radius-pill);
	color: var(--fdi-navy);
	font: 600 17px/1.3 var(--fdi-font-body);
}

/* ============================================ Overview: About + Grading */
@media (min-width: 1025px) {
	.fdi-q .fdi-q-row--about > .fdi-q-about {
		flex: 1 1 0 !important;
		min-width: 0;
	}

	.fdi-q .fdi-q-row--about > .fdi-q-glance {
		flex: 0 0 393px !important; /* the course page's sidebar width */
	}

	.fdi-q .fdi-q-row--aim > .e-con {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

/* Navy box, as "About The Course" on the course page. */
.fdi-q .fdi-q-about__title .elementor-heading-title {
	padding-bottom: 23px;
	border-bottom: 2px solid var(--fdi-q-teal-rule);
}

.fdi-q .fdi-q-about .fdi-q-prose p,
.fdi-q .fdi-q-about .fdi-q-prose li {
	color: var(--fdi-white);
}

.fdi-q .fdi-q-about .fdi-q-ticks > li {
	font-weight: 600;
	font-size: 18px;
}

/* Grading: label left, navy pill right. */
.fdi-q .fdi-q-grades {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fdi-q .fdi-q-grades li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--fdi-rule-strong);
}

.fdi-q .fdi-q-grades li:first-child {
	padding-top: 0;
}

.fdi-q .fdi-q-grades__label {
	color: var(--fdi-navy);
	font: 700 22px/1.2 var(--fdi-font-heading);
}

.fdi-q .fdi-q-grades__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	min-height: 40px;
	padding: 4px 18px;
	box-sizing: border-box;
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-navy);
	color: var(--fdi-white);
	font: 700 18px/1 var(--fdi-font-body);
}

.fdi-q .fdi-q-tqt {
	margin: 0;
	color: var(--fdi-navy);
	font: 700 28px/1.2 var(--fdi-font-heading);
}

/* ======================================================= Overview: aims */
.fdi-q .fdi-q-aims > li {
	margin: 0;
	padding: 0;
	font-weight: 600;
	list-style: none;
}

.fdi-q .fdi-q-aims {
	margin: 0;
	padding: 0;
}

.fdi-q .fdi-q-aims .fdi-q-ticks {
	margin: 14px 0 0;
}

.fdi-q .fdi-q-aims .fdi-q-ticks > li {
	font-weight: 400;
}

/* ==================================================== Overview: courses */
.fdi-q .fdi-q-courses {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fdi-q .fdi-q-course {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 112px;
	margin: 0;
	padding: 22px 26px;
	box-sizing: border-box;
	border: 1px solid var(--fdi-rule-strong);
	border-radius: var(--fdi-radius-box);
	background: var(--fdi-white);
}

.fdi-q .fdi-q-course__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border: 2px solid var(--fdi-teal);
	border-radius: 50%;
	color: var(--fdi-navy);
	font: 700 20px/1 var(--fdi-font-heading);
}

.fdi-q .fdi-q-course__title {
	margin: 0;
	color: var(--fdi-navy);
	font: 700 22px/1.25 var(--fdi-font-heading);
}

.fdi-q .fdi-q-course__title a {
	color: inherit;
	text-decoration: none;
}

/* Whole card is the link once the course exists. */
.fdi-q .fdi-q-course__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fdi-q .fdi-q-course:has(a):hover,
.fdi-q .fdi-q-course:has(a:focus-visible) {
	border-color: var(--fdi-teal);
	box-shadow: 0 0 0 1px var(--fdi-teal);
}

/* ================================================ Overview: info cards */
.fdi-q .fdi-q-info-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.fdi-q .fdi-q-info-grid > .e-con {
	width: auto;
	min-width: 0;
}

.fdi-q .fdi-q-prose p.fdi-q-card-sub {
	color: var(--fdi-navy);
}

/* ============================================= Overview: assessment steps */
.fdi-q .fdi-q-steps {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fdi-q .fdi-q-steps > li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	margin: 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--fdi-rule-strong);
}

.fdi-q .fdi-q-steps > li:first-child {
	padding-top: 0;
	border-top: 0;
}

.fdi-q .fdi-q-steps__num {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--fdi-navy);
	color: var(--fdi-white);
	font: 700 20px/1 var(--fdi-font-heading);
}

.fdi-q .fdi-q-steps p {
	margin: 0;
	padding-top: 10px;
	font: 400 17px/1.6 var(--fdi-font-body);
	color: var(--fdi-text);
}

/* ======================================= Overview: Training Equivalence */
.fdi-q .fdi-q-te .fdi-q-prose p {
	color: var(--fdi-white);
	font-size: 18px;
}

@media (min-width: 768px) {
	.fdi-q .fdi-q-te > .e-con:first-child {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

/* ======================================================= Responsive */
@media (max-width: 1024px) {
	.fdi-q .fdi-q-courses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.fdi-q .fdi-q-lead p {
		font-size: 18px;
	}

	.fdi-q .fdi-q-facts li {
		min-height: 38px;
		padding: 5px 16px;
		font-size: 15px;
	}

	.fdi-q .fdi-q-courses,
	.fdi-q .fdi-q-info-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.fdi-q .fdi-q-course {
		min-height: 0;
		padding: 18px 20px;
	}

	.fdi-q .fdi-q-course__title {
		font-size: 20px;
	}

	.fdi-q .fdi-q-steps > li {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 14px;
	}

	.fdi-q .fdi-q-steps__num {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.fdi-q .fdi-q-steps p {
		padding-top: 6px;
		font-size: 16px;
	}

	.fdi-q .fdi-q-prose p,
	.fdi-q .fdi-q-prose li {
		font-size: 16px;
	}

	.fdi-q .fdi-q-about .fdi-q-ticks > li {
		font-size: 17px;
	}

	.fdi-q .fdi-q-grades__label {
		font-size: 20px;
	}

	.fdi-q .fdi-q-tqt {
		font-size: 24px;
	}
}

/* ============================================ Training Equivalence page */
.fdi-te .fdi-te-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fdi-te .fdi-te-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--fdi-rule-strong);
	border-radius: var(--fdi-radius-box);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-family: var(--fdi-font-body);
}

.fdi-te .fdi-te-table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.fdi-te .fdi-te-table th,
.fdi-te .fdi-te-table td {
	padding: 18px 24px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.fdi-te .fdi-te-table thead th {
	background: var(--fdi-navy);
	color: var(--fdi-white);
	font: 700 18px/1.3 var(--fdi-font-heading);
}

.fdi-te .fdi-te-table thead th:nth-child(1) {
	width: 22%;
}

.fdi-te .fdi-te-table thead th:nth-child(2) {
	width: 21%;
}

.fdi-te .fdi-te-table tbody > tr > * {
	border-top: 1px solid var(--fdi-rule);
	background: var(--fdi-white);
}

.fdi-te .fdi-te-table tbody > tr:first-child > * {
	border-top: 0;
}

.fdi-te .fdi-te-table tbody > tr:nth-child(even) > * {
	background: #f7f7f7; /* half of --fdi-surface on white */
}

.fdi-te .fdi-te-table tbody th {
	color: var(--fdi-navy);
	font: 700 17px/1.45 var(--fdi-font-body);
}

.fdi-te .fdi-te-table tbody td {
	color: var(--fdi-text);
	font: 400 17px/1.55 var(--fdi-font-body);
}

.fdi-te .fdi-te-level {
	display: inline-block;
	padding: 3px 14px;
	border: 1px solid var(--fdi-q-teal-rule);
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-q-tint);
	color: var(--fdi-navy);
	font: 600 15px/1.45 var(--fdi-font-body);
	white-space: nowrap;
}

.fdi-te .fdi-te-note {
	color: var(--fdi-q-meta);
	font-size: 15px;
}

/* Tablet: tighter cells. */
@media (max-width: 1024px) {
	.fdi-te .fdi-te-table th,
	.fdi-te .fdi-te-table td {
		padding: 14px 16px;
	}

	.fdi-te .fdi-te-table tbody td,
	.fdi-te .fdi-te-table tbody th {
		font-size: 16px;
	}
}

/* Phones: each country becomes a card with labelled fields. */
@media (max-width: 767px) {
	.fdi-te .fdi-te-scroll {
		overflow: visible;
	}

	.fdi-te .fdi-te-table,
	.fdi-te .fdi-te-table tbody,
	.fdi-te .fdi-te-table tr,
	.fdi-te .fdi-te-table th,
	.fdi-te .fdi-te-table td {
		display: block;
		width: auto;
	}

	.fdi-te .fdi-te-table {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.fdi-te .fdi-te-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.fdi-te .fdi-te-table tbody > tr {
		margin: 0 0 16px;
		padding: 18px 20px 20px;
		border: 1px solid var(--fdi-rule-strong);
		border-radius: var(--fdi-radius-box);
		background: var(--fdi-white);
	}

	.fdi-te .fdi-te-table tbody > tr:nth-child(even) {
		background: #f7f7f7;
	}

	.fdi-te .fdi-te-table tbody > tr > *,
	.fdi-te .fdi-te-table tbody > tr:nth-child(even) > * {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.fdi-te .fdi-te-table tbody th {
		margin: 0 0 12px;
		padding: 0 0 12px;
		border-bottom: 2px solid var(--fdi-q-teal-rule);
		font: 700 20px/1.3 var(--fdi-font-heading);
	}

	.fdi-te .fdi-te-table tbody td + td {
		margin-top: 14px;
	}

	.fdi-te .fdi-te-table tbody td::before {
		content: attr(data-label);
		display: block;
		margin: 0 0 6px;
		color: var(--fdi-q-meta);
		font: 700 13px/1.3 var(--fdi-font-body);
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}

	.fdi-te .fdi-te-level {
		white-space: normal;
	}
}