/**
 * The text-only page template — a port of "Aqd.dc.html".
 *
 * Every measurement here is the design's own, read off that page. The
 * body rules match `.artbody` in Blog Detail.dc.html, which is where the
 * design defines long-form copy; h3 and h4 come from the design system's
 * base.css through its tokens.
 *
 * Spacing runs DOWNWARD — each block owns the gap beneath it — so a
 * heading following a paragraph collapses to the design's 56px rather
 * than stacking the two margins.
 */

.ij-text {
	background: var(--slate-50);
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}

/* bb-theme's skin sets Helvetica on h1-h6 directly, so the headings do not
   inherit the design's face from .ij-text above. */
.ij-text h1, .ij-text h2, .ij-text h3, .ij-text h4 { font-family: var(--font-sans); }

/* The heading and lead are centred; the body is not. */
.ij-text .ij-text-eyebrow { max-width: 100%; text-wrap: balance; }

/* ---- Body copy ----------------------------------------------------------- */

.ij-text .ij-text-body {
	font-size: 17px;
	line-height: 1.75;
	color: var(--color-text-secondary);
}

/* The first block sits flush against the hero above it, and the last
   must not add to the section's own bottom padding. */
.ij-text .ij-text-body > :first-child { margin-top: 0; }
.ij-text .ij-text-body > :last-child { margin-bottom: 0; }

.ij-text .ij-text-body h2 {
	margin: 56px 0 20px;
	font-size: var(--text-h2);
	line-height: 1.15;
	letter-spacing: -1.1px;
	font-weight: var(--weight-heading);
	color: var(--color-text);
	text-wrap: pretty;
}

/* The design opens its body with an h2 hard against the hero. */
.ij-text .ij-text-body > h2:first-child { margin-top: 0; }

.ij-text .ij-text-body h3 {
	margin: 40px 0 16px;
	font-size: var(--text-h3);
	line-height: var(--leading-h3);
	letter-spacing: var(--tracking-h3);
	font-weight: var(--weight-heading);
	color: var(--color-text);
	text-wrap: pretty;
}

.ij-text .ij-text-body h4 {
	margin: 32px 0 12px;
	font-size: var(--text-h4);
	line-height: var(--leading-h4);
	letter-spacing: var(--tracking-h4);
	font-weight: var(--weight-heading);
	color: var(--color-text);
	text-wrap: pretty;
}

.ij-text .ij-text-body p {
	margin: 0 0 20px;
	text-wrap: pretty;
}

.ij-text .ij-text-body strong,
.ij-text .ij-text-body b {
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

/* The design has no body-copy list, so these take the paragraph's own
   rhythm and mark each item with the accent colour it uses for links. */
.ij-text .ij-text-body ul,
.ij-text .ij-text-body ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.ij-text .ij-text-body li { margin: 0 0 8px; }
.ij-text .ij-text-body li:last-child { margin-bottom: 0; }
.ij-text .ij-text-body li::marker {
	color: var(--color-text-accent);
	font-weight: var(--weight-semibold);
}

.ij-text .ij-text-body li > ul,
.ij-text .ij-text-body li > ol { margin: 8px 0 0; }

.ij-text .ij-text-body blockquote {
	margin: 0 0 20px;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--brand-green);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text);
}

.ij-text .ij-text-body hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--color-divider);
}

.ij-text .ij-text-body table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 15px;
}

.ij-text .ij-text-body th,
.ij-text .ij-text-body td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-divider);
	text-align: left;
	vertical-align: top;
}

.ij-text .ij-text-body th {
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

/* The design's link treatment: the accent colour carries the link and
   the underline is held back for hover (base.css sets
   `a{color:var(--color-link);text-decoration:none}` sitewide). */
.ij-text .ij-text-body a,
.ij-text .ij-text-lead a {
	color: var(--color-link);
	text-decoration: none;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-text .ij-text-body a:hover,
.ij-text .ij-text-body a:focus-visible,
.ij-text .ij-text-lead a:hover,
.ij-text .ij-text-lead a:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* An image an editor adds later should not break the column. */
.ij-text .ij-text-body img {
	max-width: 100%;
	height: auto;
	margin: 0 0 20px;
	border-radius: var(--radius-media);
}

/* ---- Phones -------------------------------------------------------------- */

@media (max-width: 767px) {
	.ij-text .ij-text-body { font-size: 16px; }
	.ij-text .ij-text-body h2 { margin-top: 40px; }
}

/* Phone sizes from the design's mobile ladder (2026-10-05): h1 26, h2 23, h3 19. */
@media (max-width: 560px) {
	.ij-text h1 { font-size: 26px !important; line-height: 1.14 !important; letter-spacing: -1.1px !important; }
	.ij-text .ij-text-body h2 { font-size: 23px !important; line-height: 1.2 !important; letter-spacing: -0.8px !important; }
	.ij-text .ij-text-body h3 { font-size: 19px !important; line-height: 1.3 !important; letter-spacing: -0.5px !important; }
	.ij-text .ij-text-body h4 { font-size: 17px !important; }
}

/* ---- Buttons in text pages ---------------------------------------------
   A page's own call-to-action links ("Explore what IjaraCDC has in store for
   you", the Canadian application's button), as the design's green pill.
   Specific enough to beat the orange body-link rule above. */
.ij-text .ij-text-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.ij-text .ij-text-lead .ij-text-btn { margin-top: 8px; }
.ij-text a.ij-text-btn,
.ij-text .ij-text-body a.ij-text-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 100px;
  background: var(--brand-green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ij-text a.ij-text-btn:hover,
.ij-text a.ij-text-btn:focus-visible,
.ij-text .ij-text-body a.ij-text-btn:hover,
.ij-text .ij-text-body a.ij-text-btn:focus-visible { background: var(--brand-green-dark); color: #fff; text-decoration: none; }
.ij-text a.ij-text-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
@media (prefers-reduced-motion: reduce) { .ij-text a.ij-text-btn { transition: none; } }

/* ---- Optional parts (Ijara Financing.dc.html) ---------------------------- */

/* Each "More sections" row is its own block in the column, so the body's
   flush-top rule would pull a following section's h2 up against the one
   before. Restore the design's 56px gap — except when that row opens the
   column. */
.ij-text .ij-text-part > h2:first-child,
.ij-text .ij-text-part > .ij-text-body > h2:first-child { margin-top: 56px; }

.ij-text .ij-text-column > .ij-text-part:first-child > h2:first-child,
.ij-text .ij-text-column > .ij-text-part:first-child > .ij-text-body > h2:first-child { margin-top: 0; }

.ij-text .ij-text-column > .ij-text-figure:first-child { margin-top: 0 !important; }
.ij-text .ij-text-column > .ij-text-figure:last-child { margin-bottom: 0 !important; }

/* A link in a check-list item takes the body's treatment. */
.ij-text .ij-text-checks a {
	color: var(--color-link);
	text-decoration: none;
}

.ij-text .ij-text-checks a:hover,
.ij-text .ij-text-checks a:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 767px) {
	.ij-text .ij-text-hero-photo { margin-top: 40px !important; }
	.ij-text .ij-text-hero-photo .ij-text-photo { border-radius: 20px !important; }
	.ij-text .ij-text-figure { margin: 36px 0 !important; }
	.ij-text .ij-text-figure .ij-text-photo { border-radius: 16px !important; }
	.ij-text .ij-text-part > h2:first-child,
	.ij-text .ij-text-part > .ij-text-body > h2:first-child { margin-top: 40px; }
	.ij-text .ij-text-checks li > span:last-child { font-size: 15px !important; }
}

/* Download / link cards (2026-10-01), after "Islamic Finance.dc.html"'s language cards. */
.ij-text .ij-text-downloads { margin: 40px 0; }
.ij-text .ij-text-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ij-text .ij-text-body + .ij-text-dl-grid { margin-top: 24px; }
.ij-text a.ij-text-dl { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); color: var(--color-text); text-decoration: none; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ij-text a.ij-text-dl:hover, .ij-text a.ij-text-dl:focus-visible { color: var(--color-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-overlay, var(--shadow-card)); }
.ij-text .ij-text-dl-ic { flex: none; width: 44px; height: 44px; border-radius: 100px; background: var(--color-warning-soft); color: var(--brand-orange); display: flex; align-items: center; justify-content: center; }
.ij-text .ij-text-dl-tx { flex: 1; min-width: 0; display: block; }
.ij-text .ij-text-dl-k { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-tertiary); }
.ij-text .ij-text-dl-t { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; }
.ij-text .ij-text-dl-go { flex: none; display: flex; color: var(--color-text-tertiary); }